/* Shared page styles: page ground, picks, threads, diagrams and the Panel. Tokens come from shell.css. */
[hidden] { display: none !important; }
body.page { margin: 0; background: var(--paper); color: var(--ink-2); font: 400 16px/1.6 var(--text); -webkit-font-smoothing: antialiased; }
.page *, .page *::before, .page *::after { box-sizing: border-box; }
.page-main { width: min(860px, 100% - 2 * var(--gutter)); margin: 0 auto; padding: 32px 0 80px; }
.page-main h1 { margin: 0 0 16px; color: var(--ink); font: 700 1.9rem/1.15 var(--display); letter-spacing: -.012em; }
.page ::selection { background: #ffd9c2; color: var(--ink); }
.page { accent-color: var(--vessco-blue); font-variant-numeric: tabular-nums; }

/* Page header on the inner pages: the title, one line on what the page is for, and the page's own actions. */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin: 8px 0 32px; padding-bottom: 24px; border-bottom: 1px solid var(--rule); }
.page-head h1 { margin: 0; font-size: clamp(1.9rem, 3vw, 2.5rem); letter-spacing: -.02em; }
.page-lede { max-width: 62ch; margin: 10px 0 0; color: var(--ink-2); font-size: 1.08rem; line-height: 1.6; text-wrap: pretty; }
.page-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Picks */
.pick { display: grid; gap: 8px; margin: 0 0 20px; }
.pick-control { display: inline-flex; flex-wrap: wrap; gap: 0; width: fit-content; max-width: 100%; }
.pick-control button {
  min-height: 44px; padding: 8px 18px; border: 1px solid var(--vessco-blue); background: #fff; color: var(--vessco-blue);
  font: 600 .92rem var(--display); letter-spacing: .02em; cursor: pointer;
}
.pick-control button + button { margin-left: -1px; }
.pick-control button[aria-pressed="true"] { background: var(--vessco-blue); border-color: var(--vessco-blue); color: #fff; }
.pick-control button.pick-in[aria-pressed="true"] { background: var(--vessco-blue); border-color: var(--vessco-blue); }
.pick-control .pick-clear { border-style: dashed; }
.pick-control button:focus-visible, .thread :focus-visible { outline: 2px solid var(--vessco-blue); outline-offset: 2px; }
.pick-tally { margin: 0; color: var(--ink-2); font: 400 .95rem var(--text); }

/* Threads: no frames between comments; an author and time line, and actions that appear on hover or focus where a pointer exists. */
.thread { background: #fff; padding: 16px 20px 20px; }
.thread-status { margin: 0 0 8px; color: var(--muted); font-size: .92rem; }
.thread-status:empty { display: none; }
.thread-list, .thread-replies { list-style: none; margin: 0; padding: 0; }
.thread-comment { padding: 10px 0; overflow-wrap: anywhere; }
.thread-replies { margin: 6px 0 0 4px; padding-left: 16px; }
.thread-replies .thread-comment { padding: 6px 0; }
.thread-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin: 0 0 2px; font-size: .84rem; color: var(--muted); }
.thread-name { color: var(--ink); font: 700 .95rem var(--display); }
.thread-time::before { content: "\00b7"; margin-right: 8px; color: var(--muted); }
.thread-edited { color: var(--muted); }
.thread-body { margin: 0; white-space: pre-wrap; color: var(--ink-2); }
.is-deleted .thread-body { color: var(--muted); font-style: italic; }
.thread-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 16px; margin-top: 4px; }
.thread-link {
  min-height: 32px; padding: 0; background: none; border: 0; cursor: pointer; color: var(--vessco-blue);
  font: 600 .84rem var(--text); text-decoration: none; text-underline-offset: 3px;
}
.thread-link:hover, .thread-link:focus-visible { text-decoration: underline; }
.thread-link:disabled { opacity: .5; cursor: default; }
.thread-delete-confirm { color: #b42318; }
/* With a mouse, a comment's actions fade in when it is hovered or has focus; on touch they stay visible. */
@media (hover: hover) and (pointer: fine) {
  .thread-link { min-height: 26px; }
  .thread-comment > .thread-actions { opacity: 0; transition: opacity .15s ease; }
  .thread-comment:hover > .thread-actions,
  .thread-comment:focus-within > .thread-actions,
  .thread-list[data-editing] .thread-comment > .thread-actions { opacity: 1; }
}
/* Kept apart so a browser without :has drops only this refinement: a hovered or focused reply does not also reveal its parent's actions. */
@media (hover: hover) and (pointer: fine) {
  .thread-comment:hover:has(.thread-replies:hover) > .thread-actions:not(:has(.thread-delete-confirm)),
  .thread-comment:focus-within:has(.thread-replies :focus-within) > .thread-actions:not(:has(.thread-delete-confirm)) { opacity: 0; }
  .thread-comment > .thread-actions:has(.thread-delete-confirm) { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .thread-comment > .thread-actions { transition: none; }
}
.thread-form, .thread-editor { display: grid; gap: 6px; margin-top: 10px; }
.thread-form textarea, .thread-editor textarea {
  width: 100%; min-height: 72px; padding: 10px 12px; border: 1px solid #b6bbc2; border-radius: 0;
  background: #fff; color: var(--ink); font: 400 1rem/1.5 var(--text); resize: vertical;
}
.thread-form textarea:focus, .thread-editor textarea:focus { border-color: var(--vessco-blue); }
.thread-form .thread-actions, .thread-editor .thread-actions { margin-top: 0; gap: 4px 16px; }
.thread-error { min-height: 0; margin: 0; color: #b42318; font-size: .9rem; }
.thread-error:empty { display: none; }
.thread-count { margin-left: auto; color: var(--muted); font-size: .85rem; }
.thread-count.is-over { color: #b42318; font-weight: 700; }
@media (max-width: 520px) {
  .thread { padding: 12px 14px 16px; }
  .thread-replies { margin-left: 0; padding-left: 12px; }
}

/* Diagrams: appearance lives in the SVG attributes; this carries only the one slow loop. */
.dg { display: block; width: 100%; height: auto; max-width: 640px; }
.dg * { transform-box: fill-box; transform-origin: center; }
.dg .dg-flow { animation: dg-flow 10s linear infinite; }
.dg .dg-settle { animation: dg-settle 10s ease-in-out infinite; }
.dg .dg-merge { animation: dg-merge 10s ease-in-out infinite; }
@keyframes dg-flow { to { stroke-dashoffset: -100; } }
@keyframes dg-settle { 0%, 100% { transform: translateY(0); } 12% { transform: translateY(-6px); } 30% { transform: translateY(0); } }
@keyframes dg-merge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(var(--dx, 0)); } }
@media (prefers-reduced-motion: reduce) { .dg, .dg * { animation: none !important; } }

/* The Panel: right side on wide screens, bottom sheet at 760 px and under. */
.panel-layer { position: fixed; inset: 0; z-index: 50; }
.panel-scrim { position: absolute; inset: 0; background: rgba(34, 34, 34, .45); }
.panel {
  position: absolute; top: 0; right: 0; bottom: 0; box-sizing: border-box; width: min(420px, 100%); overflow-y: auto; overscroll-behavior: contain;
  background: #fff; border-top: 6px solid var(--vessco-orange); padding: 20px 24px 32px; color: var(--ink-2);
  font: 400 16px/1.6 var(--text); box-shadow: -8px 0 32px rgba(34, 34, 34, .18);
}
.panel *, .panel *::before, .panel *::after { box-sizing: border-box; }
.panel-head { display: flex; align-items: flex-start; gap: 16px; }
.panel-title { flex: 1; margin: 0; color: var(--ink); font: 700 1.45rem/1.15 var(--display); letter-spacing: -.012em; }
.panel-close {
  flex: none; min-height: 36px; padding: 4px 12px; background: #fff; border: 1px solid var(--vessco-blue); color: var(--vessco-blue);
  font: 600 .85rem var(--display); letter-spacing: .02em; cursor: pointer;
}
.panel-kicker { margin: 6px 0 16px; color: var(--muted); font: 400 .95rem var(--text); letter-spacing: .05em; }
.panel-diagram { margin: 0 0 18px; padding: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.panel-section { margin: 0 0 18px; }
.panel-section h3 { margin: 0 0 4px; color: var(--ink); font: 600 1.02rem/1.3 var(--display); }
.panel-section p { margin: 0; }
.panel-section ul { margin: 0; padding-left: 18px; }
.panel-section li + li { margin-top: 4px; }
.panel-grows a, .panel-menu { color: var(--vessco-blue); font-weight: 600; text-underline-offset: 3px; }
.panel-pick { margin: 4px 0 18px; }
.panel-thread .thread { padding: 14px 0 0; }
.panel-menu { display: inline-block; margin-top: 4px; }
.panel :focus-visible { outline: 2px solid var(--vessco-blue); outline-offset: 2px; }
@media (max-width: 760px) {
  .panel {
    top: auto; left: 0; width: 100%; max-height: 85vh; padding: 16px 16px 28px;
    border-top-width: 6px; box-shadow: 0 -8px 32px rgba(34, 34, 34, .2);
  }
}