/* ==========================================================================
   company-components.css — cards, tables, pills, buttons, forms, empty states.
   ========================================================================== */
.co-card{background:var(--co-surface); border:1px solid var(--co-border); border-radius:var(--co-radius); box-shadow:var(--co-shadow)}
.co-card-head{padding:13px 16px; border-bottom:1px solid var(--co-border); display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.co-card-head h2,.co-card-head h3{font-size:13.5px; font-weight:600; letter-spacing:-.005em}
.co-card-head .note{font-size:11.5px; color:var(--co-ink-3)}
.co-card-head .right{margin-left:auto; display:flex; gap:7px; align-items:center}
.co-card-body{padding:16px}
.co-card-body.flush{padding:0}

.co-btn{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  padding:6px 13px; border-radius:var(--co-radius-sm); font-size:12.5px;
  font-weight:600; border:1px solid var(--co-border); background:var(--co-surface);
  color:var(--co-ink-2); transition:.12s; white-space:nowrap; text-decoration:none;
}
.co-btn:hover{background:var(--co-surface-2); color:var(--co-ink)}
.co-btn-primary{background:var(--co-accent); border-color:var(--co-accent); color:var(--co-on-accent)}
.co-btn-primary:hover{background:var(--co-accent-strong); border-color:var(--co-accent-strong); color:var(--co-on-accent)}
.co-btn-good{background:var(--co-good-soft); border-color:transparent; color:var(--co-good)}
.co-btn-danger{background:var(--co-attention-soft); border-color:transparent; color:var(--co-attention)}
.co-btn-sm{padding:4px 9px; font-size:11.5px}
.co-btn[disabled],.co-btn.disabled{opacity:.45; cursor:not-allowed; pointer-events:none}

/* Status pills. One class per tone — never a hard-coded colour. */
.co-pill{display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:20px; font-size:11px; font-weight:600; white-space:nowrap}
.co-pill::before{content:""; width:5px; height:5px; border-radius:50%; background:currentColor; flex:0 0 5px}
.co-pill--good{background:var(--co-good-soft); color:var(--co-good)}
.co-pill--active{background:var(--co-active-soft); color:var(--co-active)}
.co-pill--waiting{background:var(--co-waiting-soft); color:var(--co-waiting)}
.co-pill--attention{background:var(--co-attention-soft); color:var(--co-attention)}
.co-pill--inert{background:var(--co-inert-soft); color:var(--co-inert)}
.co-pill--info{background:var(--co-info-soft); color:var(--co-info)}

.co-tag{display:inline-block; padding:1px 7px; border-radius:5px; font-size:10.5px; font-weight:600; background:var(--co-surface-2); color:var(--co-ink-2); border:1px solid var(--co-border)}
.co-mono{font-family:var(--co-font-mono); font-size:.92em; font-variant-numeric:tabular-nums}
.co-num{font-variant-numeric:tabular-nums}

.co-avatar{width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--co-accent-soft); color:var(--co-accent-ink); font-size:11px; font-weight:700; flex:0 0 auto}

.co-statrow{display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:12px; margin-bottom:18px}
.co-stat{background:var(--co-surface); border:1px solid var(--co-border); border-radius:var(--co-radius); padding:13px 15px 11px; box-shadow:var(--co-shadow); position:relative; overflow:hidden}
.co-stat-label{font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--co-ink-3); font-weight:600}
.co-stat-value{font-family:var(--co-font-display); font-size:27px; font-weight:600; line-height:1.1; margin-top:5px; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.co-stat-note{font-size:11.5px; color:var(--co-ink-3); margin-top:3px}
.co-stat--attention{border-color:var(--co-attention)}
.co-stat--attention .co-stat-value{color:var(--co-attention)}

.co-tablewrap{overflow-x:auto}
.co-table{width:100%; border-collapse:collapse; font-size:13px}
.co-table th{text-align:left; font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--co-ink-3); font-weight:600; padding:9px 14px; border-bottom:1px solid var(--co-border); background:var(--co-surface-2); white-space:nowrap}
.co-table td{padding:10px 14px; border-bottom:1px solid var(--co-border); vertical-align:middle}
.co-table tbody tr:last-child td{border-bottom:0}
.co-table tbody tr:hover{background:var(--co-surface-2)}
.co-table .r{text-align:right}

.co-rows{display:flex; flex-direction:column}
.co-row{display:flex; align-items:center; gap:12px; padding:11px 16px; border-bottom:1px solid var(--co-border)}
.co-row:last-child{border-bottom:0}
.co-row:hover{background:var(--co-surface-2)}
.co-row-time{font-family:var(--co-font-mono); font-size:12px; font-weight:500; color:var(--co-ink-2); min-width:58px; font-variant-numeric:tabular-nums}
.co-row-main{flex:1 1 auto; min-width:0}
.co-row-main b{display:block; font-weight:600; font-size:13.5px; line-height:1.3}
.co-row-main small{display:block; color:var(--co-ink-3); font-size:11.5px}

.co-filters{display:flex; gap:8px; flex-wrap:wrap; align-items:flex-end; margin-bottom:14px}
.co-field{display:flex; flex-direction:column; gap:4px}
.co-field label{font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--co-ink-3); font-weight:600}
.co-field select,.co-field input,select,input[type="text"],input[type="email"],input[type="password"],input[type="date"],textarea{
  font:inherit; font-size:12.5px; padding:6px 10px; border-radius:var(--co-radius-sm);
  border:1px solid var(--co-border); background:var(--co-surface); color:var(--co-ink); min-width:120px;
}
textarea{width:100%; min-height:76px; resize:vertical; line-height:1.5}

/* Sidebar visibility: a group, then the entries inside it. Rendered as a real
   hierarchy because a flat list of forty checkboxes cannot say which entry
   belongs to which group — which is the only thing somebody needs to know
   while switching them off. */
.co-navgroup{border:1px solid var(--co-border); border-radius:var(--co-radius); padding:10px 12px}
.co-navgroup-head{display:flex; align-items:center; gap:8px; margin-bottom:6px}
.co-navgroup-head small{color:var(--co-ink-3)}
.co-navgroup-note{display:block; margin:0 0 6px 20px; color:var(--co-ink-3)}
.co-navgroup-item{margin-left:20px}
/* A group switched off hides everything in it, so its entries stop meaning
   anything. They are dimmed rather than unticked: unticking them would throw
   away the per-entry choices the moment somebody toggled a group off and on
   again. No script — :has() reads the group's own checkbox. */
.co-navgroup:has(.co-navgroup-head input:not(:checked)) .co-navgroup-item{
  opacity:.4;
}
.co-check{display:flex; align-items:center; gap:7px; font-size:12.5px; cursor:pointer; padding:2px 0}
.co-check input[type="checkbox"]{min-width:0; margin:0}

.co-empty{padding:38px 20px; text-align:center; color:var(--co-ink-3)}
.co-empty-title{color:var(--co-ink-2); font-size:13.5px; font-weight:600; margin-bottom:3px}
.co-empty-text{font-size:12.5px; max-width:360px; margin:0 auto}

.co-alert{border-radius:var(--co-radius); padding:12px 15px; border:1px solid; margin-bottom:12px; font-size:13px}
.co-alert--good{background:var(--co-good-soft); border-color:var(--co-good); color:var(--co-good)}
.co-alert--attention{background:var(--co-attention-soft); border-color:var(--co-attention); color:var(--co-attention)}
.co-alert--waiting{background:var(--co-waiting-soft); border-color:var(--co-waiting); color:var(--co-waiting)}
.co-alert--info{background:var(--co-info-soft); border-color:var(--co-info); color:var(--co-info)}

.co-pagination{display:flex; align-items:center; gap:10px; padding:12px 16px; border-top:1px solid var(--co-border); font-size:12.5px; color:var(--co-ink-3); flex-wrap:wrap}
.co-pagination .spacer{margin-left:auto}

.co-auth{min-height:100vh; display:grid; place-items:center; padding:24px; background:var(--co-ground)}
.co-auth-card{width:min(400px,100%); background:var(--co-surface); border:1px solid var(--co-border); border-radius:var(--co-radius); box-shadow:var(--co-shadow-lg); padding:30px}

/* --------------------------------------------------------------------------
   Layout utilities.

   These exist because the CSP is default-deny: an inline `style=` attribute
   is dropped silently, so the element renders unstyled and nobody sees an
   error. Every rule a template needs has to be a class in a stylesheet.
   -------------------------------------------------------------------------- */
.co-stack-sm{display:flex; flex-direction:column; gap:8px}
.co-stack{display:flex; flex-direction:column; gap:16px}
.co-inline{display:flex; align-items:center; gap:10px}
.co-full{width:100%}
.co-center{justify-content:center}
.co-mt{margin-top:12px}
.co-mt-lg{margin-top:20px}
.co-mb{margin-bottom:14px}
.co-mb-lg{margin-bottom:22px}
.co-body-text{color:var(--co-ink-2); line-height:1.6}

/* Standalone message pages: 403, 404, 500. */
.co-notice{max-width:520px; margin:40px auto}
.co-notice .co-card-body{text-align:center; padding:36px 30px}
.co-notice .co-page-title{margin:8px 0 10px}

/* Auth form. */
.co-auth-title{font-size:21px}
.co-auth-sub{margin-bottom:20px}
.co-auth-foot{margin-top:18px; text-align:center; font-size:12.5px}
.co-auth-foot a{color:var(--co-accent-ink); text-decoration:none}
.co-auth-foot a:hover{text-decoration:underline}

/* --------------------------------------------------------------------------
   Booking wizard
   -------------------------------------------------------------------------- */
.co-steps{display:flex; gap:0; margin-bottom:20px; flex-wrap:wrap}
.co-step{display:flex; align-items:center; gap:8px; padding-right:16px}
.co-step-n{width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:11.5px; font-weight:700; background:var(--co-surface-3); color:var(--co-ink-3); flex:0 0 24px}
.co-step-label{font-size:12px; color:var(--co-ink-3); font-weight:500; white-space:nowrap}
.co-step-bar{width:22px; height:1.5px; background:var(--co-border); margin-left:8px}
.co-step--done .co-step-n{background:var(--co-good-soft); color:var(--co-good)}
.co-step--done .co-step-label{color:var(--co-ink-2)}
.co-step--now .co-step-n{background:var(--co-accent); color:var(--co-on-accent)}
.co-step--now .co-step-label{color:var(--co-ink); font-weight:600}

.co-choices{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px}
/* A filter row, not a set of destinations: these sit above a list and narrow
   it, so they shrink to their text and wrap instead of holding a grid column
   each. Same component, different job. */
.co-choices--inline{display:flex; flex-wrap:wrap; gap:8px}
.co-choices--inline .co-choice{width:auto; padding:8px 14px}
.co-choice{text-align:left; cursor:pointer; padding:13px 14px; border-radius:var(--co-radius); border:1px solid var(--co-border); background:var(--co-surface); transition:.12s; display:flex; flex-direction:column; gap:3px; text-decoration:none; color:inherit; width:100%}
.co-choice:hover{border-color:var(--co-accent); background:var(--co-accent-soft); color:inherit}
.co-choice--selected{border-color:var(--co-accent); background:var(--co-accent-soft); box-shadow:0 0 0 1px var(--co-accent)}
.co-choice b{font-size:13.5px; font-weight:600}
.co-choice small{font-size:11.5px; color:var(--co-ink-3)}
.co-choice-meta{margin-top:6px; display:flex; gap:6px; flex-wrap:wrap}
.co-choice--disabled{opacity:.5; cursor:not-allowed; pointer-events:none}

.co-daystrip{display:flex; gap:8px; overflow-x:auto; padding-bottom:4px}
.co-daybtn{cursor:pointer; min-width:82px; padding:9px 6px; border-radius:var(--co-radius-sm); border:1px solid var(--co-border); background:var(--co-surface); text-align:center; transition:.12s; flex:0 0 auto; text-decoration:none; color:inherit; display:block}
.co-daybtn small{display:block; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--co-ink-3); font-weight:600}
.co-daybtn b{display:block; font-family:var(--co-font-display); font-size:19px; font-weight:600; line-height:1.15; margin:1px 0}
.co-daybtn i{display:block; font-style:normal; font-size:10.5px; color:var(--co-ink-3)}
.co-daybtn:hover{border-color:var(--co-accent); color:inherit}
.co-daybtn--selected{background:var(--co-accent-soft); border-color:var(--co-accent); box-shadow:0 0 0 1px var(--co-accent)}
.co-daybtn--selected b,.co-daybtn--selected i{color:var(--co-accent-ink)}
.co-daybtn--empty{opacity:.45; cursor:not-allowed; pointer-events:none}

.co-timegrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:8px}
.co-timebtn{cursor:pointer; display:block; text-decoration:none; color:inherit; padding:9px 6px; border-radius:var(--co-radius-sm); border:1px solid var(--co-border); background:var(--co-surface); font-size:12.5px; font-weight:500; font-variant-numeric:tabular-nums; transition:.12s; text-align:center; width:100%}
.co-timebtn:hover{border-color:var(--co-accent); color:var(--co-accent-ink); background:var(--co-accent-soft)}
.co-teacher-slots{margin-bottom:18px}
.co-teacher-slots-head{display:flex; align-items:center; gap:9px; margin-bottom:9px}
/* One offer within a teacher's day: what the window is for, then its times.
   Wraps to stacked on a narrow screen so the label never squeezes the grid. */
.co-slotrow{display:flex; align-items:flex-start; gap:10px; flex-wrap:wrap; margin-bottom:9px}
.co-slotrow-label{display:flex; gap:5px; flex-wrap:wrap; min-width:0; padding-top:2px}

/* --------------------------------------------------------------------------
   Reservation allowance meter
   -------------------------------------------------------------------------- */
.co-kidcard{background:var(--co-surface); border:1px solid var(--co-border); border-radius:var(--co-radius); padding:16px; box-shadow:var(--co-shadow); display:flex; flex-direction:column; gap:12px}
.co-kidcard-top{display:flex; align-items:center; gap:11px}
.co-kidcard-top .co-avatar{width:38px; height:38px; font-size:14px}
.co-kidcard-name{font-family:var(--co-font-display); font-size:17px; font-weight:600; letter-spacing:-.01em; display:block; line-height:1.2}
.co-kidcard-sub{color:var(--co-ink-3); font-size:11.5px}
.co-meter{display:flex; flex-direction:column; gap:6px}
.co-meter-head{display:flex; align-items:baseline; gap:8px; font-size:11.5px; color:var(--co-ink-3)}
.co-meter-head b{margin-left:auto; font-size:13px; color:var(--co-ink); font-variant-numeric:tabular-nums}
.co-pips{display:flex; gap:5px}
.co-pip{flex:1; height:7px; border-radius:4px; background:var(--co-surface-3)}
.co-pip--used{background:var(--co-accent)}
.co-pip--full{background:var(--co-attention)}
.co-meter-note{font-size:11.5px; color:var(--co-ink-3)}
.co-meter-note--blocked{color:var(--co-attention); font-weight:600}
.co-cardgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(262px,1fr)); gap:14px; margin-bottom:18px}

/* --------------------------------------------------------------------------
   Notices — the limit wall, and anything else that needs explaining
   -------------------------------------------------------------------------- */
.co-notice-block{border-radius:var(--co-radius); padding:16px 18px; border:1px solid; margin-bottom:16px}
.co-notice-block b{display:block; font-size:14.5px; font-weight:600; margin-bottom:4px}
.co-notice-block p{font-size:12.5px; line-height:1.6}
.co-notice-block p + p{margin-top:8px}
.co-notice-actions{margin-top:12px; display:flex; gap:8px; flex-wrap:wrap}
.co-notice-block--attention{background:var(--co-attention-soft); border-color:var(--co-attention); color:var(--co-attention)}
.co-notice-block--good{background:var(--co-good-soft); border-color:var(--co-good); color:var(--co-good)}
.co-notice-block--info{background:var(--co-info-soft); border-color:var(--co-info); color:var(--co-info)}
.co-notice-block--waiting{background:var(--co-waiting-soft); border-color:var(--co-waiting); color:var(--co-waiting)}

/* --------------------------------------------------------------------------
   Master calendar — teachers as rows, days as columns
   -------------------------------------------------------------------------- */
.co-mcal{overflow-x:auto}
.co-mcal table{min-width:940px; font-size:12px}
.co-mcal th.co-day{text-align:center; min-width:124px}
.co-mcal th.co-day span{display:block; font-size:15px; color:var(--co-ink); font-family:var(--co-font-display); letter-spacing:-.01em; margin-top:2px; text-transform:none}
.co-mcal th.co-day--today span{color:var(--co-accent-ink)}
.co-mcal td{padding:6px; vertical-align:top; border-right:1px solid var(--co-border)}
.co-mcal td:last-child{border-right:0}
.co-mcal td.co-tname{background:var(--co-surface-2); white-space:nowrap; vertical-align:middle; position:sticky; left:0; z-index:2}
.co-mcal th:first-child{position:sticky; left:0; z-index:3}
.co-slot{display:block; width:100%; text-align:left; border:0; border-radius:6px; padding:4px 7px; margin-bottom:4px; font-size:11px; line-height:1.3; border-left:3px solid transparent; text-decoration:none}
.co-slot:last-child{margin-bottom:0}
.co-slot b{display:block; font-weight:600; font-size:10.5px; font-variant-numeric:tabular-nums}
.co-slot span{display:block; opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.co-slot--open{background:var(--co-good-soft); color:var(--co-good); border-left-color:var(--co-good)}
.co-slot--active{background:var(--co-active-soft); color:var(--co-active); border-left-color:var(--co-active)}
.co-slot--waiting{background:var(--co-waiting-soft); color:var(--co-waiting); border-left-color:var(--co-waiting)}
.co-slot--good{background:var(--co-info-soft); color:var(--co-info); border-left-color:var(--co-info)}
.co-slot--blocked{background:var(--co-inert-soft); color:var(--co-inert); border-left-color:var(--co-border-strong)}
.co-slot--none{font-size:10.5px; color:var(--co-ink-3)}
.co-legend{display:flex; gap:14px; flex-wrap:wrap; font-size:11.5px; color:var(--co-ink-2)}
.co-legend i{display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:5px; vertical-align:-1px; font-style:normal}
.co-legend-open{background:var(--co-good)}
.co-legend-active{background:var(--co-active)}
.co-legend-waiting{background:var(--co-waiting)}
.co-legend-good{background:var(--co-info)}
.co-legend-blocked{background:var(--co-border-strong)}

/* --------------------------------------------------------------------------
   Layout helpers used across the surfaces
   -------------------------------------------------------------------------- */
.co-grid-2{display:grid; grid-template-columns:1.35fr 1fr; gap:16px; align-items:start}
.co-grid-even{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start}
/* A grid child's default `min-width:auto` refuses to shrink below its content,
   so anything that scrolls INSIDE itself — a day strip, a wide table — widens
   its column instead and the whole page scrolls sideways. The reschedule
   picker put a `.co-daystrip` in a `.co-grid-2` and took the body to 1784px in
   a 1440 viewport. `min-width:0` lets the column shrink so the scrolling
   container does its job. */
.co-grid-2 > *,
.co-grid-even > *{min-width:0}
@media (max-width:1080px){.co-grid-2,.co-grid-even{grid-template-columns:1fr}}
.co-summary{display:flex; flex-direction:column}
.co-summary-row{display:flex; gap:12px; padding:9px 0; border-bottom:1px solid var(--co-border); font-size:13px}
.co-summary-row:last-child{border-bottom:0}
.co-summary-row span{color:var(--co-ink-3); min-width:104px; font-size:11px; letter-spacing:.04em; text-transform:uppercase; font-weight:600; padding-top:1px}
.co-summary-row b{font-weight:600; flex:1}
.co-exrow{display:flex; gap:11px; padding:12px 16px; border-bottom:1px solid var(--co-border); align-items:flex-start}
.co-exrow:last-child{border-bottom:0}
.co-exrow-dot{width:7px; height:7px; border-radius:50%; margin-top:6px; flex:0 0 7px}
.co-exrow-dot--attention{background:var(--co-attention)}
.co-exrow-dot--waiting{background:var(--co-waiting)}
.co-exrow-dot--info{background:var(--co-info)}
.co-exrow-body{flex:1 1 auto; min-width:0}
.co-exrow-body b{display:block; font-size:13px; font-weight:600}
.co-exrow-body small{display:block; color:var(--co-ink-3); font-size:11.5px; margin-top:1px}
.co-ubar{display:flex; align-items:center; gap:9px; min-width:150px}
.co-ubar-track{flex:1; height:6px; border-radius:4px; background:var(--co-surface-3); overflow:hidden}
.co-ubar-fill{height:100%; border-radius:4px; background:var(--co-accent)}
.co-ubar-fill--good{background:var(--co-good)}
.co-ubar-fill--waiting{background:var(--co-waiting)}
.co-ubar-fill--attention{background:var(--co-attention)}
.co-ubar-fill--info{background:var(--co-info)}
.co-ubar-value{font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; min-width:38px; text-align:right}
.co-formrow{display:flex; flex-direction:column; gap:5px; margin-bottom:14px}
.co-formrow label{font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--co-ink-3); font-weight:600}
.co-formrow .helptext{font-size:11.5px; color:var(--co-ink-3)}
.co-formrow .errorlist{list-style:none; margin:0; padding:0; font-size:11.5px; color:var(--co-attention); font-weight:600}
.co-actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:18px}
.co-actions--end{justify-content:flex-end}

/* --------------------------------------------------------------------------
   The notification bell
   -------------------------------------------------------------------------- */
.co-bell{position:relative; text-decoration:none}
.co-bell-count{
  position:absolute; top:-4px; right:-4px; min-width:16px; height:16px;
  padding:0 4px; border-radius:10px; background:var(--co-attention);
  color:var(--co-surface); font-size:10px; font-weight:700; line-height:16px;
  text-align:center; font-variant-numeric:tabular-nums;
  border:2px solid var(--co-surface);
}
.co-notice-list{display:flex; flex-direction:column}
.co-notice-item{
  display:flex; gap:12px; padding:12px 16px; border-bottom:1px solid var(--co-border);
  color:inherit; align-items:center;
}
.co-notice-item:last-child{border-bottom:0}
.co-notice-item:hover{background:var(--co-surface-2)}
.co-notice-item--cleared{opacity:.55}
.co-notice-actions{display:flex; gap:6px; flex:0 0 auto}
.co-notice-item--unread{background:var(--co-accent-soft)}
.co-notice-item--unread:hover{background:var(--co-accent-soft)}
.co-notice-dot{
  width:8px; height:8px; border-radius:50%; flex:0 0 8px; margin-top:6px;
  background:var(--co-accent);
}
.co-notice-dot--read{background:transparent; border:1px solid var(--co-border-strong)}
.co-notice-body{flex:1 1 auto; min-width:0; text-decoration:none; color:inherit}
.co-notice-body:hover b{color:var(--co-accent-ink)}
.co-notice-body b{display:block; font-size:13.5px; font-weight:600; line-height:1.35}
.co-notice-body small{display:block; color:var(--co-ink-3); font-size:11.5px; margin-top:2px}
.co-notice-when{font-size:11.5px; color:var(--co-ink-3); white-space:nowrap; flex:0 0 auto}

/* --------------------------------------------------------------------------
   The "viewing as" banner. Deliberately loud and deliberately not the brand
   copper: a support account looking at a family's screens should never be able
   to forget it, and a banner in the house colour reads as part of the page.
   -------------------------------------------------------------------------- */
.co-acting-banner {
  display:flex; align-items:center; gap:.75rem;
  padding:.55rem 1.25rem;
  background:var(--co-waiting-soft);
  color:var(--co-waiting);
  border-bottom:1px solid var(--co-border);
  font-size:.8125rem;
}
.co-acting-banner b { color:var(--co-ink); }
.co-acting-banner i { font-size:1.1rem; }
.co-acting-banner form { margin-left:auto; }

.co-pickrow {
  display:flex; align-items:center; gap:1rem;
  padding:.75rem 1.25rem;
  border-bottom:1px solid var(--co-border);
}
.co-pickrow:last-child { border-bottom:0; }
.co-pickrow-body { flex:1; min-width:0; }
.co-pickrow-body b { display:block; color:var(--co-ink); }
.co-pickrow-body small { color:var(--co-ink-3); }

/* --------------------------------------------------------------------------
   The maker's mark, bottom right.

   Inert by construction: `pointer-events:none` so it can never intercept a
   click meant for something underneath, and gone below 900px, where a fixed
   corner stops sitting beside the content and starts sitting on top of it.

   Two images, one per theme. A single navy mark vanishes on the dark ground
   and a single light one vanishes on the white; tinting a PNG with a filter
   would wash out the ridge line that makes the mark legible at 44px.
   -------------------------------------------------------------------------- */
.co-watermark {
  position:fixed; right:16px; bottom:12px; z-index:20;
  display:flex; align-items:center; gap:8px;
  padding:5px 10px; border-radius:999px;
  background:color-mix(in srgb, var(--co-surface) 82%, transparent);
  border:1px solid var(--co-border);
  font-size:10.5px; letter-spacing:.01em; color:var(--co-ink-3);
  pointer-events:none; user-select:none;
  backdrop-filter:blur(6px);
}
.co-watermark-mark { display:block; width:44px; height:auto; opacity:.9 }
.co-watermark-mark--dark { display:none }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .co-watermark-mark--light { display:none }
  :root:not([data-theme="light"]) .co-watermark-mark--dark { display:block }
}
:root[data-theme="dark"] .co-watermark-mark--light { display:none }
:root[data-theme="dark"] .co-watermark-mark--dark { display:block }

@media (max-width: 900px) { .co-watermark { display:none } }
@media print { .co-watermark { position:static; border:0; background:none } }

/* Cloudflare's widget sizes itself; this only gives it room and centres it. */
.co-turnstile { display:flex; justify-content:center; margin:16px 0 4px }

/* --------------------------------------------------------------------------
   Tabs. Links, not buttons: each tab is a real URL, so a browser's back button
   works and a page can be linked to in the state somebody is describing.
   -------------------------------------------------------------------------- */
.co-tabs{display:flex; gap:4px; border-bottom:1px solid var(--co-border); margin-bottom:16px}
.co-tab{
  display:flex; align-items:center; gap:7px;
  padding:9px 15px; font-size:13px; font-weight:500;
  color:var(--co-ink-3); text-decoration:none;
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.co-tab:hover{color:var(--co-ink-2)}
.co-tab--on{color:var(--co-ink); border-bottom-color:var(--co-accent); font-weight:600}

/* --- two-factor ---------------------------------------------------------- */
.co-steps-list{margin:0 0 14px 18px; padding:0; font-size:13px; color:var(--co-ink-2); line-height:1.9}
.co-qr{display:flex; justify-content:center; padding:14px; background:#ffffff;
       border:1px solid var(--co-border); border-radius:var(--co-radius); margin-bottom:12px}
.co-qr img{display:block; width:200px; height:200px; image-rendering:pixelated}
.co-auth-hint{font-size:12px; color:var(--co-ink-3); text-align:center; margin-bottom:18px; line-height:1.8}
.co-secret{display:inline-block; padding:4px 9px; background:var(--co-surface-2);
           border:1px solid var(--co-border); border-radius:var(--co-radius-sm);
           font-size:12.5px; letter-spacing:.04em; word-break:break-all}
.co-codes{display:grid; grid-template-columns:1fr 1fr; gap:7px; list-style:none;
          margin:0 0 18px; padding:14px; background:var(--co-surface-2);
          border:1px solid var(--co-border); border-radius:var(--co-radius)}
.co-codes li{font-size:13px; letter-spacing:.04em; text-align:center; padding:3px 0}

/* A row of related actions that read as one control rather than three. */
.co-btngroup{display:inline-flex; gap:0}
.co-btngroup .co-btn{border-radius:0; margin-left:-1px}
.co-btngroup .co-btn:first-child{border-radius:var(--co-radius-sm) 0 0 var(--co-radius-sm); margin-left:0}
.co-btngroup .co-btn:last-child{border-radius:0 var(--co-radius-sm) var(--co-radius-sm) 0}