/* ODYSSEUSS tutorial (Easy mode, 8 Oct 2026): the Tutorial button, the guided spotlight tour and the
   "How do I…?" help centre. Written for people who rarely use software: big targets (44 px and up),
   16 px text, strong contrast. Every class starts with tut-. body.face gets the navy-glass / gold look. */

/* ---- the Tutorial button (app bar) ------------------------------------------------------------ */
.tut-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 8px; border-radius: 999px; border: 1px solid var(--gold-line); background: var(--gold-soft); color: var(--text); font: 600 15px/1 var(--font, system-ui, sans-serif); cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, box-shadow .15s; }
.tut-btn:hover { background: rgba(212, 169, 74, .22); border-color: var(--gold); }
.tut-btn:active { transform: translateY(1px); }
.tut-btn-q { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #1a1406; font: 700 16px/1 var(--font, system-ui, sans-serif); box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset; }
.tut-btn-label { letter-spacing: .01em; }

/* ---- the tour: dimmed page, a lit hole, a card -------------------------------------------------- */
.tut-layer { position: fixed; inset: 0; z-index: 1000; --tut-ease: cubic-bezier(.2, .7, .2, 1); --tut-dim: rgba(4, 8, 18, .68); animation: tut-fade .25s ease backwards; }
.tut-layer.tut-nohole { background: var(--tut-dim); }
.tut-hole { position: fixed; border-radius: var(--radius-sm, 8px); pointer-events: none; box-shadow: 0 0 0 3px var(--gold-2), 0 0 0 8px rgba(212, 169, 74, .22), 0 0 0 200vmax var(--tut-dim); }
.tut-hole::after { content: ""; position: absolute; inset: 0; border-radius: inherit; animation: tut-pulse 1.7s ease-out .25s 3; }
.tut-layer.tut-nohole .tut-hole { display: none; }
.tut-anim .tut-hole, .tut-anim .tut-card { transition: left .32s var(--tut-ease), top .32s var(--tut-ease), width .32s var(--tut-ease), height .32s var(--tut-ease); }

.tut-card { --tut-bg: var(--surface); position: fixed; left: 12px; top: 12px; width: min(400px, calc(100vw - 24px)); background: var(--tut-bg); color: var(--text); border: 1px solid var(--gold-line); border-radius: var(--radius, 12px); box-shadow: var(--shadow), 0 0 0 1px rgba(0, 0, 0, .2); font: 16px/1.55 var(--font, system-ui, sans-serif); outline: none; }
.tut-card:focus-visible { box-shadow: var(--shadow), 0 0 0 3px var(--gold-soft); }
.tut-card.tut-center { width: min(460px, calc(100vw - 24px)); }
.tut-card.tut-sheet { width: auto; border-radius: 18px; }
.tut-card.tut-in .tut-live { animation: tut-in .28s var(--tut-ease) backwards; }
.tut-card.tut-nudge { animation: tut-nudge .4s ease; }
.tut-scroll { padding: 18px 20px 16px; max-height: calc(100dvh - 24px); overflow: auto; overscroll-behavior: contain; border-radius: inherit; }
.tut-card.tut-sheet .tut-scroll { max-height: min(62dvh, calc(100dvh - 120px)); }

/* the little pointer from the card to the lit spot */
.tut-arrow { position: absolute; width: 14px; height: 14px; background: var(--tut-bg); border: 1px solid var(--gold-line); transform: rotate(45deg); display: none; }
.tut-card[data-side="below"] .tut-arrow { display: block; top: -8px; left: var(--tut-ax, 50%); margin-left: -7px; border-right: 0; border-bottom: 0; }
.tut-card[data-side="above"] .tut-arrow { display: block; bottom: -8px; left: var(--tut-ax, 50%); margin-left: -7px; border-left: 0; border-top: 0; }
.tut-card[data-side="right"] .tut-arrow { display: block; left: -8px; top: var(--tut-ay, 50%); margin-top: -7px; border-top: 0; border-right: 0; }
.tut-card[data-side="left"] .tut-arrow { display: block; right: -8px; top: var(--tut-ay, 50%); margin-top: -7px; border-bottom: 0; border-left: 0; }

.tut-emblem { display: block; width: 46px; height: 46px; margin: 2px 0 10px; filter: drop-shadow(0 0 10px rgba(212, 169, 74, .35)); }
.tut-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.tut-count { font-size: 14px; font-weight: 600; color: var(--gold-2); font-variant-numeric: tabular-nums; }
.tut-dots { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.tut-dot { display: block; width: 7px; height: 7px; border-radius: 4px; background: var(--line-strong); transition: width .2s, background .2s; }
.tut-dot.done { background: var(--gold-3, var(--gold)); }
.tut-dot.on { width: 20px; background: var(--gold-2); }
.tut-title { font-family: var(--display); font-size: 27px; line-height: 1.12; font-weight: 600; margin: 2px 0 8px; color: var(--text); letter-spacing: .01em; }
.tut-body p { margin: 0 0 8px; font-size: 16px; line-height: 1.55; color: var(--text); }
.tut-body p + p { color: var(--text-2); }
.tut-body b { color: var(--gold-2); font-weight: 600; }
.tut-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.tut-actions .btn { min-height: 46px; padding: 0 20px; font-size: 16px; }
.tut-actions .tut-next { min-width: 112px; }
.tut-skip { margin-right: auto; min-height: 44px; padding: 0 6px; background: none; border: 0; color: var(--text-2); font: 500 15px/1 var(--font, system-ui, sans-serif); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; border-radius: 6px; }
.tut-skip:hover { color: var(--text); }

@keyframes tut-fade { from { opacity: 0; } }
@keyframes tut-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes tut-pulse { 0% { box-shadow: 0 0 0 0 rgba(233, 196, 106, .75); } 100% { box-shadow: 0 0 0 16px rgba(233, 196, 106, 0); } }
@keyframes tut-nudge { 20% { transform: translateX(-6px); } 45% { transform: translateX(5px); } 70% { transform: translateX(-3px); } }

/* ---- the help centre ------------------------------------------------------------------------- */
.tut-help { font-size: 16px; line-height: 1.5; }
.modal.tut-help-modal { align-self: start; margin-top: min(6dvh, 48px); }   /* stays put when a guide opens */
.tut-help-modal .modal-head h3 { font-size: 24px; }
.tut-hero { display: flex; align-items: center; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; margin: 4px 0 18px; padding: 16px 18px; border: 1px solid var(--gold-line); border-radius: var(--radius, 12px); background: linear-gradient(135deg, var(--gold-soft), transparent 70%), var(--surface-2); }
.tut-hero h4 { margin: 0 0 2px; font-family: var(--display); font-size: 23px; font-weight: 600; line-height: 1.2; }
.tut-hero p { margin: 0; color: var(--text-2); font-size: 15.5px; }
.tut-hero-text { flex: 1 1 260px; }
.btn.tut-tour-cta { min-height: 54px; padding: 0 24px; font-size: 17px; border-radius: 12px; }
.tut-ico { width: 22px; height: 22px; flex: 0 0 auto; display: block; }
.tut-tour-cta .tut-ico, .tut-show .tut-ico { width: 16px; height: 16px; }
.tut-label { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--text-2); }
.input.tut-search { min-height: 50px; font-size: 16px; }
.tut-sec { margin: 20px 0 10px; font-family: var(--font, system-ui, sans-serif); font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.tut-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.tut-grid li[hidden] { display: none; }
.tut-guide { display: flex; align-items: center; gap: 14px; width: 100%; height: 100%; min-height: 78px; padding: 14px 14px 14px 14px; text-align: left; color: var(--text); background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--radius-sm, 8px); cursor: pointer; font: inherit; transition: border-color .15s, background .15s, box-shadow .2s, transform .15s; }
.tut-guide:hover, .tut-guide:focus-visible { border-color: var(--gold); background: var(--surface-3); }
.tut-guide-icon { flex: 0 0 42px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; color: var(--gold-2); background: var(--gold-soft); border: 1px solid var(--gold-line); }
.tut-guide-text { flex: 1 1 auto; min-width: 0; }
.tut-guide-title { display: block; font-size: 16.5px; font-weight: 600; line-height: 1.3; }
.tut-guide-sub { display: block; margin-top: 3px; font-size: 14.5px; line-height: 1.35; color: var(--text-2); }
.tut-guide-go { flex: 0 0 auto; font-size: 26px; line-height: 1; color: var(--text-3); }
.tut-guide:hover .tut-guide-go { color: var(--gold-2); }
.tut-empty { margin: 10px 0 0; padding: 18px; text-align: center; color: var(--text-2); border: 1px dashed var(--line-strong); border-radius: var(--radius-sm, 8px); }
.tut-empty[hidden] { display: none; }
.tut-foot { margin: 18px 0 0; color: var(--text-2); font-size: 15.5px; }

.btn.tut-back { min-height: 44px; padding: 0 12px 0 8px; margin: 0 0 10px -8px; font-size: 15.5px; color: var(--gold-2); }
.tut-detail-head { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; }
.tut-detail-head .tut-guide-icon { flex-basis: 54px; width: 54px; height: 54px; border-radius: 14px; }
.tut-detail-head .tut-ico { width: 28px; height: 28px; }
.tut-detail-title { margin: 0; font-family: var(--display); font-size: 30px; line-height: 1.1; font-weight: 600; outline: none; }
.tut-detail-sub { margin: 3px 0 0; font-size: 15.5px; color: var(--text-2); }
.tut-steps { list-style: none; counter-reset: tut; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.tut-steps li { counter-increment: tut; display: flex; align-items: flex-start; gap: 14px; padding: 13px 16px; font-size: 16.5px; line-height: 1.5; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm, 8px); }
.tut-steps li::before { content: counter(tut); flex: 0 0 34px; width: 34px; height: 34px; margin-top: -3px; display: grid; place-items: center; border-radius: 50%; font-weight: 700; font-size: 16px; color: #1a1406; background: linear-gradient(180deg, var(--gold-2), var(--gold)); }
.tut-steps b, .tut-legend b { color: var(--gold-2); font-weight: 600; }
.tut-note { padding: 14px 18px; border: 1px solid var(--gold-line); border-left: 4px solid var(--gold); border-radius: var(--radius-sm, 8px); background: var(--gold-soft); }
.tut-note p { margin: 0; font-size: 17px; font-weight: 600; }
.tut-note .tut-note-sub { margin-top: 6px; font-size: 15.5px; font-weight: 400; color: var(--text-2); }
.tut-detail-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.tut-detail-actions .btn { min-height: 50px; padding: 0 22px; font-size: 16px; }

.tut-legend .tut-sec:first-child { margin-top: 4px; }
.tut-legend-intro { margin: 0 0 10px; color: var(--text-2); }
.tut-legend-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tut-legend-row { display: flex; align-items: center; gap: 16px; padding: 11px 16px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm, 8px); }
.tut-legend-sample { flex: 0 0 130px; display: flex; align-items: center; gap: 10px; }
.tut-legend-sample .pill { font-size: 13px; }
.tut-legend-text { flex: 1 1 auto; }
.tut-heat { display: block; width: 84px; height: 10px; border-radius: 5px; overflow: hidden; background: var(--surface-4, var(--line-strong)); }
.tut-heat i { display: block; height: 100%; border-radius: 5px; }
.tut-heat-n { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tut-badge { display: inline-block; min-width: 24px; padding: 2px 8px; border-radius: 999px; background: var(--danger, #d64c4c); color: #fff; font-size: 13px; font-weight: 700; text-align: center; }

/* ---- light theme: a softer dim --------------------------------------------------------------- */
:root[data-theme="light"] .tut-layer { --tut-dim: rgba(23, 29, 43, .58); }
:root[data-theme="light"] :is(.tut-count, .tut-body b, .tut-steps b, .tut-legend b, .btn.tut-back) { color: var(--gold-3); }   /* readable gold on cream */

/* ---- face mode: navy glass, gold edges ------------------------------------------------------- */
body.face .tut-btn { background: rgba(14, 22, 42, .92); border-color: rgba(226, 184, 90, .55); color: #f4ecd6; box-shadow: 0 0 18px rgba(226, 184, 90, .12); }
body.face .tut-btn:hover { border-color: #e2b85a; box-shadow: 0 0 0 1px rgba(240, 207, 120, .14), 0 8px 24px rgba(0, 0, 0, .35), 0 0 22px rgba(226, 184, 90, .2); }
body.face .tut-btn-q { background: linear-gradient(180deg, #f6d98a, #d4a94a 55%, #b8892e); }
body.face .tut-layer { --tut-dim: rgba(2, 4, 10, .72); }
body.face .tut-layer.tut-nohole { background: radial-gradient(circle at 50% 40%, rgba(4, 8, 20, .58), rgba(2, 4, 10, .84)); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
body.face .tut-hole { border-radius: 12px; box-shadow: 0 0 0 2px #e2b85a, 0 0 26px 6px rgba(226, 184, 90, .35), 0 0 0 200vmax var(--tut-dim); }
body.face .tut-card { --tut-bg: #111a31; background: linear-gradient(180deg, rgba(20, 30, 54, .96), rgba(14, 22, 42, .92)); border-color: rgba(226, 184, 90, .55); border-radius: 18px; backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); box-shadow: 0 30px 90px rgba(0, 0, 0, .6), 0 0 0 1px rgba(240, 207, 120, .07), 0 0 50px rgba(212, 169, 74, .10); }
body.face .tut-card[data-side="below"] .tut-arrow { background: #142038; }
body.face .tut-arrow { border-color: rgba(226, 184, 90, .55); background: #0f182d; }
body.face .tut-title, body.face .tut-detail-title, body.face .tut-hero h4 { background: linear-gradient(180deg, #fffaf0, #e9d7a6); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.face .tut-count, body.face .tut-body b, body.face .tut-steps b, body.face .tut-legend b { color: #f0cf78; }
body.face .tut-dot.on { background: #e2b85a; }
body.face .tut-hero { background: radial-gradient(600px 160px at 0% 0%, rgba(226, 184, 90, .16), transparent 70%), rgba(14, 22, 42, .92); border-color: rgba(226, 184, 90, .45); }
body.face .tut-guide { background: linear-gradient(180deg, rgba(24, 36, 64, .85), rgba(14, 22, 42, .92)); border-color: rgba(212, 169, 74, .2); }
body.face .tut-guide:hover, body.face .tut-guide:focus-visible { border-color: #e2b85a; box-shadow: 0 10px 30px rgba(0, 0, 0, .35), 0 0 22px rgba(226, 184, 90, .14); }
@media (hover: hover) { body.face .tut-guide:hover { transform: translateY(-1px); } }
body.face .tut-guide-icon { color: #f0cf78; background: radial-gradient(circle at 30% 25%, #2a3c64, #0b1222 70%); border-color: rgba(240, 207, 120, .5); box-shadow: 0 0 16px rgba(212, 169, 74, .12); }
body.face .tut-steps li, body.face .tut-legend-row { background: rgba(14, 22, 42, .92); border-color: rgba(212, 169, 74, .16); }
body.face .tut-steps li::before { background: linear-gradient(180deg, #f6d98a, #d4a94a 55%, #b8892e); box-shadow: 0 4px 14px rgba(212, 169, 74, .25); }
body.face .tut-note { background: rgba(14, 22, 42, .92); border-color: rgba(226, 184, 90, .45); border-left-color: #e2b85a; }
body.face .tut-empty { border-color: rgba(212, 169, 74, .25); }

/* ---- phones ---------------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .tut-btn { padding: 0 13px 0 7px; font-size: 14.5px; gap: 7px; }
  .tut-scroll { padding: 16px 16px 14px; }
  .tut-title { font-size: 24px; }
  .tut-actions .btn { flex: 1 1 auto; }
  .tut-actions .tut-skip { flex: 0 0 auto; }
  .tut-hero { padding: 14px; }
  .btn.tut-tour-cta { width: 100%; }
  .tut-grid { grid-template-columns: 1fr; }
  .tut-detail-title { font-size: 26px; }
  .tut-steps li { padding: 12px 13px; gap: 12px; }
  .tut-legend-row { flex-wrap: wrap; gap: 8px 14px; }
  .tut-detail-actions .btn { flex: 1 1 100%; }
}

/* ---- calm and accessible --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .tut-layer, .tut-layer *, .tut-layer *::after, .tut-help *, .tut-btn { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  .tut-hole { outline: 3px solid Highlight; outline-offset: 2px; }
  .tut-card { border: 2px solid CanvasText; }
  body.face .tut-title, body.face .tut-detail-title, body.face .tut-hero h4 { color: CanvasText; background: none; }
}