/* Shared presentation: the classic Settings language, independent of routing.
   Theme and accessibility values remain owned by styles.css. */
:root {
  --hearth-serif: Georgia, "Times New Roman", serif;
  --hearth-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --hearth-inset: clamp(1.25rem, 4vw, 3.5rem);
  --hearth-heading: clamp(2rem, 3.4vw, 3.4rem);
  --hearth-surface: color-mix(in srgb, var(--paper-raised) 72%, var(--paper));
}
body { font-family: var(--hearth-sans); }
.watch-table.watch-configurable { display: grid; grid-template-columns: var(--watch-columns); column-gap: 1rem; min-width: 0; max-width: 100%; }
.watch-page.watch-simple { min-width: 0; }
.watch-table.watch-configurable .watch-sort, .watch-table.watch-configurable .watch-simple-list, .watch-table.watch-configurable .watch-simple-title { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; column-gap: inherit; padding-right: 0; min-width: 0; }
.watch-table.watch-configurable .watch-sort > *, .watch-table.watch-configurable .watch-simple-title > * { grid-column: auto; grid-row: auto; }
body .watch-table.watch-configurable .watch-title-user, body .watch-table.watch-configurable .watch-title-date, body .watch-table.watch-configurable .watch-title-added, body .watch-table.watch-configurable .watch-sort > * { display: block; }
.watch-table.watch-configurable .watch-title-remove { position: static; }
.watch-table.watch-configurable .watch-column-hidden { display: none !important; }
@media (max-width: 600px) {
  .watch-table.watch-configurable { grid-template-columns: var(--watch-mobile-columns); column-gap: .35rem; }
  body .watch-table.watch-configurable .watch-title-user,
  body .watch-table.watch-configurable .watch-title-date,
  body .watch-table.watch-configurable .watch-title-added,
  body .watch-table.watch-configurable [data-watch-sort="user"],
  body .watch-table.watch-configurable [data-watch-sort="date"],
  body .watch-table.watch-configurable .watch-added-heading { display: none; }
}
.topbar-actions { margin-left: auto; }
.hearth-home-link { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; }
.hearth-home-link:hover { color: var(--clay); }
.brand > div > .hearth-home-link { display: flex; }
.household-brand-link { display: flex; align-items: center; gap: .85rem; min-height: 44px; min-width: 0; width: 100%; color: var(--sidebar-ink); text-decoration: none; }
.household-brand .brand-mark { flex: 0 0 2.75rem; height: 2.75rem; border-radius: 50%; border-color: color-mix(in srgb, var(--clay) 70%, transparent); font-size: 1.25rem; }
.household-brand-copy { min-width: 0; }
.household-brand strong { margin-top: .3rem; font-family: var(--hearth-sans); font-size: 1.15rem; line-height: 1.35; font-weight: 400; letter-spacing: -.015em; color: var(--sidebar-muted); overflow-wrap: anywhere; }
.household-brand .household-brand-label { display: block; font-family: var(--hearth-serif); font-size: 1.65rem; font-weight: 600; line-height: 1.15; letter-spacing: -.025em; color: var(--sidebar-ink); }
.household-brand-link:hover strong { color: var(--clay); }
.watch-simple-list { margin-block: 2.5rem 1.5rem; }
.watch-sort, .watch-simple-title { display: grid; grid-template-columns: minmax(0, 1fr) 3rem minmax(0, .3fr) minmax(0, .4fr); column-gap: 1rem; }
.watch-status-heading { align-self: center; }
/* Content-sized columns share spare room as gutters, not an oversized title or trailing void. */
@media (min-width: 601px) {
  .watch-table { display: grid; grid-template-columns: fit-content(40%) 3.5rem fit-content(22%) max-content 2.75rem; column-gap: clamp(1rem, 2vw, 2rem); justify-content: space-between; }
  .watch-table .watch-sort, .watch-table .watch-simple-list, .watch-table .watch-simple-title { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; padding-right: 0; column-gap: inherit; }
  .watch-table .watch-simple-list { margin-top: .25rem; }
  .watch-table .watch-simple-list > p { grid-column: 1 / -1; }
  .watch-title-cell { min-width: 7rem; }
}
.watch-simple .watch-row-status { font-size: .9rem; font-weight: 400; }
@media (max-width: 600px) {
  .watch-simple .watch-sort, .watch-simple .watch-simple-title { column-gap: .35rem; grid-template-columns: minmax(0, 1fr) 44px 44px; padding-right: 0; }
  .watch-title-cell, .watch-sort [data-watch-sort="title"] { grid-column: 1; grid-row: 1; }
  .watch-simple .watch-title-user, .watch-simple .watch-title-date,
  .watch-simple .watch-sort [data-watch-sort="user"], .watch-simple .watch-sort [data-watch-sort="date"] { display: none; }
  .watch-row-status, .watch-status-heading { grid-column: 2; grid-row: 1; }
  .watch-simple .watch-title-remove { position: static; grid-column: 3; grid-row: 1; }
  .watch-title-cell .watch-title-edit { flex: 0 0 44px; }
  .watch-title-cell > a { min-width: 0; }
}
.watch-sort { margin-top: 1.75rem; color: var(--ink-muted); font-size: .8rem; }
.watch-sort button { display: flex; align-items: center; justify-content: flex-start; gap: .4rem; width: 100%; background: transparent; border: 0; color: var(--ink-muted); padding: .4rem 0; text-align: left; font-size: inherit; font-weight: 400; min-height: 44px; }
.watch-sort + .watch-simple-list { margin-top: .25rem; }
.watch-sort button[aria-pressed="true"] { color: var(--clay); }
.watch-simple-title { align-items: baseline; padding: 1.15rem 0; min-height: 44px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.watch-title-cell { display: flex; align-items: center; gap: .3rem; min-width: 0; }
.watch-title-cell > .watch-quick-poster { margin-right: .65rem; }
.watch-title-cell > .watch-title-editor { flex: 1; min-width: 0; }
.watch-title-cell[tabindex="-1"]:focus { outline: none; }
.watch-title-cell > .watch-title-text { color: inherit; min-width: 0; }
.watch-title-cell .watch-title-edit, .watch-title-editor button { background: transparent; border: 0; color: var(--ink-muted); padding: .4rem; min-width: 44px; min-height: 44px; box-shadow: none; }
.watch-title-edit svg { opacity: .5; }
.watch-simple-title { position: relative; padding-right: 2.75rem; align-items: center; }
.watch-sort { padding-right: 2.75rem; }
.watch-title-remove { position: absolute; right: 0; top: 1.15rem; min-width: 44px; min-height: 44px; padding: .4rem; border: 0; background: transparent; box-shadow: none; color: var(--danger); }
.watch-title-edit, .watch-title-remove { opacity: 0; }
.watch-simple-title:hover .watch-title-edit, .watch-simple-title:focus-within .watch-title-edit,
.watch-simple-title:hover .watch-title-remove, .watch-simple-title:focus-within .watch-title-remove { opacity: 1; }
.watch-title-remove svg { opacity: .7; }
.watch-title-remove { display: grid; place-items: center; width: 44px; height: 44px; align-self: center; }
.watch-title-remove:hover svg, .watch-title-remove:focus-visible svg { opacity: 1; }
.watch-simple-title > [data-watch-error] { grid-column: 1 / -1; }
@media (hover: none) {
  .watch-title-edit, .watch-title-remove { opacity: 1; }
}
@media (max-width: 600px) {
  .watch-title-edit, .watch-title-remove { opacity: 1; }
  .watch-table.watch-configurable .watch-simple-title > .watch-title-remove { grid-column: -2 / -1; grid-row: 1; }
  .watch-table.watch-configurable .watch-simple-title > .watch-row-status { grid-column: -3 / -2; grid-row: 1; align-self: center; }
  .watch-table.watch-configurable .watch-simple-title > .watch-title-cell { grid-row: 1; }
}
.home-shortcuts { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 1.5rem; max-width: 100%; }
.home-logo-stage .home-shortcut { display: inline-flex; align-items: center; gap: .7rem; min-height: 48px; padding: .65rem 1rem; border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-radius: .7rem; background: color-mix(in srgb, var(--paper-raised) 55%, transparent); color: var(--ink-muted); font-size: .95rem; font-weight: 400; box-shadow: none; }
.home-shortcut > svg { flex: 0 0 20px; color: var(--clay); opacity: .8; }
.home-shortcut-arrow { margin-left: .5rem; opacity: .5; }
.home-logo-stage .home-shortcut:hover { background: var(--paper-soft); color: var(--ink); border-color: var(--clay); }
.home-logo-stage .home-shortcut:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; }
.watch-title-edit:hover svg, .watch-title-edit:focus-visible svg { opacity: 1; }
.watch-title-editor { display: flex; flex-wrap: wrap; align-items: center; width: 100%; gap: .25rem; }
.watch-title-editor { position: relative; }
.watch-title-editor::before { content: ""; position: absolute; left: -.55rem; top: .4rem; bottom: .4rem; width: 2px; border-radius: 1px; background: var(--clay); pointer-events: none; }
.watch-page .watch-title-cell .watch-title-editor input[name="title"] { flex: 1; min-width: 0; width: 0; min-height: 44px; background: transparent; color: var(--ink); font: inherit; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
.watch-title-editor [data-watch-error] { flex-basis: 100%; margin: 0; }
.watch-title-editor [data-watch-error]:empty { display: none; }
.watch-title-editor .watch-edit-notice { color: var(--ink-muted); font-size: .78rem; line-height: 1.5; padding: .6rem .75rem; margin-top: .4rem; border-radius: .4rem; background: color-mix(in srgb, var(--clay) 7%, transparent); border-left: 2px solid color-mix(in srgb, var(--clay) 55%, transparent); }
.watch-edit-date { display: grid; flex-basis: 100%; gap: .25rem; color: var(--ink-muted); font-size: .75rem; }
.watch-edit-date input { width: 100%; min-width: 0; background: transparent; color: var(--ink); border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: .4rem 0; }
.watch-edit-date input:focus { border-bottom-color: var(--clay); }
.watch-edit-field-error { flex-basis: 100%; color: var(--clay); font-size: .75rem; line-height: 1.5; }
.watch-edit-field-error[hidden] { display: none; }
.watch-title-editor input[aria-invalid="true"] { border-bottom-color: var(--clay); }
.watch-autosave-toast { position: fixed; right: max(1.25rem, env(safe-area-inset-right)); bottom: max(1.25rem, env(safe-area-inset-bottom)); z-index: 40; max-width: calc(100vw - 2.5rem); padding: .65rem 1rem; border: 1px solid var(--line); border-radius: .5rem; background: var(--paper-raised); color: var(--ink-muted); font-size: .85rem; line-height: 1.5; box-shadow: 0 4px 18px rgb(0 0 0 / .08); pointer-events: none; }
.watch-simple-title small { color: var(--ink-muted); font-size: .85rem; }
.watch-simple-title small { font-size: .78rem; font-weight: 400; line-height: 1.5; }
.watch-quick-add { margin-bottom: .25rem; }
.watch-quick-add label { display: block; margin-bottom: .5rem; }
.watch-quick-row { display: flex; align-items: stretch; gap: .65rem; }
.watch-quick-row input { flex: 1; width: 100%; min-width: 0; }
.watch-quick-row button { flex-shrink: 0; }
/* List-control layout and styling live in ui.css. */
#watch-simple-search { min-width: 0; }
#watch-simple-search label { display: block; margin-bottom: .5rem; }
.watch-search-line { display: flex; align-items: center; gap: .65rem; border-bottom: 1px solid var(--line); min-height: 48px; color: var(--ink-muted); }
.watch-search-line svg { flex-shrink: 0; }
.watch-page .watch-search-line input#simple-query { width: 100%; min-width: 0; border: 0; border-radius: 0; background: transparent; padding: .75rem 0; box-shadow: none; }
.watch-search-line:focus-within { border-bottom-color: var(--clay); }
.watch-search-scope { margin: .4rem 0 0; color: var(--ink-muted); font-size: .75rem; }
.watch-page .watch-status-tray button:disabled { cursor: default; }
.watch-page .watch-quick-row input#quick-title:focus { border-bottom-color: var(--clay); }
.watch-quick-row .watch-quick-plus {
  display: grid; place-items: center; width: 48px; min-height: 48px;
  padding: 0; border: 1px solid transparent; border-radius: 50%;
  background: transparent; color: var(--clay); box-shadow: none;
}
.watch-quick-row .watch-quick-plus:hover:not(:disabled) {
  background: var(--paper-soft); border-color: var(--line);
}
.watch-quick-add [role="alert"]:empty { display: none; }
.watch-simple .watch-quick-add { position: relative; }
.watch-quick-results { position: absolute; top: 100%; left: 0; right: 0; z-index: 8; background: var(--paper-raised); border: 1px solid var(--line); border-radius: .65rem; padding: .35rem; box-shadow: 0 8px 24px rgb(0 0 0 / .12); }
.watch-quick-results[hidden] { display: none; }
.watch-page .watch-results-back { position: sticky; top: -.35rem; z-index: 1; display: block; width: 100%; min-height: 44px; padding: .5rem .75rem; text-align: left; font-size: .8rem; font-weight: 400; color: var(--ink-muted); background: var(--paper-raised); border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.watch-page .watch-results-back:hover { color: var(--clay); }
.watch-page .watch-results-back[hidden] { display: none; }
.watch-quick-results { max-height: min(65vh, 32rem); overflow-y: auto; overscroll-behavior: contain; }
.watch-quick-results [role="option"] { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 44px; padding: .55rem .75rem; border-radius: .35rem; cursor: pointer; overflow-wrap: anywhere; }
.watch-quick-results [role="option"]:hover, .watch-quick-results [aria-selected="true"] { background: var(--paper-soft); color: var(--clay); }
.watch-quick-results small { color: var(--ink-muted); font-size: .78rem; flex-shrink: 0; }
.watch-quick-poster { position: relative; display: grid; place-items: center; width: 32px; height: 48px; flex: 0 0 32px; border-radius: 3px; overflow: hidden; background: var(--paper-soft); color: var(--ink-muted); }
.watch-quick-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.watch-quick-result-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.watch-quick-results .watch-quick-manual { border-bottom: 1px solid var(--line); border-radius: .35rem .35rem 0 0; margin-bottom: .3rem; padding-block: .8rem; color: var(--ink); }
.watch-manual-plus { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; color: var(--clay); font-size: 1.2rem; font-weight: 400; }
.watch-quick-results .hint { display: block; margin: .35rem .75rem; font-size: .75rem; color: var(--ink-muted); }
.watch-quick-results p:empty { display: none; }
@media (max-width: 600px) { .watch-quick-results [role="option"] { flex-wrap: wrap; gap: .15rem .75rem; } }
.watch-add-options { margin-bottom: 1.5rem; color: var(--ink-muted); }
.watch-add-options a { display: block; padding-block: .65rem; }
h1, h2 { font-family: var(--hearth-serif); font-weight: 500; letter-spacing: -.025em; }
.page h1, .watch-page .watch-header h1, .calm-settings h1 {
  margin: 0 0 1rem;
  font-size: var(--hearth-heading);
  line-height: 1.12;
  overflow-wrap: anywhere;
}
h2 { font-size: clamp(1.45rem, 2.2vw, 1.9rem); line-height: 1.2; }
h3, label, legend { font-weight: 500; }
.page:not(.page-home), .calm-settings .app-settings-content {
  padding: var(--hearth-inset);
}
.watch-page { padding-block: 0; }
.watch-header { align-items: flex-start; margin-bottom: 2rem; }
.watch-header p, .settings-lede { max-width: 54ch; color: var(--ink-muted); line-height: var(--leading); }
.calm-settings-rail { --settings-sidebar-inline: 2rem; background: var(--paper-soft); }
.sidebar { background: var(--paper-soft); color: var(--ink); }
@media (max-width: 820px) {
  .shell > .sidebar { padding-top: 1.25rem; }
  .shell .sidebar-mobile-head { position: absolute; inset: 1rem .5rem auto auto; min-height: 0; margin: 0; padding: 0; background: transparent; border: 0; }
  .shell .sidebar > .brand { padding-right: 2.5rem; }
}
.nav-text, .settings-section-list a, .calm-destinations a,
.watch-detail-nav a, .watch-tabs a, .watch-tabs button {
  font-family: var(--hearth-sans); font-weight: 400; letter-spacing: normal;
  font-synthesis: none;
}
.nav-button { color: var(--ink); }
.nav-button[aria-current="page"], .settings-section-list a[aria-current="page"] { color: var(--clay); }
.calm-destinations a { min-height: 3.75rem; padding: 1rem; border-radius: 0; }
.calm-destinations a:hover, .watch-page .watch-card:hover {
  background: linear-gradient(90deg, var(--paper-soft), transparent);
}
button, .watch-page .watch-header .primary {
  font-weight: 500; border-radius: .75rem; min-height: 2.75rem;
  padding: .65rem 1rem; box-shadow: none;
}
button.primary { border-radius: 999px; padding-inline: 1.4rem; }
button:not(:disabled):hover { border-color: var(--clay); }
button:disabled { cursor: not-allowed; }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea,
.watch-page input:not([type="checkbox"]):not([type="radio"]), .watch-page select, .watch-page textarea {
  max-width: 100%; min-width: 0; min-height: 2.75rem;
  border: 1px solid var(--line); border-radius: .65rem;
  padding: .75rem .85rem; color: var(--ink); background: var(--hearth-surface);
  font: inherit;
}
input::placeholder, textarea::placeholder { color: var(--ink-muted); opacity: 1; }
.field { gap: .5rem; }
.field label, .onboarding .field label { font-weight: 500; }
.hint, .appearance-choice-copy small { line-height: 1.5; }
hr { border: 0; border-top: 1px solid var(--line); margin-block: 2rem; }
.watch-section { border-top: 1px solid var(--line); padding-block: 1.5rem; }
.watch-item { border: 1px solid var(--line); border-radius: .85rem; background: var(--hearth-surface); overflow: hidden; }
.watch-item > summary { min-height: 2.75rem; padding: .8rem 1rem; font-weight: 400; }
.watch-item[open] > summary { border-bottom: 1px solid var(--line); background: var(--paper-soft); }
.watch-item > form { padding: 1rem; }
.watch-page .watch-card h2 { font: 500 1.1rem / var(--leading) var(--hearth-sans); letter-spacing: normal; }
.watch-page .watch-card-copy { padding: .9rem .75rem; }
[data-density="compact"] .watch-page .watch-card-copy { padding-block: .6rem; }
.watch-result { border-radius: .85rem; padding: 1rem; background: var(--hearth-surface); }
.watch-result small { border-top: 1px solid var(--line); margin-top: .65rem; padding-top: .65rem; color: var(--ink-muted); }
.watch-item small, .watch-history { color: var(--ink-muted); }
summary { min-height: 2.75rem; padding-block: .65rem; cursor: pointer; }
.card, .panel, .account-panel, dialog {
  border-color: var(--line); border-radius: .85rem; background: var(--hearth-surface); color: var(--ink);
}
dialog { max-width: min(36rem, calc(100vw - 2rem)); padding: var(--hearth-inset); }
dialog::backdrop { background: rgb(0 0 0 / .45); }
.onboarding { background: var(--paper); color: var(--ink); }
.onboarding::before, .onboarding::after { display: none; }
.onboarding-brand h1 { font-family: var(--hearth-serif); font-weight: 500; letter-spacing: -.025em; }
.onboarding-brand p, .onboarding-hint { color: var(--ink-muted); }
.onboarding .field input { background: var(--hearth-surface); border-color: var(--line); color: var(--ink); }
.onboarding-submit { background: var(--cypress); color: var(--on-accent); box-shadow: none; }
.onboarding-submit:hover { background: var(--cypress-deep); box-shadow: none; }
.google-signin { background: var(--hearth-surface); border-color: var(--line); color: var(--ink); }
.danger, [role="alert"].danger { color: var(--danger); }
:focus-visible { outline: .2rem solid var(--focus); outline-offset: .2rem; }
.watch-page :focus-visible { outline-color: var(--clay); }
.watch-page #simple-query:focus, .watch-page #quick-title:focus, .watch-title-editor input:focus { outline: none; }
.watch-page .watch-search-line:focus-within { border-bottom-color: var(--clay); box-shadow: 0 1px 0 var(--clay); }
.watch-page .watch-quick-row input#quick-title:focus { border-bottom-color: var(--clay); box-shadow: 0 1px 0 var(--clay); }
/* Route focus orients assistive technology; the page itself is not a control. */
main.page[tabindex="-1"]:focus { outline: none; }
@media (max-width: 959px) {
  .watch-header { gap: 1rem; }
  .watch-header .primary { align-self: flex-start; }
  .calm-mobile-parent { margin-bottom: 1.5rem; }
}
@media (max-width: 480px) {
  .watch-inline { flex-wrap: wrap; }
  .watch-inline > * { min-width: 0; max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
.hearth-confirm { width: min(26rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow: auto; box-sizing: border-box; padding: 1.6rem; border: 1px solid var(--line); border-radius: .8rem; background: var(--paper); color: var(--ink); box-shadow: 0 20px 70px rgb(0 0 0 / .25); }
.hearth-confirm::backdrop { background: rgb(8 15 12 / .55); backdrop-filter: blur(3px); }
.hearth-confirm h2 { margin: 0 0 .75rem; font-family: Georgia, serif; font-size: 1.6rem; font-weight: 600; line-height: 1.2; }
.hearth-confirm p { margin: 0; color: var(--ink-muted); font-size: .9rem; line-height: 1.6; overflow-wrap: anywhere; }
.hearth-confirm form { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .65rem; margin-top: 1.5rem; }
.hearth-confirm button { min-height: 44px; padding: .55rem .95rem; border: 1px solid var(--line); border-radius: .45rem; background: transparent; color: var(--ink-muted); font: inherit; font-size: .85rem; cursor: pointer; }
.hearth-confirm .hearth-confirm-action { border-color: color-mix(in srgb, var(--clay) 65%, transparent); color: var(--clay); background: color-mix(in srgb, var(--clay) 10%, var(--paper)); }
.hearth-confirm button:hover { background: var(--paper-soft); }
.hearth-confirm button:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; }