/* Structural/layout CSS. Every color, font, border, and shadow value here
   comes from a custom property defined in modern.css -- this file should
   have no hardcoded colors or fonts of its own. */

* {
  box-sizing: border-box;
}

/* Content images (no explicit width/height attribute) scale down to fit
   their container instead of overflowing at native size. Images that DO
   declare width/height -- like the small leaderboard avatars -- are left
   alone so they keep their deliberate fixed size. */
img:not([width]) {
  max-width: 100%;
  height: auto;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}

.site-header,
.site-footer {
  flex: 0 0 auto;
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
  color: var(--color-heading);
}

a {
  color: var(--color-link);
}

input,
select,
button {
  font-family: inherit;
  font-size: 1rem;
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.4rem 0.6rem;
}

button {
  cursor: pointer;
}

button:hover {
  border-color: var(--color-accent);
}

input[type="color"] {
  padding: 0.2rem;
  height: 2.25rem;
}

input[type="range"] {
  padding: 0;
  border: none;
  background: transparent;
}

/* ---- Header ---- */

.site-header {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  background-color: var(--header-bg-color);
  background-image: var(--header-bg-image);
  background-size: 480px auto;
  background-repeat: repeat;
  background-position: center;
  color: var(--header-text-color);
  border-bottom: 1px solid var(--color-border);
}

.site-header h1 {
  margin: 0;
  color: var(--header-text-color);
}

#brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.brand-logo {
  align-self: flex-end;
}

.brand-logo img {
  display: block;
  /* 7.5rem is the max (current) size; shrinks fluidly down to 3rem on phones
     instead of jumping between fixed sizes at breakpoints. */
  height: clamp(3rem, 9vw, 7.5rem);
  width: auto;
  max-width: none;
}

/* Hamburger menu: holds the login info once the header would otherwise
   stack it. Hidden entirely above that breakpoint -- .site-auth just
   renders inline there, same as always. */
.auth-toggle-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.hamburger-btn {
  display: none;
}

.site-nav {
  flex: 1 1 auto;
  padding-left: 1rem;
}

.site-nav ul {
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.15rem;
  text-decoration: none;
  white-space: nowrap;
  color: var(--header-text-color);
}

.site-auth {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
}

.site-auth form {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.4rem;
}

#login-btn {
  align-self: flex-end;
}

.site-auth input[type="text"],
.site-auth input[type="password"] {
  width: 8rem;
}

#register-hint {
  flex-basis: 100%;
  margin: 0;
  text-align: right;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

#profile-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

/* ---- Theme switcher (in the footer) ---- */

.theme-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.theme-toggle-input {
  appearance: none;
  width: 2.5rem;
  height: 1.4rem;
  margin: 0;
  background: var(--color-border);
  border-radius: 999px;
  position: relative;
  cursor: pointer;
}

.theme-toggle-input::before {
  content: "";
  position: absolute;
  top: 0.15rem;
  left: 0.15rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--color-surface);
  transition: transform 0.15s ease;
}

.theme-toggle-input:checked {
  background: var(--color-accent);
}

.theme-toggle-input:checked::before {
  transform: translateX(1.1rem);
}

/* ---- Main content ---- */

main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 60rem;
  width: 100%;
  margin: 0 auto;
  padding: 1.5rem;
}

.panel {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem;
}

/* The wall's canvas panel breaks out of main's 60rem column and spans the
   full viewport width -- every other panel stays in the centered column. */
#canvas-section {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ---- Drawing toolbars (index.html and profile.html) ---- */

.toolbar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
  margin-left: auto;
  margin-right: auto;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-bg);
}

.toolbar-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: left;
  gap: 1rem;
}

/* Extra breathing room (beyond the normal 1rem gap) between the Brush/Hand
   toggle and the Style/Color/Size group, to separate them visually without
   pushing either group to the container's edge. */
.toolbar-push {
  margin-left: 1.5rem;
}

#tool-select {
  display: flex;
  gap: 0.5rem;
}

#tool-select button[aria-pressed="true"] {
  background-color: var(--color-accent);
  color: var(--color-accent-contrast);
  border-color: var(--color-accent);
}

.toolbar fieldset {
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-surface);
}

.toolbar > button {
  align-self: flex-start;
}

/* Once the (now full-bleed) canvas is wide enough that a full-width toolbar
   would look sparse, cap the toolbar's width instead of letting it stretch
   edge to edge -- but wide enough that the Brush | Hand | Style | Color |
   Size row still fits on one line rather than collapsing into a stack. */
@media (min-width: 64rem) {
  #toolbar {
    max-width: 90%;
  }
}

/* ---- Canvas ---- */

.canvas-scroll {
  max-width: 100%;
  width: 100%;
  height: 600px;
  overflow: auto;
}

#paintwall-canvas {
  display: block;
  width: 100%;
  height: auto;
}

/* Stays a 400x400 square, but shrinks to fit narrow viewports instead of
   overflowing its panel at native size (it has no scroll wrapper like the
   wall canvas does, so it needs its own responsive sizing). */
#avatar-canvas {
  display: block;
  width: 100%;
  max-width: 400px;
  height: auto;
}

canvas {
  border: var(--canvas-border);
  background-color: var(--canvas-bg);
}

/* ---- Mobile palette/activity popovers (index.html only) ----
   Hidden entirely above the phone breakpoint -- palette-suggestions and
   activity-section just render inline in normal flow there. Below it, the
   same markup is repositioned (not duplicated) into slide-in panels so the
   fixed-height mobile canvas view doesn't need extra page scrolling. */

.mobile-panel-toggles {
  display: none;
}

.panel-toggle-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.panel-toggle-btn {
  display: none;
}

.panel-backdrop {
  display: none;
}

/* ---- Tables ---- */

/* Scrolls horizontally within its own box on narrow screens instead of
   the table breaking out of its panel. */
.table-scroll {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  border-bottom: 1px solid var(--color-border);
  padding: 0.5rem;
  text-align: left;
}

/* ---- Footer ---- */

.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

/* ---- Small screens ----
   Three-tier header degradation as the viewport narrows:
   1. Wide:  logo + nav + login fields all inline, "New here?" hint visible.
   2. Medium: hint disappears first to free up room -- fields stay inline.
   3. Narrow: header stacks into rows, and username/password stack too. */

@media (max-width: 64rem) {
  #register-hint {
    display: none;
  }

  .site-header {
    gap: 0.5rem;
  }

  .site-nav {
    padding-left: 0.5rem;
  }

  .site-nav ul {
    gap: 0.75rem;
  }

  .site-auth form {
    gap: 0.3rem;
  }

  .site-auth input[type="text"],
  .site-auth input[type="password"] {
    width: 6rem;
  }
}

@media (max-width: 56rem) {
  .site-header {
    flex-direction: column;
    align-items: stretch;
  }

  .site-nav {
    padding-left: 0;
  }

  /* At very narrow widths, four nowrap-text links plus gaps don't fit on
     one line -- let them wrap onto a second row (already expected here
     since the whole header is stacked into a column anyway) instead of
     overflowing off the edge. */
  .site-nav ul {
    flex-wrap: wrap;
  }

  .site-auth form {
    flex-direction: column;
    align-items: stretch;
  }

  #login-btn {
    align-self: stretch;
  }

  /* The fixed 6rem width from the tighter inline tier above doesn't apply
     here -- there's a whole dropdown's worth of room, so let the fields
     fill it instead of staying cramped. */
  .site-auth input[type="text"],
  .site-auth input[type="password"] {
    width: 100%;
  }

  .hamburger-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0.3rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background-color: var(--color-surface);
    cursor: pointer;
  }

  .hamburger-btn img {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* The login form/hint/profile-panel -- same #header-auth markup as the
     wide layout, just hidden by default and dropped down from the
     hamburger button instead of always taking up space in the stack. */
  .site-auth {
    display: none;
    position: absolute;
    top: 100%;
    right: 1.5rem;
    z-index: 70;
    flex-direction: column;
    align-items: stretch;
    width: min(20rem, 90vw);
    margin-top: 0.5rem;
    padding: 1rem;
    background-color: var(--header-bg-color);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  }

  body:has(#nav-auth-toggle:checked) .site-auth {
    display: flex;
  }
}

@media (max-width: 40rem) {
  /* ---- Wall page (index.html): compact painting workspace ----
     Toolbar sits after a canvas that's given a solid height floor (not just
     "whatever's left"), so it can't get crushed to nothing under a tall
     header + toolbar. The page can still scroll normally -- only the future
     touch-drag canvas panning is meant to feel scroll-free, not the page.
     Scoped to index.html via :has(), since profile.html's avatar canvas
     should keep its normal in-flow layout. */
  main:has(#paintwall-canvas) {
    max-width: none;
    width: 100%;
    padding: 0;
    gap: 0;
  }

  #canvas-section {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0.5rem;
    border-width: 0;
    border-radius: 0;
  }

  #canvas-section > h2,
  #canvas-section > p {
    display: none;
  }

  #toolbar h3 {
    display: none;
  }

  .canvas-scroll {
    height: 65vh;
    min-height: 20rem;
  }

  #paintwall-canvas {
    height: 100%;
  }

  #toolbar {
    flex: 0 0 auto;
    max-width: none;
    margin-top: 0.5rem;
  }

  /* Reveal the popover toggle buttons only in this tier. */
  .mobile-panel-toggles {
    display: flex;
    flex: 0 0 auto;
    gap: 0.5rem;
    padding-top: 0.5rem;
  }

  .panel-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background-color: var(--color-surface);
    color: var(--color-text);
    font-weight: 600;
    cursor: pointer;
  }

  body:has(#palette-toggle:checked) label.panel-toggle-btn[for="palette-toggle"],
  body:has(#activity-toggle:checked) label.panel-toggle-btn[for="activity-toggle"] {
    background-color: var(--color-accent);
    color: var(--color-accent-contrast);
    border-color: var(--color-accent);
  }

  /* Same #palette-fieldset / #activity-section markup as the wide layout,
     just repositioned into a slide-in panel instead of normal flow. */
  #palette-fieldset,
  #activity-section {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    width: 85vw;
    max-width: 22rem;
    margin: 0;
    min-width: 0;
    overflow-y: auto;
    background-color: var(--color-surface);
    box-shadow: -6px 0 16px rgba(0, 0, 0, 0.35);
    transform: translateX(100%);
    transition: transform 0.2s ease;
  }

  body:has(#palette-toggle:checked) #palette-fieldset,
  body:has(#activity-toggle:checked) #activity-section {
    transform: translateX(0);
  }

  .panel-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(0, 0, 0, 0.45);
  }

  body:has(#palette-toggle:checked) .panel-backdrop[for="palette-toggle"],
  body:has(#activity-toggle:checked) .panel-backdrop[for="activity-toggle"] {
    display: block;
  }
}