/* The game shell: navigation, the skein counter, shared components, toasts. Colours come from the
   variables in index.html, so day, night and the system setting all work. */

/* Header */
header nav { display: flex; gap: .1rem; align-items: center; }
header nav a { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 .7rem; border-radius: 8px; border: 2px dashed transparent; font-size: 1rem; }
header nav a:hover { border-color: var(--heavy); }
header nav a[aria-current="page"] { border: 2px solid var(--heavy); background: var(--panel); font-weight: 700; }
header nav a:focus-visible { outline: 3px solid var(--stitch); outline-offset: 2px; }

.skeins { display: inline-flex; align-items: center; gap: .35rem; font-variant-numeric: tabular-nums; color: var(--ink); }
.skeins:empty, body[data-view="make"] .skeins { display: none; }
.skeins::before { content: ""; width: .85rem; height: .85rem; border-radius: 50%; background: var(--t2);
  box-shadow: inset 0 0 0 2px var(--panel), 0 0 0 1.5px var(--heavy); }
.skeins:empty::before { content: none; }

/* Views that are not the Maker */
#view-play, #view-puzzle { padding: .3rem 1.2rem 1.5rem; }

/* Shared components */
.card { border: 2px dashed var(--heavy); border-radius: 10px; padding: 1rem 1.1rem; background-color: var(--panel); box-shadow: 0 6px 18px var(--shadow); }
.card h2 { margin: 0 0 .3rem; font-size: 1.3rem; }
.card p { margin: .3rem 0; }
.muted { color: var(--muted); }
button.primary { border-style: solid; border-color: var(--stitch); color: var(--stitch); font-weight: 700; }
button.primary:hover { background: var(--hint-fill); }
button:disabled, button[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
button:disabled:hover { border-style: dashed; background: var(--panel); }
.row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Dialogs (the base look is in index.html) */
dialog h2 { margin: 0 0 .5rem; font-size: 1.3rem; }
dialog .actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; margin-top: .8rem; }
dialog .error { color: var(--bad); min-height: 1.4em; }

/* Toasts */
.toasts { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); display: flex; flex-direction: column;
  align-items: center; gap: .4rem; z-index: 10; pointer-events: none; width: min(26rem, 92vw); }
.toast { background: var(--ink); color: var(--bg); border-radius: 8px; padding: .45rem .9rem; box-shadow: 0 6px 18px var(--shadow);
  animation: toast-in .2s ease-out; text-align: center; }
.toast.out { opacity: 0; transition: opacity .3s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(.6rem); } }

@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; }
  .toast.out { transition: none; }
}