/* Mensch Creative Accounts. The media library's dark palette and type, so moving
   between the two feels like one place. */
:root {
  --bg: #0d0f11;
  --surface: #14171a;
  --surface-raised: #1c2025;
  --surface-hover: #22272d;
  --border: #272d34;
  --border-strong: #363e47;
  --text: #e8eaed;
  --text-muted: #9aa3ad;
  --text-dim: #878f99;
  --accent: #3dd6c4;
  --accent-ink: #06110f;
  --danger: #e5645a;
  --ok: #4cc38a;
  --radius: 6px;
  --radius-lg: 10px;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 var(--font); }
a { color: var(--accent); }
h1 { margin: 0 0 4px; font-size: 24px; font-weight: 600; letter-spacing: -0.01em; }
h2 { margin: 28px 0 10px; font-size: 13px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }

/* The name sits centred; the account links, when there are any, at the right. */
.top { position: relative; display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 14px 20px; border-bottom: 1px solid var(--border); }
.brand { color: var(--text); text-decoration: none; }
@media (max-width: 420px) { .brand__logo { height: 14px; } }
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand__logo { display: block; height: 18px; width: auto; }
.brand__name { color: var(--text-muted); font-size: 13px; padding-left: 10px; border-left: 1px solid var(--border-strong); line-height: 18px; }
.top__nav { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 16px; font-size: 14px; }
.top__nav a { color: var(--text-muted); text-decoration: none; }
.top__nav a:hover { color: var(--text); }
.top__nav form { margin: 0; }

/* My account | People: the admin's two places, as one switch on the left. */
.place-switch { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); }
.place-switch a { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px; border-radius: 999px; color: var(--text-muted); font-size: 14px; font-weight: 500; text-decoration: none; transition: background-color 0.12s, color 0.12s; }
.place-switch a:hover { color: var(--text); background: var(--surface-hover); }
.place-switch a[aria-current="page"] { background: var(--accent); color: var(--accent-ink); }
.place-switch a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.main { padding: 40px 16px 64px; }
/* Sign-in and account pages: the card in the middle of the screen. */
.narrow .main { display: grid; place-items: center; min-height: calc(100vh - 53px); padding-top: 24px; padding-bottom: 24px; }
.card h1, .card .lead, .card > .hint { text-align: center; }
.card { width: min(440px, 100%); padding: 28px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.lead { margin: 0 0 18px; color: var(--text-muted); }
.hint { color: var(--text-dim); font-size: 13px; margin: 8px 0 0; }

.form { display: grid; gap: 12px; }
.form label { display: grid; gap: 6px; font-size: 13px; color: var(--text-muted); }
input, select, textarea {
  width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--bg); color: var(--text); font: 15px var(--font);
}
textarea { height: auto; padding: 8px 12px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0 16px;
  border: 1px solid var(--border-strong); border-radius: var(--radius); background: transparent; color: var(--text);
  font: 500 14px var(--font); cursor: pointer; text-decoration: none;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn--go { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn--go:hover { filter: brightness(1.08); color: var(--accent-ink); }
.btn--small { height: 28px; padding: 0 10px; font-size: 13px; }
.btn--danger:hover { border-color: var(--danger); color: var(--danger); }
.link { border: 0; background: none; padding: 0; color: var(--text-muted); font: 14px var(--font); cursor: pointer; }
.link:hover { color: var(--text); }

.error { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--radius); background: rgba(229, 100, 90, 0.12); color: #f4a39c; font-size: 14px; }
.ok { margin: 0 0 12px; color: var(--ok); font-size: 14px; }
.services { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.services li { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); }

/* --- admin: the People app ------------------------------------------------
   The library's Admin language: a rail on the left, quiet rows, one accent
   for what is on or chosen, hairlines, amber for reversible and red for
   irreversible. */
:root { --warn: #d9a441; --accent-dim: #1f6f67; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icon { flex-shrink: 0; }
.app .main { padding: 0; }
.shell { display: flex; min-height: calc(100vh - 53px); }
/* A centred column on wide screens (owner, 24 Sep): the lists and a
   person's card read together instead of at the far edges. */
@media (min-width: 1360px) {
  .shell { width: 100%; max-width: 1320px; margin: 0 auto; border-inline: 1px solid var(--border); }
  /* The switch and Sign out sit at the column's edges, not the window's. */
  .place-switch { left: calc((100% - 1320px) / 2 + 12px); }
  .top__nav { right: calc((100% - 1320px) / 2 + 20px); }
}

.rail { width: 208px; flex-shrink: 0; display: flex; flex-direction: column; gap: 2px; padding: 14px 10px; background: var(--surface); border-right: 1px solid var(--border); }
.rail__btn { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: var(--radius); background: none; color: var(--text-muted); font: 14px var(--font); text-align: left; cursor: pointer; transition: background 0.1s, color 0.1s; }
.rail__btn:hover { background: var(--surface-hover); color: var(--text); }
.rail__btn--on { background: var(--surface-raised); color: var(--text); font-weight: 550; }
.rail__btn--on .icon { color: var(--accent); }

.view { flex: 1; min-width: 0; display: flex; }
.view[hidden] { display: none; }
.view__list { flex: 1; min-width: 0; padding: 22px 24px 48px; }
.view__list--narrow { flex: 0 0 300px; border-right: 1px solid var(--border); }
.view__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.view__head h1 { margin: 0; font-size: 20px; }
.view--page .page { width: 100%; max-width: 1040px; padding: 22px 24px 48px; }

.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.search { flex: 1; min-width: 200px; }
.search input { height: 34px; font-size: 14px; }
.seg { display: inline-flex; padding: 2px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.seg button { height: 28px; padding: 0 12px; border: 0; border-radius: 4px; background: none; color: var(--text-muted); font: 13px var(--font); cursor: pointer; }
.seg button[aria-checked="true"] { background: var(--surface-raised); color: var(--text); }

.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.row { border-bottom: 1px solid var(--border); }
.row--compact { border: 0; }
.rows--compact { border: 0; display: grid; gap: 2px; }
.row__btn { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 8px; border: 0; background: none; color: var(--text); font: 14px var(--font); text-align: left; cursor: pointer; border-radius: var(--radius); }
.row--compact .row__btn { padding: 7px 10px; }
.row__btn:hover { background: var(--surface-hover); }
.row--on .row__btn { background: var(--surface-raised); }
.row--on .row__icon .icon { color: var(--accent); }
.row--off .row__btn { opacity: 0.55; }
.row__who { flex: 1; min-width: 0; display: grid; }
.row__name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row--compact .row__name { flex: 1; font-weight: 400; }
.row__meta { color: var(--text-dim); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__side { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }
.row__side:has(> .icon) { flex-direction: row; align-items: center; gap: 8px; color: var(--text-dim); }
.row__icon { display: inline-flex; color: var(--text-muted); }
.count { color: var(--text-dim); font-size: 12px; font-variant-numeric: tabular-nums; }
.empty { padding: 20px 8px; color: var(--text-dim); font-size: 14px; list-style: none; }

.avatar { display: inline-grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; background: var(--surface-raised); border: 1px solid var(--border-strong); color: var(--text-muted); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; }
.avatar--big { width: 44px; height: 44px; font-size: 15px; }

.pill { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px 1px 7px; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--text-muted); font-size: 12px; white-space: nowrap; }
.pill--admin, .pill--producer { color: var(--text); }
.pill--client { border-color: var(--accent-dim); }

/* One person, at the right. */
.detail { flex: 0 0 440px; max-width: 100%; border-left: 1px solid var(--border); background: var(--surface); padding: 20px 22px 40px; overflow-y: auto; max-height: calc(100vh - 53px); position: sticky; top: 0; }
.detail[hidden] { display: none; }
.detail--wide { flex: 1; border-left: 0; background: none; padding: 22px 24px 48px; max-height: none; position: static; }
.detail__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.detail__who { flex: 1; min-width: 0; }
.detail__name { height: 30px; padding: 0 6px; margin-left: -7px; border-color: transparent; background: none; font-size: 17px; font-weight: 600; }
.detail__name:hover { border-color: var(--border); }
.icon-btn { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: var(--radius); background: none; color: var(--text-muted); cursor: pointer; }
.icon-btn:hover { background: var(--surface-hover); color: var(--text); }

/* How their access connects: a small chain of nodes. */
.chain { display: grid; gap: 10px; margin: 0 0 18px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg); }
.chain__nodes { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 0; }
.chain__can { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding-top: 10px; border-top: 1px solid var(--border); }
.chain__label { margin-right: 4px; color: var(--text-dim); font-size: 12px; }
.node { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 12px; line-height: 1.3; }
.node .icon { color: var(--accent); }
.node--reach { border-color: var(--accent-dim); }
.link-line { width: 14px; height: 1px; background: var(--border-strong); flex-shrink: 0; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 999px; background: var(--surface-raised); color: var(--text-muted); font-size: 11.5px; }
.chip--none { color: var(--text-dim); }
.chip--folder { color: var(--text); font-size: 12.5px; padding: 3px 9px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 6px; }
.fact { display: grid; gap: 5px; }
.fact__label { font-size: 12px; color: var(--text-dim); }
.select { height: 34px; font-size: 14px; }

.block { margin-top: 20px; }
.block__title { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; }
.svcs { display: grid; gap: 6px; }
.svc { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 10px 12px; background: var(--bg); }
.svc--on { border-color: var(--border-strong); }
.svc__top { display: flex; align-items: center; gap: 10px; }
.svc__icon { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius); background: var(--surface-raised); color: var(--text-muted); }
.svc--on .svc__icon { color: var(--accent); }
.svc__name { flex: 1; font-size: 14px; font-weight: 500; }
.parts { display: grid; gap: 10px; margin: 10px 0 2px 38px; }
.parts--flat { gap: 2px; }
.part { margin: 0; padding: 0; border: 0; display: grid; gap: 2px; }
.part__title { display: inline-flex; align-items: center; gap: 6px; padding: 0; margin-bottom: 2px; color: var(--text-dim); font-size: 12px; }
.perm { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13.5px; color: var(--text-muted); min-height: 28px; }

.switch { position: relative; width: 32px; height: 18px; flex-shrink: 0; padding: 0; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface-raised); cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--text-muted); transition: transform 0.15s, background 0.15s; }
.switch[aria-checked="true"] { background: var(--accent-dim); border-color: var(--accent); }
.switch[aria-checked="true"]::after { transform: translateX(14px); background: var(--accent); }
.switch:disabled { opacity: 0.6; cursor: progress; }
.switch:focus-visible, .btn:focus-visible, .row__btn:focus-visible, .rail__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.actions { display: flex; flex-wrap: wrap; gap: 6px; }
.btn--danger:hover { border-color: var(--danger); color: var(--danger); }
.btn .icon { color: currentColor; }
.hint--warn { color: var(--warn); }

/* Choosing folders. */
.picker { border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--bg); padding: 8px; display: grid; gap: 6px; }
.picker input[type="search"] { height: 32px; font-size: 13.5px; }
.picker__list { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow-y: auto; }
.picker__row label { display: flex; align-items: center; gap: 8px; padding: 5px 8px 5px calc(8px + var(--depth, 0) * 16px); border-radius: var(--radius); font-size: 13.5px; cursor: pointer; }
.picker__row label:hover { background: var(--surface-hover); }
.picker__row .icon { color: var(--text-dim); }
.picker__cols summary { cursor: pointer; padding: 4px 8px; color: var(--text-muted); font-size: 13px; }
.picker__actions { display: flex; justify-content: flex-end; gap: 6px; padding-top: 4px; }

.inline-add { display: flex; gap: 6px; margin-bottom: 14px; }
.inline-add input { height: 32px; font-size: 13.5px; }

/* How access works. */
.map { display: grid; gap: 10px; margin: 18px 0 28px; }
.lane { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 0; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.lane__nodes { display: flex; flex-direction: column; gap: 6px; }
.lane__note { flex: 1; min-width: 220px; margin: 0; padding-left: 12px; color: var(--text-muted); font-size: 13.5px; }
.map__ticks { max-width: 720px; }
.ticks { display: grid; grid-template-columns: 220px 1fr; gap: 8px 16px; margin: 0; font-size: 14px; }
.ticks dt { display: flex; align-items: center; gap: 8px; color: var(--text); }
.ticks dt .icon { color: var(--accent); }
.ticks dd { margin: 0; color: var(--text-muted); }

.dialog { width: min(420px, calc(100% - 32px)); padding: 22px; border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); }
.dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
.dialog__title { margin: 0 0 4px; font-size: 17px; color: var(--text); text-transform: none; letter-spacing: 0; }
.dialog__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); max-width: min(520px, calc(100% - 32px)); padding: 10px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface-raised); color: var(--text); font-size: 14px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45); z-index: 10; }
.toast--bad { border-color: rgba(229, 100, 90, 0.6); }

.invite { margin-top: 10px; display: flex; gap: 8px; align-items: center; }
.invite input { font-family: ui-monospace, Menlo, monospace; font-size: 12px; height: 32px; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th, .table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.table th { color: var(--text-dim); font-weight: 500; font-size: 12px; }
.nowrap { white-space: nowrap; }
.mono { font-family: ui-monospace, Menlo, monospace; font-size: 12px; word-break: break-all; }
.add-service { margin-top: 20px; }
.add-service summary { cursor: pointer; color: var(--text-muted); }
.form--grid { margin-top: 12px; max-width: 560px; }
.secret { margin-top: 12px; padding: 12px; border: 1px solid var(--accent); border-radius: var(--radius); }
input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--accent); flex-shrink: 0; }

@media (max-width: 900px) {
  .shell { flex-direction: column; }
  .rail { width: auto; flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border); padding: 8px; }
  .rail__btn { white-space: nowrap; }
  .view { flex-direction: column; }
  .view__list, .view--page .page, .detail--wide { padding: 16px; }
  .view__list--narrow { flex: none; border-right: 0; border-bottom: 1px solid var(--border); }
  .detail { flex: none; border-left: 0; border-top: 1px solid var(--border); max-height: none; position: static; padding: 16px; }
  .facts { grid-template-columns: 1fr; }
  .ticks { grid-template-columns: 1fr; }
  .lane__note { padding-left: 0; }
  .inline-add { flex-wrap: wrap; }
  .row__side .row__meta { display: none; }
  .shell, .view, .view__list, .detail { min-width: 0; max-width: 100vw; }
}

@media (max-width: 700px) {
  .top { flex-direction: column; gap: 8px; }
  .top__nav, .place-switch { position: static; transform: none; }
  .card { padding: 20px; }
}
.detail--wide > .hint { margin: -4px 0 14px; max-width: 72ch; }