/* ============================================================================
 * ARZU — the type + layout system.
 *
 * TWO LAWS, because both were broken in every previous version:
 *
 *  1. NOTHING carries a hard-coded px font size. Ever. Every size is rem, and
 *     the root is fluid, so a bigger window genuinely makes everything bigger.
 *  2. ONE user control scales the WHOLE interface — writing, controls, spacing,
 *     icons and panels together — not just the font.
 *
 * The floor for the quietest label in the product is 0.82rem (~15px at rest).
 * There is no 11px anywhere. "Secondary" means quieter colour, not smaller.
 * ==========================================================================*/

:root {
  --scale: 1;                                   /* set by Settings */
  font-size: calc(clamp(17px, 0.42vw + 15.2px, 22px) * var(--scale));

  --ink:        #0B0B10;
  --ink-1:      #101018;
  --ink-2:      #16161f;
  --ink-3:      #1e1e2a;
  --line:       #262633;
  --line-soft:  #1c1c26;

  --text:       #EDEDF2;
  --text-2:     #A9A9BC;      /* quieter COLOUR, never smaller size */
  --text-3:     #77778C;

  --irid-a:     #7B3FE4;
  --irid-b:     #1F4FE0;
  --irid-c:     #35E0FF;
  --live:       #2BFF88;
  --warn:       #FFB020;
  --danger:     #FF5470;

  --sweep: linear-gradient(100deg, var(--irid-a), var(--irid-b) 55%, var(--irid-c));

  /* spacing is rem, so it scales with everything else */
  --s1: .35rem;  --s2: .6rem;   --s3: .9rem;   --s4: 1.3rem;
  --s5: 1.9rem;  --s6: 2.6rem;  --s7: 3.6rem;

  --r-sm: .6rem; --r: 1rem; --r-lg: 1.5rem;
  --rail: clamp(15rem, 17vw, 19rem);

  --shadow: 0 1.2rem 3rem -1rem rgba(0,0,0,.65);
}

:root[data-scale="large"]   { --scale: 1.14; }
:root[data-scale="largest"] { --scale: 1.3;  }

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  background: var(--ink);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;                 /* = the fluid root. Body text is never smaller */
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before {                      /* the ground: a calm iridescent wash */
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(80rem 50rem at 12% -10%, rgba(123,63,228,.22), transparent 60%),
    radial-gradient(60rem 44rem at 92% 8%, rgba(31,79,224,.18), transparent 62%),
    radial-gradient(70rem 50rem at 60% 108%, rgba(53,224,255,.09), transparent 60%);
}

h1, h2, h3 { font-family: Sora, Inter, sans-serif; font-weight: 600; line-height: 1.15; letter-spacing: -.015em; }
h1 { font-size: clamp(1.55rem, 1.6vw + 1.15rem, 2.9rem); }
h2 { font-size: clamp(1.25rem, .7vw + 1.05rem, 1.8rem); }
h3 { font-size: 1.2rem; }
p  { font-size: 1rem; color: var(--text-2); max-width: 62ch; }

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: inherit; }

/* ---------------------------------------------------------------- SHELL --- */
/* The whole viewport is used. There is no fixed-width column anywhere. */
.shell {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  min-height: 100vh; min-height: 100dvh;
}

.rail {
  border-right: 1px solid var(--line-soft);
  background: rgba(11,11,16,.72);
  backdrop-filter: blur(1rem);
  padding: var(--s5) var(--s4);
  display: flex; flex-direction: column; gap: var(--s5);
  position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto;
}

.brandbox { display: flex; flex-direction: column; gap: var(--s2); }
.brandbox img { width: min(11rem, 80%); height: auto; }
.brandbox .tag {
  font-size: .82rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-3); font-weight: 500;
}

.navgroup { display: flex; flex-direction: column; gap: var(--s1); }
.navgroup > .lbl {
  font-size: .82rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-3); font-weight: 600; padding: 0 var(--s3) var(--s2);
}

.navitem {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3); border-radius: var(--r-sm);
  font-size: 1rem; font-weight: 450; color: var(--text-2);
  border: 1px solid transparent; text-align: left; width: 100%;
  transition: background .16s, color .16s, border-color .16s;
}
.navitem:hover { background: var(--ink-2); color: var(--text); }
.navitem[aria-current="true"] {
  background: linear-gradient(100deg, rgba(123,63,228,.22), rgba(31,79,224,.12));
  border-color: rgba(123,63,228,.5); color: var(--text); font-weight: 500;
}
.navitem .ico { width: 1.35rem; height: 1.35rem; flex: 0 0 auto; }
.navitem .count {
  margin-left: auto; min-width: 1.5rem; height: 1.5rem; border-radius: 999px;
  display: grid; place-items: center; font-size: .82rem; font-weight: 600;
  background: var(--warn); color: #241800;
}

.railfoot {
  margin-top: auto; display: flex; gap: var(--s3); align-items: center;
  padding: var(--s3); border: 1px solid var(--line-soft); border-radius: var(--r-sm);
  background: var(--ink-1);
}
.dot { width: .6rem; height: .6rem; border-radius: 999px; background: var(--live); flex: 0 0 auto; }
.dot.warn { background: var(--warn); } .dot.bad { background: var(--danger); }

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

.topbar {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s4) clamp(var(--s4), 3vw, var(--s6));
  border-bottom: 1px solid var(--line-soft);
  position: sticky; top: 0; z-index: 20;
  background: rgba(11,11,16,.8); backdrop-filter: blur(1rem);
}
.orgpick { display: flex; align-items: center; gap: var(--s3); }
.avatar {
  width: 2.6rem; height: 2.6rem; border-radius: .8rem; display: grid; place-items: center;
  background: var(--sweep); color: #fff; font-weight: 700; font-size: 1.1rem;
}
.orgpick .nm { font-weight: 600; font-size: 1.05rem; }
.orgpick .sub { font-size: .88rem; color: var(--text-3); }

.seg { margin-left: auto; display: flex; gap: .25rem; padding: .25rem;
  border: 1px solid var(--line); border-radius: 999px; background: var(--ink-1); }
.seg button { padding: var(--s2) var(--s4); border-radius: 999px; font-size: .95rem; color: var(--text-2); }
.seg button[aria-pressed="true"] { background: var(--ink-3); color: var(--text); font-weight: 500; }

.iconbtn {
  width: 2.6rem; height: 2.6rem; border-radius: .8rem; display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--ink-1); color: var(--text-2);
}
.iconbtn:hover { color: var(--text); border-color: var(--irid-a); }
.iconbtn .ico { width: 1.3rem; height: 1.3rem; }

.content {
  padding: clamp(var(--s4), 2.6vw, var(--s6));
  display: flex; flex-direction: column; gap: var(--s5);
  width: 100%; flex: 1;
}

/* Content grid: fills the screen, never a frozen column. */
.grid { display: grid; gap: var(--s4); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.c12 { grid-column: span 12; } .c8 { grid-column: span 8; }
.c6  { grid-column: span 6; }  .c4 { grid-column: span 4; }
@media (max-width: 68rem) { .c8, .c6, .c4 { grid-column: span 12; } }

/* ----------------------------------------------------------------- PARTS -- */
.card {
  border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--ink-1), rgba(16,16,24,.55));
  padding: clamp(var(--s4), 2vw, var(--s5));
  display: flex; flex-direction: column; gap: var(--s3);
}
.card.glow { border-color: rgba(123,63,228,.35); box-shadow: var(--shadow); }

.eyebrow {
  font-size: .84rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 600; color: var(--text-3);
}
.eyebrow.warn { color: var(--warn); } .eyebrow.live { color: var(--live); }

.banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4); border-radius: 999px;
  border: 1px solid rgba(123,63,228,.4); background: rgba(123,63,228,.1);
  font-size: .95rem;
}
.pill {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: .3rem var(--s3); border-radius: 999px; font-size: .84rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--line); color: var(--text-2); background: var(--ink-2);
}
.pill.live { color: var(--live); border-color: rgba(43,255,136,.35); background: rgba(43,255,136,.08); }
.pill.warn { color: var(--warn); border-color: rgba(255,176,32,.35); background: rgba(255,176,32,.08); }
.pill.bad  { color: var(--danger); border-color: rgba(255,84,112,.35); background: rgba(255,84,112,.08); }

.hero h1 { font-size: clamp(1.75rem, 2.4vw + 1rem, 3.4rem); }
.hero .accent { background: var(--sweep); -webkit-background-clip: text; background-clip: text; color: transparent; }

.btn {
  display: inline-flex; align-items: center; gap: var(--s2); justify-content: center;
  padding: var(--s3) var(--s4); border-radius: .8rem; font-weight: 550; font-size: 1rem;
  border: 1px solid var(--line); background: var(--ink-2); color: var(--text);
  transition: transform .12s, filter .16s, border-color .16s;
}
.btn:hover { border-color: var(--irid-a); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--sweep); border-color: transparent; color: #fff; font-weight: 600; }
.btn.primary:hover { filter: brightness(1.1); }
.btn.quiet { background: transparent; color: var(--text-2); }
.btn .ico { width: 1.15rem; height: 1.15rem; }
.btnrow { display: flex; flex-wrap: wrap; gap: var(--s3); }

textarea, input[type=text], input[type=email], input[type=password] {
  width: 100%; padding: var(--s3) var(--s4); border-radius: .8rem;
  border: 1px solid var(--line); background: var(--ink-2); color: var(--text);
  font-size: 1rem; line-height: 1.5; resize: vertical;
}
textarea::placeholder, input::placeholder { color: var(--text-3); }
textarea:focus, input:focus { outline: 2px solid var(--irid-a); outline-offset: 1px; }
label.field { display: flex; flex-direction: column; gap: var(--s2); font-size: .95rem; color: var(--text-2); }

/* the three markers — one recognisable component, everywhere */
.markers { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.marker {
  border: 1px solid var(--line); border-radius: var(--r); padding: var(--s4);
  background: var(--ink-2); display: flex; flex-direction: column; gap: var(--s1);
}
.marker .k { font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); font-weight: 600; }
.marker .v { font-family: Sora, sans-serif; font-size: 1.6rem; font-weight: 600; }
.marker .n { font-size: .95rem; color: var(--text-2); }
.marker.is-live { border-color: rgba(43,255,136,.4); background: rgba(43,255,136,.06); }
.marker.is-live .k, .marker.is-live .v { color: var(--live); }
.marker.is-lkg { border-color: rgba(53,224,255,.3); }

.rows { display: flex; flex-direction: column; gap: var(--s2); }
.row {
  display: flex; align-items: center; gap: var(--s4); width: 100%; text-align: left;
  padding: var(--s4); border: 1px solid var(--line-soft); border-radius: var(--r);
  background: var(--ink-1); transition: border-color .16s, background .16s;
}
.row:hover { border-color: var(--irid-a); background: var(--ink-2); }
.row .grow { flex: 1; min-width: 0; }
.row .t { font-weight: 550; font-size: 1.05rem; }
.row .s { font-size: .95rem; color: var(--text-2); }
.row .ico { width: 1.4rem; height: 1.4rem; flex: 0 0 auto; color: var(--text-3); }

.stats { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.stat { border: 1px solid var(--line-soft); border-radius: var(--r); padding: var(--s4); background: var(--ink-1); }
.stat .v { font-family: Sora, sans-serif; font-size: 1.8rem; font-weight: 600; }
.stat .k { font-size: .9rem; color: var(--text-2); }

.trail { display: flex; flex-direction: column; gap: 0; }
.trailitem { display: grid; grid-template-columns: 1.6rem minmax(0,1fr); gap: var(--s3); padding-bottom: var(--s5); }
.trailitem .mk { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.trailitem .mk .d { width: .85rem; height: .85rem; border-radius: 999px; background: var(--irid-a); margin-top: .4rem; }
.trailitem .mk .ln { flex: 1; width: 1px; background: var(--line); }
.trailitem:last-child .mk .ln { display: none; }

.chooser { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.choice {
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5);
  background: var(--ink-1); display: flex; flex-direction: column; gap: var(--s3);
  text-align: left; transition: border-color .16s, transform .12s;
}
.choice:hover { border-color: var(--irid-a); transform: translateY(-2px); }
.choice[aria-pressed="true"] { border-color: var(--irid-a); background: rgba(123,63,228,.1); }
.choice ul { list-style: none; display: flex; flex-direction: column; gap: var(--s2); }
.choice li { display: flex; gap: var(--s2); align-items: flex-start; font-size: .98rem; color: var(--text-2); }
.choice li .ico { width: 1.1rem; height: 1.1rem; color: var(--live); flex: 0 0 auto; margin-top: .25rem; }

details.fold { border: 1px solid var(--line-soft); border-radius: var(--r); background: var(--ink-1); }
details.fold > summary {
  list-style: none; cursor: pointer; padding: var(--s4);
  display: flex; align-items: center; gap: var(--s3); font-weight: 550; font-size: 1.05rem;
}
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary .chev { margin-left: auto; width: 1.2rem; height: 1.2rem; color: var(--text-3); transition: transform .18s; }
details.fold[open] > summary .chev { transform: rotate(90deg); }
details.fold > summary .sub { font-size: .92rem; color: var(--text-3); font-weight: 400; }
details.fold .body { padding: 0 var(--s4) var(--s4); display: flex; flex-direction: column; gap: var(--s3); }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); font-size: .95rem; color: var(--text-2); }
.crumbs button:hover { color: var(--text); text-decoration: underline; }
.crumbs .sep { color: var(--text-3); }

.empty {
  border: 1px dashed var(--line); border-radius: var(--r-lg); padding: var(--s6);
  display: flex; flex-direction: column; gap: var(--s3); align-items: flex-start;
  background: rgba(16,16,24,.4);
}
.empty .ico { width: 2.4rem; height: 2.4rem; color: var(--text-3); }

.toasts { position: fixed; right: var(--s4); bottom: var(--s4); z-index: 90; display: flex; flex-direction: column; gap: var(--s2); }
.toast {
  padding: var(--s3) var(--s4); border-radius: var(--r); border: 1px solid var(--line);
  background: var(--ink-2); box-shadow: var(--shadow); font-size: .98rem; max-width: 32rem;
}
.toast.good { border-color: rgba(43,255,136,.4); }
.toast.bad  { border-color: rgba(255,84,112,.5); }

.centre { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: var(--s5); }
.centre .card { width: min(34rem, 100%); }

.skel { height: 1rem; border-radius: 999px; background: linear-gradient(90deg, var(--ink-2), var(--ink-3), var(--ink-2));
  background-size: 200% 100%; animation: sh 1.2s linear infinite; }
@keyframes sh { to { background-position: -200% 0; } }

/* ------------------------------------------------------------ SMALL SCREEN */
@media (max-width: 60rem) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .rail {
    position: fixed; inset: 0 auto 0 0; width: min(20rem, 84vw); z-index: 60;
    transform: translateX(-102%); transition: transform .22s ease;
  }
  .shell[data-menu="open"] .rail { transform: none; }
  .scrim { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 50; }
  .menubtn { display: grid !important; }
}
.menubtn { display: none; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

.wordmark {
  font-family: Sora, sans-serif; font-weight: 700; font-size: 2rem; letter-spacing: .04em;
  background: var(--sweep); -webkit-background-clip: text; background-clip: text; color: transparent;
}
select { color: var(--text); }

/* base icon size — nothing may render an icon at an accidental size */
.ico { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; }
.eyebrow .ico { width: 1.05rem; height: 1.05rem; vertical-align: -.15rem; }
.eyebrow { display: flex; align-items: center; gap: var(--s2); }
.choice .ico { width: 1.1rem; height: 1.1rem; }
.crumbs .ico { width: 1rem; height: 1rem; }
.trailitem .card .ico { width: 1.2rem; height: 1.2rem; }
.btnrow .ico { width: 1.15rem; height: 1.15rem; }

/* rows must survive a narrow column without shredding the text */
.row { flex-wrap: wrap; row-gap: var(--s2); }
.row .grow { flex: 1 1 12rem; }
.row > .pill, .row > .s, .row > .btn { flex: 0 0 auto; }
.markers { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.chooser { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }

/* the top bar must never push the page sideways on a phone */
.topbar { flex-wrap: wrap; row-gap: var(--s3); }
.topbar > * { min-width: 0; }
.orgpick { min-width: 0; flex: 1 1 auto; }
.orgpick .nm, .orgpick .sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 42rem) {
  .seg { order: 10; margin-left: 0; width: 100%; justify-content: center; }
  .seg button { flex: 1; }
}

@media (max-width: 42rem) {
  /* one tidy row of controls, then the You/Admin switch under it */
  .topbar { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: var(--s3); }
  .topbar .orgpick { grid-column: 2; }
  .seg { grid-column: 1 / -1; }
  .content { padding: var(--s4) var(--s3); }
  /* anything genuinely wide scrolls inside itself — the page never does */
  .markers, .chooser, .stats { grid-template-columns: 1fr; }
}
.content table, .content pre { display: block; max-width: 100%; overflow-x: auto; }
.content img, .content svg { max-width: 100%; }
.seg { flex-wrap: wrap; }