/* The Portal and the admin console: everything a signed-in page needs on top of styles.css, which has the tokens, the
   fonts, the buttons and forms, the public pages and the shared pieces (dialogs, toasts, the menu). Loaded by every page
   that carries the account menu (<nav data-account-nav>), and by the plans page, which shows that menu to a signed-in
   visitor. Public pages never load it, so a first visit downloads only what the front page draws. */

/* ---------- Portal pages: one width, one top margin and one heading style for every page ---------- */
.dash, .account-page, .invoice-page, .pay-page { padding-top: 40px; padding-bottom: 88px; }
.dash h1, .account-page h1, .page-head h1, .plans-page .section-head h1 { font-size: clamp(1.7rem, 3.5vw, 2.2rem); font-weight: 700; letter-spacing: -.025em; margin: 0 0 .3rem; }
.dash h2 { font-size: 1.15rem; margin-top: 2rem; }
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem 1.5rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.page-head > div { min-width: 0; }
.page-head > div > .muted { margin: 0; max-width: 62ch; font-size: .95rem; }
.crumb, .back-link { display: inline-flex; align-items: center; gap: .35rem; margin: 0 0 .9rem; font-size: .9rem; color: var(--muted); text-decoration: none; }
.crumb a { color: inherit; text-decoration: none; }
.crumb a:hover, .back-link:hover { color: var(--text); }

.orders { display: grid; gap: 1rem; margin: 1rem 0 1.5rem; }
.order { border-left: 3px solid var(--line-2); }
.order:has(.badge-active), .order:has(.badge-paid) { border-left-color: var(--ok); }
.order:has(.badge-pending) { border-left-color: var(--warn); }
.order:has(.badge-past_due), .order:has(.badge-suspended) { border-left-color: var(--bad); }
.order-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.order h3, .message h3 { font-size: 1.1rem; margin-bottom: .2rem; }
.order-note { margin-top: .6rem; }
.order-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.1rem; }
.details {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .8rem 1rem; margin: 1rem 0 0;
  white-space: pre-wrap; word-break: break-word; font: .85rem/1.55 var(--mono);
}

.message.handled { opacity: .55; }
.msg-body { margin: 1rem 0 0; white-space: pre-wrap; word-break: break-word; }
.check { display: flex; align-items: center; gap: .4rem; color: var(--muted); font-size: .88rem; cursor: pointer; }
.new-plan { margin-top: 1rem; }
.new-plan h3 { font-size: 1.05rem; }
.new-plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .75rem; }
.new-plan-grid input, .new-plan-grid select { width: 100%; }

/* ---------- Admin: overview, search and tables ---------- */
/* The admin's sections: pills in small groups (Work, Billing, Infrastructure, Catalog, Business) with an icon each, in one card.
   A red count sits on any section with work waiting. */
.admin-nav { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; margin: 0 0 1.75rem; padding: .7rem .85rem .8rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.admin-group { display: grid; gap: .3rem; align-content: start; }
.admin-group[hidden] { display: none; }
.admin-group .acct-group { display: block; padding: 0 .4rem; }
.admin-group > div { display: flex; flex-wrap: wrap; gap: .3rem; }
.admin-tab { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .8rem; border: 1px solid transparent; border-radius: 999px; background: none; color: var(--muted); font: 500 .88rem var(--sans); white-space: nowrap; cursor: pointer; transition: background .15s, color .15s; }
.admin-tab[hidden] { display: none; }
.admin-tab:hover { color: var(--text); background: var(--raised); }
.admin-tab.active { background: var(--raised); border-color: var(--line-2); color: var(--text); font-weight: 600; }
.admin-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.admin-ico { width: 16px; height: 16px; flex: none; }
.admin-tab .tab-badge { margin-left: .1rem; }
/* "Live · checked 12:04" in the page head: the page refreshes its counts by itself */
.admin-live { display: inline-flex; align-items: center; gap: .45rem; margin-right: .25rem; font: 500 .78rem var(--mono); color: var(--muted); }
.admin-live::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); animation: srv-pulse 1.6s ease-in-out infinite; }
.admin-live[hidden] { display: none; }
/* The overview's "latest" panels: the newest tickets and orders, each row opening the thing itself. */
.admin-latest { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 1rem; margin-top: 1.5rem; }
.admin-latest .box { margin-bottom: 0; }
.latest-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; width: 100%; padding: .7rem 1.35rem; border: 0; border-top: 1px solid var(--line); background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: background .15s; }
.latest-row:hover { background: var(--raised); }
.latest-row > span:first-child { min-width: 0; }
.latest-row strong { display: block; font-weight: 600; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.latest-row small { display: block; color: var(--muted); font-size: .8rem; }
.latest-row .badge { flex: none; }
.tab-badge {
  display: inline-block; min-width: 18px; margin-left: .45rem; padding: 0 5px; border-radius: 9px;
  background: var(--bad); color: var(--on-bad); font: 600 .7rem var(--mono); line-height: 18px; text-align: center; vertical-align: middle;
}

.todo-list { display: grid; gap: .6rem; margin-bottom: 2rem; }
.todo {
  display: flex; align-items: center; gap: .9rem; width: 100%; text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm); padding: .85rem 1.1rem; color: var(--text); font-size: .98rem;
  transition: border-color .15s, background .15s;
}
.todo:hover { background: var(--raised); border-color: var(--line-2); border-left-color: var(--accent); }
.todo-n { min-width: 2rem; font: 700 1.3rem var(--sans); color: var(--accent-text); }
.todo-go { margin-left: auto; color: var(--muted); }
.all-clear { color: var(--ok); font-weight: 500; margin-bottom: 2rem; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 1rem; margin-bottom: 2.5rem; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.25rem; min-width: 0; }
/* Phones: two small tiles side by side instead of a tall stack; a last odd one spans the row. */
@media (max-width: 560px) {
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
  .stat-grid > .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .stat-grid .stat { padding: .85rem .95rem; }
  .stat-grid .stat-value { font-size: 1.4rem; }
}
.stat-label { margin: 0 0 .4rem; }
.stat-value { margin: 0; font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.stat-note { margin: .3rem 0 0; font-size: .82rem; color: var(--muted); }
.stat-good .stat-value { color: var(--ok); }
.stat-warn .stat-value { color: var(--warn); }

.admin-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-bottom: 1rem; }
.admin-search { flex: 1 1 260px; min-width: 0; }
.result-count { font: .8rem var(--mono); color: var(--muted); margin-left: auto; white-space: nowrap; }
.chips-row { display: flex; flex-wrap: wrap; gap: .4rem; }
.field-label { margin: 0 0 .25rem; }
.field-label:not(:first-child) { margin-top: .5rem; }
.status-help { margin: .35rem 0 0; font-size: .78rem; max-width: 22ch; }
.ok-text { color: var(--ok); }
.warn-text { color: var(--warn); }
@keyframes rowflash { from { background: color-mix(in srgb, var(--accent) 22%, transparent); } }
.row-flash td { animation: rowflash 2s ease-out; }

.customer-view .page-head { margin: .5rem 0 1.5rem; }
.customer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.customer-grid .card { padding: 1.25rem; }
.customer-view .customer-grid h3 { font-size: 1rem; margin: 0 0 .75rem; }
.customer-view h3 { margin-top: 2rem; }
.customer-view .details { margin: 0; }

/* .empty-state is defined once, in the design-system section below. */

/* ---------- Invoice document ---------- */
.invoice-page { max-width: 868px; }
.inv-actions { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.invoice-doc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 2.5rem; }
.inv-top { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.inv-top p { margin: 0 0 .15rem; }
.inv-brand { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; margin-bottom: .4rem !important; }
.inv-brand .logo-img { height: 32px; }
/* An invoice is printed on white paper whatever the screen theme: always the dark-on-light logo. */
@media print { .inv-brand .logo-dark { display: none !important; } .inv-brand .logo-light { display: block !important; } }
.inv-head-right { text-align: right; }
.inv-head-right h1 { font-size: 1.9rem; margin: 0 0 .1rem; }
.inv-number { font: .9rem var(--mono); color: var(--muted); margin-bottom: .5rem !important; }
.inv-parties { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-bottom: 2rem; }
.inv-label { margin-bottom: .4rem !important; }
.inv-party p { margin: 0 0 .15rem; font-size: .95rem; }
.inv-meta { min-width: 240px; }
.inv-meta-row { display: flex; justify-content: space-between; gap: 1.5rem; padding: .3rem 0; font-size: .9rem; }
.inv-meta-row span { color: var(--muted); }
.inv-table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
.inv-table th, .inv-table td { text-align: left; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.inv-table thead th { font: 500 .72rem var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }.inv-table .right { text-align: right; }
.inv-table tfoot th { border-bottom: 0; border-top: 2px solid var(--line-2); font-size: 1rem; padding-top: 1rem; }
.inv-total { font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; }
.inv-note { padding: .7rem 1rem; background: var(--raised); border-radius: var(--radius-sm); font-size: .9rem; }
.inv-foot { margin: 2rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: .85rem; color: var(--muted); }

@media print {
  .no-print, .nav { display: none !important; }
  body { background: #fff; }
  .invoice-page { padding: 0; max-width: none; }
  .invoice-doc { border: 0; padding: 0; background: #fff; }
  .invoice-doc, .invoice-doc * { color: #000 !important; }
  .inv-brand span, .inv-label, .inv-meta-row span, .muted { color: #555 !important; }
  .badge { border-color: #999 !important; }
}

@media (max-width: 720px) {
  .invoice-doc { padding: 1.5rem; }
  .inv-head-right { text-align: left; }
  .inv-parties, .inv-top { gap: 1.5rem; }
  .result-count { margin-left: 0; }
  #view .table { min-width: 720px; }
}

/* ---------- Payment picker ---------- *//* The amount box on the development-only test payment page. */
.pay-summary { display: flex; justify-content: space-between; gap: 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1rem 1.2rem; margin: 1.25rem 0 0; background: var(--bg); }
.pay-summary p { margin: 0; }
.pay-amount { font-size: 1.7rem; font-weight: 600; letter-spacing: -.02em; }
/* The checkout: a header card like the service page's, the steps to pay on the left (take something off, decide about next
   month, pay), and what is being paid for on an Ink card beside them, like the Dashboard's "Due now". */
.pay-hero .kicker { margin-bottom: .25rem; }
.pay-hero h1 { margin-bottom: .2rem; }
.pay-step { padding: 1.35rem; }
.pay-step + .pay-step { border-top: 1px solid var(--line); }
.pay-step-label { margin: 0 0 .35rem; font: 500 .72rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pay-step-head { display: flex; justify-content: space-between; align-items: flex-end; gap: .5rem 1rem; flex-wrap: wrap; margin-bottom: .9rem; }
.pay-step h2 { margin: 0; font-size: 1.05rem; }
/* "Powered by Stripe" beside the payment heading. The wordmark is Stripe's own file (public/stripe.svg), unaltered, drawn through
   a mask so it takes the text colour of whichever theme is showing (Stripe allows its mark in one dark or one light colour). */
.stripe-badge { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .7rem; border: 1px solid var(--line-2); border-radius: 999px; font: 500 .72rem/1.4 var(--mono); color: var(--muted); white-space: nowrap; }
.stripe-mark { width: 2.7rem; aspect-ratio: 360 / 150; background: var(--text); -webkit-mask: url(/stripe.svg) center / contain no-repeat; mask: url(/stripe.svg) center / contain no-repeat; }
.pay-step > :last-child { margin-bottom: 0; }
/* A row in a step: an icon tile, what it is, and its one action at the end. A way to pay is the same row as a button. */
.pay-row, .method { display: flex; align-items: center; gap: .6rem .85rem; flex-wrap: wrap; padding: .8rem 1rem; border: 1px solid var(--line-2); border-radius: var(--radius-btn); background: var(--bg); }
.pay-row .svc-ico, .method .svc-ico { width: 40px; height: 40px; border-radius: 10px; }
.pay-row .svc-ico svg, .method .svc-ico svg { width: 20px; height: 20px; }
.pay-row-text, .method-text { display: grid; gap: .1rem; flex: 1 1 12rem; min-width: 0; }
.pay-row-text strong, .method-text strong { font-size: .95rem; font-weight: 600; }
.pay-row-text span, .method-text span { color: var(--muted); font-size: .86rem; line-height: 1.45; }
.pay-row > .btn, .method > .btn { flex: none; }
/* Applied: the row turns green and its icon becomes a tick. */
.pay-row.on { border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: color-mix(in srgb, var(--ok) 8%, transparent); }
.pay-row.on .svc-ico, .pay-done .svc-ico.on { background: var(--ok); color: var(--bg); font-weight: 700; } /* the page ground on status green: 5:1 or better in both themes */
.promo-code { font-family: var(--mono); letter-spacing: .05em; color: var(--ok); }
.promo-box { display: grid; gap: .55rem; }
.promo-box + .promo-box { margin-top: .6rem; }
.promo-form-row { display: flex; gap: .5rem; }
.promo-form-row[hidden] { display: none; }
.promo-form-row input { flex: 1; min-width: 0; font: 500 .95rem var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.promo-form-row input::placeholder { font-family: var(--sans); font-weight: 400; letter-spacing: 0; text-transform: none; }
.promo-form-row .btn { flex: none; }
.promo-status:empty { display: none; }
/* "Pay automatically every month": a bordered option, lit up in the accent colour once ticked. */
.autopay-row { display: flex; align-items: flex-start; gap: .75rem; padding: .85rem 1rem; border: 1px solid var(--line-2); border-radius: var(--radius-btn); background: var(--bg); cursor: pointer; }
.autopay-row:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--bg)); }
.autopay-row input { width: 1.1rem; height: 1.1rem; margin: .15rem 0 0; flex: none; }
.autopay-row strong { display: block; font-size: .95rem; }
.autopay-row small { display: block; margin-top: .2rem; color: var(--muted); font-size: .84rem; line-height: 1.5; }
.autopay-note { margin: 0; font-size: .9rem; }
.methods { display: grid; gap: .6rem; margin-bottom: .9rem; }
.method { width: 100%; text-align: left; cursor: pointer; color: var(--text); font: inherit; transition: border-color .15s, background .15s; }
.method:hover:not(:disabled) { border-color: var(--accent); background: var(--raised); }
.method:disabled { opacity: .5; cursor: not-allowed; }
.method-test { border-style: dashed; }
.method-test strong::after { content: "TEST"; margin-left: .6rem; padding: .05rem .4rem; border: 1px solid var(--warn); border-radius: 4px; font: 500 .68rem var(--mono); color: var(--warn); vertical-align: middle; }
.pay-trust { display: flex; align-items: flex-start; gap: .5rem; margin: 0; }
.pay-trust svg { flex: none; width: 16px; height: 16px; margin-top: .15rem; }
.pay-trust + .pay-trust { margin-top: .6rem; }
.pay-step .form-status:not(:empty) { margin-bottom: .6rem; }
@media (max-width: 560px) { .pay-row > .btn, .method > .btn { flex: 1 1 100%; } }
/* The order summary. */
.pay-desc { margin: 0 0 1rem !important; font-weight: 600; line-height: 1.45; }
.pay-lines { display: grid; gap: .6rem; margin: 0 0 .9rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.pay-lines div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: .92rem; }
.pay-lines dt { color: var(--muted); }
.pay-lines dd { margin: 0; font-weight: 600; }
.pay-saving dd { color: var(--ok); }
.pay-tax dd { color: var(--muted); font-weight: 400; }
.pay-total { padding-top: .75rem; border-top: 1px solid var(--line); }
.pay-total dt { color: var(--text); font-weight: 600; }
.pay-total dd { font-size: 2rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
/* Nothing to pay here (already paid, not found): one centred card with an icon, what happened and where to go next. */
.pay-done { text-align: center; }
.pay-done .svc-ico { width: 52px; height: 52px; margin: 0 auto 1rem; font-size: 1.3rem; }
.pay-done-actions { display: flex; justify-content: center; gap: .6rem; flex-wrap: wrap; margin: 0; }

/* ---------- Support tickets and chat ---------- */
.nav-badge {
  display: inline-block; min-width: 18px; margin-left: .4rem; padding: 0 5px; border-radius: 9px;
  background: var(--accent); color: var(--accent-fg); font: 600 .7rem var(--mono); line-height: 18px; text-align: center; vertical-align: middle;
}
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.new-ticket { margin: 1rem 0 1.5rem; padding: 1.5rem; }
.new-ticket h2 { margin: 0 0 1rem; font-size: 1.15rem; }
.new-ticket .hint { margin: 0; }

.ticket-list { display: grid; gap: .6rem; margin: 1rem 0; }
/* One ticket: what it is about on an icon tile, the subject, a line of the last message and its details, and its state. */
.ticket-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .9rem; min-width: 0; padding: 1rem 1.1rem;
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--line-2); border-radius: var(--radius);
  color: var(--text); text-decoration: none; transition: border-color .15s, background .15s;
}
.ticket-row[hidden] { display: none; }
.ticket-row:hover { background: var(--raised); border-color: var(--line-2); }
.ticket-row.unread { border-left-color: var(--accent); }
.ticket-row.is-closed { opacity: .75; }
.ticket-row.is-closed .ticket-ico { background: var(--raised); color: var(--muted); }
.ticket-ico { width: 40px; height: 40px; border-radius: 10px; align-self: start; }
.ticket-ico svg { width: 20px; height: 20px; }
.ticket-row .badge { justify-self: end; }
.ticket-main { min-width: 0; }
.box-head .svc-filters { flex: none; }
@media (max-width: 560px) {
  .ticket-row { grid-template-columns: auto minmax(0, 1fr); }
  .ticket-row .badge { grid-column: 2; justify-self: start; }
  .ticket-preview { max-width: none; }
}
.ticket-title { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; font-weight: 600; }
.ticket-preview { margin: .15rem 0; max-width: 62ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: .9rem; font-weight: 400; }
.ticket-meta { margin-top: .2rem; }
.new-dot { display: inline-block; padding: 0 .5rem; border-radius: 999px; background: var(--accent); color: var(--accent-fg); font: 600 .7rem var(--mono); line-height: 1.7; }
.badge-ticket-open { --tone: var(--warn); }
.badge-ticket-answered { --tone: var(--ok); }
.badge-ticket-closed { --tone: var(--muted); }
.badge-priority-low { --tone: var(--muted); }
.badge-priority-high { --tone: var(--warn); }
.badge-priority-urgent { --tone: var(--bad); }

.ticket-page h1 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
.chat { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.chat-log-wrap { position: relative; }
/* As tall as the conversation (up to a cap, then it scrolls), so a new ticket is not a big empty box. */
.chat-log { display: flex; flex-direction: column; gap: .8rem; max-height: min(62vh, 620px); min-height: 200px; overflow-y: auto; padding: 1.1rem; }
.chat-day { margin: .3rem 0; text-align: center; font: 500 .72rem var(--mono); color: var(--muted); }
.chat-day span { padding: .15rem .7rem; border-radius: 999px; background: var(--raised); }
.chat-system { text-align: center; font-size: .8rem; color: var(--muted); }
.chat-msg { display: flex; flex-direction: column; max-width: min(80%, 620px); }
.chat-msg.mine { align-self: flex-end; align-items: flex-end; }
.chat-msg.theirs { align-self: flex-start; align-items: flex-start; }
.chat-meta { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .2rem; font-size: .75rem; color: var(--muted); }
.chat-who { font-weight: 600; color: var(--text); }
.chat-role { padding: 0 .3rem; border: 1px solid var(--line-2); border-radius: 4px; font: 500 .62rem var(--mono); text-transform: uppercase; }
.chat-bubble { max-width: 100%; padding: .65rem .9rem; border: 1px solid var(--line-2); border-radius: 14px; background: var(--raised); overflow-wrap: anywhere; }
.mine .chat-bubble { border-bottom-right-radius: 4px; border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.theirs .chat-bubble { border-bottom-left-radius: 4px; }
.chat-text { line-height: 1.5; white-space: pre-wrap; }
.chat-text a { color: var(--accent-text); text-underline-offset: 2px; }
.chat-msg.internal .chat-bubble { border-style: dashed; border-color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, var(--surface)); }
.chat-internal-tag { margin-bottom: .3rem; font: 600 .68rem var(--mono); color: var(--warn); text-transform: uppercase; }
.chat-images { display: flex; flex-wrap: wrap; gap: .5rem; }
.chat-text + .chat-images { margin-top: .5rem; }
.chat-thumb { padding: 0; overflow: hidden; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg); line-height: 0; cursor: zoom-in; }
.chat-thumb:hover { border-color: var(--accent); }
.chat-thumb img { display: block; max-width: 220px; max-height: 160px; object-fit: cover; }
.chat-seen { min-height: 0; margin-top: .15rem; font-size: .7rem; color: var(--muted); }
.chat-jump {
  position: absolute; left: 50%; bottom: .75rem; transform: translateX(-50%); padding: .35rem .9rem; border: 0; border-radius: 999px;
  background: var(--accent); color: var(--accent-fg); font: 600 .8rem var(--sans); box-shadow: var(--shadow); cursor: pointer;
}
.chat-jump[hidden] { display: none; }

.chat-composer { padding: .85rem 1rem 1rem; border-top: 1px solid var(--line); background: var(--surface); }
.chat-composer.dropping { outline: 2px dashed var(--accent); outline-offset: -6px; }
.chat-input { display: block; width: 100%; max-height: 200px; resize: none; line-height: 1.5; }
.chat-tools { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; margin-top: .6rem; }
.chat-hint { flex: 1; min-width: 180px; font-size: .75rem; color: var(--muted); }
.chat-status { min-height: 1.2em; margin: .4rem 0 0; font-size: .85rem; color: var(--bad); }
.chat-closed { margin: 0 0 .6rem; padding: .5rem .8rem; border-radius: var(--radius-sm); background: var(--raised); font-size: .85rem; color: var(--muted); }
.chat-closed[hidden] { display: none; }
.chat-note-toggle { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; font-size: .85rem; color: var(--warn); }
.chat-previews { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.chat-previews:empty { display: none; }
.chat-chip { display: flex; align-items: center; gap: .5rem; max-width: 240px; padding: .25rem .35rem .25rem .25rem; border: 1px solid var(--line-2); border-radius: 8px; background: var(--raised); font-size: .8rem; }
.chat-chip.uploading { opacity: .7; }
.chat-chip img { width: 36px; height: 36px; border-radius: 5px; object-fit: cover; }
.chat-chip-wait { display: grid; place-items: center; width: 36px; height: 36px; color: var(--muted); }
.chat-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-chip-x { padding: 0 .3rem; border: 0; background: none; color: var(--muted); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.chat-chip-x:hover { color: var(--bad); }

.lightbox { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 1rem; background: rgba(0, 0, 0, .88); }
.lightbox img { max-width: 96vw; max-height: 80vh; border-radius: 8px; object-fit: contain; cursor: zoom-out; }
.lightbox-bar { display: flex; align-items: center; gap: .6rem; width: min(96vw, 900px); }
.lightbox-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; }

.ticket-admin .page-head h2 { margin: 0 0 .2rem; }
.ticket-admin-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.25rem; align-items: start; }
.ticket-admin .chat-log { height: min(62vh, 640px); }
.ticket-side { display: grid; gap: 1rem; }
.ticket-side .card { padding: 1rem 1.1rem; }
.ticket-side h3 { margin: 0 0 .6rem; font-size: .95rem; }
.ticket-side p { margin: 0 0 .5rem; }
.side-field { display: grid; gap: .25rem; margin-bottom: .6rem; font: 500 .72rem var(--mono); color: var(--muted); }
.side-field select { width: 100%; padding: .4rem .5rem; font: .9rem var(--sans); }
.event-log { max-height: 260px; margin: 0; padding: 0; overflow: auto; list-style: none; font-size: .78rem; }
.event-log li { padding: .4rem 0; border-bottom: 1px solid var(--line); }
.event-when { display: block; font: .7rem var(--mono); color: var(--muted); }
.other-tickets { margin: 0; padding: 0; list-style: none; font-size: .85rem; }
.other-tickets li { padding: .2rem 0; }
.row-unread td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

@media (max-width: 900px) {
  .ticket-admin-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .two-col { grid-template-columns: 1fr; }
  .ticket-row { flex-direction: column; align-items: flex-start; }
  .chat-msg { max-width: 92%; }
  .chat-log { max-height: min(60vh, 520px); padding: .8rem; }
}

/* ---------- Team and roles ---------- */
.badge-role-admin { --tone: var(--accent-text); }
.badge-role-support { --tone: var(--ok); }
.badge-role-billing { --tone: var(--warn); }
.badge-role-technician { --tone: var(--info); }
.role-guide { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.role-card { padding: 1rem 1.1rem; }
.role-card h3 { margin: 0 0 .5rem; font-size: 1rem; }
.role-card p { margin: 0; line-height: 1.5; }
.add-team { margin: 1.25rem 0 2rem; padding: 1.25rem; }
.add-team h3 { margin: 0 0 .4rem; font-size: 1rem; }
.add-team p { margin: 0 0 1rem; }
.add-team-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.add-team-row input { flex: 1 1 260px; min-width: 0; }
.add-team-row select, .customer-view .page-head select, .table select { padding: .45rem .6rem; }

/* ---------- Admin: the avatar maker and the footer maker (js/avatars.js) ----------
   The controls beside one big preview. Avatars then has the whole team as a grid of cards. */
.av-lede { max-width: 72ch; margin: 0 0 1.25rem; font-size: .95rem; }
.avatars > .sec-title:not(:first-child) { margin-top: 2.5rem; }
.avatars .sec-title { align-items: center; }
.av-maker { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1.5rem; align-items: start; scroll-margin-top: 1rem; }
.av-maker > .box { margin: 0; }
.av-maker .box-head h2 { margin: 0; }
/* The footer is twice as wide as it is tall, so its preview gets the room and its form the narrow side. */
.av-maker-wide { grid-template-columns: minmax(0, 430px) minmax(0, 1fr); }
/* Its form is much taller than its picture, so the picture stays in view while the form is scrolled. */
.av-maker-wide > section { position: sticky; top: 1rem; }
.av-footer { display: block; width: 100%; height: auto; aspect-ratio: 1800 / 904; border: 1px solid var(--line); border-radius: var(--radius-sm); }
/* The background pills can run onto a second row in the narrow form, where a fully round end would look pinched. */
.avatars .svc-filters { border-radius: 22px; }
/* The footer's designs to choose from: a small picture of each with its name, the chosen one outlined in the accent colour. */
.av-designs { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .5rem; width: 100%; }
.av-design { display: grid; gap: .3rem; min-width: 0; padding: .3rem .3rem .4rem; border: 1.5px solid var(--line-2); border-radius: var(--radius-btn); background: var(--bg); color: var(--muted); font: 500 .78rem var(--sans); text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.av-design canvas { display: block; width: 100%; height: auto; border-radius: 4px; }
.av-design:hover { border-color: var(--muted); }
.av-design[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--bg)); color: var(--text); font-weight: 600; }
.av-design:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.av-field { display: grid; gap: .45rem; justify-items: start; }
.av-label { font-size: .86rem; font-weight: 500; }
.av-swatch { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--line-2); }
.av-stepper { display: flex; align-items: center; gap: .5rem; }
.av-stepper output { min-width: 4rem; text-align: center; font: .95rem var(--mono); font-variant-numeric: tabular-nums; }
.av-stepper .btn { min-width: 36px; padding-inline: 0; font-size: 1.2rem; line-height: 1; }
.av-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1rem; width: 100%; margin: 0; padding: .7rem 1rem .8rem; border: 1px solid var(--line-2); border-radius: var(--radius-btn); }
.av-checks legend { padding: 0 .4rem; font: 500 .72rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.av-checks .check-row { align-items: center; }
.av-checks .check-row input { margin: 0; }
.av-stage { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem; align-items: center; }
.av-big { display: block; width: 100%; max-width: 420px; height: auto; aspect-ratio: 1; border-radius: var(--radius); }
.av-sizes { display: grid; gap: 1rem; justify-items: center; }
.av-sizes figure { display: grid; gap: .35rem; justify-items: center; margin: 0; }
.av-sizes canvas { display: block; border-radius: 50%; }
.av-sizes figcaption, .av-meta { font: .75rem var(--mono); color: var(--muted); }
.av-meta { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin: 1.25rem 0 0; overflow-wrap: anywhere; }
.av-meta b { color: var(--text); font-weight: 500; }
.av-discord { display: grid; gap: .75rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.av-discord .av-dcard { max-width: 420px; }
.av-team { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.av-list { display: grid; gap: .45rem; font-size: .86rem; font-weight: 500; }
.av-list textarea { width: 100%; min-height: 180px; resize: vertical; font: .875rem/1.6 var(--mono); white-space: pre; overflow: auto; } /* one person stays on one line */
.av-list code { font: .78rem var(--mono); overflow-wrap: anywhere; }
.av-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.av-empty { grid-column: 1 / -1; margin: 0; padding: 1.5rem; border: 1px dashed var(--line-2); border-radius: var(--radius); color: var(--muted); font-size: .92rem; }
.av-card { min-width: 0; padding: 0; border: 0; border-radius: 14px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.av-card:hover .av-dcard { outline: 2px solid var(--muted); outline-offset: 2px; }
.av-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* A mock of a Discord profile. These are Discord's own dark profile-card colours, not ours, so the mock looks the same in both themes. */
.av-dcard { display: block; overflow: hidden; border-radius: 14px; background: #232428; color: #f2f3f5; }
.av-dbanner { display: block; width: 100%; height: auto; aspect-ratio: 17 / 6; }
.av-dbody { display: block; position: relative; padding: 0 16px 16px; }
.av-dav { display: block; box-sizing: content-box; width: 26%; aspect-ratio: 1; margin: -13% 0 0 -6px; border: 6px solid #232428; border-radius: 50%; background: #232428; }
.av-dav canvas { display: block; width: 100%; height: 100%; border-radius: 50%; }
.av-dname { display: block; margin-top: 10px; font-size: 1.1rem; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.av-dtag { display: block; font: .75rem var(--mono); color: #b5bac1; }
.av-card .av-dname { margin-top: 6px; font-size: .95rem; }
.av-card .av-dbody { padding: 0 12px 12px; }
.av-card .av-dav { margin-left: -4px; border-width: 4px; }
@media (max-width: 900px) { .av-maker, .av-team { grid-template-columns: minmax(0, 1fr); } .av-maker-wide > section { position: static; } }
@media (max-width: 520px) { .av-stage { grid-template-columns: minmax(0, 1fr); } .av-sizes { grid-auto-flow: column; justify-content: start; align-items: end; } }

/* ---------- Account page ---------- */
/* Who this is: the Dashboard's Ink welcome card (.dash-hero), with a large avatar, the name and email, and a chip for each
   thing that is set up or still to do. */
.acct-hero { gap: 1.25rem 2rem; }
.acct-hero-id { display: flex; align-items: center; gap: 1.1rem; flex: 1 1 320px; }
.acct-hero .avatar { width: 64px; height: 64px; font-size: 1.5rem; background: color-mix(in srgb, var(--accent) 22%, var(--raised)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); }
.acct-hero .kicker { margin-bottom: .2rem; }
.acct-hero h1 { margin: 0 0 .3rem; font-size: clamp(1.4rem, 3vw, 1.85rem); letter-spacing: -.02em; }
.acct-hero-mail { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; margin: 0; color: var(--muted); font-size: .92rem; overflow-wrap: anywhere; }
.acct-hero-since { flex-basis: 100%; font: 400 .78rem/1.4 var(--mono); }
.acct-chips { display: flex; flex-wrap: wrap; gap: .5rem; max-width: 420px; justify-content: flex-end; }
.acct-chip { --tone: var(--muted); display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .85rem; border: 1px solid var(--line-2); border-radius: 999px; background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--text); font-size: .82rem; font-weight: 500; text-decoration: none; transition: border-color .15s; }
.acct-chip::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--tone); }
.acct-chip.is-good { --tone: var(--ok); }
.acct-chip.is-todo { --tone: var(--warn); border-color: color-mix(in srgb, var(--warn) 50%, var(--line-2)); }
.acct-chip:hover { border-color: var(--accent); }

/* The sections menu beside the open section: a card of grouped links, like the Portal's side menu. */
.acct-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.acct-nav { position: sticky; top: 84px; display: grid; gap: 2px; padding: .5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.acct-group { margin: 0; padding: .85rem .75rem .4rem; font: 500 .68rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.acct-group:first-child { padding-top: .45rem; }
.acct-tab {
  position: relative; display: flex; align-items: center; gap: .65rem; padding: .55rem .75rem; border-radius: var(--radius-btn);
  color: var(--muted); font-size: .92rem; font-weight: 500; text-decoration: none; transition: background .15s, color .15s;
}
.acct-ico { width: 18px; height: 18px; flex: none; }
.acct-tab:hover { background: var(--raised); color: var(--text); }
.acct-tab[aria-current="page"] { background: var(--raised); color: var(--text); font-weight: 600; }
.acct-tab[aria-current="page"]::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.acct-dot { width: 8px; height: 8px; margin-left: auto; border-radius: 50%; background: var(--warn); flex: none; }
.acct-logout { width: 100%; margin-top: .5rem; padding-top: .85rem; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; font-family: inherit; text-align: left; cursor: pointer; }
.acct-logout:hover { background: none; color: var(--bad); }
.acct-panel { display: grid; gap: 1.25rem; min-width: 0; }
/* Two short cards side by side (Profile and Appearance). */
.acct-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 1.25rem; align-items: start; }
.acct-card { padding: 1.6rem 1.75rem; }
.acct-card h2 { margin: 0 0 .35rem; font-size: 1.2rem; }
.acct-intro { margin: 0 0 1.25rem; line-height: 1.55; }
.acct-sub { margin: 1.5rem 0 .75rem; font-size: 1rem; }
.acct-meta { margin: 1.25rem 0 0; }
.acct-form { max-width: 460px; }
.acct-form.inline { margin-top: 1rem; }
.acct-card .field-grid { max-width: none; margin-top: 0; }
.acct-current { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin: 0 0 1rem; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); }
.acct-current p { margin: .2rem 0 0; }
.btn-danger { background: var(--bad); border-color: var(--bad); color: var(--on-bad); }
/* towards the text colour, so the hover moves away from its label on both themes */
.btn-danger:hover { background: color-mix(in srgb, var(--bad) 85%, var(--text)); border-color: color-mix(in srgb, var(--bad) 85%, var(--text)); }
.danger-zone { border-color: color-mix(in srgb, var(--bad) 55%, var(--line)); }
.danger-zone h2 { color: var(--bad); }
.checklist { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0 0 1.25rem; padding: 0; list-style: none; font-size: .92rem; color: var(--muted); }
.checklist li::before { content: '○ '; }
.checklist li.done { color: var(--ok); }
.checklist li.done::before { content: ''; }

@media (max-width: 800px) {
  .acct-layout { grid-template-columns: 1fr; gap: 1.25rem; }
  /* the menu becomes one row of pills that scrolls sideways */
  .acct-nav { position: static; display: flex; overflow-x: auto; gap: .35rem; padding: .4rem; border-radius: 999px; scrollbar-width: none; }
  .acct-group { display: none; }
  .acct-tab { flex: none; border-radius: 999px; white-space: nowrap; }
  .acct-tab[aria-current="page"]::before { display: none; }
  .acct-logout { width: auto; margin: 0; padding-top: .55rem; border: 0; }
  .acct-card .field-grid { grid-template-columns: 1fr; }
  .acct-hero .avatar { width: 52px; height: 52px; font-size: 1.2rem; }
  .acct-chips { max-width: none; justify-content: flex-start; }
}

/* ---- promo codes ---- */
.badge-promo-on { --tone: var(--ok); }
.badge-promo-off { --tone: var(--muted); }

/* ---- promo codes tab: the list and the form are two panels of one design ---- */
.promo-page { display: grid; gap: 1.5rem; }
/* .box, .box-head and .box-body are defined once, in the design-system section below. */
.promo-usage:empty { display: none; }
.promo-usage { margin: 0; padding: 1.1rem 1.35rem 1.35rem; border-top: 1px solid var(--line); }
.promo-usage-title { margin: 0 0 .75rem; font-size: .95rem; }
.promo-usage .table-wrap { border: 1px solid var(--line); border-radius: var(--radius-sm); }

.promo-create-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.5rem 2.25rem; align-items: start; }
.promo-col { display: grid; gap: 1.35rem; }
.promo-aside { padding: 1.15rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); }
.promo-field { display: grid; gap: .5rem; }
.promo-field > label, .promo-label { font-size: .85rem; font-weight: 600; letter-spacing: .02em; }
.promo-inline { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.promo-code-input { flex: 1 1 200px; min-width: 0; font-family: var(--mono); font-size: 1.05rem; letter-spacing: .08em; text-transform: uppercase; }
.promo-percent { display: flex; align-items: center; gap: .4rem; color: var(--muted); }
.promo-percent input { width: 6.5rem; }
.promo-mini { display: grid; gap: .3rem; font-size: .82rem; color: var(--muted); font-weight: 400 !important; letter-spacing: 0 !important; }
.seg-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .7rem; }
.seg-card { display: flex; gap: .7rem; align-items: flex-start; padding: .9rem 1rem; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--bg); cursor: pointer; transition: border-color .15s, background .15s, transform .08s ease-out; }
.seg-card:hover { border-color: var(--muted); }
.seg-card:active { transform: scale(.98); }
.seg-card input { margin-top: .25rem; accent-color: var(--accent); }
.seg-card span { display: grid; gap: .15rem; }
.seg-card small { color: var(--muted); font-size: .82rem; line-height: 1.4; }
.seg-card:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--bg)); }
.seg-card:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.promo-preview { margin: 0; padding: .8rem .95rem; border-radius: var(--radius-sm); border: 1px dashed var(--line-2); color: var(--muted); font-size: .9rem; line-height: 1.55; }
.promo-preview.ready { border-style: solid; border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: color-mix(in srgb, var(--ok) 8%, transparent); color: var(--text); }
@media (max-width: 900px) { .promo-create-grid { grid-template-columns: 1fr; } }

/* The thin bar along the top while another page of the Portal loads. */
#soft-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; opacity: 0; z-index: 200; background: var(--accent); box-shadow: 0 0 8px var(--accent); transition: width .35s ease, opacity .25s ease; pointer-events: none; }

/* Fields in a box fill its width unless a component says otherwise. */
.box :where(input:not([type="radio"], [type="checkbox"]), select) { width: 100%; }
.box .promo-code-input { width: auto; font-family: var(--mono); font-size: 1.05rem; }
.box .promo-percent input { width: 6.5rem; }
.box .promo-inline .btn { align-self: stretch; }

/* ---- service nicknames ---- */
.order-name { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; }
.order-name h3 { margin: 0; overflow-wrap: anywhere; }
.order-rename { font-size: .82rem; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.order-rename:hover { color: var(--text); }
.order-name-form { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.order-name-input { flex: 1 1 200px; min-width: 0; font-size: 1rem; font-weight: 600; }
.order-name-input::placeholder { font-weight: 400; }
.order-name-msg { flex-basis: 100%; margin: .35rem 0 0; min-height: 0; }
.order-name-msg:empty { display: none; }
.nick { font-weight: 500; font-size: .85rem; }

/* ============ Portal: one design ============ */

/* The confirm-your-email nudge sits between the page head and the content with the same gap as everything else. */
.dash .verify-box { margin: 0 0 1.5rem; }
.dash .stat-grid { margin-bottom: 1.5rem; }

/* The bordered block with a header bar: used for lists, forms and cards alike. */
.box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 1.5rem; }
.box-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1.05rem 1.35rem; border-bottom: 1px solid var(--line); }
.box-head h2, .box-head h3 { margin: 0; font-size: 1.05rem; }
.box-head p { margin: .15rem 0 0; font-size: .85rem; }
.box-body { padding: 1.35rem; }
.box .table-wrap { border: 0; border-radius: 0; background: transparent; margin: 0; }
.box .table th { background: color-mix(in srgb, var(--bg) 40%, transparent); }
.box > .box-body + .table-wrap, .box > .box-body + .svc-list { border-top: 1px solid var(--line); }
.promo-page .box { margin-bottom: 0; }
.acct-panel .box { margin-bottom: 0; }
.acct-card.box { padding: 0; }
.acct-card .box-head h2 { font-size: 1.1rem; }

/* ---- Portal layout ----
   The page's content, and on wide screens a rail of related panels beside it (billing and support on Services, the
   ticket's details on a ticket), so a wide screen shows useful things instead of an empty right half. */
.portal-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.5rem; align-items: start; }
.portal-main { min-width: 0; }
.portal-main > :last-child { margin-bottom: 0; }
.portal-grid > .box { margin-bottom: 0; }
.portal-rail { display: grid; gap: 1rem; position: sticky; top: 24px; min-width: 0; }
.portal-rail > :empty { display: none; }
@media (max-width: 1200px) {
  .portal-grid { grid-template-columns: minmax(0, 1fr); }
  .portal-rail { position: static; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); align-items: start; }
  /* On a narrow screen, what you are paying for comes before how, and the help card after both. */
  .pay-page .portal-rail { display: contents; }
  .pay-page .pay-summary-card { order: -1; }
}
.rail-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.15rem 1.25rem; min-width: 0; }
.rail-card > h2 { margin: 0 0 .8rem; font: 500 .72rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.rail-card p { margin: 0; }
.rail-card > .btn, .rail-card .rail-actions .btn { width: 100%; }
.rail-actions { display: grid; gap: .5rem; margin-top: 1rem; }
.rail-big { font-size: 2rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.rail-sub { margin-top: .25rem !important; font-size: .86rem; color: var(--muted); }
/* The one thing that needs doing (an invoice to pay) sits on an Ink card, so it stands out from everything else. */
.rail-card.ground-ink { border-color: color-mix(in srgb, var(--accent) 55%, #262931); }
.rail-list { display: grid; margin-top: .9rem; }
.rail-item { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .7rem 0; border-top: 1px solid var(--line); color: var(--text); font-size: .9rem; text-decoration: none; min-width: 0; }
.rail-item > span:first-child { min-width: 0; }
.rail-item strong { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-item small { display: block; color: var(--muted); font-size: .8rem; }
a.rail-item:hover strong { color: var(--accent-text); }
.rail-item .badge { flex: none; }
.rail-facts { display: grid; gap: .7rem; margin: 0; }
#t-badge { margin-bottom: 1rem; }
.rail-facts div { display: grid; gap: .1rem; }
.rail-facts dt { font: 500 .7rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.rail-facts dd { margin: 0; font-size: .92rem; font-weight: 500; overflow-wrap: anywhere; }
.rail-facts a { color: var(--text); text-underline-offset: 3px; }
.rail-tip { font-size: .86rem; color: var(--muted); line-height: 1.55; }
.rail-tip strong { color: var(--text); }
.rail-tip a { color: var(--text); font-weight: 600; text-underline-offset: 3px; overflow-wrap: anywhere; }
.rail-status { display: flex; align-items: center; gap: .6rem; font-weight: 600; }
.rail-status .st-dot { margin: 0; }
.rail-steps { display: grid; gap: .55rem; margin: 0 0 1rem; padding-left: 1.15rem; list-style: decimal; font-size: .88rem; line-height: 1.5; color: var(--muted); }
.rail-steps li::marker { color: var(--accent-text); font: 500 .8rem var(--mono); }

/* The headline numbers, as one strip instead of a row of separate cards. The 1px gaps over a line-coloured background
   draw the dividers, and keep drawing them correctly when the stats wrap onto two rows. */
.stat-strip { display: flex; flex-wrap: wrap; gap: 1px; margin-bottom: 1.5rem; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.stat-strip .stat { flex: 1 1 160px; border: 0; border-radius: 0; padding: 1rem 1.25rem; } /* a wrapped stat stretches across its row, so no empty cell shows */
.stat-strip .stat-value { font-size: 1.6rem; }

/* A section's own title row inside a page (not a box): the heading, a count, and an action on the right. */
.sec-title { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap; margin: 0 0 .9rem; }
.sec-title h2 { margin: 0; font-size: 1.15rem; }
.sec-title .muted { font-size: .85rem; }
.sec-title a { color: var(--text); font-size: .9rem; font-weight: 600; text-underline-offset: 3px; }

/* Services: one card per service, two or three across. A strip in the status colour runs along the top. */
.svc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.svc-card { --tone: var(--line-2); position: relative; display: flex; flex-direction: column; gap: .9rem; padding: 1.2rem 1.25rem 1.1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .15s, box-shadow .2s; }
.svc-card::before { content: ''; position: absolute; top: -1px; left: 1.25rem; right: 1.25rem; height: 3px; border-radius: 0 0 3px 3px; background: var(--tone); }
.svc-card:hover { border-color: var(--line-2); box-shadow: 0 16px 36px -24px rgba(17, 19, 24, .4); }
.svc-active, .svc-paid { --tone: var(--ok); }
.svc-pending { --tone: var(--warn); }
.svc-past_due, .svc-suspended { --tone: var(--bad); }
.svc-cancelled { opacity: .7; }
.svc-card-top { display: flex; align-items: flex-start; gap: .85rem; }
.svc-card-title { flex: 1; min-width: 0; }
.svc-card-title p { margin: .15rem 0 0; }
.svc-card-title .badge { margin-top: .6rem; }
/* The kind of service at a glance: a VPS, a game server or a bot. */
.svc-ico { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 12%, var(--raised)); color: var(--accent); }
.svc-ico svg { width: 22px; height: 22px; }
.svc-cancelled .svc-ico { background: var(--raised); color: var(--muted); }
.svc-name { font-size: 1.05rem; font-weight: 600; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.svc-name:hover { color: var(--accent-text); }
.svc-server { display: flex; align-items: center; gap: .5rem 1rem; flex-wrap: wrap; margin: 0; padding: .6rem .8rem; border-radius: var(--radius-btn); background: var(--bg); font: .82rem var(--mono); }
.svc-server code { color: var(--muted); }
.svc-note { margin: 0; font-size: .87rem; }
.svc-card-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--line); }
.svc-due { margin: 0; font-weight: 600; font-size: .92rem; }
.svc-actions { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.svc-card[hidden] { display: none; }
.svc-none { margin: 0 0 1.5rem; }
.svc-search { width: 240px; max-width: 100%; }
/* The Services list's toolbar: pills for which services to show (with a count each), and the search box. */
.svc-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .75rem 1rem; flex-wrap: wrap; margin: 0 0 1.25rem; }
.svc-toolbar[hidden] { display: none; }
.svc-filters { display: flex; flex-wrap: wrap; gap: .3rem; padding: .3rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.svc-filter { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .85rem; border: 0; border-radius: 999px; background: none; color: var(--muted); font: 500 .86rem var(--sans); cursor: pointer; transition: background .15s, color .15s; }
.svc-filter:hover { color: var(--text); }
.svc-filter.on { background: var(--raised); color: var(--text); font-weight: 600; }
.svc-filter small { font: 500 .72rem var(--mono); color: var(--muted); }
.svc-filter:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* After the cards: a plan link and a help link, as two quiet cards. */
.svc-more { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1rem; }
.svc-more .rail-card { display: flex; align-items: center; justify-content: space-between; gap: .75rem 1rem; flex-wrap: wrap; }
.svc-more strong { display: block; margin-bottom: .1rem; }
.svc-more .muted { font-size: .88rem; }
.svc-more .btn { flex: none; width: auto; }

/* The Dashboard's welcome: an Ink card with a lava glow in its corner, the headline numbers in one line. */
.dash-hero { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; gap: 1.25rem 2rem; flex-wrap: wrap; margin-bottom: 1.75rem; padding: 1.75rem 2rem; border: 1px solid var(--line); border-radius: var(--radius); }
.dash-hero::before { content: ''; position: absolute; right: -120px; top: -140px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 34%, transparent), transparent); pointer-events: none; }
.dash-hero > * { position: relative; min-width: 0; }
.dash-hero h1 { margin: 0 0 .35rem; }
.dash-hero #hero-line { margin: 0; color: var(--muted); }
.dash-prompt { margin: 0 0 1rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem 1.25rem; flex-wrap: wrap; }
.dash-prompt p { margin: 0; }
@media (max-width: 640px) { .dash-hero { padding: 1.35rem 1.25rem; } .svc-search { width: 100%; } }
.svc-skel { height: 196px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--text) 6%, transparent) 50%, transparent 70%) var(--surface); background-size: 220% 100%; animation: skel 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .svc-skel { animation: none; } }

/* A single service's page. */
.facts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1rem 1.5rem; margin: 0 0 1rem; }
.head-ico { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.head-ico > div { min-width: 0; }
.head-ico .svc-ico { width: 52px; height: 52px; }
.head-ico .svc-ico svg { width: 26px; height: 26px; }
/* Phones: a table keeps its columns readable and scrolls sideways, instead of squeezing a date onto three lines. */
@media (max-width: 640px) { .table-wrap > .table { min-width: 560px; } }
.facts-grid dt { margin: 0 0 .2rem; }
.facts-grid dd { margin: 0; font-weight: 500; }
.svc-details { margin-top: 1.1rem; }
.svc-details .stat-label { margin-bottom: .4rem; }
.due-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem 1.5rem; flex-wrap: wrap; }
.due-row p { margin: 0; }
.due-amount { font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.due-none { margin: 0; }

/* Support: tickets as rows in a box, and the new-ticket form as a box with a header bar. */
.box.new-ticket { padding: 0; margin: 0 0 1.5rem; }
.form-body { display: grid; gap: 1rem; }
.box .ticket-list { gap: 0; margin: 0; }
.box .ticket-row { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: inset 3px 0 0 var(--line-2); }
.box .ticket-row:last-child { border-bottom: 0; }
.box .ticket-row:hover { background: color-mix(in srgb, var(--text) 3%, transparent); }
.box .ticket-row.unread { box-shadow: inset 3px 0 0 var(--accent); }

/* ---- devices, notifications, announcements ---- */
.device { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .9rem 0; border-bottom: 1px solid var(--line); }
.device:first-child { padding-top: 0; }
.device:last-of-type { border-bottom: 0; }
.device-main p { margin: .2rem 0 0; font-size: .85rem; }
.pref-list { display: grid; }
.pref-row { display: grid; grid-template-columns: minmax(0, 1fr) 5rem 5rem; gap: 1rem; align-items: center; padding: .95rem 0; border-bottom: 1px solid var(--line); }
.pref-row:last-child { border-bottom: 0; }
.pref-row p { margin: .15rem 0 0; font-size: .85rem; }
.pref-head { padding: 0 0 .6rem; }
.pref-head span:not(:first-child), .pref-toggle { text-align: center; justify-self: center; }
.pref-toggle input { width: 1.15rem; height: 1.15rem; accent-color: var(--accent); cursor: pointer; }
.pref-toggle input:disabled { cursor: not-allowed; opacity: .45; }
@media (max-width: 560px) { .pref-row { grid-template-columns: minmax(0, 1fr) 3.6rem 3.6rem; gap: .5rem; } }
.announcements { display: grid; gap: .75rem; margin: 0 0 1.5rem; }
.announce { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1rem 1.15rem; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.announce p { margin: .3rem 0 0; font-size: .92rem; }
.announce-close { flex: none; width: 2rem; height: 2rem; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.announce-close:hover { background: var(--raised); color: var(--text); }

/* ---- staff: notes, timeline, reports, announcements ---- */
.note-form { display: grid; gap: .6rem; margin-bottom: 1.1rem; }
.note-form textarea { width: 100%; }
.note-item { padding: .85rem 0; border-top: 1px solid var(--line); }
.note-meta { display: flex; justify-content: space-between; gap: 1rem; font-size: .82rem; }
.note-body { margin: .3rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }

.timeline { display: grid; gap: 0; }
.tl-day { margin: 1.1rem 0 .4rem; }
.tl-day:first-child { margin-top: 0; }
.tl-item { display: grid; grid-template-columns: 1rem minmax(0, 1fr) auto; gap: .2rem .75rem; align-items: start; padding: .5rem 0; }
.tl-dot { width: .6rem; height: .6rem; margin-top: .45rem; border-radius: 50%; background: var(--line-2); }
.tl-main p { margin: 0; }
.tl-title { font-size: .92rem; }
.tl-kind { display: inline-block; margin-right: .5rem; padding: 0 .45rem; border: 1px solid var(--line-2); border-radius: 999px; font: 500 .68rem var(--mono); color: var(--muted); vertical-align: middle; }
.tl-detail { font-size: .82rem; overflow-wrap: anywhere; }
.tl-time { font-size: .78rem; white-space: nowrap; }
.tl-payment .tl-dot, .tl-account .tl-dot { background: var(--ok); }
.tl-note .tl-dot, .tl-promo .tl-dot { background: var(--accent); }
.tl-review .tl-dot, .tl-refund .tl-dot, .tl-login-failed .tl-dot { background: var(--bad); }
.tl-order .tl-dot, .tl-invoice .tl-dot, .tl-ticket .tl-dot { background: var(--warn); }

.reports .stat-grid { margin-bottom: 1rem; }
.reports-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.reports-bar p { margin: 0; font-size: .85rem; }
.chart { --chart-grid: color-mix(in srgb, var(--text) 9%, transparent); }
.chart-box .box-body { padding: 1rem 1.35rem 1rem; }
.chart-wrap { position: relative; }
.chart-svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-grid { stroke: var(--chart-grid); stroke-width: 1; }
.chart-axis { fill: var(--muted); font: 11px var(--sans); }
.chart-value { fill: var(--text); font: 600 12px var(--sans); }
.chart-bar { fill: var(--series-1); transition: opacity .15s; }
.chart-bar.hover { opacity: .8; }
.chart-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chart-line-1 { stroke: var(--series-1); }
.chart-line-2 { stroke: var(--series-2); }
.chart-dot { stroke: var(--surface); stroke-width: 2; }
.chart-dot-1 { fill: var(--series-1); }
.chart-dot-2 { fill: var(--series-2); }
.chart-cross { stroke: var(--muted); stroke-width: 1; }
.chart-hit { fill: transparent; }
.chart-tip { position: absolute; top: 0; z-index: 5; min-width: 9rem; padding: .55rem .75rem; transform: translateX(-50%); border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--raised); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); font-size: .82rem; pointer-events: none; }
.chart-tip[hidden] { display: none; }
.chart-tip strong { display: block; margin-bottom: .25rem; }
.tip-row { display: flex; align-items: center; gap: .45rem; }
.swatch { display: inline-block; width: .7rem; height: .7rem; margin-right: .1rem; border-radius: 50%; }
.swatch-1 { background: var(--series-1); }
.swatch-2 { background: var(--series-2); }
.chart-legend { display: flex; gap: 1.1rem; flex-wrap: wrap; font-size: .85rem; color: var(--muted); }
.chart-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.chart-table { border-top: 1px solid var(--line); padding: 0 1.35rem; }
.chart-table summary { padding: .8rem 0; cursor: pointer; font-size: .85rem; color: var(--muted); }
.chart-table .table-wrap { margin-bottom: 1rem; }

.compose-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.5rem 2.25rem; align-items: start; }
.compose .promo-field input[type="text"], .compose .promo-field textarea, .compose .promo-field select { width: 100%; }
.compose textarea { min-height: 9rem; }
.days-input { width: 4.5rem; }
.reach { margin: 0; padding: .8rem .95rem; border: 1px dashed var(--line-2); border-radius: var(--radius-sm); font-size: .88rem; line-height: 1.55; }
.ann-body summary { cursor: pointer; font-size: .8rem; color: var(--muted); margin-top: .3rem; }
@media (max-width: 900px) { .compose-grid { grid-template-columns: 1fr; } }

/* ---- reminders, credit, referrals, statements ---- */
.inv-why { margin: 0 0 1.5rem; padding: 1rem 1.15rem; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--accent) 5%, transparent); }
.inv-why p { margin: .3rem 0 0; font-size: .92rem; line-height: 1.55; }
.inv-why .inv-label { margin: 0 0 .2rem; }
.stmt-wrap { overflow-x: auto; margin-bottom: 1.5rem; }
.stmt-table { font-size: .85rem; min-width: 640px; margin-bottom: 0; }
.stmt-table th, .stmt-table td { padding: .65rem .5rem; }
.stmt-table th:first-child, .stmt-table td:first-child { padding-left: 0; }
.stmt-table th:last-child, .stmt-table td:last-child { padding-right: 0; }
.inv-actions select { padding: .45rem .7rem; }
.ref-offer { margin: 0 0 1rem; line-height: 1.6; }
.ref-code-row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin: 0 0 .75rem; }
.ref-code { padding: .55rem .9rem; border: 1px dashed var(--accent); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--accent) 8%, transparent); font: 600 1.15rem var(--mono); letter-spacing: .08em; user-select: all; }
.ref-link { flex: 1 1 260px; min-width: 0; font-family: var(--mono); font-size: .85rem; }
.ref-stats { margin: 1.25rem 0 1rem !important; }
.acct-panel .ref-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.credit-balance { display: flex; align-items: baseline; gap: .8rem; margin: 0 0 .6rem; }
.credit-balance strong { font-size: 1.8rem; letter-spacing: -.02em; }
.credit-form { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.credit-amount { width: 8rem; }
.credit-note { flex: 1 1 260px; min-width: 0; }
.credit-line { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto; gap: .75rem; padding: .6rem 0; border-top: 1px solid var(--line); font-size: .9rem; }
.tl-credit .tl-dot { background: var(--ok); }
@media print { .inv-why { break-inside: avoid; } }

/* ---------- Ticket extras: rating, satisfaction, canned replies ---------- */
.rate-box { margin: 1.25rem 0 0; }
.rate-box .box-body { display: grid; gap: .9rem; }
.rate-box .star-input { margin: 0; }
.rate-box textarea { width: 100%; min-height: 4.5rem; resize: vertical; }
.rate-done { display: flex; justify-content: space-between; align-items: center; gap: 1.25rem; flex-wrap: wrap; padding: 1.1rem 1.35rem; }
.rate-done h2 { margin: 0 0 .15rem; font-size: 1.05rem; }
.rate-side { display: grid; justify-items: end; gap: .5rem; }
.rate-comment { margin: .5rem 0 0; max-width: 60ch; font-size: .92rem; white-space: pre-line; overflow-wrap: anywhere; }
.rate-hint { display: inline-block; padding: 0 .5rem; border: 1px solid var(--line-2); border-radius: 999px; color: var(--muted); font: 500 .7rem var(--mono); line-height: 1.7; }
.rated { margin-top: .25rem; }
.rated .stars { font-size: .85rem; }

.ticket-tools { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin: 0 0 1rem; }
.csat { display: flex; gap: 1.75rem; align-items: center; flex-wrap: wrap; padding: .9rem 1.2rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.csat-score { display: grid; gap: .1rem; justify-items: start; }
.csat-num { font-size: 2rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.csat-bars { display: grid; gap: .28rem; min-width: 220px; }
.csat-row { display: grid; grid-template-columns: 2rem 1fr 2rem; align-items: center; gap: .55rem; font: 400 .74rem var(--mono); color: var(--muted); }
.csat-track { height: 6px; border-radius: 3px; background: var(--raised); overflow: hidden; }
.csat-fill { display: block; height: 100%; border-radius: 3px; background: var(--star); }
.csat-c { text-align: right; }
.csat-empty { margin: 0; align-self: center; }
.canned-preview { max-width: 60ch; max-height: 4.6em; overflow: hidden; white-space: pre-line; overflow-wrap: anywhere; color: var(--muted); font-size: .88rem; }
.chat-canned { max-width: 15rem; padding: .35rem .6rem; font-size: .82rem; }

/* ---------- Status page: staff screen and the Portal warning ---------- */
.status-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin: 0 0 1.25rem; }
.status-top h2 { margin: 0 0 .15rem; }
.status-top-right { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
/* the Status view's section labels, as the same small mono eyebrow the rail cards use */
.status-h2 { margin: 1.75rem 0 .75rem; font: 500 .72rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.status-empty { margin: 0; padding: 1rem 1.25rem; border: 1px dashed var(--line-2); border-radius: var(--radius); font-size: .92rem; }
.status-h4 { margin: 1.25rem 0 .6rem; font-size: .95rem; }
.impact-list { display: grid; gap: .5rem; }
.impact-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.impact-row .check-row { flex: 1 1 10rem; }
.impact-row select { flex: 0 1 13rem; }
.when-row { display: grid; grid-template-columns: auto 1fr auto 1fr; align-items: center; gap: .5rem; }
.status-update { border-top: 1px solid var(--line); padding-top: 1rem; }
.status-update-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; margin-bottom: .75rem; }
.status-how { font-family: var(--mono); font-size: .85rem; overflow-wrap: anywhere; }

.status-notice { display: grid; gap: .6rem; margin: 0 0 1rem; }
.status-alert { display: flex; align-items: center; gap: .75rem; padding: .8rem 1.1rem; border: 1px solid var(--line); border-left: 4px solid var(--st, var(--warn)); border-radius: var(--radius); background: color-mix(in srgb, var(--st, var(--warn)) 9%, var(--surface)); color: var(--text); text-decoration: none; }
.status-alert:hover { border-color: var(--st, var(--warn)); }
.status-alert .st-icon { flex: none; width: 1.4rem; height: 1.4rem; font-size: .85rem; }
.status-alert-text { flex: 1; min-width: 0; font-size: .92rem; }
.status-alert-link { flex: none; color: var(--muted); font: 500 .78rem var(--mono); }

@media (max-width: 720px) {
  .status-update-grid { grid-template-columns: 1fr; }
  .when-row { grid-template-columns: 1fr; }
  .rate-side { justify-items: start; }
}

/* Status screen: nothing may push past the edge of its box. A field with the hidden attribute really is hidden. */
.promo-col, .promo-field, .impact-list, .impact-row { min-width: 0; }
.promo-col, .promo-field { grid-template-columns: minmax(0, 1fr); }
.promo-field[hidden], .impact-row[hidden] { display: none; }
.promo-field input, .promo-field select, .promo-field textarea, .impact-row select { max-width: 100%; min-width: 0; }
.impact-row .check-row { flex: 1 1 7rem; min-width: 0; }
.impact-row select { flex: 0 0 9.5rem; }
.when-row { grid-template-columns: 2.6rem minmax(0, 1fr); }
.when-row input { width: 100%; }

/* ---------- Cancelling: the "why are you leaving" form, and the staff report ---------- */
.why-box { margin: 0 0 1.5rem; border-left: 3px solid var(--warn); }
.why-box .box-body { display: grid; gap: 1rem; }
.why-box textarea { width: 100%; min-height: 4.5rem; resize: vertical; }
.why-field { margin: 0; padding: 0; border: 0; }
.why-field legend { margin-bottom: .6rem; padding: 0; font-size: .9rem; font-weight: 600; }
.why-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: .4rem 1.25rem; }
.why-options .check-row { margin: 0; cursor: pointer; }

.why-stats { margin-bottom: 1.25rem; }
.why-bar { display: flex; align-items: center; gap: .6rem; min-width: 8rem; }
.why-fill { display: block; height: 8px; min-width: 2px; border-radius: 4px; background: var(--accent); }
.why-count { font: 500 .8rem var(--mono); color: var(--muted); }
.why-comments { margin-top: 1rem; }
.why-comments summary { cursor: pointer; font-weight: 600; font-size: .9rem; }
.why-list { display: grid; gap: .9rem; margin: .9rem 0 0; }
.why-list li { padding: .75rem 1rem; border: 1px solid var(--line); border-left: 3px solid var(--line-2); border-radius: var(--radius-sm); background: var(--bg); }
.why-list .note-body { margin: 0 0 .3rem; white-space: pre-line; overflow-wrap: anywhere; }
.backup-where code { font-size: .85rem; overflow-wrap: anywhere; }

/* ---- the login details of a service, with a button to copy each one ---- */
/* One grid for all the rows (each row is display: contents), so the values line up even when one row has an extra button. */
.detail-rows { display: grid; grid-template-columns: minmax(6rem, auto) minmax(0, 1fr) auto; align-items: center; gap: .6rem .9rem; margin: 0; }
.detail-row { display: contents; }
.detail-row dt { color: var(--muted); font-size: .82rem; font-weight: 500; }
.detail-row dd { margin: 0; min-width: 0; padding: .45rem .7rem; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); font: 500 .9rem var(--mono); overflow-wrap: anywhere; }
@media (max-width: 560px) { .detail-rows { grid-template-columns: minmax(0, 1fr) auto; row-gap: .35rem; } .detail-row dt { grid-column: 1 / -1; } .detail-row + .detail-row dt { margin-top: .4rem; } }

/* ---- a VPS: its state, power buttons, live usage and history (service page, dashboard, admin Servers) ---- */
.srv-state { display: inline-flex; align-items: center; gap: .45rem; font: 500 .74rem var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); white-space: nowrap; }
.srv-state::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.srv-state.running { color: var(--ok); }
.srv-state.busy { color: var(--warn); }
.srv-state.busy::before { animation: srv-pulse 1.1s ease-in-out infinite; }
.srv-state.suspended, .srv-state.failed { color: var(--bad); }
@keyframes srv-pulse { 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .srv-state.busy::before { animation: none; } }
.srv-line { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin: .35rem 0 0; }
.srv-line code { font: .8rem var(--mono); color: var(--muted); }
.srv-notice { margin: 0 0 1rem; }
.power-bar { display: flex; flex-wrap: wrap; gap: .5rem; }
.srv-danger:not(:disabled) { color: var(--bad); }
.srv-quiet { margin: 0; font-size: .9rem; }

/* ---- the service page: a strip with the server's state and power, then tabs ---- */
.srv-strip { display: flex; align-items: center; justify-content: space-between; gap: .9rem 1.5rem; flex-wrap: wrap; padding: .85rem 1.1rem; margin-bottom: 1rem; }
.srv-strip-info { display: flex; align-items: center; gap: .5rem 1rem; flex-wrap: wrap; min-width: 0; }
.srv-strip-host { font: 600 .95rem var(--mono); }
.ip-copy { padding: .2rem .55rem; border: 1px dashed var(--line-2); border-radius: var(--radius-sm); background: none; color: var(--muted); font: 500 .85rem var(--mono); cursor: copy; transition: color .15s, border-color .15s, transform .08s ease-out; }
.ip-copy:hover { color: var(--text); border-color: var(--muted); }
.ip-copy:active { transform: scale(.95); }
.ip-copy.copied { color: var(--ok); border-color: var(--ok); }
.svc-alert { display: flex; align-items: center; justify-content: space-between; gap: .75rem 1.25rem; flex-wrap: wrap; margin-bottom: 1rem; padding: .8rem 1.1rem; border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--line)); border-left: 3px solid var(--warn); border-radius: var(--radius); background: color-mix(in srgb, var(--warn) 8%, var(--surface)); }
.svc-alert p { margin: 0; font-size: .92rem; }
/* The service's header card: the head on top, and the server's state and power buttons along its foot. */
.svc-hero { margin-bottom: 1rem; }
.svc-hero .page-head { margin: 0; padding: 1.25rem 1.35rem; }
.svc-hero .srv-strip { margin: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: color-mix(in srgb, var(--bg) 45%, transparent); }
/* The service's sections as a row of pills, with an icon each (the same shape as the Account page's menu on a phone). */
.svc-tabs { display: flex; gap: .3rem; width: fit-content; max-width: 100%; margin: 1.25rem 0; padding: .35rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); overflow-x: auto; scrollbar-width: none; }
.svc-tabs::-webkit-scrollbar { display: none; }
.svc-tabs .tab { display: inline-flex; align-items: center; gap: .5rem; margin: 0; padding: .5rem .95rem; border: 0; border-radius: 999px; font: 500 .9rem var(--sans); white-space: nowrap; transition: background .15s, color .15s; }
.svc-tabs .tab.active { background: var(--raised); color: var(--text); font-weight: 600; }
.svc-tabs .tab-ico { width: 16px; height: 16px; flex: none; }
/* On a phone the pills scroll sideways; the faded edge shows there is more. */
@media (max-width: 560px) { .svc-tabs { width: 100%; mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent); } }
.panel > .box:last-child { margin-bottom: 0; }
.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 0 1.5rem; align-items: start; }
.svc-grid .facts-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.manage-list { display: grid; }
.manage-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; flex-wrap: wrap; }
.manage-list .manage-row { padding: 1rem 0; border-top: 1px solid var(--line); }
.manage-list .manage-row:first-child { padding-top: 0; border-top: 0; }
.manage-list .manage-row:last-child { padding-bottom: 0; }
.manage-row > div { flex: 1 1 18rem; min-width: 0; }
.manage-row h3 { margin: 0 0 .2rem; font-size: .95rem; }
.manage-row p { margin: 0; font-size: .87rem; }
.danger-box { border-color: color-mix(in srgb, var(--bad) 35%, var(--line)); }
.danger-box .box-head h2 { color: var(--bad); }
.detail-actions { display: flex; justify-content: flex-end; gap: .4rem; }
.eye-btn { display: inline-grid; place-items: center; padding-inline: .55rem; }
.eye-btn svg { width: 17px; height: 17px; }
.detail-row dd.masked { color: var(--muted); letter-spacing: .12em; user-select: none; }
.usage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem 1.5rem; }
.usage { display: grid; gap: .4rem; align-content: start; }
.usage-top { display: flex; justify-content: space-between; gap: .5rem; font-size: .82rem; }
.usage-top span { color: var(--muted); }
.usage-top strong { font: 500 .82rem var(--mono); }
.usage .bar span { transition: width .6s ease; }
.usage .bar span.hot { background: var(--bad); }
@media (prefers-reduced-motion: reduce) { .usage .bar span { transition: none; } }
.srv-history { list-style: none; margin: 0; padding: 0; display: grid; }
.srv-history li { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-top: 1px solid var(--line); font-size: .9rem; }
.srv-history li:first-child { padding-top: 0; border-top: 0; }
.srv-history li:last-child { padding-bottom: 0; }
.srv-history li .when { color: var(--muted); white-space: nowrap; }
.admin-inline-form { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; border-top: 1px solid var(--line); }
.admin-inline-form label { display: grid; gap: .3rem; font-size: .8rem; color: var(--muted); }
.admin-inline-form input { width: 9rem; }

/* ===========================================================================
   The Portal's menu (built by buildAccountNav in common.js). Every Portal page
   has <nav data-account-nav>, so this needs nothing on the pages themselves.
     wide screens   a fixed menu down the left side
     tablets        the usual top bar, with icons
     phones         the top bar's drop-down menu
   =========================================================================== */
[data-account-nav] > a:not(.btn), .nav-staff > a, .nav-foot a { display: inline-flex; align-items: center; gap: .55rem; }
[data-account-nav] a[hidden] { display: none !important; }
.nav-ico { width: 18px; height: 18px; flex: none; }
/* Group labels in the menu ("Menu", "Staff"): only on the wide-screen side menu; the top bar and phone menu stay flat. */
.nav-group { display: none; }
.nav-staff { display: contents; }
.nav-staff[hidden] { display: none; }
/* Brand rule: icons use Lava only for an active/selected state, not the general link-text accent color. */
[data-account-nav] a[aria-current="page"] .nav-ico { color: var(--accent); }
.nav-foot { display: flex; align-items: center; gap: 1.3rem; }
.nav-status { display: none !important; }
.nav-status .st-dot { margin: 0 0 0 auto; }
/* Discord server button, above the account at the foot of the menu */
.nav-discord .nav-ico { color: #7983f5; } /* Discord's blurple, lifted to read on the dark menu */
.avatar { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 16%, var(--raised)); color: var(--accent-text); font: 700 .8rem/1 var(--sans); text-transform: uppercase; }
.nav-user { color: var(--text) !important; }
.nav-user-text { display: grid; line-height: 1.25; min-width: 0; }
.nav-user-text strong { font-weight: 600; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 12rem; }
.nav-user-text small { display: none; color: var(--muted); font-size: .76rem; }
.nav-links a.nav-user[aria-current="page"] { box-shadow: none; padding-bottom: 0; }
.nav-links a.nav-user[aria-current="page"] .avatar { box-shadow: 0 0 0 2px var(--accent); }

@media (min-width: 1000px) {
  body:has(.nav [data-account-nav]) { padding-left: var(--sidebar); }
  body:has(.nav [data-account-nav]) .nav {
    position: fixed; inset: 0 auto 0 0; width: var(--sidebar); overflow-y: auto;
    background: var(--sidebar-bg); border-bottom: 0; border-right: 1px solid var(--line); backdrop-filter: none; box-shadow: none;
    /* The side menu is an Ink ground (the same tokens as .ground-ink), so the Portal has a dark rail beside its Paper pages. */
    color-scheme: dark;
    --bg: #111318; --surface: #1e2129; --raised: color-mix(in srgb, #1e2129, white 10%); --field: #111318;
    --line: #262931; --line-2: #3a3d46; --ghost-border: #3a3d46;
    --text: #f6f4f1; --muted: #a3a2ab; --accent-text: #ffb020; --ok: #22a45d; --warn: #ffb020; --bad: #f2546f; --on-bad: #111318;
    color: var(--text);
  }
  body:has(.nav [data-account-nav]) .nav .logo-light { display: none; }
  body:has(.nav [data-account-nav]) .nav .logo-dark { display: block; }
  body:has(.nav [data-account-nav]) .nav-inner { flex-direction: column; align-items: stretch; justify-content: flex-start; height: auto; min-height: 100%; max-width: none; padding: 20px 14px 14px; gap: 1.6rem; }
  body:has(.nav [data-account-nav]) .menu-toggle { display: none; }
  .nav-links[data-account-nav] { flex: 1; flex-direction: column; align-items: stretch; gap: 2px; }
  .nav-links[data-account-nav] a:not(.btn) { padding: .6rem .75rem; border-radius: 8px; color: var(--muted); font-size: .94rem; font-weight: 500; transition: background .15s, color .15s, transform .08s ease-out; }
  .nav-links[data-account-nav] a:not(.btn):hover { background: var(--raised); color: var(--text); }
  /* the current page: a lighter row with a lava bar on its left edge */
  .nav-links[data-account-nav] a[aria-current="page"] { position: relative; box-shadow: none; padding-bottom: .6rem; background: var(--raised); color: var(--text); font-weight: 600; }
  .nav-links[data-account-nav] a[aria-current="page"]:not(.nav-user)::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
  .nav-group { display: block; margin: 0; padding: .9rem .75rem .45rem; font: 500 .68rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
  .nav-staff { display: grid; gap: 2px; margin-top: .6rem; padding-top: .3rem; border-top: 1px solid var(--line); }
  /* a line under the logo, so the menu starts clearly below it */
  body:has(.nav [data-account-nav]) .logo { padding: 2px 10px 18px; border-bottom: 1px solid var(--line); }
  .nav-links[data-account-nav] .nav-badge { margin-left: auto; }
  .nav-foot { margin-top: auto; flex-direction: column; align-items: stretch; gap: 2px; padding: .4rem; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--surface) 60%, transparent); }
  .nav-status, .nav-foot .nav-discord { display: inline-flex; font-size: .86rem !important; }
  .nav-status { display: inline-flex !important; }
  .nav-links[data-account-nav] .nav-foot a.nav-user { margin-top: .3rem; border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; padding-top: .75rem; }
  .nav-links[data-account-nav] a.nav-user { padding: .55rem .6rem; gap: .7rem; }
  .nav-links[data-account-nav] a.nav-user[aria-current="page"] { background: var(--raised); }
  .nav-user-text small { display: block; }
  .acct-nav { top: 24px; }
  html:has([data-account-nav]) { scroll-padding-top: 24px; }
}
@media (max-width: 760px) {
  .nav-links[data-account-nav] a[aria-current="page"] { box-shadow: none; padding-bottom: .85rem; font-weight: 600; }
  .nav-foot { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-status { display: inline-flex !important; }
  .nav-user-text small { display: block; }
  .nav-links a.nav-user { padding: .9rem 0 .4rem !important; border-bottom: 0 !important; }
}