/* The Archive (spec 27): story acts, lore files, the station's NEW dot. Colours from the screen theme tokens. */

/* NEW dot: on the hideout station (SVG and list card) and on unread files */
.station__new { fill: var(--cyan-hi); stroke: var(--bg-deep); stroke-width: 2; }
.dot-new { display: inline-block; width: 9px; height: 9px; margin-left: 8px; border-radius: 50%; background: var(--cyan-hi); box-shadow: var(--glow); vertical-align: 2px; }

/* hideout: the story line */
.notice--story { padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
.linkbtn { padding: 0; min-height: 32px; background: none; border: 0; color: var(--cyan); font: inherit; text-align: left; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--cyan-dim); }
.linkbtn:hover, .linkbtn:focus-visible { color: var(--cyan-hi); text-decoration-color: currentColor; }

/* quests: the main story line */
.tag--story { border-color: var(--cyan); color: var(--cyan-hi); background: var(--cyan-wash); }
.qline--story { border-color: var(--cyan-dim); border-left: 3px solid var(--cyan); }
.qline__story { margin: 0; padding: 0 var(--sp-3) var(--sp-3); color: var(--text-dim); font-size: var(--fs-s); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.qline:not(.is-open) .qline__story { display: none; }

/* shared reading type: comfortable line length, scales with the text-size setting (rem) */
.archive .tabpanel { margin-top: var(--sp-3); }
.arch__prose, .lorepage { max-width: 66ch; }
.arch__p, .lorepage__p { margin: 0 0 var(--sp-3); line-height: 1.65; color: var(--text); }
.arch__p:last-child, .lorepage__p:last-child { margin-bottom: 0; }
.arch__label { margin: 0 0 var(--sp-1); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); }
.arch__intro { display: grid; gap: var(--sp-2); justify-items: start; margin-bottom: var(--sp-4); }
.arch__intro .meter { width: 100%; max-width: 66ch; }
.arch__name { margin: 0; font-size: var(--fs-xl); color: var(--cyan-hi); }
.arch__where { margin: 0; color: var(--text-dim); font-size: var(--fs-s); }
.arch__section { margin: 0 0 var(--sp-4); padding: var(--sp-4); border: var(--bw) solid var(--line); background: var(--panel); }

/* acts */
.acts { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.act { padding: var(--sp-3) var(--sp-4) var(--sp-4); border: var(--bw) solid var(--line); border-left: 3px solid var(--line-2); background: var(--panel); display: grid; gap: var(--sp-3); }
.act.is-open { border-left-color: var(--cyan); }
.act.is-done { border-left-color: var(--cyan-dim); }
.act.is-locked { border-style: dashed; background: transparent; gap: var(--sp-1); }
.act__head { display: grid; grid-template-columns: 1fr auto auto; grid-template-areas: "n state count" "title title title"; align-items: center; gap: 2px var(--sp-2); }
.act__n { grid-area: n; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); }
.act__title { grid-area: title; margin: 0; font-size: var(--fs-l); color: var(--text); }
.act.is-locked .act__title { color: var(--text-dim); }
.act__state { grid-area: state; }
.act__state.is-open { border-color: var(--cyan-dim); color: var(--cyan); background: var(--cyan-wash); }
.act__state.is-locked { border-style: dashed; }
.act__count { grid-area: count; font-variant-numeric: tabular-nums; color: var(--text-dim); font-size: var(--fs-s); }
.act__gate { margin: 0; color: var(--text-dim); font-size: var(--fs-s); }
.act__meter { width: 100%; }
.act__jobs { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.act__fold { border: var(--bw) solid var(--line); background: var(--bg-2); }
.act__fold > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--sp-2); min-height: var(--tap); padding: var(--sp-2) var(--sp-3); cursor: pointer; list-style: none; }
.act__fold > summary::-webkit-details-marker { display: none; }
.act__fold > summary::before { content: '›'; color: var(--cyan); transition: transform var(--t-fast); }
.act__fold[open] > summary::before { transform: rotate(90deg); }
.act__fold > summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
.act__jobtitle { font-weight: 700; color: var(--text); }
.act__who { color: var(--text-faint); font-size: var(--fs-s); }
.act__jobbody { padding: 0 var(--sp-3) var(--sp-3) calc(var(--sp-3) + 1ch + var(--sp-2)); max-width: 66ch; }
.act__jobbody .arch__label { margin-top: var(--sp-2); }
.act__next { margin: 0; color: var(--text-dim); font-size: var(--fs-s); }
.act__next .arch__label { display: inline; margin-right: 4px; }
.act__outro { padding-top: var(--sp-3); border-top: var(--bw) dashed var(--line-2); }

/* lore */
.lore__head { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: var(--sp-1) var(--sp-3); margin-bottom: var(--sp-3); }
.lore__head .meter { grid-column: 1 / -1; width: 100%; }
.lore__count { margin: 0; font-size: var(--fs-l); font-weight: 700; color: var(--cyan-hi); font-variant-numeric: tabular-nums; }
.lore__unread { margin: 0; color: var(--cyan); font-size: var(--fs-s); }
.lore__tools { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.lore__tools .seg--filter { margin-bottom: 0; }
.lore__search { width: 100%; }
.lore__cats { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.lore__groups { display: grid; gap: var(--sp-4); }
.lore__group[hidden], .lore__row[hidden] { display: none; }
.lore__cat { display: flex; justify-content: space-between; gap: var(--sp-2); margin: 0 0 var(--sp-2); font-size: var(--fs-s); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }
.lore__catcount { color: var(--text-faint); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.lore__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
@media (min-width: 760px) { .lore__list { grid-template-columns: 1fr 1fr; } }
.lore__btn { display: flex; align-items: flex-start; gap: var(--sp-2); width: 100%; min-height: var(--tap); padding: var(--sp-2) var(--sp-3); background: var(--panel); border: var(--bw) solid var(--line); color: var(--text); font: inherit; text-align: left; }
button.lore__btn { cursor: pointer; }
button.lore__btn:hover { border-color: var(--cyan-dim); background: var(--panel-2); }
button.lore__btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.lore__dot { flex: none; width: 9px; height: 9px; margin-top: 0.5em; border-radius: 50%; background: transparent; }
.lore__row.is-new .lore__dot { background: var(--cyan-hi); box-shadow: var(--glow); }
.lore__text { display: grid; gap: 2px; min-width: 0; }
.lore__title { font-weight: 700; overflow-wrap: anywhere; }
.lore__row.is-locked .lore__btn { border-style: dashed; background: transparent; }
.lore__row.is-locked .lore__title { color: var(--text-faint); letter-spacing: 0.2em; }
.lore__hint { color: var(--text-dim); font-size: var(--fs-s); }

/* a lore file, read in a sheet */
.sheet__panel--read { max-width: 720px; }
.lorepage { margin: 0 auto; }
.lorepage__cat { margin: 0 0 var(--sp-3); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); }
.lorepage__p { font-size: 1.0625rem; }