/* Shared presentation. Existing class names are retained for visual compatibility. */
.ui-collection-page {--collection-table-gap:1.75rem;}
.watch-page.ui-collection-page > .watch-header {margin:0 0 2rem;}
.watch-page.ui-collection-page > .watch-header h1 {margin:0;}
.ui-collection-page > .ui-collection-table {margin-top:var(--collection-table-gap);min-width:0;}
.ui-collection-page .ui-collection-table .watch-sort {margin-top:0;}
.ui-collection-notices {display:none;}
.ui-collection-notices:has(> :not([hidden]):not(:empty)) {display:block;margin-top:.75rem;}
.ui-collection-notices > p {margin:0;}
.ui-collection-notices > :empty {display:none;}
.ui-collection-page .watch-simple-inputs.without-filters {grid-template-columns:minmax(0,1fr);}
.ui-collection-page .watch-simple-inputs.without-filters > form {grid-column:1 / -1;}
.ui-list-table {--watch-columns:minmax(0,1fr) 44px minmax(7rem,auto) 44px;--watch-mobile-columns:minmax(0,1fr) 44px 44px;}
.watch-page .ui-list-table > ul,
.watch-page .ui-list-table > ul > li {display:grid;grid-column:1 / -1;grid-template-columns:subgrid;column-gap:inherit;min-width:0;}
.watch-page .ui-list-table > ul {margin:.25rem 0 1.5rem;padding:0;list-style:none;}
.watch-page .ui-list-table > ul > li {align-items:center;min-height:44px;padding:1.15rem 0;border-bottom:1px solid var(--line);}
.watch-page .ui-list-table .watch-sort {align-items:center;min-height:44px;}
.watch-page .ui-list-table .watch-sort > :first-child {grid-column:1;}
.watch-page .ui-list-table .watch-status-heading {grid-column:2;}
.watch-page .ui-list-table :is(.plan-row-actions,.food-row-actions) {display:contents;}
.watch-page .ui-list-table :is(.plan-row-heading,.food-title-cell) {grid-column:1;grid-row:1;min-width:0;}
.watch-page .ui-list-table :is(.ui-status-button,.plan-archived,.food-row-actions > .muted:not(.ui-list-metadata)) {grid-column:2;grid-row:1;}
.watch-page .ui-list-table .ui-list-metadata {grid-column:3;width:auto;min-width:0;text-align:left;font-size:.8rem;overflow-wrap:anywhere;}
.watch-page .ui-list-table .ui-row-remove {grid-column:4;grid-row:1;}
.watch-page .ui-list-table > p {grid-column:1 / -1;}
.watch-page .ui-list-table .food-title-cell {flex-wrap:wrap;}
.watch-page .ui-list-table .food-row-links {flex:none;}
@media(max-width:600px){
  body .watch-page .ui-list-table .watch-sort > .ui-list-metadata,
  .watch-page .ui-list-table .ui-list-metadata {display:none;}
  .watch-page .ui-list-table .ui-row-remove {grid-column:3;}
}
.watch-page .ui-row-remove {position:relative;z-index:2;display:grid;place-items:center;flex:0 0 44px;width:44px;min-width:44px;height:44px;min-height:44px;align-self:center;padding:.4rem;border:0;background:transparent;box-shadow:none;color:var(--danger);opacity:0;}
.watch-page .ui-row-remove svg {width:16px;height:16px;opacity:.7;}
.watch-page :is(.watch-simple-title,.plan-list-row,.food-row):is(:hover,:focus-within) .ui-row-remove {opacity:1;}
.watch-page .ui-row-remove:is(:hover,:focus-visible) svg {opacity:1;}
@media (hover:none),(pointer:coarse),(max-width:600px) {.watch-page .ui-row-remove {opacity:1;}}
.watch-page .ui-status-button { display:grid; place-items:center; width:44px; min-height:44px; padding:0; border:0; background:transparent; box-shadow:none; color:var(--ink-muted); }
.watch-page .watch-quick-row input:is(#quick-title,#event-title,#food-name) { border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; padding:.75rem 0; box-shadow:none; }
.watch-page #food-query { border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; padding:.75rem 0; box-shadow:none; }
/* Text-entry bars indicate focus with their underline, never a surrounding box. */
.watch-page .watch-simple-inputs input:is(#quick-title,#event-title,#food-name,#simple-query,#plan-query,#food-query):focus { outline:none; border-bottom-color:var(--clay); box-shadow:none; }
.watch-simple-inputs { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; }
.watch-simple .watch-simple-inputs.without-filters { grid-template-columns: minmax(0, 1fr); }
.watch-simple .watch-simple-inputs.without-filters #watch-quick-add, .watch-simple .watch-simple-inputs.without-filters #watch-simple-search { grid-column: 1 / -1; grid-row: 2; }
.watch-input-heading { grid-column: 1 / -1; display: flex; align-items: center; gap: .65rem; min-width: 0; }
.watch-input-heading .watch-input-toggle { flex-shrink: 0; }
.watch-simple-inputs > form { grid-column: 1; grid-row: 2; }
.watch-status-tray { grid-column: 2; grid-row: 2; display: flex; align-items: center; gap: .15rem; padding: 2px; border: 1px solid color-mix(in srgb, var(--line) 55%, transparent); border-radius: .5rem; }
.watch-page .watch-status-tray button { display: grid; place-items: center; width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-muted); opacity: .45; box-shadow: none; }
.watch-status-tray svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.watch-filter-tooltip { position: fixed; z-index: 60; pointer-events: none; padding: .35rem .6rem; border: 1px solid var(--line); border-radius: .35rem; background: var(--paper-raised); color: var(--ink); font-size: .75rem; font-weight: 400; line-height: 1.4; white-space: nowrap; box-shadow: 0 3px 12px rgb(0 0 0 / .12); }
.watch-filter-tooltip[hidden] { display: none; }
/* One policy covers custom hints, including dialogs and dynamically added controls. */
.tooltips-disabled [role="tooltip"],
.tooltips-disabled .location-limit-tooltip,
.tooltips-disabled .event-zone-label { display:none !important; }
.tooltips-disabled [data-tooltip]::after,
.tooltips-disabled .event-location-row::after,
.tooltips-disabled .plan-url-copy::after { display:none !important; }
.watch-user-filter { position: relative; display: grid; place-items: center; width: 44px; min-width: 44px; height: 44px; border-left: 1px solid var(--line); color: var(--ink-muted); margin: 0; }
.watch-user-filter svg { opacity: .5; }
.watch-user-filter.is-active svg { opacity: 1; color: var(--clay); }
.watch-page .watch-user-filter .watch-user-trigger { opacity: 1; }
.watch-user-drawer { position: fixed; margin: 0; width: 272px; max-width: calc(100vw - 24px); max-height: min(320px, calc(100dvh - 24px)); padding: 1rem; border: 1px solid var(--line); border-radius: .65rem; background: var(--paper-raised); color: var(--ink); box-shadow: 0 12px 32px rgb(0 0 0 / .2); }
.watch-user-drawer:popover-open { animation: watch-user-slide .16s ease-out; }
.watch-user-drawer header { font-size: .85rem; font-weight: 600; }
.watch-user-actions { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); margin-bottom: .4rem; }
.watch-page .watch-user-actions button { width: auto; min-height: 40px; border-radius: .25rem; color: var(--clay); opacity: 1; font-size: .75rem; }
.watch-user-options { display: grid; }
.watch-user-options label { display: flex; align-items: center; gap: .75rem; min-height: 44px; margin: 0; padding: .35rem; font-size: .85rem; cursor: pointer; overflow-wrap: anywhere; }
.watch-user-options label:hover { background: var(--paper-soft); }
.watch-user-options input { width: 16px; height: 16px; flex: 0 0 16px; accent-color: var(--clay); }
@keyframes watch-user-slide { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .watch-user-drawer:popover-open { animation: none; } }
.watch-status-tray [data-status-filter="wanted"],
.watch-status-tray [data-plan-filter="idea"] { position: relative; margin-left: .25rem; }
.watch-status-tray.without-status-actions [data-status-filter="wanted"],.watch-status-tray.without-status-actions [data-plan-filter="idea"] { margin-left: 0; }
.watch-status-tray.without-status-actions [data-status-filter="wanted"]::before,.watch-status-tray.without-status-actions [data-plan-filter="idea"]::before { display: none; }
.watch-status-tray[hidden] { display:none; }
.watch-status-tray [data-status-filter="wanted"]::before,
.watch-status-tray [data-plan-filter="idea"]::before { content: ''; position: absolute; left: -.25rem; top: 25%; height: 50%; width: 1px; background: color-mix(in srgb, var(--line) 65%, transparent); pointer-events: none; }
.watch-filter-refresh { display: flex; align-items: center; margin: 0; color: var(--ink-muted); font-size: .78rem; }
.watch-page .watch-filter-refresh button { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .25rem .5rem; border: 0; background: transparent; color: var(--clay); font-size: inherit; font-weight: 400; box-shadow: none; }
.watch-page:is(.watch-simple,.events-page,.food-page) .watch-header { position: relative; width: fit-content; max-width: 100%; padding-inline-end: calc(44px + .6rem); flex-direction: row; justify-content: flex-start; align-items: baseline; gap: .6rem; }
/* Reserve the title action's space even when absent; it must never resize the header. */
.watch-header .watch-filter-refresh { position: absolute; inset-inline-end: 0; top: 0; bottom: 1rem; }
.watch-page .watch-filter-refresh button { width: 44px; padding: 0; justify-content: center; opacity: .8; }
.watch-page .watch-filter-refresh button:hover { opacity: 1; }
.watch-filter-refresh svg { display: block; flex: none; }
.ui-mode-icon { display: none; }
.watch-page .watch-status-tray button[aria-pressed="true"] { opacity: 1; color: var(--clay); background: transparent; }
.watch-page .watch-status-tray button:hover { opacity: 1; background: var(--paper-soft); }
.watch-page .watch-status-tray button:focus-visible { outline: 2px solid var(--clay); outline-offset: 1px; }
@media (max-width: 600px) {
  .watch-page .watch-simple-inputs { grid-template-columns: minmax(0, 1fr) auto; gap: .85rem; }
  .watch-simple-inputs .watch-input-heading { grid-column: 1; grid-row: 1; align-self: center; }
  .watch-simple-inputs .watch-status-tray { grid-column: 2; grid-row: 1; justify-self: end; }
  .watch-page .watch-simple-inputs > form { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 600px) {
  .watch-reload-label { display: none; }
  .watch-page .watch-filter-refresh button { width: 44px; flex-shrink: 0; justify-content: center; padding: 0; font-size: 1rem; }
  .watch-simple-inputs .watch-input-heading { gap: .25rem; }
  .watch-page .watch-input-heading .watch-input-toggle button { min-width: 64px; padding-inline: .6rem; }
}
@media (max-width: 600px) {
  .watch-simple-inputs .watch-input-toggle { width: max-content; }
  .watch-simple-inputs .watch-status-tray { width: max-content; }
  .ui-compact-modes .ui-mode-label { display: none; }
  .ui-compact-modes .ui-mode-icon { display: grid; place-items: center; }
  .watch-page .watch-simple-inputs.ui-compact-modes { column-gap: .5rem; }
  .watch-page .ui-compact-modes .watch-input-toggle button { min-width: 44px; min-height: 44px; padding: 0; }
  .watch-page .watch-simple-inputs.ui-stacked-filters { grid-template-columns: minmax(0, 1fr); gap: .65rem; }
  .watch-simple-inputs.ui-stacked-filters .watch-status-tray { grid-column: 1; grid-row: 2; justify-self: start; max-width: 100%; flex-wrap: wrap; }
  .watch-page .watch-simple-inputs.ui-stacked-filters > form { grid-row: 3; }
}
.watch-simple-inputs form { width: 100%; margin: 0; }
.watch-simple-inputs form[hidden] { display: none; }
.watch-simple-inputs form > label { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.watch-input-toggle { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; align-self: flex-start; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper-soft); isolation: isolate; }
.watch-input-toggle::before { content: ''; position: absolute; inset: 3px auto 3px 3px; width: calc((100% - 6px) / 2); border-radius: 999px; background: var(--paper-raised); box-shadow: 0 1px 3px rgb(0 0 0 / .1); transition: transform 160ms ease; z-index: -1; }
[data-mode="search"] .watch-input-toggle::before { transform: translateX(100%); }
.watch-page .watch-input-toggle button { min-height: 40px; min-width: 88px; padding: .4rem 1rem; border: 0; border-radius: 999px; background: transparent; color: var(--ink-muted); font-size: .9rem; font-weight: 400; box-shadow: none; }
.watch-page .watch-input-toggle button[aria-pressed="true"] { color: var(--clay); }
.watch-page .watch-input-toggle button:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .watch-input-toggle::before { transition: none; } }
/* Disclosure content grows downward without re-centering its dialog or
   shifting controls sideways when an internal scrollbar appears. */
dialog[open] {
  inset-block-start:1rem;
  inset-block-end:auto;
  margin-block:0;
  max-height:calc(100dvh - 2rem);
  box-sizing:border-box;
  overflow-y:auto;
  scrollbar-gutter:stable;
  overflow-anchor:none;
}