/* WO-B fiction page (Royal Road, measured 2026-09-24, docs/research/royalroad/03-fiction-page-and-tags.md).
   Loaded on book pages only, after site.css and reader.css. */

/* ---- header band: inside the 1170 container, cover framed white and overhanging ---- */
main.page:has(.fic-header) { padding-top: 20px; }
.bk-head .fic-header { background: var(--band); color: #fff; padding: 0; margin: 0; }
.fh-row { display: grid; grid-template-columns: 210px minmax(0, 1fr) auto; gap: 0 40px; align-items: start; padding: 40px 40px 24px; min-height: 200px; }
.fh-cover { position: relative; z-index: 1; margin-bottom: -170px; padding: 4px; background: #fff; border: 1px solid #DDD; align-self: start; }
.fh-cover .cover { box-shadow: none; }
.fh-info { padding-top: 22px; min-width: 0; }
.fic-header h1 { font: 300 30px/1.2 var(--f-ui); margin: 0 0 6px; color: #fff; }
.fh-by { margin: 0; font: 300 18px/1.3 var(--f-ui); color: #fff; }
.fh-by small { font-size: 13px; }
.fh-by a { color: #fff; font-weight: 300; }
.fh-actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin: 0; align-self: end; }
.fh-actions .btn.big .ic { width: 18px; height: 18px; }
.fh-actions .bk-latest { background: transparent; color: #DDE3EA; border-color: rgb(255 255 255 / 35%); font-size: 13px; min-height: 30px; padding: 4px 10px; }
.fh-actions .bk-latest:hover { background: rgb(255 255 255 / 10%); color: #fff; }
.fh-actions .lib-continue { order: -1; }
/* the main column starts beside the overhanging cover */
.bk-page { padding-top: 0; }
.bk-info { padding: 12px 20px 15px; }

/* ---- labels + tags ([+] toggle without JS: a checkbox) ---- */
.bk-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 12px; align-items: center; }
.bk-tags .rr-label { line-height: 13px; }
.bk-more-tags { display: none; }
.bk-tags-cb:checked ~ .bk-more-tags { display: contents; }
.bk-tags-toggle { margin-left: auto; cursor: pointer; background: var(--tagc); color: rgb(255 255 255 / 90%); min-width: 20px; text-align: center; font-weight: 600; user-select: none; }
.bk-tags-toggle::before { content: "+"; }
.bk-tags-cb:checked ~ .bk-tags-toggle::before { content: "\2212"; }
.bk-tags-toggle:hover { background: var(--tagc-hover); }
.bk-tags-cb:focus-visible ~ .bk-tags-toggle { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---- synopsis clamp (JS adds .bk-clamp only when it is long) ---- */
.bk-syn .synopsis { margin-top: 4px; font-size: 14px; line-height: 1.45; }
.bk-syn .synopsis.bk-clamp { max-height: 200px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 75%, transparent); mask-image: linear-gradient(#000 75%, transparent); }
.bk-syn-more { display: block; margin: 4px auto 0; background: none; border: 0; padding: 4px 10px; font: 700 11.9px/1 var(--f-ui); text-transform: uppercase; color: var(--ink); cursor: pointer; }
.bk-syn-more:hover { color: var(--link); }
.bk-syn-more[hidden] { display: none; }

/* ---- statistics (details, open by default; values RR red bold upper case) ---- */
.bk-stats > summary { list-style: none; cursor: pointer; margin-bottom: 10px; }
.bk-stats > summary::-webkit-details-marker { display: none; }
.bk-stats > summary h2 { color: var(--ink); font-size: 14px; }
.bk-caret::before { content: ""; display: inline-block; border: 5px solid transparent; border-top-color: currentColor; border-bottom: 0; vertical-align: middle; transition: transform .2s; }
.bk-stats[open] .bk-caret::before { transform: rotate(180deg); }
.bk-stats:not([open]) > summary { border-bottom: 0; margin-bottom: 0; }
.bk-stats:not([open]) { padding-bottom: 5px; }
.bk-stats-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 30px; padding: 0 14px; }
.bk-stats .stats div { display: block; border: 0; padding: 0 0 6px; }
.bk-stats .stats dt { font: 700 14px/1.4 var(--f-ui); text-transform: uppercase; color: rgb(0 0 0 / 80%); }
.bk-stats .stats dt::after { content: " :"; }
.bk-stats .stats dd { font: 700 14px/1.4 var(--f-ui); text-transform: uppercase; color: #E26A6A; }
.bk-stats .stats dd .muted { color: var(--muted); font-weight: 400; text-transform: none; }
.bk-tip { text-decoration: none; cursor: help; color: var(--muted); }
.bk-tip .ic { width: 14px; height: 14px; vertical-align: -2px; }

/* ---- table of contents ---- */
.bk-pill { background: #BAC3D0; color: #fff; font: 300 14px/14px var(--f-ui); padding: 3px 6px; white-space: nowrap; }
.bk-toc .portlet-title h2 .ic { width: 18px; height: 18px; }
.bk-next { display: flex; align-items: center; gap: 8px; background: #D9EDF7; color: #31708F; border: 1px solid #BCE8F1; padding: 15px; margin: 0 0 15px; font-size: 14px; }
.bk-next .ic { width: 16px; height: 16px; flex: none; }
.bk-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin: 0 0 8px; }
.bk-toolbar[hidden], .bk-pager[hidden], .bk-nomatch[hidden], .bk-sort[hidden], .bk-sort-text[hidden] { display: none; }
.bk-size { font-size: 14px; display: inline-flex; align-items: center; gap: 10px; }
.bk-size select { font: 400 14px var(--f-ui); color: var(--ink); background: var(--panel); border: 1px solid var(--line-strong); height: 34px; padding: 0 8px; }
.bk-filter { font: 400 14px var(--f-ui); color: var(--ink); background: #F3F6F9; border: 1px solid #F3F6F9; height: 34px; padding: 6px 12px; width: 181px; max-width: 100%; }
table.bk-chapters th { font-size: 14px; font-weight: 600; border-bottom: 1px solid var(--line-strong); }
table.bk-chapters tbody tr:nth-child(odd), table.bk-chapters tbody tr:hover { background: transparent; }
table.bk-chapters td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.bk-chapters td.r { background: #EFF3F8; font-size: 14px; color: var(--link); }
table.bk-chapters td.r a { color: var(--link); }
table.bk-chapters tbody tr:hover > td { background: #EEEEEE; }
table.bk-chapters tr[hidden] { display: none; }
.bk-sort { background: none; border: 0; padding: 0; font: 600 14px var(--f-ui); color: var(--ink); cursor: pointer; }
.bk-sort.desc span { display: inline-block; transform: scaleY(-1); }
.bk-pager { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 2px; margin-top: 12px; align-items: center; }
.bk-pager button { min-width: 2.5rem; padding: .75rem .5rem; font: 400 14px/1 var(--f-ui); background: transparent; color: var(--ink); border: 0; cursor: pointer; }
.bk-pager button:hover { color: var(--btn); }
.bk-pager button.on { background: var(--btn); color: #fff; }
.bk-nomatch { padding: 10px 8px; margin: 0; }

/* ---- sidebar: library buttons as RR icon tiles, author box ---- */
.bk-side-actions { margin-bottom: 20px; }
.bk-side-actions .lib-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.bk-side-actions .lib-btn { flex-direction: column-reverse; justify-content: center; gap: 4px; height: 50px; padding: 4px; background: var(--panel); color: rgb(0 0 0 / 50%); border: 0; border-bottom: 2px inset rgb(0 0 0 / 20%); font: 400 11.2px/1.2 var(--f-ui); transition: background .3s; }
.bk-side-actions .lib-btn .ic { color: inherit; width: 14px; height: 14px; }
.bk-side-actions .lib-btn:hover { background: #F2F2F2; color: rgb(0 0 0 / 70%); }
.bk-side-actions .lib-btn.on { background: var(--label); color: #fff; }
.bk-goto-toc { display: none; }
.author-box .portlet-title h2 { color: #666; font-size: 16px; }
.author-box .portlet-title h2 .ic { width: 16px; height: 16px; }
.author-box .ab-row { flex-direction: column; text-align: center; gap: 8px; }
.author-box .ab-name { color: #E7505A; font: 600 16px/1.3 var(--f-ui); }
.author-box .lib-author { text-align: center; }

/* ---- dark theme ---- */
:root[data-theme="dark"] .bk-stats .stats dt, :root[data-theme="dark"] .author-box .portlet-title h2 { color: rgb(255 255 255 / 80%); }
:root[data-theme="dark"] table.bk-chapters td.r { background: #1C1F23; }
:root[data-theme="dark"] table.bk-chapters tbody tr:hover > td { background: #262626; }
:root[data-theme="dark"] .bk-next { background: #16303D; color: #9ACFEA; border-color: #22495C; }
:root[data-theme="dark"] .bk-filter { background: #232323; border-color: #232323; }
:root[data-theme="dark"] .bk-side-actions .lib-btn { color: rgb(255 255 255 / 60%); border-bottom-color: rgb(255 255 255 / 12%); }
:root[data-theme="dark"] .bk-side-actions .lib-btn:hover { background: #1E1E1E; color: rgb(255 255 255 / 85%); }
:root[data-theme="dark"] .bk-side-actions .lib-btn.on { background: var(--label); color: #fff; }
:root[data-theme="dark"] .bk-pill { background: #3A4250; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bk-stats .stats dt, :root:not([data-theme="light"]) .author-box .portlet-title h2 { color: rgb(255 255 255 / 80%); }
  :root:not([data-theme="light"]) table.bk-chapters td.r { background: #1C1F23; }
  :root:not([data-theme="light"]) table.bk-chapters tbody tr:hover > td { background: #262626; }
  :root:not([data-theme="light"]) .bk-next { background: #16303D; color: #9ACFEA; border-color: #22495C; }
  :root:not([data-theme="light"]) .bk-filter { background: #232323; border-color: #232323; }
  :root:not([data-theme="light"]) .bk-side-actions .lib-btn { color: rgb(255 255 255 / 60%); border-bottom-color: rgb(255 255 255 / 12%); }
  :root:not([data-theme="light"]) .bk-side-actions .lib-btn:hover { background: #1E1E1E; color: rgb(255 255 255 / 85%); }
  :root:not([data-theme="light"]) .bk-side-actions .lib-btn.on { background: var(--label); color: #fff; }
  :root:not([data-theme="light"]) .bk-pill { background: #3A4250; }
}

/* ---- layout by width ---- */
@media (min-width: 992px) {
  .bk-page { grid-template-columns: minmax(0, 1fr) 300px; }
  /* the info portlet sits right of the overhanging cover, like RR */
  .bk-info { padding-left: 290px; min-height: 190px; }
}
@media (max-width: 991px) {
  .fh-row { grid-template-columns: 150px minmax(0, 1fr); gap: 0 24px; padding: 24px 20px 20px; }
  .fh-cover { margin-bottom: 0; grid-row: span 2; }
  .fh-info { padding-top: 0; }
  .fh-actions { grid-column: 2; align-self: end; margin-top: 14px; }
  .bk-page .fic-side { display: flex; flex-direction: column; }
}
@media (max-width: 767px) {
  main.page:has(.fic-header) { padding-top: 0; }
  .bk-head { padding: 0; }
  .fh-cover { padding: 3px; }
  .fh-row { grid-template-columns: 100px minmax(0, 1fr); gap: 0 15px; padding: 15px; min-height: 0; }
  .fic-header h1 { font-size: 18px; }
  .fh-by { font-size: 14px; }
  .fh-by small { font-size: 12px; }
  .fh-actions { margin-top: 10px; }
  .fh-actions .btn.big { width: 100%; font-size: 16px; }
  .bk-stats-cols { gap: 0 12px; padding: 0; }
  .bk-stats .stats dt { font-size: 13px; }
  .bk-goto-toc { display: flex; align-items: center; justify-content: center; gap: 8px; height: 50px; margin-bottom: 10px; background: var(--btn); color: #fff; font: 700 14px var(--f-ui); text-transform: uppercase; }
  .bk-goto-toc:hover { background: var(--btn-hover); color: #fff; text-decoration: none; }
  .bk-toolbar { flex-direction: column; align-items: stretch; }
  .bk-filter { width: 100%; }
  .bk-pager button[aria-label] { display: none; }
  table.bk-chapters td.r { white-space: nowrap; }
}

/* "Free to read" note under Start Reading */
.fh-free { margin: 6px 0 0; font: 400 12.5px/1.3 var(--f-ui); color: rgb(255 255 255 / 80%); text-align: center; }