/* ==========================================================================
   The admin dashboard
   ==========================================================================
   A page, not a dialog. Moderation is not a thing you do on top of the map --
   you go looking, you read a list, you compare rows, you come back to it. A
   modal over a globe is the wrong shape for that: it is small, it is temporary,
   and it implies you were in the middle of something else.

   It borrows the app's tokens and its glass, so it is recognisably the same
   product, and none of its layout: a rail, a header, and one wide column.
   ========================================================================== */

/* Every page that is not the map. Safe areas are handled here, once, so a new
   page cannot be added without them: with viewport-fit=cover the window runs
   under the clock and the camera, and a header that does not say so ends up
   behind them. */
.sitepage {
  position: static;
  height: auto;
  min-height: 100dvh;
  overflow: visible;
  background:
    radial-gradient(900px 600px at 12% -10%, color-mix(in srgb, var(--primary) 13%, transparent), transparent 70%),
    var(--bg);
}

/* --- the gate ------------------------------------------------------------- */
.page-gate {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
  background: var(--bg); z-index: 5;
}
.gate-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.gate-inner .mark { width: 44px; height: 44px; }
.gate-inner p { margin: 0; color: var(--ink-2); font-size: 14px; }

/* --- shell ---------------------------------------------------------------- */
.page-shell {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  min-height: 100dvh;
}

.page-rail {
  position: sticky; top: 0; align-self: start;
  height: 100dvh;
  display: flex; flex-direction: column; gap: 6px;
  padding: calc(20px + env(safe-area-inset-top, 0px)) 14px
           calc(20px + env(safe-area-inset-bottom, 0px))
           calc(14px + env(safe-area-inset-left, 0px));
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 55%, transparent);
  backdrop-filter: blur(18px) saturate(150%);
}
.rail-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 8px 18px; text-decoration: none; color: var(--ink);
}
.rail-brand .mark { width: 30px; height: 30px; }
.rail-word { font-weight: 750; letter-spacing: -.02em; font-size: 17px; }

.rail-nav { display: flex; flex-direction: column; gap: 3px; }
.rail-nav button {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border: 0; border-radius: var(--r-md);
  background: none; color: var(--ink-2);
  font-size: 14px; font-weight: 600; cursor: pointer; text-align: left;
  transition: background .15s, color .15s;
}
.rail-nav button svg { width: 17px; height: 17px; flex: none; }
.rail-nav button:hover { background: var(--panel-2); color: var(--ink); }
.rail-nav button.on {
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  color: var(--ink);
}

.rail-out {
  margin-top: auto;
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px; border-radius: var(--r-md);
  color: var(--ink-3); font-size: 13px; font-weight: 600; text-decoration: none;
}
.rail-out svg { width: 15px; height: 15px; }
.rail-out:hover { background: var(--panel-2); color: var(--ink); }

/* --- header --------------------------------------------------------------- */
.page-main {
  min-width: 0;
  padding: calc(28px + env(safe-area-inset-top, 0px))
           calc(30px + env(safe-area-inset-right, 0px))
           calc(60px + env(safe-area-inset-bottom, 0px))
           30px;
}
.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; margin-bottom: 22px;
}
.page-head h1 { margin: 0; font-size: 26px; letter-spacing: -.03em; }
.page-head p { margin: 5px 0 0; color: var(--ink-3); font-size: 13.5px; max-width: 62ch; }
.page-me {
  display: flex; align-items: center; gap: 9px; flex: none;
  padding: 7px 13px 7px 7px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--panel-2);
  font-size: 13px; font-weight: 600;
}
.page-view { display: flex; flex-direction: column; gap: 16px; }

/* --- overview ------------------------------------------------------------- */
/* Four numbers, and the two that mean work sit beside the two that are only
   context -- so "3 suspended" reads as a queue rather than a statistic. */
.dash-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.dash-stat {
  display: flex; flex-direction: column; gap: 3px;
  padding: 18px 20px; border-radius: var(--r-lg);
  border: 1px solid var(--line); background: var(--panel);
}
.dash-stat b { font-size: 34px; letter-spacing: -.035em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.dash-stat span { font-size: 13px; color: var(--ink-2); font-weight: 600; }
.dash-stat em { font-style: normal; font-size: 12px; color: var(--ink-3); }
.dash-stat.needs-work { border-color: color-mix(in srgb, #F43F5E 42%, transparent); }
.dash-stat.needs-work b { color: #FB7185; }

.dash-note {
  margin: 0; padding: 16px 18px; border-radius: var(--r-lg);
  border: 1px solid var(--line); background: var(--panel-2);
  color: var(--ink-2); font-size: 13.5px; line-height: 1.6; max-width: 70ch;
}
.dash-note b { color: var(--ink); }

/* --- lists ---------------------------------------------------------------- */
.dash-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* .segmented.compact is a fixed 148px, which is right for the two-word theme
   toggle it was written for and truncates anything else. These size to their
   labels. */
#dashFilters.segmented.compact { width: auto; flex: 0 0 auto; }
#dashFilters button { flex: 0 0 auto; padding: 0 14px; height: 30px; }
.dash-tools .asearch { max-width: 340px; height: 38px; }
.dash-list {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--panel); overflow: hidden;
}
.dash-list .arow {
  border: 0; border-radius: 0; background: none;
  border-bottom: 1px solid var(--line);
  padding: 12px 16px;
}
.dash-list .arow:last-child { border-bottom: 0; }
.dash-list .arow:hover { background: var(--panel-2); }
.dash-list .arow.is-banned { border-left: 3px solid #F43F5E; }
.dash-empty { padding: 44px 20px; text-align: center; color: var(--ink-3); font-size: 14px; }
.dash-more { display: flex; justify-content: center; padding: 6px 0 0; }

@media (max-width: 860px) {
  .page-shell { grid-template-columns: 1fr; }
  .page-rail {
    position: static; height: auto; flex-direction: row; align-items: center;
    gap: 4px;
    /* The rail is the top of the page on a phone, so it is the thing that has
       to clear the clock and the camera. */
    padding: calc(10px + env(safe-area-inset-top, 0px))
             calc(12px + env(safe-area-inset-right, 0px)) 10px
             calc(12px + env(safe-area-inset-left, 0px));
    border-right: 0; border-bottom: 1px solid var(--line);
    overflow-x: auto; scrollbar-width: none;
  }
  .page-rail::-webkit-scrollbar { display: none; }
  .rail-brand { padding: 0 10px 0 2px; }
  .rail-word { display: none; }
  .rail-nav { flex-direction: row; }
  .rail-nav button { padding: 9px 12px; white-space: nowrap; }
  .rail-out { margin: 0 0 0 auto; padding: 9px 10px; }
  .rail-out span { display: none; }
  .page-main {
    padding: 18px calc(14px + env(safe-area-inset-right, 0px))
             calc(40px + env(safe-area-inset-bottom, 0px))
             calc(14px + env(safe-area-inset-left, 0px));
  }
  .page-head { flex-direction: column; gap: 12px; }
  .page-head h1 { font-size: 22px; }
  .dash-stat { padding: 15px 16px; }
  .dash-stat b { font-size: 28px; }
  /* The actions drop under the name; four columns do not fit a phone. */
  .dash-list .arow { grid-template-columns: auto minmax(0, 1fr); }
  .dash-list .arow-tags, .dash-list .arow-do { grid-column: 2; }
  .dash-list .arow-do { justify-content: flex-start; }
}

/* --- settings ------------------------------------------------------------- */
/* Four short sections, so they are laid out as one column of cards you scroll
   rather than tabs that hide three to show one. The rail scrolls to them and
   follows the scroll back. */
.setcols { gap: 16px; max-width: 780px; }
.setcols .sset.card {
  gap: 14px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel);
  scroll-margin-top: 20px;
}
.setcols .sset h3 {
  margin: 0;
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3);
}
.setcols .setrow { gap: 18px; }
.setcols .setrow + .setrow { padding-top: 14px; border-top: 1px solid var(--line); }
.setcols .btn.wide { justify-content: center; }
/* Sign out is not a setting, so it sits under a rule rather than in the run of
   them, and it is the only red on the page. */
.setcols .setrow.signout { padding-top: 16px; border-top: 1px solid var(--line); }

@media (max-width: 860px) {
  .setcols { max-width: none; }
  .setcols .sset.card { padding: 16px; }
  .setcols .setrow { flex-direction: column; align-items: flex-start; gap: 10px; }
  /* Full width, and the two options split it: a toggle where the labels sit in
     the left third and the rest is empty does not look like a pair of choices. */
  .setcols .segmented.compact { width: 100%; }
  .setcols .segmented.compact button { flex: 1; height: 34px; }
}

/* --- credits -------------------------------------------------------------- */
/* A rail entry that is a link out, and one that is where you already are. */
.raillink, .railhere {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: var(--r-md);
  font-size: 14px; font-weight: 600; text-decoration: none;
}
.raillink svg, .railhere svg { width: 17px; height: 17px; flex: none; }
.raillink { color: var(--ink-2); }
.raillink:hover { background: var(--panel-2); color: var(--ink); }
.railhere { background: color-mix(in srgb, var(--primary) 18%, transparent); color: var(--ink); }

.credits { margin: 0; display: flex; flex-direction: column; gap: 16px; }
.credits dt {
  font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-3);
}
.credits dd { margin: 4px 0 0; font-size: 14px; color: var(--ink-2); }
.credits dd b { color: var(--ink); font-weight: 650; }
.credits dd span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-3); }
.credits a { color: var(--primary); text-decoration: none; }
.credits a:hover { text-decoration: underline; }