/* ============================================================================
   FOW TRAVEL — DISCOVERY CONCEPT EXPLORATION · SHARED STYLES   (TEST SURFACE)
   Loads after fow_pub_experience.css and reads its tokens (--x-*) and the
   accepted type roles. Two materials only: WORLD (dark) and PAPER.
   ============================================================================ */

.pub-x-ground, .disc {
  --disc-out: cubic-bezier(0.23, 1, 0.32, 1);
  --disc-io:  cubic-bezier(0.77, 0, 0.175, 1);
}

/* ------------------------------------------------ the entry, in the reader bar
   (harness shell only — the accepted pages are not edited). Distinct from the
   crumb, the language segment and the context disclosure: a struck mark and
   a word, brass, outlined. */
.pub-x-ground .pub-bar { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.disc-entry {
  justify-self: end; display: inline-flex; align-items: center; gap: .55em;
  padding: .42em .95em; border: 1px solid var(--x-world-brass-2); background: none;
  color: var(--x-world-brass); font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer;
  transition: transform 160ms var(--disc-out), border-color 150ms ease, color 150ms ease;
}
.disc-entry i { font-style: normal; font-size: 1.15em; line-height: 1; }
.disc-entry:hover { border-color: var(--x-world-brass); color: var(--x-world-ink); }
.disc-entry:active { transform: scale(.97); }
.disc-entry:focus-visible { outline: 2px solid rgba(197, 163, 95, .8); outline-offset: 2px; }
.disc-entry[aria-expanded="true"] { background: var(--x-world-brass); color: var(--x-world); }
@media (max-width: 720px) {
  .pub-x-ground .pub-bar { grid-template-columns: minmax(0, 1fr) auto auto; }
  .disc-entry { padding: .42em .7em; }
}

/* ------------------------------------------------------------ the overlay */
.disc {
  position: fixed; inset: 0; z-index: 60; overflow: auto; overscroll-behavior: contain;
  -webkit-font-smoothing: antialiased;
  --dw-ink: var(--x-world-ink); --dw-ink-2: var(--x-world-ink-2); --dw-ink-3: var(--x-world-ink-3);
  --dw-rule: var(--x-world-rule); --dw-brass: var(--x-world-brass); --dw-brass-2: var(--x-world-brass-2);
  --dw-face: rgba(255, 253, 246, .05); --dw-hot: rgba(240, 150, 120, .95);
  background: var(--x-world); color: var(--dw-ink);
  /* the Published Page component roles are scoped to .pub; the layer stands
     outside the article, so it binds the same global roles itself */
  --fow-pub-title-family: var(--fow-font-editorial); --fow-pub-body-family: var(--fow-font-editorial); --fow-pub-meta-family: var(--fow-font-instrument);
  --fow-pub-body-size: var(--fow-type-body); --fow-pub-body-leading: var(--fow-leading-body); --fow-pub-meta-size: var(--fow-type-label); --fow-pub-micro-size: var(--fow-type-micro);
  font-family: var(--fow-pub-body-family); font-size: var(--fow-pub-body-size); line-height: var(--fow-pub-body-leading);
}
html[lang="ko"] .disc { --fow-pub-body-leading: var(--fow-leading-body-ko); }
.c03-ghost { --fow-pub-title-family: var(--fow-font-editorial); --fow-pub-body-family: var(--fow-font-editorial); --fow-pub-meta-family: var(--fow-font-instrument); }
.disc[hidden] { display: none; }
.disc--paper {
  --dw-ink: var(--x-ink); --dw-ink-2: var(--x-ink-2); --dw-ink-3: var(--x-ink-3);
  --dw-rule: var(--x-rule); --dw-brass: var(--x-brass); --dw-brass-2: var(--x-brass);
  --dw-face: rgba(255, 253, 246, .55); --dw-hot: var(--x-hot);
  background: var(--x-paper); color: var(--dw-ink);
}
body[data-disc-open] { overflow: hidden; }
#pub { transition: transform 260ms var(--disc-out), opacity 260ms var(--disc-out); transform-origin: 50% 0; }
body[data-disc-open] #pub { transform: scale(.985); opacity: .5; }

/* the instrument voice */
.disc-role, .disc-state, .disc-k {
  font-family: var(--fow-pub-meta-family); font-size: var(--fow-type-label);
  letter-spacing: var(--fow-track-instrument-caps); text-transform: uppercase; line-height: 1.35;
}
.disc-role { color: var(--dw-ink-3); display: flex; gap: .6em; align-items: baseline; margin: 0; }
.disc-role i { font-style: normal; color: var(--dw-brass); }
.disc-state { color: var(--dw-brass); margin: 0; }
.disc-k { color: var(--dw-ink-3); margin: 0; }

/* return to reading */
.disc-back {
  display: grid; gap: .15rem; justify-items: start; text-align: left; padding: .6rem 0; border: 0; background: none;
  color: var(--dw-ink); cursor: pointer; font: inherit;
  transition: transform 160ms var(--disc-out);
}
.disc-back small { font-family: var(--fow-pub-meta-family); font-size: var(--fow-type-small); letter-spacing: var(--fow-track-instrument-caps); text-transform: uppercase; color: var(--dw-ink-3); }
.disc-back b { font-family: var(--fow-pub-body-family); font-weight: 400; font-size: var(--fow-type-body-lg); line-height: 1.2; text-decoration: underline; text-decoration-color: var(--dw-rule); text-underline-offset: .18em; }
.disc-back:hover b { text-decoration-color: var(--dw-brass); }
.disc-back:active { transform: scale(.98); }
.disc-back:focus-visible { outline: 2px solid var(--dw-brass); outline-offset: 3px; }

/* ------------------------------------------------------- the semantic list */
.disc-list { margin: 0; padding: 0; list-style: none; display: grid; }
.disc-item { position: relative; border-top: 1px solid var(--dw-rule); }
.disc-item:last-child { border-bottom: 1px solid var(--dw-rule); }
.disc-item__go {
  display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: .2rem .9rem; padding: .85rem 0;
  color: inherit; text-decoration: none;
  transition: background-color 200ms ease, transform 160ms var(--disc-out);
}
.disc-item__go:hover, .disc-item__go:focus-visible, .disc-item.is-on .disc-item__go { padding-left: .5rem; background: var(--dw-face); }
.disc-item__go:focus-visible { outline: 2px solid var(--dw-brass); outline-offset: 2px; }
.disc-item__go:active { transform: scale(.995); }
.disc-item__g { grid-row: 1 / span 5; width: 2.2rem; height: 2.2rem; margin-top: .15rem; }
.disc-item__g path { fill: none; stroke: var(--dw-brass); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.disc-item__k { grid-column: 2; font-family: var(--fow-pub-meta-family); font-size: var(--fow-type-small); letter-spacing: var(--fow-track-instrument-caps); text-transform: uppercase; color: var(--dw-ink-3); display: flex; flex-wrap: wrap; gap: .3em .6em; }
.disc-item__k i, .disc-item__k em { font-style: normal; }
.disc-item__k i::before, .disc-item__k em::before { content: "·"; margin-right: .6em; }
.disc-item__k em { color: var(--dw-brass); }
.disc-item__t { grid-column: 2; font-family: var(--fow-pub-body-family); font-weight: 400; font-size: var(--fow-type-body-lg); line-height: 1.2; color: var(--dw-ink); }
.disc-item__line { grid-column: 2; color: var(--dw-ink-2); font-size: var(--fow-type-body-sm); line-height: 1.45; }
.disc-item__pv { grid-column: 2; color: var(--dw-ink-2); font-size: var(--fow-type-body-sm); line-height: 1.5; max-width: 52ch; }
.disc-item__pv i { font-style: normal; font-family: var(--fow-pub-meta-family); font-size: var(--fow-type-micro); letter-spacing: var(--fow-track-instrument-caps); text-transform: uppercase; color: var(--dw-ink-3); margin-right: .6em; }
.disc-item__meta { grid-column: 2; display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: center; margin-top: .35rem; }
.disc-item__why { font-family: var(--fow-pub-meta-family); font-size: var(--fow-type-micro); letter-spacing: var(--fow-track-instrument); text-transform: uppercase; color: var(--dw-brass); }
.disc-item__chips { display: flex; gap: .3rem; flex-wrap: wrap; }
.disc-item.is-here::before { content: ""; position: absolute; left: 0; top: .85rem; bottom: .85rem; width: 2px; background: var(--dw-brass); }
.disc-item.is-here .disc-item__go { padding-left: .85rem; }
.disc-item.is-here .disc-item__why { color: var(--dw-ink); }
.disc-item.is-test .disc-item__go { opacity: .75; }
.disc-item.is-test .disc-item__g path { stroke-dasharray: 3 3; }
.disc-list__none { padding: 1rem 0; color: var(--dw-ink-2); border-top: 1px solid var(--dw-rule); border-bottom: 1px solid var(--dw-rule); display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: baseline; }
.disc-list__relax { border: 0; background: none; padding: 0; font: inherit; color: var(--dw-brass); text-decoration: underline; text-underline-offset: .18em; cursor: pointer; }
.disc-list__relax:hover { color: var(--dw-ink); }
.disc-list__relax:focus-visible { outline: 2px solid var(--dw-brass); outline-offset: 2px; }

/* chips on either material (the network band's grammar) */
.disc .pub__chip { border-color: var(--dw-rule); color: var(--dw-ink-2); background: none; }
.disc .pub__chip--hold { color: var(--dw-hot); border-color: var(--dw-hot); }
.disc .pub__chip--draft { color: var(--dw-hot); border-color: var(--dw-hot); }
.disc .pub__chip--sample { color: var(--dw-ink-2); border-style: dashed; border-color: var(--dw-ink-3); }
.disc .pub__chip--source { color: rgba(140, 190, 170, .95); border-color: rgba(140, 190, 170, .5); }
.disc--paper .pub__chip--source { color: var(--x-status); border-color: var(--x-status); }
.disc .pub__chip--scope { color: var(--dw-brass); border-color: var(--dw-brass-2); }
.disc .pub__chip--test { color: var(--dw-hot); border-style: dashed; border-color: var(--dw-hot); font-weight: 600; }

/* ------------------------------------------------------------ choice groups */
.disc-radios { display: grid; }
.disc-radio {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: .1rem .8rem;
  width: 100%; padding: .65rem 0; border: 0; border-top: 1px solid var(--dw-rule); background: none; text-align: left; cursor: pointer;
  color: var(--dw-ink-2); font-family: var(--fow-pub-body-family); font-size: var(--fow-type-body-lg); line-height: 1.2;
  transition: color 150ms ease, transform 160ms var(--disc-out);
}
.disc-radios > .disc-radio:last-child { border-bottom: 1px solid var(--dw-rule); }
.disc-radio b { font-weight: 400; }
.disc-radio small { grid-column: 1 / -1; font-size: var(--fow-type-body-sm); color: var(--dw-ink-3); }
.disc-radio__n { font-family: var(--fow-pub-meta-family); font-size: var(--fow-type-label); letter-spacing: .06em; color: var(--dw-ink-3); font-variant-numeric: tabular-nums lining-nums; }
.disc-radio[aria-checked="true"] { color: var(--dw-ink); padding-left: .7rem; }
.disc-radio[aria-checked="true"]::before { content: ""; position: absolute; left: 0; top: .65rem; bottom: .65rem; width: 2px; background: var(--dw-brass); }
.disc-radio[aria-checked="true"] .disc-radio__n { color: var(--dw-brass); }
.disc-radio:hover:not(:disabled) { color: var(--dw-ink); }
.disc-radio:active:not(:disabled) { transform: scale(.99); }
.disc-radio:disabled { opacity: .35; cursor: default; }
.disc-radio:focus-visible { outline: 2px solid var(--dw-brass); outline-offset: -2px; }
/* the row variant: small outlined words */
.disc-radios--row { display: flex; flex-wrap: wrap; gap: .4rem; }
.disc-radios--row .disc-radio { width: auto; grid-template-columns: auto auto; gap: .5em; padding: .42em .8em; border: 1px solid var(--dw-rule); font-size: var(--fow-type-body-sm); }
.disc-radios--row > .disc-radio:last-child { border-bottom: 1px solid var(--dw-rule); }
.disc-radios--row .disc-radio[aria-checked="true"] { border-color: var(--dw-brass); padding-left: .8em; }
.disc-radios--row .disc-radio[aria-checked="true"]::before { display: none; }

/* ----------------------------------------------------------- 2200 and above
   The wide canvas is used at scale: the layer's type roles step up together
   (the accepted tokens are consumed through var(), so one override carries). */
@media (min-width: 2200px) {
  .disc {
    --fow-type-label: .98rem; --fow-type-small: .9rem; --fow-type-micro: .82rem;
    --fow-type-body: 1.32rem; --fow-type-body-lg: 1.6rem; --fow-type-body-sm: 1.18rem; --fow-type-h3: 2rem;
    --fow-pub-body-size: 1.32rem;
  }
  .disc-item__g { width: 2.8rem; height: 2.8rem; }
  .disc-item__go { grid-template-columns: 2.8rem minmax(0, 1fr); gap: .3rem 1.1rem; padding: 1.1rem 0; }
  .disc-item__pv { max-width: 60ch; }
  .disc-radio { padding: .8rem 0; }
  .disc .pub__chip { font-size: .82rem; }
  .disc-back b { font-size: 1.6rem; }
}

/* --------------------------------------------------------- reduced motion
   Meaning stays; travel goes. */
@media (prefers-reduced-motion: reduce) {
  .disc, .disc *, #pub, .disc-entry { transition: opacity 150ms ease, color 150ms ease, background-color 150ms ease, border-color 150ms ease !important; animation-duration: 0s !important; }
  body[data-disc-open] #pub { transform: none; }
}
/* a keyboard-initiated change: state, no travel */
.disc.is-instant, .disc.is-instant * { transition-duration: 0s !important; animation-duration: 0s !important; }