/* beeps HQ: the same fire panel as the app (panel.css), with the indicators on the left and one wide LCD window. */
.panel.hq { grid-template-columns: 236px minmax(0, 1fr); }
.hq-side { display: flex; flex-direction: column; gap: 22px; min-height: 0; overflow: auto; }
.hq-back {
  font: 600 13px/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--legend);
  padding: 7px 12px 6px; border: 1px solid var(--case-edge); border-radius: 6px; background: var(--key); text-decoration: none;
}
.hq-back:active { box-shadow: inset 0 2px 5px rgba(40,38,30,.14); }
.panel.hq .log-inner { width: min(1080px, 100% - 48px); }

/* the company board: one ruled row per company, columns never move */
.co-head, .co-row {
  display: grid;
  grid-template-columns: 14px minmax(180px, 1.4fr) 92px 64px 64px 76px 116px minmax(160px, 1.2fr);
  gap: 14px; align-items: baseline; padding: 11px 4px;
}
.co-head { font: 600 12px/1 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--lcd-dim); border-bottom: 1px solid var(--lcd-rule); padding-top: 0; }
.co-head span:nth-child(n+4):nth-child(-n+7), .co-row .num { text-align: right; }
.co-list { list-style: none; margin: 0 0 26px; padding: 0; }
.co-row { width: 100%; border: 0; border-bottom: 1px solid var(--lcd-rule); background: transparent; text-align: left; color: var(--lcd-text); }
.co-row:hover { background: var(--lcd-raised); }
.co-row:focus-visible { outline-offset: -2px; border-radius: 4px; }
.co-row .num small { font-size: 12px; color: var(--lcd-dim); }
.co-row .led { align-self: center; }
.co-row .name b { font: 600 18px/1.1 var(--cond); letter-spacing: .02em; display: block; }
.co-row .name small, .co-row .num, .co-row .when { font: 500 12px/1.3 var(--mono); color: var(--lcd-dim); font-variant-numeric: tabular-nums; }
.co-row .num { font-size: 13px; color: var(--lcd-text); }
.co-row .plan { font: 600 14px/1.2 var(--cond); letter-spacing: .06em; text-transform: uppercase; color: var(--lcd-soft); }
.co-row .problems { font-size: 13.5px; color: var(--lcd-soft); }
.co-row.fault .problems { color: var(--fault-ink); }

/* a company's page: sections of ruled rows, plan and status as latching keys */
.hq-section { margin: 0 0 26px; }
.hq-section h3 { margin: 0 0 10px; font: 600 13px/1 var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--lcd-dim); }
/* one strip of latching keys: 1px gaps over the bezel edge draw the dividers, so it can wrap into a grid on phones */
.latch { justify-self: start; display: grid; grid-auto-flow: column; gap: 1px; border: 1px solid var(--case-edge); border-radius: 6px; overflow: hidden; background: var(--case-edge); }
.latch button { min-width: 84px; padding: 9px 12px 8px; border: 0; background: var(--key); font: 600 13px/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--lcd-soft); box-shadow: inset 0 -2px 0 rgba(40,38,30,.10); transition: color .14s, background-color .14s; }
.latch button:hover { color: var(--lcd-text); }
.latch button[aria-pressed="true"] { background: var(--key-press); color: var(--lcd-text); box-shadow: inset 0 2px 5px rgba(40,38,30,.14); }
.latch button:focus-visible { outline-offset: -3px; }
.hq-section .outcome { margin: 10px 0 0; font: 500 12.5px/1.4 var(--mono); color: var(--lcd-glow); }
.hq-section .notice { margin: 12px 0 0; }
.hq-settings { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px 14px; align-items: center; margin: 0 0 14px; }
.hq-settings .check { font: 600 15px/1.2 var(--cond); letter-spacing: .04em; text-transform: uppercase; color: var(--lcd-soft); }
.hq-crumb { margin: 0 0 16px; }
.board-keys { float: right; margin: -50px 0 0 16px; }
.hq-line { margin: 0 0 14px; max-width: 66ch; font-size: 14.5px; line-height: 1.5; color: var(--lcd-soft); }
.hq-help { margin: -4px 0 14px; font-size: 13px; color: var(--lcd-dim); }
.hq-input { width: 140px; min-height: 38px; padding: 7px 10px; border: 1px solid var(--tile-edge); border-radius: 8px; background: var(--lcd-raised); color: var(--lcd-text); font-size: 15px; }
.hq-input:hover { border-color: var(--lcd-dim); }
.hq-input:focus { outline: 0; border-color: var(--lcd-glow); }
/* the new-company form: two columns of fields, plan and the test tick across the width */
.hq-form { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; margin-top: 4px; }
.hq-form fieldset, .hq-form .checks-row, .hq-form .hq-help, .hq-form .keys, .hq-form .notice { grid-column: 1 / -1; }
.hq-form .hq-help { margin: 0; }
.hq-form .notice { margin: 0; }
.hq-form input:focus { outline: 0; border-color: var(--lcd-glow); }
.hq-form .keys { justify-content: flex-end; }

.hq-crumb button { border: 0; background: transparent; padding: 0; font: 500 12px/1 var(--mono); color: var(--lcd-glow); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 13px; }

@media (max-width: 1180px) {
  .co-head, .co-row { grid-template-columns: 14px minmax(140px, 1fr) 84px 56px 112px minmax(120px, 1fr); }
  .co-head span:nth-child(5), .co-head span:nth-child(6), .co-row .c-active, .co-row .c-asks { display: none; }
}
@media (max-width: 760px) {
  .panel.hq { grid-template-columns: 1fr; height: auto; min-height: 100dvh; }
  .panel.hq .lcd { order: 1; min-height: 70vh; }
  .hq-side { order: 2; }
  .panel.hq .bezel .sample, .panel.hq .bezel .clock { display: none; }
  .co-head { display: none; }
  .co-row { grid-template-columns: 14px minmax(0, 1fr) auto; }
  .co-row .plan, .co-row .c-people, .co-row .c-active, .co-row .c-asks { display: none; }
  .co-row .problems { grid-column: 2 / -1; }
  .co-row .led { align-self: start; margin-top: 5px; }
  .hq-settings { grid-template-columns: 1fr; gap: 8px; }
  .hq-settings .latch { justify-self: stretch; grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  .hq-settings .check:not(:first-child) { margin-top: 6px; }
  .board-keys { float: none; margin: 0 0 14px; }
  .hq-form { grid-template-columns: 1fr; }
  .hq-form .latch { display: grid; grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  .panel.hq .modes { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .hq-back { padding: 7px 9px 6px; }
  .hq-back .long { display: none; }
  .panel.hq .lcd-status .agent { display: inline; }
}

/* view keys carry a small count of what needs you (new leads, follow-ups due, support waiting) */
.mode .count { font: 500 11px/1 var(--mono); color: var(--fault-ink); margin-left: 4px; }
.mode .count:empty { display: none; }

/* leads: one ruled row per lead, opening in place to its card answers, stage, follow-up date and notes */
.lead-list { list-style: none; margin: 0 0 26px; padding: 0; border-top: 1px solid var(--lcd-rule); }
.lead { border-bottom: 1px solid var(--lcd-rule); }
.lead-row { display: grid; grid-template-columns: 14px minmax(200px, 1fr) 110px 76px 130px; gap: 14px; align-items: baseline; padding: 11px 4px; cursor: pointer; list-style: none; }
.lead-row::-webkit-details-marker { display: none; }
.lead-row:hover { background: var(--lcd-raised); }
.lead-row .led { align-self: center; }
.lead-row .name b { font: 600 17px/1.15 var(--cond); letter-spacing: .02em; display: block; color: var(--lcd-text); }
.lead-row .name small, .lead-row .when { font: 500 12px/1.3 var(--mono); color: var(--lcd-dim); }
.lead-row .plan { font: 600 14px/1.2 var(--cond); letter-spacing: .06em; text-transform: uppercase; color: var(--lcd-soft); }
.lead-row .num { font: 500 13px/1.3 var(--mono); text-align: right; color: var(--lcd-text); }
.lead-row .num small { color: var(--lcd-dim); }
.lead.fault .when { color: var(--fault-ink); }
.lead-row .tag { margin-left: 6px; }
.lead-body { padding: 4px 4px 18px 32px; }
.lead-qa { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 6px 14px; margin: 0 0 16px; font-size: 14px; }
.lead-qa div { display: contents; }
.lead-qa dt { font: 600 12px/1.4 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--lcd-dim); }
.lead-qa dd { margin: 0; color: var(--lcd-soft); }
.lead-form { display: grid; grid-template-columns: 180px 180px minmax(0, 1fr); gap: 12px 14px; align-items: start; max-width: 860px; }
.lead-form label { display: grid; gap: 5px; font: 600 12px/1.2 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--lcd-dim); }
.lead-form select, .lead-form input, .lead-form textarea, .reply-form textarea { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid var(--tile-edge); border-radius: 8px; background: var(--lcd-raised); font: 400 14.5px/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--lcd-text); }
.lead-form textarea, .reply-form textarea { resize: vertical; }
.lead-form :is(select, input, textarea):focus, .reply-form textarea:focus { outline: 0; border-color: var(--lcd-glow); }
.lf-notes { grid-row: span 2; }
.lead-form .keys, .lead-form .notice { grid-column: 1 / 3; margin: 0; }

/* support: each request a ruled block with the question, what the Help beep said, and a reply field */
.ticket { padding: 14px 4px 16px; border-bottom: 1px solid var(--lcd-rule); }
.ticket .t-head { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 13.5px; color: var(--lcd-soft); }
.ticket .t-head b { color: var(--lcd-text); }
.ticket .t-q { margin: 0 0 6px; font-size: 15.5px; color: var(--lcd-text); max-width: 66ch; }
.ticket .t-detail, .ticket .t-bot { margin: 0 0 8px; font-size: 14px; color: var(--lcd-soft); max-width: 66ch; }
.ticket .t-bot .check { margin-right: 6px; font: 600 12px/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--lcd-dim); }
.reply-form { display: grid; gap: 10px; max-width: 720px; margin-top: 10px; }
.reply-form label { display: grid; gap: 5px; }
.reply-form .check { font: 600 12px/1.2 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--lcd-dim); }
.reply-form .keys { justify-content: flex-end; }
.reply-form .notice { margin: 0; }

@media (max-width: 760px) {
  .lead-row { grid-template-columns: 14px minmax(0, 1fr) auto; }
  .lead-row .plan, .lead-row .when { grid-column: 2 / -1; }
  .lead-row .led { align-self: start; margin-top: 5px; }
  .lead-body { padding-left: 4px; }
  .lead-qa { grid-template-columns: 1fr; gap: 2px; }
  .lead-qa dd { margin-bottom: 8px; }
  .lead-form { grid-template-columns: 1fr 1fr; }
  .lf-notes { grid-column: 1 / -1; grid-row: auto; }
  .lead-form .keys, .lead-form .notice { grid-column: 1 / -1; }
  .lead-form .keys .key { flex: 1; }
}
.conv-form { display: grid; gap: 10px; max-width: 860px; }
.conv-form textarea { width: 100%; min-height: 120px; padding: 9px 11px; border: 1px solid var(--tile-edge); border-radius: 8px; background: var(--lcd-raised); font: 400 14.5px/1.5 var(--sans); color: var(--lcd-text); resize: vertical; }
.conv-form textarea:focus { outline: 0; border-color: var(--lcd-glow); }
.conv-form .keys { justify-content: flex-start; }
.conv-form .outcome, .conv-form .notice { margin: 0; }

/* admins: the access level as a latch strip on each row, with Remove beside it */
.admin-row { grid-template-columns: 14px 150px minmax(0, 1fr) auto; }
.admin-row .refs { display: flex; gap: 10px; align-items: center; justify-content: flex-end; }
.latch button { white-space: nowrap; }
.admin-row .result small { font-size: 12px; color: var(--lcd-dim); }
.hq-add-admin { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: flex-end; }
.hq-add-admin label { width: min(320px, 100%); }
.hq-add-admin + .hq-help { margin: 12px 0 0; }
.hq-add-admin label, .hq-add-admin fieldset { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; }
.hq-add-admin .check { font: 600 12px/1.2 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--lcd-dim); }
.hq-input.wide { width: 100%; font-family: var(--sans); }
.hq-add-admin .notice { flex-basis: 100%; margin: 0; }

/* read-only admins: everything that would change something is hidden (the server refuses it as well) */
.hq-read :is([data-save], [data-budget], [data-new], [data-make], [data-close], .lead-form .keys, .reply-form, .conv-form .keys, .hq-settings .latch button:not([aria-pressed="true"])) { display: none !important; }
.hq-read :is(.lead-form, .conv-form, .hq-settings) :is(input, select, textarea) { pointer-events: none; background: transparent; }

@media (max-width: 760px) {
  .admin-row { grid-template-columns: 14px minmax(0, 1fr); }
  .admin-row .refs { justify-content: flex-start; grid-column: 2 / -1; flex-wrap: wrap; }
}

/* beeps: one ruled row per beep with its model, live standard and 30-day quality figures */
.lib-head, .lib-row { display: grid; grid-template-columns: 14px minmax(200px, 1.6fr) 96px 70px 70px 70px 76px 56px 72px; gap: 14px; align-items: baseline; padding: 11px 4px; }
.lib-head { font: 600 12px/1 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--lcd-dim); border-bottom: 1px solid var(--lcd-rule); padding-top: 0; }
.lib-head span:nth-child(n+4), .lib-row .num { text-align: right; }
.lib-row { width: 100%; border: 0; border-bottom: 1px solid var(--lcd-rule); background: transparent; text-align: left; color: var(--lcd-text); cursor: pointer; }
.lib-row:hover { background: var(--lcd-raised); }
.lib-row:focus-visible { outline-offset: -2px; border-radius: 4px; }
.lib-row .led { align-self: center; }
.lib-row .name b { font: 600 17px/1.15 var(--cond); letter-spacing: .02em; display: block; }
.lib-row .name small { font-size: 13px; color: var(--lcd-dim); }
.lib-row .plan { font: 600 14px/1.2 var(--cond); letter-spacing: .06em; text-transform: uppercase; color: var(--lcd-soft); }
.lib-row .num { font: 500 13px/1.3 var(--mono); font-variant-numeric: tabular-nums; }
.lib-row .q-fail.bad { color: var(--fault-ink); }

.instr-text { margin: 0; padding: 12px 14px; max-height: 360px; overflow: auto; border: 1px solid var(--lcd-rule); border-radius: 8px; background: var(--lcd-raised); font: 400 13.5px/1.55 var(--sans); color: var(--lcd-soft); white-space: pre-wrap; scrollbar-width: thin; scrollbar-color: var(--lcd-rule) transparent; }
.version { padding: 10px 0 14px; border-bottom: 1px solid var(--lcd-rule); }
.version .t-head { margin: 0 0 6px; font-size: 14px; color: var(--lcd-soft); }
.version .t-head b { color: var(--lcd-text); }
.version details { margin: 0 0 10px; }
.version summary { cursor: pointer; font-size: 13.5px; color: var(--lcd-soft); text-decoration: underline; text-underline-offset: 2px; }
.version .keys { justify-content: flex-end; }
.lib-edit { display: grid; gap: 10px; max-width: 900px; }
.lib-edit textarea, .lib-edit input, .inline-form select, .swap-form select, .switch-form :is(select, input) { width: 100%; padding: 8px 10px; border: 1px solid var(--tile-edge); border-radius: 8px; background: var(--lcd-raised); font: 400 14.5px/1.45 var(--sans); color: var(--lcd-text); }
.lib-edit textarea { min-height: 260px; resize: vertical; }
.lib-edit label, .switch-form label { display: grid; gap: 5px; }
.lib-edit .check, .switch-form .check, .swap-form .check { font: 600 12px/1.2 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--lcd-dim); }
.lib-edit .keys { justify-content: flex-end; }
:is(.lib-edit, .switch-form, .plan-grid) :is(input, select, textarea):focus, .inline-form select:focus, .swap-form select:focus { outline: 0; border-color: var(--lcd-glow); }
.inline-form + .hq-help { margin-top: 8px; }
.inline-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.inline-form select { width: auto; min-width: 180px; }
.plan-grid table { border-collapse: collapse; margin: 0 0 12px; }
.plan-grid th, .plan-grid td { padding: 8px 14px; border-bottom: 1px solid var(--lcd-rule); text-align: center; }
.plan-grid thead th { font: 600 12px/1 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--lcd-dim); }
.plan-grid tbody th { text-align: left; font: 600 14px/1.2 var(--cond); letter-spacing: .06em; text-transform: uppercase; color: var(--lcd-soft); }
.plan-grid input { width: 18px; height: 18px; accent-color: var(--lcd-glow); }
.swap-form { display: flex; gap: 10px 14px; align-items: center; flex-wrap: wrap; margin: 18px 0 6px; }
.swap-form label { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--lcd-soft); }
.swap-form select { width: auto; }
.switch-form { display: grid; grid-template-columns: 160px minmax(160px, 1fr) 200px; gap: 12px 14px; align-items: end; max-width: 900px; margin-top: 14px; }
.switch-form .wide { grid-column: 1 / -1; }
.switch-form .keys, .switch-form .notice { grid-column: 1 / -1; margin: 0; }
.switch-form .keys { justify-content: flex-end; }
.hq-read :is(#lib-edit .keys, #model-form button, #plan-form .keys, #swap-form, #switch-form, [data-publish], [data-discard], [data-switch-on]) { display: none !important; }

@media (max-width: 1180px) {
  .lib-head, .lib-row { grid-template-columns: 14px minmax(160px, 1fr) 84px 60px 70px 70px 72px; }
  .lib-head span:nth-child(7), .lib-head span:nth-child(8), .lib-row :is(.q-ap, .q-fail) { display: none; }
}
@media (max-width: 760px) {
  .lib-head { display: none; }
  .lib-row { grid-template-columns: 14px minmax(0, 1fr) auto; }
  .lib-row .num:not(.q-cost), .lib-row .plan { display: none; }
  .switch-form { grid-template-columns: 1fr; }
  .plan-grid th, .plan-grid td { padding: 8px 8px; }
}
.plan-grid { overflow-x: auto; max-width: 100%; }

/* test set: add a question and what it must do; run on a version and model; each run opens to pass/fail per test */
.test-add, .test-run { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 12px 14px; align-items: end; max-width: 980px; margin-top: 14px; }
.test-run { grid-template-columns: 180px 180px auto; }
.test-add label, .test-run label { display: grid; gap: 5px; }
.test-add .check, .test-run .check { font: 600 12px/1.2 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--lcd-dim); }
.test-add input, .test-run select { width: 100%; padding: 8px 10px; border: 1px solid var(--tile-edge); border-radius: 8px; background: var(--lcd-raised); font: 400 14.5px/1.4 var(--sans); color: var(--lcd-text); }
:is(.test-add, .test-run) :is(input, select):focus { outline: 0; border-color: var(--lcd-glow); }
:is(.test-add, .test-run) .notice { grid-column: 1 / -1; margin: 0; }
.sub { margin: 20px 0 6px; font: 600 12px/1 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--lcd-dim); }
.run { border-bottom: 1px solid var(--lcd-rule); }
.run summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 4px; cursor: pointer; list-style: none; font-size: 14px; color: var(--lcd-text); }
.run summary::-webkit-details-marker { display: none; }
.run summary:hover { background: var(--lcd-raised); }
.run summary b { font: 600 15px/1.1 var(--cond); letter-spacing: .04em; }
.run summary .mono { color: var(--lcd-dim); }
.run .rows { margin: 0 0 12px; }
.lib-row .q-help.bad { color: var(--fault-ink); }
.hq-read :is(#test-add, #test-run, [data-remove-test]) { display: none !important; }
@media (max-width: 760px) { .test-add, .test-run { grid-template-columns: 1fr; } .lib-row .q-help { display: none; } }
.hq-read [data-signin-lead] { display: none !important; }
.row .check .mono { text-transform: none; letter-spacing: 0; font-weight: 500; }

/* What's new */
.news-card .news-body p, .news-card .news-body ul, .news-card .news-body ol { margin: 0 0 6px; }
.news-card .news-body ul, .news-card .news-body ol { padding-left: 20px; }
.news-card .news-body h4 { margin: 8px 0 4px; font-size: 14px; }
.news-form textarea { min-height: 8rem; }
.hq-read :is(#news-form, [data-news-edit], [data-news-retire], [data-news-publish]) { display: none !important; }

/* Template schedules */
.tpl-card .keys { justify-content: flex-start; flex-wrap: wrap; }
.tpl-card .keys .key[aria-label] { min-width: 44px; padding: 0 12px; }
.tpl-try { margin: 6px 0 10px; }
.tpl-try summary { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; color: var(--lcd-text); }
.tpl-try summary .mono { color: var(--lcd-dim); font-size: 12.5px; }
.tpl-try[open] summary { margin-bottom: 8px; }
p.tpl-try { display: flex; align-items: center; gap: 8px; }
.hq-read :is(#tpl-form, [data-tpl-new], [data-tpl-edit], [data-tpl-try], [data-tpl-status], [data-tpl-move]) { display: none !important; }
.tpl-new { justify-content: flex-start; margin: 4px 0 18px; }

/* Playground and feature switches */
.play-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; max-width: 820px; }
.play-form .wide, .play-form .keys { grid-column: 1 / -1; }
.play-form label { display: grid; gap: 5px; }
.play-form textarea, .play-form select { width: 100%; padding: 8px 10px; border: 1px solid var(--tile-edge); border-radius: 8px; background: var(--lcd); font: 400 14.5px/1.4 var(--sans); color: var(--lcd-text); }
.play-answer { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--tile-edge); border-radius: 8px; background: var(--lcd-raised); max-width: 900px; }
.play-answer .verdict { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; font: 700 20px/1.2 var(--cond); }
.play-actions { margin: 8px 0; padding-left: 20px; }
.play-draft { margin: 8px 0; }
#play-out .meta { display: flex; align-items: center; gap: 8px; }
select.feat-co { padding: 5px 8px; border: 1px solid var(--tile-edge); border-radius: 6px; background: var(--lcd); font: 500 13px/1.2 var(--sans); }
@media (max-width: 720px) { .play-form { grid-template-columns: 1fr; } }
.hq-read :is(#play-form, #feat-plans input, select.feat-co) { pointer-events: none; opacity: .6; }
.hq-read #play-form .keys { display: none !important; }

/* Nightly clear-out */
.ret-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; max-width: 760px; margin-top: 12px; }
.ret-form label { display: grid; gap: 5px; }
.ret-n { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--lcd-soft); }
.ret-n input { width: 90px; }
.ret-form .ret-on { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: 14.5px; }
.ret-form .ret-on input { accent-color: var(--led-red); }
.ret-form .keys { grid-column: 1 / -1; }
@media (max-width: 720px) { .ret-form { grid-template-columns: 1fr; } }

/* Trials and billing */
.bill-form .bill-row { display: flex; flex-wrap: wrap; gap: 12px 24px; margin: 0 0 12px; }
.bill-form .bill-row label { display: grid; gap: 5px; }
.bill-form .ret-on { display: flex; align-items: center; gap: 8px; font-size: 14.5px; }
.bill-prices { width: 100%; border-collapse: collapse; margin: 6px 0 10px; font-size: 14px; }
.bill-prices th, .bill-prices td { padding: 6px 8px; border-bottom: 1px solid var(--lcd-rule); text-align: left; }
.bill-prices thead th { font: 600 12px/1.2 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--lcd-dim); }
.bill-prices input, .bill-prices select { width: 100%; }
@media (max-width: 860px) { .bill-prices thead { display: none; } .bill-prices tr { display: grid; gap: 4px; padding: 8px 0; border-bottom: 1px solid var(--lcd-rule); } .bill-prices th, .bill-prices td { border: 0; padding: 2px 0; } }
.bill-form .bill-row label.ret-on { display: flex; align-items: center; }

/* Compliance */
.comp-item .result small { color: var(--lcd-soft); }
.comp-notes { display: block; width: 100%; margin-top: 6px; font-size: 13.5px; }
.comp-item .refs { display: grid; gap: 6px; justify-items: end; }
.comp-item select { padding: 5px 8px; border: 1px solid var(--tile-edge); border-radius: 6px; background: var(--lcd); font: 500 13px/1.2 var(--sans); }
.comp-due { width: 150px; font-size: 13px; }
.comp-add, .comp-doc-add { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.comp-add input, .comp-doc-add input { flex: 1 1 200px; }
.bill-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 8px 0 14px; }
.bill-tiles .tile { padding: 12px 14px; border: 1px solid var(--lcd-rule); border-radius: 8px; background: var(--lcd-raised); display: grid; gap: 2px; }
.bill-tiles .tile span { font: 600 12px/1.2 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--lcd-dim); }
.bill-tiles .tile b { font: 700 24px/1.1 var(--cond); }
.bill-tiles .tile small { font-size: 12.5px; color: var(--lcd-soft); }
@media (max-width: 720px) { .bill-tiles { grid-template-columns: 1fr; } .comp-item .refs { justify-items: start; } }

/* Seven view keys: keep them on one line; drop the clock and level label before anything wraps */
.panel.hq .mode, .hq-back { white-space: nowrap; }
.panel.hq .modes { flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
@media (max-width: 1600px) { .panel.hq .bezel .clock { display: none; } }
@media (max-width: 1440px) { .panel.hq .bezel .sample { display: none; } .hq-back .long { display: none; } }

/* Company → Support access */
.sup-case { width: 100%; text-align: left; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; }
.sup-case:hover { background: rgba(255,255,255,.04); }
.sup-rows { margin: 4px 0 0; padding-left: 18px; }
/* Keys */
.key-item .refs { display: grid; gap: 6px; justify-items: end; }
.key-date { display: grid; gap: 3px; font: 600 11px/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--lcd-dim); }
.key-item .result .hq-input[name=notes] { width: 100%; margin-top: 6px; }
@media (max-width: 760px) { .key-item .refs { justify-items: start; } }
.key-item .check small { overflow-wrap: anywhere; }
label.wide.check { display: flex; gap: 8px; align-items: center; font-size: 14px; }