/* BDD Countdown Calculator and Clock (2026-09-05). Loaded only by /dc/bdd.
 * Tokens from main.css; gold accent border per THE BUTTON LAW for the
 * clickable controls; result cards are informational (not clickable) so they
 * carry a plain 2px border. Three columns when they fit, stacked on phones,
 * no horizontal overflow at 375px. State is shown in words, never by colour
 * alone. No animation anywhere (reduced-motion safe by construction). */

.bddc {
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: 1.25rem 1.25rem 1.5rem;
  margin: 1.5rem 0 2rem;
}
.bddc h2 { font-size: 1.35rem; color: var(--color-primary); margin: 0 0 .35rem; }
.bddc .bddc-intro { font-size: .95rem; line-height: 1.6; color: var(--color-text-muted); margin: 0 0 .5rem; max-width: var(--prose-measure); margin-inline: auto; }
.bddc .bddc-today { font-size: .9rem; color: var(--color-text); margin: 0 0 1rem; font-variant-numeric: tabular-nums; }
.bddc .bddc-today strong { color: var(--color-primary); }

/* Mode controls: two real buttons, each a described choice. */
.bddc-modes { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin: 0 0 1.25rem; }
.bddc-mode {
  display: block; width: 100%; text-align: left; cursor: pointer; font-family: inherit;
  background: var(--color-surface); color: var(--color-text);
  border: 2px solid var(--color-accent); border-radius: var(--radius-md);
  padding: .8rem 1rem; min-height: 64px;
}
.bddc-mode strong { display: block; color: var(--color-primary); font-size: 1rem; }
.bddc-mode span { display: block; font-size: .85rem; color: var(--color-text-muted); line-height: 1.4; margin-top: .15rem; }
.bddc-mode[aria-pressed="true"] { background: rgba(26,58,107,.08); border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }
.bddc-mode:hover { border-color: var(--color-primary); }
.bddc-mode:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
:root[data-theme="dark"] .bddc-mode[aria-pressed="true"] { background: rgba(232,181,74,.14); }

.bddc-panel[hidden] { display: none; }
.bddc-form { display: grid; gap: .85rem 1rem; grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; align-items: start; margin: 0 0 1rem; }
.bddc-form .bddc-field:last-child { padding-top: 1.55rem; }
.bddc-form .bddc-field { margin: 0; }
.bddc-field label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .3rem; color: var(--color-text); }
.bddc-field input[type="date"], .bddc-field input[type="text"] {
  width: 100%; box-sizing: border-box; min-height: 44px; padding: .55rem .7rem; font-size: 1rem; font-family: inherit;
  border: 2px solid var(--color-control-border, #767f8f); border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--color-text);
}
.bddc-field input:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 1px; }
.bddc-field .bddc-hint { font-size: .8rem; color: var(--color-text-muted); margin: .25rem 0 0; }
.bddc-field .bddc-error { font-size: .85rem; color: var(--color-danger); margin: .3rem 0 0; font-weight: 600; }
.bddc-field.is-invalid input { border-color: var(--color-danger); }
.bddc .btn { min-height: 44px; }
.bddc-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: .75rem 0 0; }

.bddc-status { font-size: .95rem; font-weight: 600; color: var(--color-primary); margin: 1rem 0 .75rem; }
.bddc-status:empty { display: none; }
.bddc-note { font-size: .85rem; color: var(--color-text-muted); margin: .5rem 0 0; line-height: 1.5; }
.bddc-flash { font-size: .9rem; margin: .6rem 0 0; padding: .55rem .75rem; border-radius: var(--radius-sm); border: 2px solid var(--color-border); background: var(--color-bg, #fafafa); color: var(--color-text); }
.bddc-flash:empty { display: none; }
.bddc-flash.is-error { border-color: var(--color-danger); }
.bddc-flash.is-ok { border-color: var(--color-success, #2e7d32); }

/* Result cards */
.bddc-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; margin: .5rem 0 0; }
.bddc-card { border: 2px solid var(--color-border); border-radius: var(--radius-md); padding: .9rem 1rem; background: var(--color-surface); min-width: 0; }
.bddc-card h3 { font-size: .92rem; color: var(--color-text-muted); margin: 0 0 .35rem; font-weight: 600; }
.bddc-card .bddc-big { font-size: 1.6rem; font-weight: 800; color: var(--color-primary); line-height: 1.15; margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.bddc-card .bddc-date { font-size: .95rem; color: var(--color-text); margin: .35rem 0 0; font-weight: 600; }
.bddc-card .bddc-sub { font-size: .82rem; color: var(--color-text-muted); margin: .2rem 0 0; }
.bddc-card .bddc-guide { font-size: .84rem; color: var(--color-text); margin: .6rem 0 0; line-height: 1.5; border-top: 1px solid var(--color-border); padding-top: .5rem; }
.bddc-card.is-passed .bddc-big { color: var(--color-text-muted); }

/* Roster (specialist) */
.bddc-roster-head { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; margin: 1rem 0 .5rem; }
.bddc-count { font-size: .95rem; font-weight: 600; color: var(--color-text); }
.bddc-view { display: inline-flex; gap: .35rem; }
.bddc-view button { min-height: 40px; padding: .35rem .8rem; font: inherit; font-size: .85rem; border: 2px solid var(--color-accent); background: var(--color-surface); color: var(--color-primary); border-radius: 20px; cursor: pointer; }
.bddc-view button[aria-pressed="true"] { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.bddc-table-wrap { overflow-x: auto; }
.bddc-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.bddc-table th { text-align: left; background: var(--color-primary); color: #fff; padding: .5rem .6rem; font-size: .78rem; font-weight: 600; }
.bddc-table td { padding: .55rem .6rem; border-bottom: 1px solid var(--color-border); vertical-align: top; line-height: 1.45; }
.bddc-table td .bddc-when { display: block; font-weight: 600; color: var(--color-primary); font-variant-numeric: tabular-nums; }
.bddc-table td .bddc-on { display: block; font-size: .8rem; color: var(--color-text-muted); }
.bddc-table .bddc-name { font-weight: 600; color: var(--color-text); overflow-wrap: anywhere; max-width: 18ch; }
.bddc-table .bddc-tag { display: inline-block; font-size: .72rem; padding: .1rem .45rem; border-radius: 10px; background: rgba(26,58,107,.1); color: var(--color-primary); margin-left: .3rem; vertical-align: middle; }
.bddc-row-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.bddc-row-actions .btn { min-height: 40px; }
.bddc-edit { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: .6rem; padding: .6rem 0; }
.bddc-edit .bddc-actions { grid-column: 1 / -1; margin: 0; }
.bddc-empty { font-size: .92rem; color: var(--color-text-muted); margin: .75rem 0; }

/* Saved state + email status block (2026-09-05; replaced the enrollment block) */
.bddc-account { margin: 1.25rem 0 0; padding: 1rem 1.1rem; border: 2px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg, #fafafa); }
.bddc-account h3 { font-size: 1.05rem; color: var(--color-primary); margin: 0 0 .4rem; }
.bddc-account p { font-size: .9rem; line-height: 1.55; margin: .35rem 0; color: var(--color-text); }
.bddc-account .bddc-dest { font-weight: 600; overflow-wrap: anywhere; }
.bddc-email-status { font-weight: 600; }
.bddc-manage, .bddc-find a { color: var(--color-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; display: inline-block; min-height: 44px; line-height: 44px; }
:root[data-theme="dark"] .bddc-account, :root[data-theme="dark"] .bddc-flash { background: rgba(255,255,255,.04); }
/* Pre-save disclosure beside Save, and the acknowledgement under a saved result */
.bddc-disclose { font-size: .88rem; line-height: 1.55; color: var(--color-text); margin: .5rem 0 0; max-width: var(--prose-measure); margin-inline: auto; }
.bddc-disclose:empty { display: none; }
.bddc-disclose a { color: var(--color-primary); font-weight: 600; }
.bddc-ack { margin: .85rem 0 0; padding: .8rem 1rem; border: 2px solid var(--color-success, #2e7d32); border-radius: var(--radius-md); background: var(--color-surface); }
.bddc-ack-head { font-weight: 700; color: var(--color-primary); margin: 0 0 .3rem; font-size: .95rem; overflow-wrap: anywhere; }
.bddc-ack-status { font-size: .9rem; margin: 0 0 .3rem; color: var(--color-text); line-height: 1.5; }
.bddc-ack .bddc-note { margin-top: .3rem; }
.bddc-flash-btn { min-height: 40px; margin-left: .35rem; }
#bddc-sp-signin { min-height: 44px; }

.bddc-sources { font-size: .84rem; color: var(--color-text-muted); margin: 1.1rem 0 0; line-height: 1.55; }
.bddc-sources a { color: var(--color-primary); }
.bddc-nojs { font-size: .9rem; color: var(--color-text-muted); margin: .5rem 0; }

@media (max-width: 760px) {
  .bddc-cards { grid-template-columns: 1fr; }
  .bddc-form { grid-template-columns: 1fr; }
  .bddc-form .bddc-field:last-child { padding-top: 0; }
  .bddc-modes { grid-template-columns: 1fr; }
  /* Stacked rows on phones: each cell carries its label. */
  .bddc-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .bddc-table, .bddc-table tbody, .bddc-table tr, .bddc-table td { display: block; width: 100%; box-sizing: border-box; }
  .bddc-table tr { border: 2px solid var(--color-border); border-radius: var(--radius-md); padding: .5rem .7rem; margin: 0 0 .75rem; }
  .bddc-table td { border: 0; padding: .3rem 0; }
  .bddc-table td::before { content: attr(data-label); display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); }
  .bddc-table td.bddc-cell-actions::before { content: none; }
  .bddc-table .bddc-name { max-width: none; }
  .bddc-edit { grid-template-columns: 1fr; }
}