/* Preserve semantic hidden controls even when component styles set display. */
[hidden] { display: none !important; }
@font-face { font-family: "Newsreader"; src:url("../fonts/Newsreader.ttf") format("truetype"); font-weight:200 800; font-style:normal; font-display:swap; }
@font-face { font-family: "Be Vietnam Pro"; src:url("../fonts/BeVietnamPro-Regular.ttf") format("truetype"); font-weight:400; font-display:swap; }
@font-face { font-family: "Be Vietnam Pro"; src:url("../fonts/BeVietnamPro-Medium.ttf") format("truetype"); font-weight:500; font-display:swap; }
@font-face { font-family: "Be Vietnam Pro"; src:url("../fonts/BeVietnamPro-SemiBold.ttf") format("truetype"); font-weight:600; font-display:swap; }
/* Deerdate HTML components. Load ../tokens.g.css first. */
* { box-sizing: border-box; }
:root { color-scheme: dark; }
body { margin: 0; background: var(--sys-canvas); color: var(--sys-text-primary); font: var(--type-body-weight) var(--type-body-size)/var(--type-body-height) var(--font-ui), sans-serif; }
h1,h2,h3 { font-family: var(--font-display), Georgia, serif; font-weight: var(--type-headline-weight); margin: 0 0 var(--sp-sm); }
h1 { font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.12; max-width: 18ch; }
h2 { font-size: var(--type-display-m-size); line-height: var(--type-display-m-height); }
h3 { font-size: var(--type-headline-size); line-height: var(--type-headline-height); }
p { margin: 0 0 var(--sp-sm); } a { color: var(--sys-action-primary); text-underline-offset: .25em; }
button,input,select,textarea { font: inherit; } button { cursor: pointer; }
:where(a,button,input,select,textarea):focus-visible { outline: 3px solid var(--sys-focus); outline-offset: 4px; }
.dd-container { max-width: var(--layout-content-max-width); padding: var(--sp-xl); margin: auto; }
.dd-form { width: 100%; max-width: var(--layout-form-max-width); }
.dd-row { display: flex; flex-wrap: wrap; gap: var(--sp-xs); align-items: center; }
.dd-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--sp-lg); }
.dd-muted { color: var(--sys-text-secondary); }
.dd-eyebrow { font-size: var(--type-caption-size); font-weight: var(--type-label-weight); letter-spacing: .12em; text-transform: uppercase; color: var(--sys-action-primary); }
.dd-card { background: var(--sys-surface); border: 1px solid var(--sys-border-subtle); border-radius: var(--r-card); padding: var(--sp-md); min-width: 0; }
.dd-button { min-height: var(--layout-button-height); padding: var(--sp-xs) var(--sp-lg); border-radius: var(--r-field); border: 1px solid transparent; background: var(--sys-action-primary); color: var(--sys-on-action-primary); font-weight: var(--type-label-weight); transition: filter var(--t-quick), transform var(--t-quick); display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-xxs); text-decoration: none; }
.dd-button--secondary { background: transparent; border-color: var(--sys-border-control); color: var(--sys-text-primary); }
.dd-button--quiet { background: transparent; color: var(--sys-action-primary); }
.dd-button--danger { background: transparent; color: var(--sys-error); border-color: var(--sys-error); }
.dd-button:hover:not(:disabled) { filter: brightness(1.12); }
.dd-button:active:not(:disabled) { transform: translateY(1px); filter: brightness(.9); }
.dd-button:disabled { background: var(--sys-border-subtle); color: var(--sys-text-secondary); cursor: not-allowed; }
/* Icon action: an action, so the same 52px square action target and field
   radius as a labelled button. The icon is decorative; the button carries the
   accessible name through its own label, so never rely on the glyph alone. */
.dd-icon-button { width: var(--layout-button-height); min-width: var(--layout-button-height); height: var(--layout-button-height); min-height: var(--layout-button-height); padding: 0; border-radius: var(--r-field); gap: 0; flex: 0 0 auto; }
.dd-icon-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }
.dd-field { display: grid; gap: var(--sp-xxs); margin: 0 0 var(--sp-md); }
.dd-field label { font-size: var(--type-label-size); font-weight: var(--type-label-weight); }
.dd-field input,.dd-field textarea,.dd-field select { width: 100%; min-height: var(--layout-control-height); padding: var(--sp-xs) var(--sp-sm); color: var(--sys-text-primary); background: var(--sys-surface); border: 1px solid var(--sys-border-control); border-radius: var(--r-field); }
.dd-field input[aria-invalid=true] { border: 2px solid var(--sys-error); }
.dd-field small { font-size: var(--type-body-s-size); line-height: var(--type-body-s-height); color: var(--sys-text-secondary); }
.dd-field .dd-error { color: var(--sys-error); }
.dd-chip { border: 1px solid var(--sys-border-control); background: transparent; color: var(--sys-text-primary); border-radius: var(--r-pill); min-height: var(--layout-control-height); padding: var(--sp-xxs) var(--sp-sm); }
.dd-chip[aria-pressed=true] { background: var(--sys-selected); color: var(--sys-on-selected); }
.dd-status { border-left: 3px solid var(--sys-info); border-radius: var(--r-field); padding: var(--sp-sm); background: var(--sys-surface); }
.dd-status--error { border-color: var(--sys-error); }
.dd-status--success { border-color: var(--sys-success); }
.dd-status strong { display: block; }
.dd-badge { display: inline-flex; gap: var(--sp-xxs); align-items: center; padding: var(--sp-xxxs) var(--sp-xs); border-radius: var(--r-pill); background: var(--sys-selected); color: var(--sys-on-selected); font-size: var(--type-caption-size); font-weight: var(--type-label-weight); }
.dd-avatar { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-seat); background: var(--c-beet-deep); color: var(--c-oat); flex-shrink: 0; }
.dd-skip { position: absolute; left: var(--sp-md); top: -100px; z-index: 10; background: var(--sys-surface); padding: var(--sp-sm); }
.dd-skip:focus { top: var(--sp-md); }
.dd-dialog { width: min(480px,calc(100% - 40px)); max-height: calc(100dvh - 40px); overflow: auto; border: 1px solid var(--sys-border-control); border-radius: var(--r-card); background: var(--sys-surface); color: var(--sys-text-primary); padding: var(--sp-lg); }
.dd-dialog::backdrop { background: rgb(0 0 0 / .7); }
@media (max-width: 599px) { .dd-container { padding: var(--sp-gutter); } .dd-grid { grid-template-columns: 1fr; } .dd-dialog { border-radius: var(--r-sheet) var(--r-sheet) 0 0; margin-bottom: 0; } }
@media (min-width: 600px) and (max-width: 839px) { .dd-container { padding: var(--sp-lg); } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media (forced-colors: active) { .dd-button,.dd-chip,.dd-card,.dd-status { border: 1px solid CanvasText; } .dd-chip[aria-pressed=true] { outline: 2px solid Highlight; } }

/* Native selection semantics: no custom keyboard model. */
.dd-choice { display:flex; align-items:center; gap:var(--sp-xs); min-height:var(--layout-control-height); padding:var(--sp-xxs) 0; cursor:pointer; }
.dd-choice input { width:24px; height:24px; accent-color:var(--sys-action-primary); flex-shrink:0; }
.dd-fieldset { border:1px solid var(--sys-border-control); border-radius:var(--r-field); padding:var(--sp-sm); min-width:0; }
.dd-fieldset legend { padding:0 var(--sp-xxs); font-weight:var(--type-label-weight); }
.dd-progress { width:100%; height:8px; accent-color:var(--sys-action-primary); }
.dd-status--warning { border-color:var(--sys-action-primary); }
.dd-skeleton { height:var(--sp-lg); border-radius:var(--r-field); background:var(--sys-border-subtle); margin-bottom:var(--sp-xs); }
.dd-reading { max-width:var(--layout-reading-max-width); }
.dd-app-shell { display:grid; grid-template-columns:200px minmax(0,1fr); min-height:480px; }
.dd-app-nav { display:flex; flex-direction:column; gap:var(--sp-xxs); padding:var(--sp-xs); background:var(--sys-surface); }
.dd-app-nav a { min-height:var(--layout-control-height); padding:var(--sp-xs); border-radius:var(--r-field); text-decoration:none; color:var(--sys-text-primary); }
.dd-app-nav a[aria-current=page] { background:var(--sys-selected); font-weight:var(--type-label-weight); }
.dd-app-main { min-width:0; padding:var(--sp-gutter); }
.dd-table-scroll { overflow:auto; }
.dd-table { border-collapse:collapse; width:100%; }
.dd-table th,.dd-table td { padding:var(--sp-xs); text-align:left; border-bottom:1px solid var(--sys-border-subtle); }
@media (min-width:600px) and (max-width:839px) { .dd-app-shell { grid-template-columns:120px minmax(0,1fr); } }
@media (max-width:599px), (max-height:479px) { .dd-app-shell { grid-template-columns:1fr; } .dd-app-nav { order:2; flex-direction:row; flex-wrap:wrap; padding-bottom:max(var(--sp-xs),env(safe-area-inset-bottom)); } .dd-app-nav a { flex:1; text-align:center; } }