/* Histoires collectives (HC-WP 4): overview and story pages. Loaded with the class « hc-page » on the
   templates' <main> (inc/assets.php), together with batch-shell.css (labels, breadcrumb, actions,
   intro), so the game pages read like the other inner pages. Layout from the wireframes « 1 Overview »
   and « 2–3 Story page »; the site's design leads (tokens only, no new values beyond the layout
   measures noted here). Warnings and errors: Noir text with a clear word (DS-20). */

.hc-page [hidden] { display: none !important; }
.hc-page .batch-section { margin-top: var(--chapter-gap); }
.hc-page .batch-section > h2 { margin: 0 0 var(--heading-gap); font-family: var(--font-body); font-size: clamp(2.25rem, 4vw, 3.4rem); font-weight: 600; line-height: 1.04; }

/* Shared lines */
.hc-loading, .hc-muted { color: var(--color-text-muted); }
.hc-empty { max-width: 640px; margin: 0; font-size: 1.15rem; }
.hc-notice { margin: 0; padding: 14px 18px; border: 1px solid var(--color-text); color: var(--color-text); }
.hc-notice strong { font-weight: 600; }
.hc-notice-slot:empty { display: none; }
.hc-notice-slot { margin: 0 0 var(--within-gap); }
.hc-placeholder { padding: 24px; border: 1px dashed var(--color-border); background: var(--color-surface-alt); font-size: .95rem; }
.hc-facts { display: flex; flex-direction: column; gap: 2px; margin: 0; font-size: .98rem; line-height: 1.5; }
.hc-pen { font-weight: 500; }
.hc-soon { display: block; margin: 10px 0 0; font-size: .92rem; }
.hc-soon:empty { display: none; }
.hc-text-button { padding: 0; border: 0; border-bottom: 1px solid var(--color-accent); background: none; color: var(--color-text); cursor: pointer; }
.hc-tag { display: inline-block; padding: 2px 12px; border: 1px solid var(--color-text); border-radius: var(--radius-pill); font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }

/* Overview: the stories as a grid of cards, three per row on a wide screen, two on a tablet, one on
   a phone (client feedback 3, 13 October 2026, option A; replaces the large first story and rows).
   The link sits at the bottom so the cards of a row line up. */
.hc-story-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 32px; }
.hc-story-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.hc-story-card > * { margin: 0; }
.hc-story-card__image { display: block; aspect-ratio: 3 / 2; margin-bottom: 8px; overflow: hidden; background: var(--color-surface-alt); }
.hc-story-card__image img, .hc-story-hero__image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-base) var(--ease-standard); }
.hc-story-card__image:hover img { transform: scale(1.03); }
.hc-story-card .batch-label { margin: 0; }
.hc-story-card__title { font-family: var(--font-body); font-size: clamp(1.5rem, 2vw, 1.85rem); font-weight: 600; line-height: 1.08; }
.hc-story-card__title a { text-decoration: none; }
.hc-story-card__title a:hover { color: var(--color-accent); }
.hc-story-card__premise { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; line-height: 1.55; }
.hc-progress { display: block; height: 4px; background: var(--color-surface-alt); }
.hc-progress__bar { display: block; height: 100%; background: var(--color-accent); }
.hc-story-card .text-link { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; margin-top: auto; }

/* Story page: presentation */
.hc-story-hero { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: center; margin-bottom: var(--within-gap); }
.hc-story-hero--text { grid-template-columns: minmax(0, 820px); }
.hc-story-hero__text { display: flex; flex-direction: column; gap: 20px; }
.hc-story-hero__text .batch-label { margin: 0; }
.hc-story-hero h1 { margin: 0; font-family: var(--font-display); font-size: clamp(3.2rem, 6vw, 5.4rem); font-weight: 400; line-height: .98; }
.hc-story-hero__premise { margin: 0; font-size: var(--wp--preset--font-size--large); line-height: 1.5; }
.hc-story-hero__image { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-surface-alt); }
.hc-actions { margin-top: 4px; }
.hc-actions .wp-element-button { cursor: pointer; }

/* Story page: reading column, with the chapters and the compass beside it on wide screens. */
.hc-story-body { display: grid; grid-template-columns: minmax(0, 720px) minmax(260px, 340px); grid-template-areas: "summary aside" "reading aside"; column-gap: 72px; justify-content: space-between; align-items: start; }
.hc-summary { grid-area: summary; margin-bottom: 24px; padding: 24px 28px; background: var(--color-surface-alt); }
.hc-summary .batch-label { margin-bottom: 10px; }
/* Brand dots (inc/dots.php) on Sable: Noir, as everywhere on the site. */
.hc-summary, .hc-room__previous { --dots-color: var(--color-text); }
.hc-summary__text { margin: 0; font-size: 1.1rem; }
.hc-aside { grid-area: aside; position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + 110px); display: flex; flex-direction: column; gap: 32px; max-height: calc(100vh - 140px); overflow: auto; }
.hc-reading { grid-area: reading; min-width: 0; }

.hc-panel > summary { margin: 0 0 12px; cursor: pointer; list-style: none; }
.hc-panel > summary::-webkit-details-marker { display: none; }
.hc-panel > summary::after { content: "+"; margin-left: auto; font-size: 1.2rem; font-weight: 400; letter-spacing: 0; }
.hc-panel[open] > summary::after { content: "−"; }
.hc-toc { margin: 0 0 8px; padding: 0; list-style: none; font-size: .95rem; }
.hc-toc li { padding: 4px 0; }
.hc-toc a { text-decoration: none; }
.hc-toc a:hover { color: var(--color-accent); }
.hc-compass__group { padding: 14px 0; border-top: 1px solid var(--color-border); }
.hc-compass__kind { margin: 0 0 6px; font-family: var(--font-body); font-size: .82rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.hc-compass ul { margin: 0; padding: 0; list-style: none; font-size: .95rem; line-height: 1.5; }
.hc-compass li + li { margin-top: 4px; }

.hc-chapter { display: flex; flex-direction: column; gap: 14px; padding: 40px 0; border-top: 1px solid var(--color-text); scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + 100px); }
.hc-chapter__head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.hc-chapter__head .batch-label { margin: 0; }
.hc-chapter__meta { margin: 0; font-size: .95rem; color: var(--color-text-muted); }
.hc-chapter__body p { margin: 0 0 1.1em; font-size: var(--wp--preset--font-size--article); line-height: 1.75; }
.hc-chapter__body p:last-child { margin-bottom: 0; }
.hc-chapter__report { margin: 0; font-size: .88rem; }
.hc-report { padding: 0; border: 0; background: none; color: var(--color-text-muted); text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: .22em; cursor: pointer; }
.hc-chapter--withdrawn .hc-muted { margin: 0; }

.hc-end { display: flex; flex-direction: column; gap: 16px; padding-top: 56px; border-top: 1px solid var(--color-text); }
.hc-end h2 { margin: 0; font-family: var(--font-body); font-size: clamp(2.25rem, 4vw, 2.75rem); font-weight: 600; line-height: 1.05; }
.hc-end .hc-pen { margin: 0; }
.hc-voices { padding-top: 64px; }
.hc-voices p:not(.batch-label) { margin: 0; }

@media (max-width: 1023px) {
  .hc-story-body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "summary" "aside" "reading"; }
  .hc-aside { position: static; max-height: none; overflow: visible; gap: 0; margin-bottom: 24px; }
  .hc-panel { padding: 14px 0; border-top: 1px solid var(--color-border); }
  .hc-panel:last-child { border-bottom: 1px solid var(--color-border); }
  .hc-panel > summary { display: flex; align-items: center; min-height: 44px; margin: 0; }
  .hc-panel[open] > summary { margin-bottom: 12px; }
}
@media (min-width: 1024px) {
  .hc-panel > summary::after { display: none; }
}
@media (max-width: 900px) {
  .hc-story-hero { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hc-story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hc-story-hero__image { order: -1; }
}
@media (max-width: 600px) {
  .hc-story-grid { grid-template-columns: minmax(0, 1fr); }
  .hc-summary { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .hc-story-card__image img { transition: none; }
  .hc-story-card__image:hover img { transform: none; }
}

/* ------------------------------------------------------------------------------------------------
   HC-WP 2 and HC-WP 4 part 2: sign-up dialog, take-pen confirmation, writing room (wireframes 4–6).
   Tokens only. Warnings and errors: Noir text with a clear word (« Erreur : », « Attention : »,
   « ✗ À revoir »), never colour alone (DS-20).
   ------------------------------------------------------------------------------------------------ */

/* Secondary button: outlined Noir pill (wireframe « Soumettre tel quel »). */
.hc-button-secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: .6rem 1.5rem; border: 1px solid var(--color-text); border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-text); font-family: var(--font-body); font-size: var(--wp--preset--font-size--button); font-weight: 600; line-height: 1.4; cursor: pointer; transition: background var(--duration-fast), color var(--duration-fast); }
.hc-button-secondary:hover { background: var(--color-text); color: var(--color-text-inverse); }
.hc-button-secondary:disabled { opacity: .45; cursor: not-allowed; }
.hc-page .wp-element-button:disabled { opacity: .45; cursor: not-allowed; }
.hc-action-message:empty { display: none; }
.hc-action-message .hc-notice { margin-top: 4px; }
.hc-account-line { margin: 0; font-size: .92rem; color: var(--color-text-muted); }
.hc-account-line .hc-text-button { min-height: 44px; color: var(--color-text); }

/* Fields (as the contact form). */
.hc-field { display: grid; gap: 6px; }
.hc-field label { font-weight: 600; }
.hc-help { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--color-text-muted); }
.hc-page input[type="text"], .hc-page input[type="email"], .hc-page input[type="password"], .hc-page textarea, .hc-dialog input[type="text"], .hc-dialog input[type="email"], .hc-dialog input[type="password"] { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid var(--color-text); border-radius: 0; background: var(--color-surface); color: var(--color-text); font: inherit; box-sizing: border-box; }
.hc-page select { min-height: 50px; padding: 10px 14px; border: 1px solid var(--color-text); border-radius: 0; background: var(--color-surface); color: var(--color-text); font: inherit; }
.hc-page [aria-invalid="true"], .hc-dialog [aria-invalid="true"] { border-width: 2px; }
.hc-consent { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 6px 14px; align-items: start; }
.hc-consent input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--color-text); }
.hc-consent input[aria-invalid="true"] { outline: 2px solid var(--color-text); outline-offset: 2px; }
.hc-consent label { font-size: .95rem; line-height: 1.5; }
.hc-consent a { border-bottom: 1px solid var(--color-accent); text-decoration: none; }
.hc-placeholder-text { font-weight: 600; }

/* « Donner mon avis » during the beta (D159): a small fixed button and its dialog. */
.hc-feedback-button { position: fixed; right: 16px; bottom: 16px; z-index: 50; min-height: 44px; padding: 10px 16px; border: 1px solid var(--color-text); background: var(--color-surface); color: var(--color-text); font: inherit; font-weight: 600; cursor: pointer; }
.hc-feedback-button:hover, .hc-feedback-button:focus-visible { background: var(--color-text); color: var(--color-surface); }
.hc-feedback textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--color-text); border-radius: 0; background: var(--color-surface); color: var(--color-text); font: inherit; box-sizing: border-box; }
.hc-feedback__form { display: grid; gap: 16px; }
.hc-feedback__kinds { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 0; border: 0; }
.hc-feedback__kinds legend { margin-bottom: 6px; padding: 0; font-weight: 600; }
.hc-feedback__kinds label { display: inline-flex; gap: 6px; align-items: center; min-height: 44px; }
.hc-feedback__kinds input { width: 20px; height: 20px; accent-color: var(--color-text); }

/* Dialogs: sign-up / log-in and the take-pen confirmation. */
.hc-dialog [hidden] { display: none !important; }
.hc-dialog { width: min(540px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 40px; border: 1px solid var(--color-text); background: var(--color-surface); color: var(--color-text); box-sizing: border-box; overflow: auto; }
.hc-dialog::backdrop { background: color-mix(in srgb, var(--color-text) 45%, transparent); }
.hc-dialog h2 { margin: 0 0 12px; font-family: var(--font-body); font-size: clamp(2rem, 5vw, 2.6rem); font-weight: 600; line-height: 1.05; }
.hc-dialog p { margin: 0 0 14px; }
.hc-dialog .batch-label { margin: 0 0 10px; }
.hc-dialog__close { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; padding: 0; border: 0; background: none; font-size: 1.8rem; line-height: 1; cursor: pointer; }
.hc-dialog__actions, .hc-account__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 8px; }
.hc-dialog .hc-notice-slot { margin: 0 0 12px; }
.hc-account { position: fixed; }
.hc-account__step { display: grid; gap: 16px; }
.hc-account__step > p, .hc-account__step > h2 { margin: 0; }
.hc-account__reason { font-weight: 600; }
.hc-account__switch { font-size: .95rem; }
.hc-account__switch .hc-text-button, .hc-dialog .hc-text-button { min-height: 44px; }
.hc-account__check { display: flex; gap: 10px; align-items: flex-start; }
.hc-account__check input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; }
/* The trap field (D140): off screen for people, filled in by robots. */
.hc-account__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* The account page and « Mes écrits » (games B1): one calm column. */
.hc-account-page { max-width: 640px; margin: 0 auto; padding: clamp(32px, 6vw, 64px) 0; }
.hc-account-page h1 { margin: 0 0 20px; }
.hc-account-page h2 { margin: 32px 0 12px; font-family: var(--font-body); font-size: 1.4rem; font-weight: 600; }
.hc-account-page .hc-account__step + .hc-account__step { margin-top: 32px; }
.hc-writings { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.hc-writings li { display: grid; gap: 4px; padding: 16px 20px; border: 1px solid var(--color-border); }
.hc-writings__meta { font-size: .92rem; color: var(--color-text-muted); }

/* « Votre dernier chapitre »: the writer's own last chapter and the editor's decision (story page,
   writing room). Sable, like « Votre texte précédent »; the state is words, never colour alone. */
.hc-mine-slot:empty, .hc-mine-slot[hidden] { display: none; }
.hc-mine { --dots-color: var(--color-text); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; max-width: 720px; padding: 22px 26px; background: var(--color-surface-alt); }
.hc-mine > * { margin: 0; }
.hc-mine__state { font-size: 1.05rem; }
.hc-mine__note { margin: 0; padding: 0 0 0 16px; border-left: 2px solid var(--color-text); }
.hc-mine a { border-bottom: 1px solid var(--color-accent); text-decoration: none; }

/* Writing room */
.hc-room { display: flex; flex-direction: column; }
.hc-room__bar { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--hc-header-height, 0px)); z-index: 30; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 16px; padding: 14px 0; border-bottom: 1px solid var(--color-text); background: var(--color-surface); }
.hc-room__bar p { margin: 0; }
.hc-room__time { font-size: 1.05rem; }
.hc-room__save { font-size: .92rem; }
.hc-room__alert { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 10px; padding: 16px 20px; border: 2px solid var(--color-text); background: var(--color-surface-alt); }
.hc-room__alert p { margin: 0; max-width: 760px; }
.hc-room__alert[hidden] { display: none; }
.hc-room__back { margin: 20px 0 0; font-size: .95rem; }
.hc-room__message, .hc-room__check, .hc-room__done { display: flex; flex-direction: column; gap: 18px; max-width: 820px; padding: 32px 0 0; }
.hc-room__message > *, .hc-room__check > *, .hc-room__done > * { margin: 0; }
.hc-room h1 { margin: 0; font-family: var(--font-display); font-size: clamp(2.6rem, 5vw, 3.5rem); font-weight: 400; line-height: 1.02; }
.hc-room__done h2 { font-family: var(--font-body); font-size: clamp(1.8rem, 3vw, 2.2rem); font-weight: 600; line-height: 1.1; }
.hc-room__lead { margin: 0; font-size: var(--wp--preset--font-size--large); line-height: 1.5; }
.hc-room [data-hc-message-text] { display: flex; flex-direction: column; gap: 12px; }
.hc-room__check:focus, .hc-room__done:focus { outline: none; }

.hc-room__head { display: flex; flex-direction: column; gap: 10px; padding: 24px 0; }
.hc-room__head .batch-label { margin: 0; }
.hc-room__grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; grid-template-areas: "text brief" "text form"; gap: 32px 56px; align-items: start; padding-top: 8px; }
.hc-room__brief { grid-area: brief; display: flex; flex-direction: column; gap: 20px; }
.hc-room__text { grid-area: text; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.hc-room__form { grid-area: form; display: flex; flex-direction: column; gap: 22px; }
.hc-room__submit { width: 100%; }

.hc-room__panel { padding: 22px 26px; }
.hc-room__panel > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px; font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; list-style: none; cursor: pointer; }
.hc-room__panel > summary::-webkit-details-marker { display: none; }
.hc-room__panel > summary::after { content: "+"; font-size: 1.3rem; font-weight: 400; letter-spacing: 0; }
.hc-room__panel[open] > summary::after { content: "−"; }
.hc-room__panel[open] > summary { margin-bottom: 12px; }
.hc-room__panel > :not(summary) { margin: 0 0 10px; }
.hc-room__panel > :last-child { margin-bottom: 0; }
.hc-room__panel--goal { background: var(--color-surface-alt); }
.hc-room__panel--goal p { font-size: 1.05rem; }
.hc-room__panel--rule { border: 1.5px solid var(--color-text); }
.hc-room__panel--truths { border-top: 1px solid var(--color-accent); padding-left: 0; padding-right: 0; }
.hc-room__panel ul, .hc-room__panel ol { margin: 0; padding-left: 1.2em; }
.hc-room__panel li + li { margin-top: 8px; }
.hc-room__quote { margin: 0 0 10px; padding: 0; font-family: var(--font-body); font-size: 1.35rem; line-height: 1.3; font-weight: 600; }
.hc-room__previous .hc-room__quote { font-family: var(--font-body); font-size: 1rem; line-height: 1.5; }
.hc-room__threads { list-style: none; padding: 0 !important; }
.hc-room__threads li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding-top: 10px; border-top: 1px solid var(--color-border); }
.hc-room__thread-text { flex-basis: 100%; font-size: .95rem; color: var(--color-text-muted); }

.hc-room__textarea { min-height: 520px; padding: 28px 32px !important; font-size: 1.15rem !important; line-height: 1.75; resize: vertical; }
.hc-room__count { margin: 0; font-size: .92rem; }
.hc-room__previous { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 22px 26px; background: var(--color-surface-alt); }
.hc-room__previous > * { margin: 0; }
[data-hc-notes] { display: flex; flex-direction: column; gap: 16px; }
[data-hc-notes]:empty { display: none; }
[data-hc-notes] .hc-notice a { border-bottom: 1px solid var(--color-accent); text-decoration: none; }

/* Before sending (wireframe 6) */
.hc-checks { margin: 8px 0 0; border-bottom: 1px solid var(--color-border); }
.hc-check { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 6px 24px; padding: 18px 0; border-top: 1px solid var(--color-border); }
.hc-check dt { font-weight: 600; }
.hc-check dd { margin: 0; }
.hc-check__word { white-space: nowrap; }
.hc-room__decide { margin-top: 8px; }
.hc-room__next { display: flex; flex-direction: column; gap: 10px; margin: 0; padding-left: 1.2em; max-width: 720px; }

@media (max-width: 900px) {
  .hc-room__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "brief" "text" "form"; gap: 24px; }
  .hc-room__brief { gap: 12px; }
  .hc-room__panel { padding: 0 16px; }
  .hc-room__panel > summary { min-height: 52px; }
  .hc-room__panel[open] { padding-bottom: 16px; }
  .hc-room__panel--truths { padding: 0 16px; border: 1px solid var(--color-border); }
  .hc-room__textarea { min-height: 420px; padding: 18px !important; font-size: 1.05rem !important; }
  .hc-check { grid-template-columns: minmax(0, 1fr); }
  .hc-dialog { padding: 32px 20px 24px; }
}
@media (max-width: 600px) {
  .hc-room__head { padding: 16px 0; }
  .hc-room__alert { padding: 14px 16px; }
  .hc-room__decide > * { width: 100%; }
}

/* Passe la plume and the players' pages in the games design of version 18 (D236): white boxes with a thin
   bronze line, sand boxes for what the writer reads, bronze actions, bronze-lined fields. */
.hc-page { --hc-line: color-mix(in srgb, var(--color-accent) 85%, var(--color-text)); --hc-action: color-mix(in srgb, var(--color-accent) 82%, #000); }
.hc-page .wp-element-button { border: 1px solid var(--hc-action); border-radius: 5px; background: var(--hc-action); color: var(--color-text-inverse); }
.hc-page .wp-element-button:hover { background: color-mix(in srgb, var(--hc-action) 80%, #000); }
.hc-button-secondary { border-color: var(--hc-line); border-radius: 5px; }
.hc-page input[type="text"], .hc-page input[type="email"], .hc-page input[type="password"], .hc-page textarea, .hc-page select, .hc-dialog input[type="text"], .hc-dialog input[type="email"], .hc-dialog input[type="password"] { border-color: var(--hc-line); border-radius: 3px; }
.hc-notice { border-color: var(--hc-line); border-left: 3px solid var(--hc-action); }
.hc-tag { border-color: color-mix(in srgb, var(--color-accent) 80%, var(--color-surface)); background: var(--color-surface-alt); color: color-mix(in srgb, var(--color-accent) 50%, #000); }
.hc-story-card { padding: 0 0 20px; border: 1px solid var(--hc-line); border-radius: 5px; overflow: hidden; background: var(--color-surface); }
.hc-story-card > :not(.hc-story-card__image) { padding-inline: 22px; }
.hc-story-card__image { margin-bottom: 4px; }
.hc-summary { border: 1px solid var(--hc-line); border-radius: 5px; }
details.hc-panel { padding: 18px 20px; border: 1px solid var(--hc-line); border-radius: 5px; background: var(--color-surface); }
.hc-chapter, .hc-end { border-top-color: var(--hc-line); }
.hc-progress__bar { background: var(--hc-action); }

.hc-writings li { border-color: var(--hc-line); border-radius: 5px; }
.hc-room__panel { border: 1px solid var(--hc-line); border-radius: 5px; }
.hc-room__panel--goal { border-color: var(--hc-line); }
.hc-room__panel--rule { border: 1px solid var(--hc-action); border-left-width: 3px; }
.hc-room__panel--truths { border-width: 1px 0 0; border-radius: 0; }
.hc-room__alert { border-color: var(--hc-line); border-radius: 5px; }

/* Reporting controls are buttons in game dialogs, stories and the writing room. */
.hc-report-button.hc-text-button, .hc-report-button.hc-report {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  padding: 10px 18px; border: 1px solid currentColor; border-radius: var(--radius-pill);
  background: var(--color-surface); color: inherit; font: 600 1rem/1.4 var(--font-body);
  text-decoration: none; text-align: center; white-space: normal; cursor: pointer;
}
.hc-report-button.hc-text-button:hover, .hc-report-button.hc-report:hover { background: var(--color-surface-alt); }