/* ==========================================================================
   SnippetLab — design system

   Dark, border-driven, developer-tool aesthetic. Depth comes from 1px borders
   and tiny background steps, not shadows. One white element per cluster, colour
   only in small details. Radii are bimodal: a full pill or a 16px card.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root{
  color-scheme:dark;

  /* Surfaces — six near-black steps. Nothing lighter than --chip except the
     white CTA, which is what makes the palette read as compressed. */
  --bg:#0A0A0A;
  --surface:#121212;
  --surface-2:#141414;
  --surface-3:#161616;
  --chip:#1A1A1A;
  --chip-2:#1F1F1F;
  --code-bg:#0D0D0D;

  /* Borders — every container is defined by one of these, never a shadow. */
  --border:#232323;
  --border-subtle:#1A1A1A;
  --border-hover:#3A3A3A;
  --border-input:#2A2A2A;
  --border-focus:#3F3F46;

  /* Text */
  --text:#FAFAFA;
  --text-muted:#A1A1AA;
  --text-faint:#71717A;
  --text-dim:#52525B;

  /* Accents — only ever in elements under ~10px. */
  --green:#22C55E;
  --amber:#F59E0B;
  --red:#EF4444;
  --blue:#229ED9;

  /* Radii — bimodal on purpose: pill or card, nothing in between. */
  --r-card:16px;
  --r-panel:12px;
  --r-input:10px;
  --r-sm:8px;
  --r-pill:999px;

  /* Shadows — minimal. */
  --shadow-card:0 1px 2px rgba(0,0,0,.5);
  --shadow-pop:0 1px 2px rgba(0,0,0,.6),0 10px 30px rgba(0,0,0,.5);

  --font-sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --sidebar-w:190px;
  --header-h:56px;
  --col:700px;
  --ease:150ms ease;
}

/* ---------------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:400 14px/1.55 var(--font-sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,p{margin:0}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
img,svg{display:block;max-width:100%}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}
::selection{background:rgba(250,250,250,.16)}

/* Scrollbars, so a dark page does not get a bright one. */
*{scrollbar-width:thin;scrollbar-color:#2A2A2A transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:#2A2A2A;border-radius:999px;border:2px solid var(--bg)}
*::-webkit-scrollbar-thumb:hover{background:#3A3A3A}

/* ---------------------------------------------------------------- icons */
.icon{width:15px;height:15px;flex:0 0 auto;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.icon-sm{width:13px;height:13px}
.icon-lg{width:18px;height:18px}
.icon-xl{width:22px;height:22px}

/* ---------------------------------------------------------------- shell */
.shell{display:flex;min-height:100vh}

/* --------------------------------------------------------------- sidebar */
.sidebar{
  width:var(--sidebar-w);flex:0 0 var(--sidebar-w);
  border-right:1px solid var(--border-subtle);
  background:var(--bg);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
  overflow-y:auto;
}
.brand{
  height:var(--header-h);flex:0 0 var(--header-h);
  display:flex;align-items:center;gap:9px;
  padding:0 16px;border-bottom:1px solid var(--border-subtle);
}
.brand-mark{
  width:26px;height:26px;flex:0 0 26px;
  border:1px solid var(--border-input);border-radius:var(--r-sm);
  display:grid;place-items:center;color:var(--text);
}
/* The mark is a wide, short glyph (brackets 38 units across, 22 tall, in a
   64-unit box), so it needs a larger icon box than a square glyph would to
   read at the same weight. 18px puts the visible content at ~11px wide. */
.brand-mark .icon{width:18px;height:18px}
.brand-name{
  font:600 14px/1 var(--font-mono);letter-spacing:-.02em;color:var(--text);
  white-space:nowrap;
}
.brand-name b{color:var(--text-faint);font-weight:600}

.side-group{padding:14px 10px 6px}
.side-label{
  font:600 10px/1 var(--font-sans);letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-dim);padding:0 8px;margin-bottom:7px;
}
.side-item{
  display:flex;align-items:center;gap:10px;width:100%;
  height:34px;padding:0 8px;border-radius:var(--r-sm);
  font-size:12.5px;color:var(--text-muted);text-align:left;
  transition:background var(--ease),color var(--ease);
  position:relative;
}
.side-item .icon{color:var(--text-faint);transition:color var(--ease)}
.side-item:hover{background:var(--surface-3);color:var(--text)}
.side-item:hover .icon{color:var(--text-muted)}
.side-item.is-active{background:#171717;color:var(--text);font-weight:600}
.side-item.is-active .icon{color:var(--text)}
/* 2px white indicator on the active row. */
.side-item.is-active::before{
  content:'';position:absolute;left:-10px;top:7px;bottom:7px;width:2px;
  background:var(--text);border-radius:0 2px 2px 0;
}
.side-item .count{
  margin-left:auto;font:600 10px/1 var(--font-mono);
  background:var(--chip-2);color:var(--text-muted);
  padding:3px 7px;border-radius:var(--r-pill);
}
.side-item .count.is-zero{color:var(--text-dim);background:transparent}

.side-foot{margin-top:auto;padding:12px 10px 16px;display:grid;gap:8px}
.side-cta{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:10px 12px;border-radius:var(--r-pill);
  border:1px solid var(--border-input);background:var(--surface-2);
  font-size:12px;color:var(--text);
  transition:border-color var(--ease),background var(--ease);
}
.side-cta:hover{border-color:var(--border-hover);background:var(--surface-3)}
.side-cta .icon{color:var(--text-faint)}
.side-cta .arrow{margin-left:auto;color:var(--text-dim)}
.side-meta{padding:10px 8px 0;text-align:center;border-top:1px solid var(--border-subtle)}
.side-meta strong{display:block;font:600 11px/1.4 var(--font-sans);color:var(--text-muted)}
.side-meta span{font:400 10px/1.4 var(--font-sans);color:var(--text-dim)}

/* ------------------------------------------------------------------ main */
.main{flex:1;min-width:0;display:flex;flex-direction:column}

.topbar{
  height:var(--header-h);flex:0 0 var(--header-h);
  border-bottom:1px solid var(--border-subtle);
  display:flex;align-items:center;gap:12px;
  padding:0 24px;position:sticky;top:0;z-index:20;
  background:rgba(10,10,10,.88);backdrop-filter:blur(8px);
}
.search{
  position:relative;width:min(540px,100%);
}
.search .icon{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  color:var(--text-faint);pointer-events:none;
}
.search input{
  width:100%;height:40px;padding:0 34px 0 34px;
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-input);color:var(--text);
  font-size:13px;outline:0;
  transition:border-color var(--ease);
}
.search input::placeholder{color:var(--text-faint)}
.search input:focus{border-color:var(--border-focus)}
.search .clear{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:22px;height:22px;display:none;place-items:center;
  border-radius:var(--r-pill);color:var(--text-faint);
}
.search .clear:hover{background:var(--chip);color:var(--text)}
.search.has-value .clear{display:grid}

.topbar-right{margin-left:auto;display:flex;align-items:center;gap:8px}

.content{flex:1;padding:32px 24px 0}
.col{width:100%;max-width:var(--col);margin:0 auto}

/* --------------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:8px 16px;border-radius:var(--r-pill);
  font-size:12px;font-weight:600;letter-spacing:.01em;
  border:1px solid var(--border-input);background:var(--surface-2);color:var(--text);
  transition:background var(--ease),border-color var(--ease),color var(--ease);
  white-space:nowrap;
}
.btn:hover{background:var(--surface-3);border-color:var(--border-hover)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{
  background:#fff;border-color:#fff;color:#0A0A0A;
  box-shadow:0 1px 2px rgba(0,0,0,.6),0 4px 14px rgba(0,0,0,.35);
}
.btn-primary:hover{background:#F0F0F0;border-color:#F0F0F0}
.btn-ghost{border-color:transparent;background:transparent;color:var(--text-muted);padding:6px 10px}
.btn-ghost:hover{background:var(--chip);color:var(--text);border-color:transparent}
.btn-sm{padding:6px 12px;font-size:11.5px}
.btn-block{width:100%}
.btn .icon{width:14px;height:14px}

.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;border-radius:var(--r-pill);
  background:var(--chip);border:1px solid #262626;
  font:600 10.5px/1.4 var(--font-sans);letter-spacing:.02em;
  color:var(--text-muted);
  transition:border-color var(--ease),color var(--ease),background var(--ease);
}
.chip:hover{border-color:var(--border-hover);color:var(--text)}
.chip.is-active{background:var(--text);border-color:var(--text);color:#0A0A0A}
.chip .icon{width:12px;height:12px}

/* ------------------------------------------------------------------ hero */
.hero{text-align:center;padding:8px 0 56px}
.hero h1{
  font:700 31px/1.15 var(--font-sans);letter-spacing:-.022em;color:var(--text);
}
.hero h1 .mono{font-family:var(--font-mono);font-weight:600;letter-spacing:-.03em}
.hero p{
  margin:12px auto 0;max-width:44ch;
  font-size:13px;color:var(--text-muted);
}
.hero-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:18px}
.stats{
  display:flex;justify-content:center;gap:28px;flex-wrap:wrap;
  margin-top:34px;padding-top:24px;border-top:1px solid var(--border-subtle);
}
.stats div{text-align:center}
.stats strong{
  display:block;font:600 17px/1.2 var(--font-mono);color:var(--text);
  letter-spacing:-.02em;
}
.stats span{font-size:10.5px;color:var(--text-faint);letter-spacing:.04em;text-transform:uppercase}

/* --------------------------------------------------------------- section */
.section{padding-bottom:44px}
.section-head{display:flex;align-items:flex-end;gap:16px;margin-bottom:16px}
.section-head h2{font:700 18px/1.2 var(--font-sans);letter-spacing:-.012em}
.section-head p{margin-top:5px;font-size:12px;color:var(--text-muted)}
.section-head .meta{margin-left:auto;flex:0 0 auto}
.eyebrow{
  font:600 10px/1 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-dim);margin-bottom:8px;
}

/* ----------------------------------------------------------------- cards */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}

.card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-card);padding:14px;
  box-shadow:var(--shadow-card);
  display:flex;flex-direction:column;gap:9px;
  transition:border-color var(--ease),background var(--ease),transform var(--ease);
}
.card:hover{border-color:var(--border-hover);background:var(--surface-3);transform:translateY(-2px)}
.card-meta{display:flex;align-items:center;gap:8px;min-width:0}
.card-cat{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 6px;border-radius:var(--r-pill);
  font:600 9.5px/1.5 var(--font-sans);letter-spacing:.06em;text-transform:uppercase;
  border:1px solid rgba(34,197,94,.35);background:rgba(34,197,94,.08);color:var(--green);
  white-space:nowrap;
}
.card-cat[data-cat="AI"]{border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.08);color:var(--green)}
.card-lang{
  font:600 9.5px/1.5 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.card h3{
  font:600 15px/1.35 var(--font-sans);letter-spacing:-.012em;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
.card p{
  font-size:11.5px;line-height:1.5;color:var(--text-muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.card-foot{
  display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:9px;
  border-top:1px solid var(--border-subtle);
  font-size:10.5px;color:var(--text-faint);
}
.card-foot .sep{color:var(--text-dim)}
.card-foot .spacer{margin-left:auto}
/* Credited author. Truncated rather than wrapped so a long name cannot push the
   view count and Detail button off the card. */
.card-author{
  display:inline-block;max-width:45%;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;color:var(--text-muted);font-weight:500;
}
.card-author::before{content:"by ";color:var(--text-faint);font-weight:400}
.card-foot button{
  display:inline-flex;align-items:center;gap:5px;
  color:var(--text-muted);font-size:10.5px;
  transition:color var(--ease);
}
.card-foot button:hover{color:var(--text)}
.card-detail{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 10px;border-radius:var(--r-pill);
  background:#fff;color:#0A0A0A;font:600 10px/1.5 var(--font-sans);
  transition:background var(--ease);
}
.card-detail:hover{background:#F0F0F0}

/* -------------------------------------------------------- code preview */
.code-panel{
  background:var(--code-bg);border:1px solid var(--border-subtle);
  border-radius:var(--r-panel);overflow:hidden;
}
.code-head{
  display:flex;align-items:center;gap:6px;padding:7px 10px;
  border-bottom:1px solid var(--border-subtle);
}
.dot{width:8px;height:8px;border-radius:var(--r-pill);flex:0 0 8px}
.dot-r{background:var(--red)}
.dot-a{background:var(--amber)}
.dot-g{background:var(--green)}
.code-file{
  margin-left:6px;font:500 10px/1 var(--font-mono);color:var(--text-dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.code-head .copy{
  margin-left:auto;display:inline-flex;align-items:center;gap:5px;
  font-size:10.5px;color:var(--text-faint);
  transition:color var(--ease);
}
.code-head .copy:hover{color:var(--text)}
.code-body{
  display:flex;overflow:hidden;position:relative;
  /* Height comes from the line count, not a pixel cap.
     A max-height clipped mid-line — the last visible row was cut through a
     word, which reads as a rendering fault. The JS already trims the code to 8
     lines, so this only needs a floor to keep short and long panels aligned in
     a row. 8 lines at 10.5px/1.65 plus the 18px of vertical padding. */
  min-height:157px;
}
.code-gutter{
  flex:0 0 auto;padding:9px 8px 9px 10px;text-align:right;
  font:400 10.5px/1.65 var(--font-mono);color:var(--text-dim);
  background:var(--code-bg);border-right:1px solid var(--border-subtle);
  user-select:none;
}
.code-scroll{flex:1;overflow:auto;padding:9px 12px}
.code-scroll pre{
  margin:0;font:400 10.5px/1.65 var(--font-mono);color:#D4D4D8;
  white-space:pre;tab-size:2;
}
/* Truncation is intentional and hard — no scroll, no fade — so every card in a
   row is the same height. */
.code-panel.is-preview .code-scroll{overflow:hidden}
.code-panel.is-full .code-body{max-height:min(58vh,560px)}
.code-panel.is-full .code-scroll pre{font-size:12px;line-height:1.7}
.code-panel.is-full .code-gutter{font-size:12px;line-height:1.7}

/* ============================================================ detail page
   The full view of one snippet. It reuses .code-panel so the code block is the
   same object as on the card, and adds only what the single-item view needs:
   a breadcrumb, a byline, the action row, the description note, and the code
   toolbar.
   ========================================================================= */

.crumb-row{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:20px;
}
/* Back is a pill, not a button: it navigates, it does not act on the snippet,
   and the shape is what separates the two. */
.pill-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:var(--r-pill);
  border:1px solid var(--border-input);background:var(--surface-2);
  font-size:12px;color:var(--text-muted);
  transition:background var(--ease),color var(--ease),border-color var(--ease);
}
.pill-btn:hover{background:var(--surface-3);color:var(--text);border-color:var(--border-hover)}
.pill-btn .icon{width:12px;height:12px}

.detail-hero{
  border:1px solid var(--border);border-radius:var(--r-panel);
  background:var(--surface);padding:24px;margin-bottom:14px;
  /* The green edge is the one place the accent is allowed to be big. It marks
     the item you are looking at, the same way it does on the card. */
  border-right:2px solid var(--green);
}
.detail-hero h1{
  margin:0 0 12px;font-size:26px;line-height:1.2;letter-spacing:-.02em;
  color:var(--text);font-weight:650;
}
.byline{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:12.5px;color:var(--text-muted);margin-bottom:20px;
}
.byline-sep{color:var(--text-dim)}
.byline-item{display:inline-flex;align-items:center;gap:5px}
.byline-item .icon{width:13px;height:13px;color:var(--text-faint)}
.byline-author{color:var(--text);font-weight:550}
/* An author with a profile row is a link. It keeps the byline's own type and
   gains only an underline on hover, so the line does not jump when the name
   swaps in from its placeholder. */
.byline-link{cursor:pointer;text-decoration:none}
.byline-link:hover{text-decoration:underline;text-underline-offset:2px}
/* A monogram, not a photo: there are no avatars on this site, and a letter in a
   bordered square matches the brand mark's own shape. */
.avatar{
  width:22px;height:22px;flex:0 0 22px;border-radius:var(--r-sm);
  display:grid;place-items:center;
  background:var(--chip);border:1px solid var(--border-input);
  font:600 11px/1 var(--font-mono);color:var(--text-muted);
  text-transform:uppercase;
}
/* With a picture, the box becomes a frame: no fill, no letter, and the image
   cropped to fill. object-fit:cover is what keeps a non-square upload from
   being squashed once it is in the circle. */
.avatar.has-img{background:var(--surface-3);overflow:hidden;padding:0}
.avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
.avatar-lg{width:64px;height:64px;flex:0 0 64px;border-radius:var(--r-panel);font-size:26px}

/* --- avatar picker in the settings dialog --- */
.avatar-row{display:flex;align-items:center;gap:14px}
.avatar-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}
.avatar-actions .field-hint{margin:0;flex-basis:100%}

/* Action row. Copy and Share are the primary pair and get the white treatment;
   the three between them stay outlined so the row still reads left to right
   rather than as five equal shouts. Share spans full width on a narrow screen
   because it is the last thing in the flow. */
.detail-actions{display:flex;flex-wrap:wrap;gap:8px}
.detail-actions .btn{flex:1 1 auto;justify-content:center}

.note-box{
  display:flex;gap:10px;align-items:flex-start;
  border:1px solid var(--border);border-radius:var(--r-panel);
  background:var(--surface);padding:14px 16px;margin-bottom:14px;
}
.note-ico{
  flex:0 0 22px;width:22px;height:22px;border-radius:var(--r-pill);
  display:grid;place-items:center;
  background:color-mix(in srgb, var(--green) 16%, transparent);
  color:var(--green);
}
.note-ico .icon{width:13px;height:13px}
.note-box p{margin:2px 0 0;font-size:13px;line-height:1.55;color:var(--text-muted)}

/* --- code toolbar --- */
.code-tools{margin-left:auto;display:flex;align-items:center;gap:2px}
.code-tools .tool{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 8px;border-radius:var(--r-sm);
  font-size:11px;color:var(--text-faint);
  transition:background var(--ease),color var(--ease);
}
.code-tools .tool:hover{background:var(--surface-3);color:var(--text)}
.code-tools .tool .icon{width:12px;height:12px}
.code-tools .tool-icon{padding:4px 6px}
/* The pressed state has to be visible, not just an aria attribute: wrap is a
   toggle and a user who cannot see whether it is on will keep pressing it. */
.code-tools .tool[aria-pressed="true"]{
  background:var(--chip-2);color:var(--green);
}

/* The path breadcrumb the full view shows. Cards do not have room for it, and
   it is genuinely useful here: it says where this file is meant to live. */
.code-path{
  padding:7px 12px;border-bottom:1px solid var(--border-subtle);
  background:var(--bg);
  font:400 10.5px/1.5 var(--font-mono);color:var(--text-faint);
  word-break:break-all;
}
.code-path .sep{color:var(--text-dim);padding:0 5px}

/* The detail panel is the page, so it gets more room than the dialog did and
   scrolls its own body rather than the window. */
.code-panel.is-detail .code-body{max-height:min(70vh,720px)}
.code-panel.is-detail .code-scroll pre{font-size:12.5px;line-height:1.7}
.code-panel.is-detail .code-gutter{font-size:12.5px;line-height:1.7}
/* Wrap is opt-in, so the default has to stay pre. */
.code-panel.is-wrap .code-scroll pre{white-space:pre-wrap;word-break:break-word}
.code-panel.is-wrap .code-scroll{overflow-x:hidden}

/* syntax tokens — VS Code dark-ish, deliberately low-chroma */
.tk-com{color:#6B7280;font-style:italic}
.tk-str{color:#E5C07B}
.tk-num{color:#D19A66}
.tk-key{color:#7DD3FC}
.tk-fn{color:#C4B5FD}
.tk-tag{color:#7DD3FC}
.tk-att{color:#E5C07B}
.tk-op{color:#71717A}
.tk-pun{color:#71717A}
.tk-prop{color:#93C5FD}
.tk-bool{color:#D19A66}

/* ------------------------------------------------------------- languages */
.lang-list{display:flex;flex-wrap:wrap;gap:6px}

/* --------------------------------------------------------------- request */
.panel{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-card);padding:20px;
}
.panel h3{font:600 15px/1.35 var(--font-sans);letter-spacing:-.012em}
.panel p{font-size:12px;color:var(--text-muted);margin-top:6px}

/* ----------------------------------------------------------------- forms */
.form{display:grid;gap:12px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{display:grid;gap:6px}
.field label{font:600 10.5px/1 var(--font-sans);letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-faint)}
.input,.select,.textarea{
  width:100%;padding:10px 12px;background:var(--surface-2);
  border:1px solid var(--border-input);border-radius:var(--r-input);
  color:var(--text);font-size:13px;outline:0;
  transition:border-color var(--ease),background var(--ease);
}
.input::placeholder,.textarea::placeholder{color:var(--text-dim)}
.input:focus,.select:focus,.textarea:focus{border-color:var(--border-focus);background:var(--surface-3)}
.textarea{min-height:110px;resize:vertical;font-family:var(--font-mono);font-size:12px;line-height:1.6}
.select{
  appearance:none;cursor:pointer;padding-right:32px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:14px;
}
.field-hint{font-size:10.5px;color:var(--text-dim)}
.field-hint.is-error{color:var(--red)}
.field-hint.is-ok{color:var(--green)}

.input-wrap{position:relative}
.input-wrap .icon{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  color:var(--text-faint);pointer-events:none;
}
.input-wrap .input{padding-left:36px}
.input-wrap .toggle{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;display:grid;place-items:center;
  border-radius:var(--r-pill);color:var(--text-faint);
}
.input-wrap .toggle:hover{background:var(--chip);color:var(--text)}

/* ================================================================ editor */
/* The overlay technique: a highlighted <pre> sits behind a transparent
   textarea. For the colours to line up under the caret, every metric that
   affects text position must be IDENTICAL on both layers — font, size,
   line-height, padding, border, letter-spacing and tab-size. If you change
   one, change it in the shared .ed-layer rule and nowhere else. */
.editor{
  position:relative;border:1px solid var(--border-input);border-radius:var(--r-panel);
  background:var(--code-bg);overflow:hidden;
  transition:border-color var(--ease);
}
.editor:focus-within{border-color:var(--border-focus)}

.ed-head{
  display:flex;align-items:center;gap:8px;padding:7px 10px;
  border-bottom:1px solid var(--border-subtle);background:var(--surface);
}
.ed-head .dot{width:8px;height:8px;border-radius:var(--r-pill);flex:0 0 8px}
.ed-head .ed-lang{
  font:600 10px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-faint);
}
.ed-head .ed-actions{margin-left:auto;display:flex;align-items:center;gap:4px}
.ed-head .ed-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 8px;border-radius:var(--r-pill);
  font-size:10.5px;color:var(--text-faint);
  transition:color var(--ease),background var(--ease);
}
.ed-head .ed-btn:hover{color:var(--text);background:var(--chip)}
.ed-head .ed-btn .icon{width:12px;height:12px}

.ed-body{position:relative;display:flex;height:340px}
.editor.is-tall .ed-body{height:min(62vh,560px)}

/* Gutter: the numbers are translated to follow the textarea's scrollTop, so
   they can never drift out of step with the code. */
.ed-gutter-wrap{
  flex:0 0 auto;overflow:hidden;background:var(--code-bg);
  border-right:1px solid var(--border-subtle);
}
.ed-gutter{
  padding:12px 8px 12px 12px;text-align:right;
  font:400 12px/1.7 var(--font-mono);color:var(--text-dim);
  user-select:none;white-space:pre;
  will-change:transform;
}

.ed-scroll{position:relative;flex:1;min-width:0;overflow:hidden}

/* Shared metrics. Both layers must agree on every one of these. */
.ed-layer{
  margin:0;padding:12px 14px;
  font:400 12px/1.7 var(--font-mono);
  letter-spacing:0;tab-size:2;
  white-space:pre;word-wrap:normal;
  border:0;
}

/* The highlight layer sits behind and never receives events. */
.ed-highlight{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.ed-highlight code{display:block;min-height:100%;color:#E4E4E7}

/* The textarea is on top with transparent text and a visible caret. Its own
   scrolling drives the sync. */
.ed-input{
  position:absolute;inset:0;width:100%;height:100%;
  background:transparent;color:transparent;
  caret-color:var(--text);
  resize:none;outline:0;overflow:auto;
  -webkit-text-fill-color:transparent;
}
.ed-input::selection{background:rgba(250,250,250,.22)}
.ed-input::placeholder{color:transparent}
.ed-input::-webkit-scrollbar{width:10px;height:10px}

.ed-foot{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:8px 12px;border-top:1px solid var(--border-subtle);
  background:var(--surface);
  font:400 10.5px/1.4 var(--font-sans);color:var(--text-dim);
}
.ed-stats{margin-left:auto;font-family:var(--font-mono)}
.ed-stats.is-error{color:var(--red)}
.ed-hint{display:inline-flex;align-items:center;gap:5px}
/* Shown only when a file is too large to highlight. It has to survive the mobile
   rule below, or the colours vanish with no explanation. */
.ed-hint-large{color:var(--warn, #d9a441);font-weight:500}
/* Plain-text mode for oversized files: keep the monospace metrics so the code
   still lines up, just without token colours. */
#detailCode2.is-plain{color:var(--text)}
#detailLargeNotice{margin:10px 0 0;padding:0 2px}
.ed-hint kbd{
  font:600 9.5px/1 var(--font-mono);padding:3px 5px;border-radius:5px;
  background:var(--chip);border:1px solid var(--border);color:var(--text-faint);
}

@media(max-width:640px){
  .ed-body{height:260px}
  .ed-hint{display:none}
  .ed-hint-large{display:inline-flex}
}

/* ---------------------------------------------------------------- modals */
.modal{
  position:fixed;inset:0;z-index:60;display:none;
  align-items:center;justify-content:center;padding:16px;
  background:rgba(5,5,5,.72);backdrop-filter:blur(3px);
}
.modal.is-open{display:flex}
.dialog{
  width:min(520px,100%);max-height:90vh;overflow:auto;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-card);box-shadow:var(--shadow-pop);
  animation:dialog-in 160ms ease;
}
.dialog-lg{width:min(820px,100%)}
@keyframes dialog-in{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}}
.dialog-head{
  display:flex;align-items:flex-start;gap:12px;
  padding:18px 18px 14px;border-bottom:1px solid var(--border-subtle);
  position:sticky;top:0;background:var(--surface);z-index:1;
}
.dialog-head h3{font:600 16px/1.3 var(--font-sans);letter-spacing:-.014em}
.dialog-head p{margin-top:5px;font-size:11.5px;color:var(--text-muted)}
.dialog-close{
  margin-left:auto;width:28px;height:28px;flex:0 0 28px;
  display:grid;place-items:center;border-radius:var(--r-pill);
  color:var(--text-faint);
  transition:background var(--ease),color var(--ease);
}
.dialog-close:hover{background:var(--chip);color:var(--text)}
.dialog-body{padding:18px}
.dialog-foot{
  display:flex;gap:8px;padding:14px 18px;border-top:1px solid var(--border-subtle);
  background:var(--surface);
}
.dialog-foot .btn:last-child{margin-left:auto}

/* auth-specific: the split header with an icon mark */
.auth-mark{
  width:38px;height:38px;flex:0 0 38px;border-radius:var(--r-panel);
  border:1px solid var(--border-input);background:var(--surface-2);
  display:grid;place-items:center;color:var(--text);
}
.auth-mark .icon{width:18px;height:18px}
.auth-switch{
  padding:14px 18px;border-top:1px solid var(--border-subtle);
  text-align:center;font-size:11.5px;color:var(--text-muted);
}
.auth-switch button{color:var(--text);font-weight:600;text-decoration:underline;
  text-underline-offset:2px;text-decoration-color:var(--border-hover)}
.auth-switch button:hover{text-decoration-color:var(--text)}
.pw-meter{display:flex;gap:4px;margin-top:2px}
.pw-meter i{height:3px;flex:1;background:var(--chip-2);border-radius:var(--r-pill);
  transition:background var(--ease)}
.pw-meter i.on{background:var(--green)}
.pw-meter i.mid{background:var(--amber)}
.pw-meter i.weak{background:var(--red)}

/* ----------------------------------------------------------- admin queue */
.tabs{display:flex;gap:6px;padding:0 18px 14px}
.admin-item{
  border:1px solid var(--border);border-radius:var(--r-panel);
  padding:14px;margin-bottom:12px;background:var(--surface-2);
}
.admin-item h4{font:600 14px/1.35 var(--font-sans);letter-spacing:-.01em}
.admin-item p{margin-top:5px;font-size:11.5px;color:var(--text-muted)}
.admin-item .row{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.status-pill{
  display:inline-flex;align-items:center;gap:5px;padding:2px 8px;
  border-radius:var(--r-pill);font:600 9.5px/1.6 var(--font-sans);
  letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--border-input);
  color:var(--text-muted);
}
.status-pill[data-s="published"],.status-pill[data-s="completed"]{color:var(--green);border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.08)}
.status-pill[data-s="pending"],.status-pill[data-s="in_progress"]{color:var(--amber);border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.08)}
.status-pill[data-s="rejected"],.status-pill[data-s="closed"]{color:var(--text-faint)}

/* --------------------------------------------------------------- states */
.empty{
  grid-column:1/-1;text-align:center;padding:44px 24px;
  border:1px dashed var(--border);border-radius:var(--r-card);color:var(--text-muted);
}
.empty .icon{width:26px;height:26px;margin:0 auto 12px;color:var(--text-dim)}
.empty h3{font:600 14px/1.4 var(--font-sans);color:var(--text)}
.empty p{margin-top:6px;font-size:12px}

.skeleton{
  background:linear-gradient(90deg,var(--surface) 0%,var(--surface-3) 50%,var(--surface) 100%);
  background-size:200% 100%;animation:sk 1.4s ease infinite;border-radius:var(--r-card);
  border:1px solid var(--border);height:186px;
}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

.spinner{
  width:14px;height:14px;border-radius:var(--r-pill);
  border:2px solid var(--border-input);border-top-color:var(--text);
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* --------------------------------------------------------------- toasts */
.toasts{
  position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
  z-index:80;display:grid;gap:8px;width:max-content;max-width:calc(100vw - 32px);
}
.toast{
  display:flex;align-items:center;gap:9px;
  padding:11px 15px;border-radius:var(--r-pill);
  background:var(--chip-2);border:1px solid var(--border-hover);
  box-shadow:var(--shadow-pop);font-size:12.5px;color:var(--text);
  animation:toast-in 180ms ease;
}
.toast .icon{width:15px;height:15px;color:var(--text-muted)}
.toast[data-kind="ok"] .icon{color:var(--green)}
.toast[data-kind="err"] .icon{color:var(--red)}
@keyframes toast-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* --------------------------------------------------------------- footer */
.footer{
  border-top:1px solid var(--border-subtle);margin-top:8px;
  padding:26px 0 34px;text-align:center;
}
.footer p{font-size:11px;color:var(--text-faint)}
.footer .links{display:flex;justify-content:center;gap:16px;margin-top:12px}
.footer .links a{display:inline-flex;align-items:center;gap:6px;
  font-size:11px;color:var(--text-muted);transition:color var(--ease)}
.footer .links a:hover{color:var(--text)}
.footer .links .icon{width:13px;height:13px}

/* --------------------------------------------------------------- helpers */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hidden{display:none!important}
.muted{color:var(--text-muted)}
.faint{color:var(--text-faint)}
.mono{font-family:var(--font-mono)}
.meta{margin-left:auto;flex:0 0 auto}

/* The auth button shows an icon plus the user's name; the name is dropped on
   narrow screens so the topbar never wraps. */
@media(max-width:520px){.hide-sm{display:none}}

/* --------------------------------------------------------------- mobile */
/* Back. Visible on every view except home, on all screen sizes — desktop
   included, because a PWA launched from the home screen has no browser back
   button at all. Uses the hidden attribute so it is out of the layout entirely
   when not needed, rather than an invisible click target. */
.back-btn{display:grid;width:34px;height:34px;flex:0 0 34px;place-items:center;
  border:1px solid var(--border-input);border-radius:var(--r-input);
  color:var(--text-muted);background:transparent;cursor:pointer;
  transition:color .15s,border-color .15s,background .15s}
.back-btn:hover{color:var(--text);border-color:var(--border-hover);background:var(--bg-subtle)}
.back-btn:active{transform:scale(.94)}
.back-btn[hidden]{display:none}

.menu-btn{display:none;width:34px;height:34px;flex:0 0 34px;place-items:center;
  border:1px solid var(--border-input);border-radius:var(--r-input);color:var(--text-muted)}
.menu-btn:hover{color:var(--text);border-color:var(--border-hover)}
.scrim{display:none;position:fixed;inset:0;background:rgba(5,5,5,.6);z-index:29}

@media(max-width:1080px){
  .grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:860px){
  :root{--sidebar-w:260px}
  .menu-btn{display:grid}
  .sidebar{
    position:fixed;left:0;top:0;z-index:30;
    transform:translateX(-100%);transition:transform 200ms ease;
    border-right-color:var(--border);
  }
  .sidebar.is-open{transform:none}
  .scrim.is-open{display:block}
  .content{padding:24px 16px 0}
  .topbar{padding:0 16px}
  .grid,.grid-2,.form-row{grid-template-columns:1fr}
  .hero h1{font-size:25px}
  .hero{padding-bottom:40px}
  .stats{gap:20px}
  .stats strong{font-size:15px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}


/* ------------------------------------------------------ responsive polish */
.shell,.main,.content,.topbar,.search{min-width:0}
.search{flex:1 1 260px}
.topbar-right{flex:0 0 auto}
.grid,.grid-2,.form-row{min-width:0}
.card,.panel,.dialog{min-width:0}
.card{overflow:hidden}
.code-panel,.code-body,.code-scroll{min-width:0}
.code-scroll{overscroll-behavior-x:contain}
.code-scroll pre{max-width:100%}
.modal{padding:clamp(8px,2.5vw,20px)}
.dialog{max-height:min(90dvh,900px);overscroll-behavior:contain}
.input,.select,.textarea{min-width:0}
.btn{max-width:100%}
.footer .links{flex-wrap:wrap}
.auth-divider{display:flex;align-items:center;gap:12px;margin:14px 0;color:var(--text-dim);font-size:10px}
.auth-divider::before,.auth-divider::after{content:"";height:1px;flex:1;background:var(--border-subtle)}
.btn-github{background:#171717;border-color:#303030;color:#fff}
.btn-github:hover{background:#222;border-color:#484848}
.btn-github .icon{width:17px;height:17px}

@media (min-width:641px) and (max-width:860px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .content{padding-left:22px;padding-right:22px}
}
@media (max-width:640px){
  .topbar{gap:8px;padding:0 10px}
  .menu-btn{width:32px;height:32px;flex-basis:32px}
  .search{flex:1 1 auto;width:auto}
  .search input{height:36px;font-size:12px;padding-left:31px;padding-right:28px}
  .search .icon{left:10px}
  .topbar-right{gap:6px}
  .topbar-right .select{max-width:88px;padding-left:8px!important;padding-right:22px!important;font-size:11px!important}
  .topbar-right .btn{padding:8px 10px}
  .content{padding:20px 12px 0}
  .hero{padding:4px 0 32px}
  .hero h1{font-size:clamp(23px,6vw,29px);overflow-wrap:anywhere}
  .hero p{font-size:12.5px;padding:0 4px}
  .hero-actions{gap:8px}
  .hero-actions .btn{flex:1 1 145px}
  .stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px;margin-top:24px;padding-top:20px}
  .section{padding-bottom:32px}
  .section-head{align-items:flex-start;flex-wrap:wrap;gap:10px}
  .section-head .meta{margin-left:0}
  .grid,.grid-2,.form-row{grid-template-columns:minmax(0,1fr)}
  .panel{padding:15px}
  .dialog-head{padding:14px 14px 12px;gap:9px}
  .dialog-body{padding:14px}
  .dialog-foot{padding:12px 14px;flex-wrap:wrap}
  .dialog-foot .btn{flex:1}
  .dialog-foot .btn:last-child{margin-left:0}
  .auth-switch{padding:13px 14px}
  .footer .links{gap:12px}
}
@media (max-width:380px){
  .topbar-right .select{display:none}
  .topbar{gap:6px;padding:0 8px}
  .search input{font-size:11px}
  .content{padding-left:10px;padding-right:10px}
  .hero-actions .btn{flex-basis:100%}
  .card{padding:11px}
  .code-scroll{padding:8px}
  .code-scroll pre{font-size:9.5px}
  .code-gutter{padding-left:7px;padding-right:6px;font-size:9.5px}
  .dialog{border-radius:12px}
}


/* ---------------------------------------------------------- profiles/settings */
.profile-hero{display:flex;gap:20px;align-items:flex-start;margin-bottom:20px}
.profile-avatar{width:76px;height:76px;flex:0 0 76px;border-radius:24px;display:grid;place-items:center;background:linear-gradient(145deg,#292929,#111);border:1px solid var(--border-hover);font:700 28px var(--font-mono)}
/* With a picture the gradient plate is replaced by the image itself. overflow
   is what makes the square photo obey the 24px radius instead of poking out. */
.profile-avatar.has-img{overflow:hidden;padding:0;background:var(--surface-3)}
.profile-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.profile-main{min-width:0;flex:1}.profile-main h3{font-size:22px;margin:0 0 3px}
.profile-handle{color:var(--text-muted);font-size:12px}.profile-bio{margin-top:12px!important;color:var(--text-muted);max-width:65ch}
.profile-links{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.checkline{display:flex;align-items:center;gap:9px;color:var(--text-muted);font-size:12px}
.checkline input{accent-color:#fff;width:15px;height:15px}#viewProfile .section-head{align-items:center}
@media(max-width:600px){.profile-hero{flex-direction:column}.profile-avatar{width:64px;height:64px;flex-basis:64px;border-radius:20px}.profile-main h3{font-size:19px}}

.admin-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.admin-stat{padding:16px}.admin-stat span{font-size:11px;color:var(--text-muted)}.admin-stat strong{display:block;margin-top:8px;font:600 24px var(--font-mono)}.admin-members{display:grid;gap:10px}@media(max-width:600px){.admin-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-stat strong{font-size:20px}}


/* ======================================================== theme switching */
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#F7F8FA;--surface:#FFFFFF;--surface-2:#F1F3F5;--surface-3:#E9EDF1;
  --chip:#EEF1F4;--chip-2:#E3E7EC;--code-bg:#F6F8FA;
  --border:#DDE2E8;--border-subtle:#E7EBF0;--border-hover:#BBC4CE;--border-input:#CFD6DE;--border-focus:#64748B;
  --text:#161B22;--text-muted:#525D6B;--text-faint:#667180;--text-dim:#87919D;
  --shadow-card:0 1px 2px rgba(16,24,40,.06);--shadow-pop:0 8px 30px rgba(16,24,40,.15);
}
:root[data-theme="light"] body{background:var(--bg);color:var(--text)}
:root[data-theme="light"] .topbar{background:rgba(247,248,250,.9)}
:root[data-theme="light"] .side-item.is-active{background:#E9EDF1;color:var(--text)}
:root[data-theme="light"] .side-item.is-active::before{background:var(--text)}
:root[data-theme="light"] .btn-primary{background:#171B22;border-color:#171B22;color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.1)}
:root[data-theme="light"] .btn-primary:hover{background:#303844;border-color:#303844}
:root[data-theme="light"] .chip{border-color:var(--border)}
:root[data-theme="light"] .chip.is-active{background:#171B22;border-color:#171B22;color:#fff}
:root[data-theme="light"] .card-cat{background:rgba(22,163,74,.08);border-color:rgba(22,163,74,.28);color:#15803D}
:root[data-theme="light"] .code-head{background:#EEF1F4;border-color:var(--border)}
:root[data-theme="light"] .code-path{background:#F8FAFC}
:root[data-theme="light"] .code-body{background:var(--code-bg)}
:root[data-theme="light"] .side-item:hover{background:var(--surface-3)}
:root[data-theme="light"] .theme-icon-moon{display:none}
:root[data-theme="light"] .theme-icon-sun{display:block}
.theme-toggle{width:36px;height:36px;display:grid;place-items:center;flex:0 0 36px;border:1px solid var(--border-input);border-radius:var(--r-input);color:var(--text-muted);background:var(--surface-2);transition:background var(--ease),color var(--ease),border-color var(--ease)}
.theme-toggle:hover{background:var(--surface-3);color:var(--text);border-color:var(--border-hover)}
.theme-icon{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.theme-icon-sun{display:none}
.chat-live-dot{width:7px;height:7px;display:inline-block;flex:0 0 7px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 3px rgba(34,197,94,.12);margin-left:auto}
.side-item .chat-live-dot{margin-left:auto}

/* ============================================================ live chatroom

   Moved to assets/css/chatroom.css. It outgrew a section at the bottom of
   this file once voice notes, replies and reactions arrived, and keeping two
   copies of .chat-form with different flex directions meant whichever file
   loaded last silently won. chatroom.css is the single source of truth. */

@media(max-width:520px){
  .topbar{padding:0 12px;gap:8px}
  .topbar-right{gap:6px}
  .theme-toggle{width:34px;height:34px;flex-basis:34px}
}

/* ======================================================== mobile tab bar

   Below 860px the sidebar becomes a drawer, so the five primary destinations
   end up behind a hamburger. This puts them back under the thumb.

   is-active is applied by the existing [data-view] sync in app.js, so the tab
   bar and the sidebar highlight together with no extra wiring.
   ======================================================================== */

.tabbar{display:none}

@media(max-width:860px){
  .tabbar{
    display:flex;
    position:fixed;
    left:0;right:0;bottom:0;
    z-index:35;
    background:color-mix(in srgb,var(--bg) 88%,transparent);
    backdrop-filter:blur(14px) saturate(140%);
    -webkit-backdrop-filter:blur(14px) saturate(140%);
    border-top:1px solid var(--border);
    /* Clear the iOS home indicator without floating above it. */
    padding:5px 4px calc(5px + env(safe-area-inset-bottom,0px));
  }

  .tab{
    flex:1 1 0;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    padding:6px 2px;
    border-radius:var(--r-sm);
    color:var(--text-faint);
    font-size:9.5px;
    font-weight:500;
    letter-spacing:.01em;
    line-height:1.2;
    transition:color var(--ease),background var(--ease);
    -webkit-tap-highlight-color:transparent;
  }

  .tab .icon{width:19px;height:19px}

  .tab span:last-child{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .tab:active{background:var(--chip)}

  /* The active tab reads through colour and weight, not a pill — a filled pill
     at this size reads as a button you press again rather than a place you
     already are. */
  .tab.is-active{color:var(--text)}
  .tab.is-active .icon{stroke-width:2}

  /* Share is the one action in the row, so it gets the single white element
     the design system allows per cluster. */
  .tab-cta{color:var(--text)}
  .tab-cta .icon{
    background:var(--text);
    color:var(--bg);
    border-radius:var(--r-sm);
    padding:4px;
    width:27px;height:27px;
    stroke-width:2.2;
  }

  /* The bar is fixed, so the page needs room under it or the footer sits
     behind it. */
  .content{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  .footer{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}

  /* Modals sit above the bar; without this the bar floats over dialogs. */
  .modal{z-index:60}
  .chatroom-modal{z-index:70}
}

/* ================================================================== inbox

   The request and visitor rows. .admin-item already gives the card shell, so
   this only adds the avatar-plus-name header and the small link button used
   for a member's name.
   ==================================================================== */

.inbox-head{
  display:flex;
  align-items:flex-start;
  gap:10px;
  min-width:0;
}

.inbox-avatar{
  flex:0 0 34px;
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--chip-2);
  color:var(--text-muted);
  display:grid;
  place-items:center;
  font:600 12px/1 var(--font-sans);
  overflow:hidden;
}

.inbox-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* A member's name inside a row is a control, not prose — but it must not read
   as a link inside a sentence either, so the underline only appears on hover. */
.link-btn{
  padding:0;
  border:0;
  background:none;
  font:600 13px/1.3 var(--font-sans);
  color:var(--text);
  cursor:pointer;
  text-align:left;
}

.link-btn:hover{
  text-decoration:underline;
  text-underline-offset:2px;
}

.inbox-head h4{font:600 13px/1.35 var(--font-sans);color:var(--text)}
.inbox-head p{margin-top:2px}

/* The unread count on the sidebar Inbox row. */
#inboxCount[hidden]{display:none}

/* ------------------------------------------------------------ share sheet
   The dialog you get from the Share button on a snippet.

   Six destinations in a grid, then the copy/download row underneath. The grid
   is auto-fit so it reflows to 3 columns on a phone and 6 on desktop without a
   media query, and each tile is a real button/anchor so keyboard order matches
   what you see. */

.share-sheet{padding:18px}

.share-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(84px,1fr));
  gap:8px;
}

.share-tile{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  padding:13px 6px 11px;
  border:1px solid var(--border);
  border-radius:var(--r-input);
  background:var(--surface-2);
  color:var(--text);
  font:600 11.5px/1.2 var(--font-sans);
  text-decoration:none;
  cursor:pointer;
  transition:background var(--ease),border-color var(--ease),transform var(--ease);
}

.share-tile:hover{
  background:var(--surface-3);
  border-color:var(--border-hover);
  transform:translateY(-1px);
}

.share-tile:active{transform:translateY(0)}

.share-ico{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:var(--r-sm);
  background:var(--chip);
  color:var(--text-muted);
}

.share-ico svg{width:17px;height:17px}

/* "or copy it" rule between the destinations and the copy row. */
.share-sep{
  display:flex;
  align-items:center;
  gap:12px;
  margin:18px 0 14px;
  color:var(--text-faint);
  font:600 10.5px/1 var(--font-sans);
  letter-spacing:.08em;
  text-transform:uppercase;
}

.share-sep::before,.share-sep::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--border);
}

.share-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.share-actions .btn{justify-content:center}

.share-note{
  margin-top:12px;
  min-height:1.2em;
  font:500 11.5px/1.45 var(--font-sans);
  color:var(--text-faint);
  text-align:center;
}

@media (max-width:420px){
  .share-actions{grid-template-columns:1fr}
}

/* The "include the code" switch above the copy row. */
.share-opt{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:16px;
  padding:11px 12px;
  border:1px solid var(--border);
  border-radius:var(--r-input);
  background:var(--surface-2);
  cursor:pointer;
}

.share-opt:hover{border-color:var(--border-hover)}

.share-opt input{
  flex:none;
  width:16px;
  height:16px;
  margin-top:1px;
  accent-color:#FAFAFA;
  cursor:pointer;
}

.share-opt span{
  font:600 12.5px/1.35 var(--font-sans);
  color:var(--text);
}

.share-opt em{
  display:block;
  margin-top:2px;
  font:500 11px/1.4 var(--font-sans);
  font-style:normal;
  color:var(--text-faint);
}