/* ShapedSocial Launchpad.
 *
 * Set as an INDEX, not a dashboard. The structure is the whole of the design:
 * a section label in a left gutter, its destinations as hairline-separated
 * rows in the right column. That is what makes this page recognisably not
 * Platform Management (a centred wall of tiles) and not Access Control (one
 * welded block of them), and it costs no decoration to do.
 *
 * ⚠️ Deliberately flat. No gradients, no shadows, no hover lift, no tinted
 * icon chips, no pill controls. An earlier pass had all of them and the result
 * looked like a generic SaaS landing page — which is both ugly and wrong,
 * because nothing else in this estate has so much as a box-shadow. PM is flat
 * Fluent; Access Control is flat Salto. If a change here needs a gradient or a
 * shadow to work, it is the wrong change.
 *
 * Distinctness comes from the gutter layout, the density and the type. The
 * brand green is load-bearing but rationed: counts, hovered row names, and the
 * rule under the masthead. It is not a fill.
 */

:root {
  --brand:     #2E8B4F;   /* darkened for contrast as text on the light surface */
  --brand-dim: #6E9B7E;

  --bg:        #FFFFFF;
  --bg-alt:    #F7F8F7;   /* the only second surface, for row hover */
  --line:      #E3E6E4;
  --line-hard: #C9CFCB;   /* section rules and the masthead rule */

  --ink:       #16201A;
  --ink-dim:   #5A635D;
  --ink-faint: #8C958F;

  --danger:    #A4262C;
  --radius:    2px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand:     #5BC174;
    --brand-dim: #4A7F5B;
    --bg:        #121512;
    --bg-alt:    #1A1E1B;
    --line:      #262B27;
    --line-hard: #39413B;
    --ink:       #E9EEEA;
    --ink-dim:   #9AA39C;
    --ink-faint: #6A736D;
    --danger:    #F1707A;
  }
}
:root[data-theme="dark"] {
  --brand:     #5BC174;
  --brand-dim: #4A7F5B;
  --bg:        #121512;
  --bg-alt:    #1A1E1B;
  --line:      #262B27;
  --line-hard: #39413B;
  --ink:       #E9EEEA;
  --ink-dim:   #9AA39C;
  --ink-faint: #6A736D;
  --danger:    #F1707A;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; min-height: 100%;
  background: var(--bg); color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 13px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* Hidden until the guard has decided. Rendering rows and then removing half of
   them as the grants arrive shows people doors they do not have, which is the
   one thing the filtering exists to prevent. */
#app { display: none; }
#app.ready { display: block; }

.spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--brand);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.boot { min-height: 100vh; display: flex; align-items: center; justify-content: center; }

.shell { max-width: 1020px; margin: 0 auto; padding: 0 28px 64px; }

/* ── Top bar ───────────────────────────────────────────────────────────────
   A hairline, not a filled band. The consoles use a solid dark bar because
   they need to separate chrome from a scrolling data region; there is no such
   region here, so a band would be decoration standing in for structure. */
.bar {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 0; border-bottom: 1px solid var(--line);
}
.bar-logo { height: 21px; width: auto; display: block; }
.bar-spacer { flex: 1; }
.bar-email { font-size: 12px; color: var(--ink-faint);
             max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-out {
  border: 1px solid var(--line-hard); background: none; color: var(--ink-dim);
  font: inherit; font-size: 12px; font-weight: 600;
  padding: 4px 11px; border-radius: var(--radius); cursor: pointer;
}
.bar-out:hover { border-color: var(--ink); color: var(--ink); }

/* The theme toggle, sitting immediately left of Sign out.
   Square, and deliberately the same border, radius and hover as .bar-out so
   the pair reads as one control group rather than as a stray icon beside a
   button. The 26px box matches .bar-out's rendered height (12px text + 4px
   padding + 1px borders), so the two line up without either being nudged. */
.bar-icon {
  width: 26px; height: 26px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-hard); background: none; color: var(--ink-dim);
  border-radius: var(--radius); cursor: pointer;
}
.bar-icon:hover { border-color: var(--ink); color: var(--ink); }
.bar-icon svg { width: 15px; height: 15px; display: block; }

/* ── Masthead ────────────────────────────────────────────────────────────── */
.head { padding: 34px 0 0; }
.head h1 {
  margin: 0; font-size: 25px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15;
}
.head p { margin: 5px 0 0; font-size: 13px; color: var(--ink-dim); }

/* A plain bordered field. The pill-with-a-keyboard-chip it replaces was
   decoration: the `/` shortcut still works and is mentioned in the
   placeholder, which is where somebody looking for it would actually read it. */
.search { margin: 22px 0 0; max-width: 340px; }
.search input {
  width: 100%; font: inherit; font-size: 13px; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line-hard);
  border-radius: var(--radius); padding: 7px 10px; outline: none;
}
.search input::placeholder { color: var(--ink-faint); }
.search input:focus { border-color: var(--brand); }

/* ── A section ─────────────────────────────────────────────────────────────
   The gutter. Label left, rows right, a rule along the top of the whole thing
   so the page reads as a set index. Below 760px the gutter collapses and the
   label sits above its rows. */
.sect {
  display: grid; grid-template-columns: 156px 1fr;
  gap: 0 28px; padding-top: 14px; margin-top: 30px;
  border-top: 1px solid var(--line-hard);
}
.sect[hidden] { display: none; }

.sect-label { padding-top: 2px; }
.sect-label h2 {
  margin: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink);
}
.sect-label .n {
  display: inline-block; margin-top: 5px;
  font-size: 11px; font-weight: 600; color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.sect-label .note {
  display: block; margin-top: 7px; font-size: 11.5px; line-height: 1.45;
  color: var(--ink-faint); max-width: 140px;
}

/* Two columns of rows on a wide screen, one on a narrow. Rows, not cards:
   borderless, separated by hairlines, so twenty-five destinations read as an
   index rather than as twenty-five objects. */
.sect-items {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  column-gap: 24px;
  border-top: 1px solid var(--line);
}

/* Sized as a target, not a line of text. These are the only things on the page
   anybody clicks, so they get real height and horizontal padding - the padding
   is what makes the hover tint read as a hit area rather than as a highlighted
   sentence. Twenty-five of them is still only two screens. */
.row {
  display: flex; align-items: baseline; gap: 13px;
  padding: 13px 10px; border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit;
}
.row:hover { background: var(--bg-alt); text-decoration: none; }
.row:hover .row-name { color: var(--brand); }
.row[hidden] { display: none; }

/* Icons are for scanning, so they stay — but bare, in the dim ink, with no
   tinted square behind them and no colour inversion on hover. `align-self`
   rather than baseline alignment, which an SVG has no sensible notion of. */
.row-ico { flex: none; width: 18px; height: 18px; align-self: flex-start; margin-top: 1px;
           color: var(--ink-faint); }
.row:hover .row-ico { color: var(--brand); }
.row-ico svg { width: 18px; height: 18px; display: block; stroke: currentColor; fill: none;
               stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* A brand mark keeps its own colours and gets no hover recolour. */
.row-ico .mark { width: 18px; height: 18px; display: block; }

.row-txt { min-width: 0; flex: 1; }
.row-name { display: block; font-size: 14.5px; font-weight: 650; color: var(--ink);
            letter-spacing: -.008em; }
.row-desc { display: block; margin-top: 3px; font-size: 12px; line-height: 1.4;
            color: var(--ink-faint); }

/* Every row leaves the site, so the mark is on every row and is therefore
   quiet by necessity — a loud one twenty-five times is a texture. */
.row-go { flex: none; font-size: 12px; color: var(--ink-faint); align-self: flex-start;
          margin-top: 2px; }
.row:hover .row-go { color: var(--brand); }

/* ── Empty states ──────────────────────────────────────────────────────── */
.none { margin: 24px 0 0; font-size: 13px; color: var(--ink-dim); }
.nothing { margin: 30px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line-hard); }
.nothing h3 { margin: 0 0 6px; font-size: 14px; font-weight: 650; }
.nothing p  { margin: 0; font-size: 12.5px; color: var(--ink-dim); }

/* ── Foot ──────────────────────────────────────────────────────────────────
   Just the company line. The index is permission-filtered and says nothing
   about what is withheld, which is right: the rows are not a menu of things to
   ask for. The route for somebody who IS missing something lives in the
   no-access empty state rather than as a standing prompt under every page. */
.foot {
  margin: 40px 0 0; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 11.5px; color: var(--ink-faint);
}
.foot a { color: var(--brand); text-decoration: none; }
.foot a:hover { text-decoration: underline; }

@media (max-width: 760px) {
  .shell { padding: 0 18px 48px; }
  .sect { grid-template-columns: 1fr; gap: 0; }
  .sect-label { padding-bottom: 10px; }
  .sect-label .n { margin-left: 8px; }
  .sect-label .note { max-width: none; }
  .bar { flex-wrap: wrap; gap: 9px; }
  .bar-email { max-width: 140px; }
  .sect-items { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2s; }
}