/* Shared by every gate page. Warm off-white is the look: the OS dark setting does not change it.
   The type is Schibsted Grotesk, the same face as getacehq.com, served from this site (fonts.css).
   Three weights: 400 text, 500 controls, 600 headings. */
:root {
  color-scheme: light;
  --canvas: #f5f3ef;
  --card: #fdfcfa;
  --chrome: #ebe8e2;
  --ink: #1c1a17;
  --ink-2: #57534c;
  --ink-3: #6f6a62;
  --edge: rgb(28 26 23 / 0.14);
  --line: rgb(28 26 23 / 0.09);
  --press: rgb(28 26 23 / 0.05);
  --good: #146c2e;
  --bad: #b91c1c;
  --warn: #854d0e;
  --scrim: rgb(28 26 23 / 0.34);
  --font: "Schibsted Grotesk", "Ace Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --ease-out: cubic-bezier(0.15, 1, 0.4, 1);
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-exit: 160ms;
  --spring-snappy: linear(0, 0.094, 0.296, 0.52, 0.719, 0.87, 0.971, 1.029, 1.054, 1.058, 1.05, 1.038, 1.025, 1.014, 1.006, 1.001, 0.998, 0.997, 0.997, 0.997, 1);
  /* Depth: one system, the same as the public site. Every level is a hairline, a tight contact
     shadow and a soft ambient one. Cards and quiet buttons rest on 1, the sign-in card sits on 2,
     pop-ups float on 3. The dark button has its own pair: lifted, and pressed. */
  --hair: 0 0 0 1px rgb(16 24 40 / 0.07);
  --lift-1: var(--hair), 0 1px 2px rgb(16 24 40 / 0.06), 0 10px 24px -12px rgb(16 24 40 / 0.14);
  --lift-2: var(--hair), 0 2px 4px rgb(16 24 40 / 0.06), 0 24px 48px -20px rgb(16 24 40 / 0.22);
  --lift-3: 0 0 0 1px rgb(16 24 40 / 0.1), 0 4px 8px rgb(16 24 40 / 0.1), 0 44px 80px -32px rgb(16 24 40 / 0.42);
  --lift-btn: inset 0 1px 0 rgb(255 255 255 / 0.16), 0 1px 2px rgb(11 12 15 / 0.3), 0 8px 16px -8px rgb(11 12 15 / 0.44);
  --lift-btn-down: inset 0 1px 0 rgb(255 255 255 / 0), 0 0 1px rgb(11 12 15 / 0.3), 0 1px 2px -1px rgb(11 12 15 / 0.3);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--canvas);
  color: var(--ink);
  font: 400 15px/1.45 var(--font);
  letter-spacing: 0;
  font-synthesis: none;
  font-kerning: normal;
  font-variant-numeric: lining-nums proportional-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, p { margin: 0; }
h1 { font-size: 30px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; }
button, input { font: inherit; letter-spacing: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid rgb(28 26 23 / 0.5); outline-offset: 2px; }

input {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--edge);
  font-size: 16px; /* under 16px iOS zooms the page on focus */
  letter-spacing: 0;
  outline: none;
}
input:focus { box-shadow: inset 0 0 0 1px var(--ink); }
input::placeholder { color: var(--ink-3); }

.orb { width: 34px; height: 34px; flex: none; border-radius: 50%; display: block; }
.orb-lg { width: 68px; height: 68px; margin-bottom: 6px; }

/* A sign-in page: everything sits in the middle. */
.door, .center {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  text-align: center;
}
.door input, .center input { max-width: 280px; text-align: center; }

/* Pop-ups: centred, scale and fade, dim backdrop. Never from the bottom. */
dialog {
  width: min(400px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  margin: auto;
  padding: 22px;
  border: 0;
  border-radius: 16px;
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--lift-3);
}
dialog[open] { animation: pop-in var(--dur-base) var(--ease-out); }
dialog::backdrop { background: var(--scrim); animation: fade-in var(--dur-base) var(--ease-out); }
@keyframes pop-in { from { opacity: 0; transform: scale(0.96); } }
@keyframes fade-in { from { opacity: 0; } }
dialog h2 { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; }
dialog .row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
dialog code {
  display: block;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 9px;
  background: var(--canvas);
  font: 12px/1.55 var(--mono);
  letter-spacing: 0;
  overflow-wrap: anywhere;
  text-align: left;
  user-select: all;
  -webkit-user-select: all;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, dialog[open], dialog::backdrop { animation: none !important; transition: none !important; }
}
/* The admin dashboard: Ace Mirror's shapes and motion in the same light look as the sign-in page
   a client sees (style.css): porcelain page, white cards with a hairline, near-black ink. Light only:
   the phone's dark setting does not change it. The values are that block's, repeated here so the
   user site's CSS stays untouched. */
:root {
  color-scheme: light;
  --canvas: #f5f6f8;
  --card: #ffffff;
  --chrome: #eceef2;
  --ink: #0b0c0f;
  --ink-2: #5a6472;
  --ink-3: #5a6472;
  --edge: rgb(16 24 40 / 0.16);
  --line: rgb(16 24 40 / 0.08);
  --press: rgb(16 24 40 / 0.05);
  --good: #15803d;
  --bad: #b91c1c;
  --warn: #b45309;
  --scrim: rgb(11 12 15 / 0.42);
}
:focus-visible { outline-color: rgb(11 12 15 / 0.55); }

/* Sign-in doors: the user site's entrance, about 0.8s end to end, transform and opacity only.
   The orb draws in (orb.js winds it on), the title rises, the card settles last. Reduced motion
   turns it off (base.css), and the `from` keyframe is the only hidden state, so nothing stays
   invisible. */
.door { position: relative; isolation: isolate; overflow: hidden; gap: 16px; --orb: min(150vw, 70dvh, 640px); }
.orb-wrap { position: relative; display: inline-grid; place-items: center; margin-bottom: 8px; }
.orb-wrap .orb { margin: 0; }
.door > * { animation: door-rise 460ms var(--ease-out) both; }
.door > :is(.orb-wrap, .orb-live) { animation: orb-in 800ms var(--ease-out) both; }
.door > h1 { animation-delay: 60ms; }
.door > :is(p, input, button) { animation-delay: 140ms; }
.door > .stack { animation: card-settle 520ms var(--ease-out) 220ms both; }
@keyframes door-rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes card-settle { from { opacity: 0; transform: translateY(16px) scale(0.985); } }
@keyframes orb-in { from { opacity: 0; scale: 0.94; } }

/* A sign-in form: fields and buttons stacked, full width of a narrow column. */
.stack { display: flex; flex-direction: column; align-items: stretch; gap: 12px; width: min(280px, 100%); margin: 0; }
.stack input { max-width: none; text-align: left; }
/* The doors a person signs in through: the client page's look. Big type, one white card with
   finger-sized fields (16px type, so iPhone does not zoom the page on focus), and the orb as
   atmosphere: one large, slow, faint sphere in the empty lower half of the page, the card in
   front of its top, its foot off the bottom edge. No words sit over it. */
.door { justify-content: flex-start; padding-top: max(48px, 13dvh); }
.orb-live {
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: calc(var(--orb) * -0.14);
  width: var(--orb);
  height: var(--orb);
  margin-left: calc(var(--orb) / -2);
  opacity: 0.5;
  pointer-events: none;
}
.door h1 { font-size: 40px; font-weight: 600; letter-spacing: -0.04em; line-height: 44px; }
.door .stack {
  width: min(358px, 100%);
  margin-top: 16px;
  padding: 20px;
  border-radius: 22px;
  background: var(--card);
  box-shadow: var(--lift-2);
}
.door :is(input, .btn) { height: 50px; font-size: 16px; }
.door > input { width: min(318px, 100%); }
.door > .btn { width: min(318px, 100%); }
.door .btn { border-radius: 14px; font-weight: 500; }
.door input { border-radius: 14px; }
.door .lede { max-width: 280px; color: var(--ink-3); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon.sm { width: 14px; height: 14px; }

/* Controls: thin, 30pt, one pill shape. */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 30px;
  padding: 0 18px;
  border: 0;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), scale 160ms var(--ease-out), translate 90ms var(--ease-out), box-shadow 90ms var(--ease-out);
}
/* A 44pt tap area around a thin control. */
.btn::after { content: ""; position: absolute; inset: -7px 0; }
.btn:active { scale: 0.97; }
.btn:disabled { opacity: 0.5; cursor: default; }
/* The main button sits a little above the page and goes down when pressed. */
.btn.primary { background: var(--ink); color: var(--canvas); box-shadow: var(--lift-btn); }
.btn.primary:active { translate: 0 1px; box-shadow: var(--lift-btn-down); }
.btn.primary:disabled { box-shadow: none; }
.btn.plain, .btn.quiet { background: var(--card); color: var(--ink); box-shadow: var(--lift-1); }
/* A plain text link: the quiet option, never a heavy button. */
.btn.link { height: 24px; padding: 0; background: none; color: var(--ink-3); font-weight: 400; }
.btn.link:active { scale: 1; }
.btn.danger { background: var(--card); color: var(--bad); box-shadow: var(--lift-1); }
.btn.fill-danger { background: var(--bad); color: var(--canvas); }
.btn.more { display: flex; margin: 14px auto 0; background: var(--card); box-shadow: var(--lift-1); }

.circle {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--card);
  box-shadow: var(--lift-1);
  color: var(--ink);
  transition: scale 160ms var(--ease-out);
}
.circle:active { scale: 0.94; }

input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

.search {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 14px;
  border-radius: 9999px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--edge);
  color: var(--ink-3);
}
.search:focus-within { box-shadow: inset 0 0 0 1px var(--ink); }
.search .icon { width: 16px; height: 16px; }
.search input { height: 28px; padding: 0; background: none; box-shadow: none; color: var(--ink); }
.search input:focus { box-shadow: none; }

.err { min-height: 1.4em; color: var(--bad); font-size: 13px; }

/* Header: orb, title, summary, tabs. One per page. */
.top {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: calc(10px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
  background: var(--canvas);
}
.bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  max-width: 960px;
  margin: 0 auto;
}
#bar-detail { grid-template-columns: auto minmax(0, 1fr); }
.bar h1 { font-size: 21px; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.heading p { min-height: 1.4em; font-size: 12.5px; line-height: 1.4; letter-spacing: 0; color: var(--ink-3); } /* a sentence: this face's tabular figures widen the commas too */
.heading h1 { font-size: 19px; letter-spacing: -0.02em; }
#bar-root .tabs { grid-column: 1 / -1; grid-row: 2; }
#bar-root .circle { grid-column: 3; grid-row: 1; }

/* Tabs: a 30pt track and one pill that travels between equal cells. */
.tabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 30px;
  padding: 2px;
  border-radius: 9999px;
  background: var(--chrome);
  isolation: isolate;
}
.tab-pill {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: calc((100% - 4px) / 4);
  border-radius: 9999px;
  background: var(--card); /* the light segmented-control thumb: white on its grey track */
  box-shadow: 0 1px 2px rgb(16 24 40 / 0.12), inset 0 0 0 1px var(--line);
  transition: transform 430ms var(--spring-snappy);
  z-index: -1;
}
.tabs[data-at="1"] .tab-pill { transform: translateX(100%); }
.tabs[data-at="2"] .tab-pill { transform: translateX(200%); }
.tabs[data-at="3"] .tab-pill { transform: translateX(300%); }
.tab {
  border: 0;
  padding: 0 18px;
  background: none;
  border-radius: 9999px;
  font-size: 13px;
  letter-spacing: 0;
  line-height: 1;
  color: var(--ink-2);
  transition: color var(--dur-fast) var(--ease-out);
}
.tab[aria-selected="true"] { color: var(--ink); font-weight: 500; }

.page {
  max-width: 960px;
  margin: 0 auto;
  padding: 6px max(16px, env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.tools { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.none { padding: 24px 0; text-align: center; color: var(--ink-3); }

/* Inset grouped lists. */
.group { overflow: hidden; border-radius: 14px; background: var(--card); box-shadow: var(--lift-1); }
.group:empty { display: none; }
section h2, .day {
  padding: 0 16px 7px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-3);
}
.day { padding-top: 16px; }
.day:first-child { padding-top: 0; }
.col > section { margin-top: 20px; }
.line {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 8px 14px 8px 16px;
  border: 0;
  background: none;
  text-align: left;
  position: relative;
}
button.line { transition: background-color var(--dur-fast) var(--ease-out); }
button.line:active { background: var(--press); }
@media (hover: hover) { button.line:hover { background: var(--press); } }
.line + .line::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 16px;
  height: 1px;
  background: var(--line);
}
.line.has-avatar + .line.has-avatar::before { left: 60px; }
.body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.title, .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.title { font-size: 15px; font-weight: 500; letter-spacing: 0; line-height: 1.3; }
.sub { font-size: 12.5px; letter-spacing: 0; line-height: 1.4; color: var(--ink-3); }
.value { flex: none; max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.end { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.line .chevron { flex: none; width: 16px; height: 16px; color: var(--ink-3); }
.when { flex: none; font-size: 12.5px; letter-spacing: 0; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sentence { flex: 1; min-width: 0; font-size: 14.5px; letter-spacing: 0; line-height: 1.38; overflow-wrap: anywhere; }
.col-mac, .col-used, .cell { display: none; }

.avatar {
  position: relative;
  color: var(--ink-2);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  background: var(--chrome);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 14px;
  font-weight: 500;
}
.avatar.lg { width: 56px; height: 56px; font-size: 22px; }
.avatar .dot { position: absolute; right: -1px; bottom: -1px; box-shadow: 0 0 0 2px var(--card); }

.dot { display: inline-block; width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--ink-3); }
.dot.on { background: var(--good); }

.status {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 11px;
  border-radius: 9999px;
  font-size: 11.5px;
  letter-spacing: 0;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  color: var(--ink-2);
  background: color-mix(in srgb, var(--ink) 9%, transparent);
}
.status.active { color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); }
.status.invited { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
dialog h3 { margin-top: 14px; font-size: 13px; font-weight: 500; }
.step-mark { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.step-mark.doing { background: var(--warn); }
.step-mark.done, .step-mark.skipped { background: var(--good); }
.step-mark.failed { background: var(--bad); }
/* The owner's own row: shown so a wrong owner flag is plain to see. */
.tag {
  display: inline-flex;
  align-items: center;
  height: 18px;
  margin-left: 6px;
  padding: 0 8px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  vertical-align: 1px;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--edge);
}
.status.revoked { color: var(--bad); background: color-mix(in srgb, var(--bad) 14%, transparent); }

/* A person. */
.who { display: flex; align-items: center; gap: 12px; padding: 4px 0 14px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.actions:empty { display: none; }

.narrow { max-width: 520px; margin: 0 auto; }
.narrow section { margin-top: 6px; }

/* Pop-ups: the exit, and what admin puts inside them. */
dialog.closing { animation: pop-out var(--dur-exit) ease-in forwards; }
dialog.closing::backdrop { animation: fade-out var(--dur-exit) ease-in forwards; }
@keyframes pop-out { to { opacity: 0; transform: scale(0.98); } }
@keyframes fade-out { to { opacity: 0; } }
dialog .sub { margin-top: 5px; white-space: normal; font-size: 13.5px; letter-spacing: 0; line-height: 1.45; color: var(--ink-2); }
dialog .sub:empty { display: none; }
dialog .fields { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
dialog .err { margin-top: 6px; }
dialog .err:empty { min-height: 0; margin: 0; }
.qr { width: min(232px, 100%); margin: 14px auto 0; padding: 4px; border-radius: 10px; background: #ffffff; }
.qr svg { display: block; width: 100%; height: auto; }
.qr path { fill: #000000; }
.picker-list { max-height: min(320px, 50dvh); overflow-y: auto; margin-top: 12px; background: var(--chrome); }

.toast {
  position: fixed;
  z-index: 20;
  top: calc(12px + env(safe-area-inset-top));
  left: 50%;
  translate: -50% 0;
  max-width: calc(100vw - 32px);
  padding: 7px 14px;
  border-radius: 9999px;
  background: var(--ink);
  color: var(--canvas);
  font-size: 13px;
  letter-spacing: 0;
  animation: fade-in var(--dur-base) var(--ease-out);
}

/* Desktop: tabs join the header row, lists gain columns, a person gets two columns. */
@media (min-width: 760px) {
  .top { padding-top: 16px; padding-bottom: 14px; }
  .bar { gap: 14px; }
  #bar-root { grid-template-columns: auto auto minmax(0, 1fr) auto; }
  #bar-root .tabs { grid-column: 3; grid-row: 1; justify-self: center; width: 380px; }
  #bar-root .circle { grid-column: 4; }
  .page { padding-top: 10px; }
  .search { flex: 0 1 320px; }
  .tools { justify-content: space-between; }
  .avatar .dot { display: none; }
  .col-mac { display: flex; align-items: center; gap: 7px; width: 170px; flex: none; min-width: 0; font-size: 14px; color: var(--ink-2); }
  .col-mac span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .col-used { display: block; width: 92px; flex: none; font-size: 13px; color: var(--ink-3); }
  .end { width: 76px; }
  .end .phone { display: none; }
  .split { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 28px; align-items: start; }
  .col > section:first-child, .col > section[hidden] + section { margin-top: 0; }
  .cell { display: block; width: 160px; flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--ink-2); }
  .phone-only { display: none; }
}