/* ==========================================================================================================
   Files (Files board) and the Checklist (Checklist board) — 2026-10-01
   ==========================================================================================================
   Drawn by 68-folio-files.js and 68-folio-checklist.js. Type on the scale of 2026-10-01: 24 / 16 / 14 / 12 / 10. */

/* ---- Files ------------------------------------------------------------------------------------------------- */
.folio.fi-page .pgstack-body { background: var(--fo-paper); }
.folio .ff { padding: 16px var(--fo-gutter) 32px; }
.folio .fi-count { margin: 14px 0 0; color: var(--fo-graphite); }
.folio .fi-list { margin-top: 10px; border: 1px solid var(--fo-rule); }
.folio .fi-group { background: var(--fo-band); }
.folio .fi-group + .fi-group { border-top: 1px solid var(--fo-rule); }
.folio .fi-group.is-open { background: var(--fo-card); }
.folio .fi-band { width: 100%; min-height: 46px; padding: 10px 16px; box-sizing: border-box; border: none; background: transparent; display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--fo-ink); text-align: left; cursor: pointer; }
.folio .fi-band:disabled { cursor: default; }
.folio .fi-band__name { display: flex; align-items: center; gap: 10px; font-family: var(--fo-serif); font-size: 16px; line-height: 1.25; }
.folio .fi-band__name i { width: 10px; height: 10px; flex: none; }
.folio .fi-band__end { display: flex; align-items: center; gap: 10px; }
.folio .fi-band__end .fo-eyebrow { color: var(--fo-graphite); }
.folio .fi-band__sign { width: 12px; text-align: center; font-size: 14px; color: var(--fo-graphite); }
.folio .fi-rows { padding: 0 16px 6px; }
.folio .fi-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px dashed var(--fo-hair); color: var(--fo-ink); text-decoration: none; }
.folio .fi-kind { flex: none; width: 34px; height: 20px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--fo-hair-firm); font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fo-ink); }
.folio .fi-file { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.folio .fi-file__name { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.folio .fi-file__of { font-size: 12px; color: var(--fo-graphite); }
.folio .fi-open { flex: none; white-space: nowrap; font-size: 12px; color: var(--fo-graphite); }
.folio .fi-note { margin: 16px 0 0; font-size: 12px; line-height: 1.5; }
.folio .fi-none, .folio .fi-empty { margin-top: 36px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.folio .fi-empty { margin-top: 24px; }
.folio .fi-none__say { font-family: var(--fo-serif); font-style: italic; font-size: 16px; line-height: 1.35; color: var(--fo-ink); }
.folio .fi-none .fo-quiet, .folio .fi-empty .fo-quiet { font-size: 12px; line-height: 1.5; }
.folio .fi-clear { min-height: 44px; padding: 0; border: none; background: transparent; font-size: 14px; color: var(--fo-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.folio .fi-empty .fo-btn { margin-top: 6px; }

/* ---- the Checklist ------------------------------------------------------------------------------------------- */
/* A panel over the Contents, at the drawer's place (dockPageInDrawer): its own edge in ink, the paper. */
.folio.fk-page { border-left: 1px solid rgba(26,22,20,0.9); }
.folio.fk-page .pgstack-body { background: var(--fo-paper); }
.folio.fk-page > .fo-bar { padding-left: 20px; padding-right: 20px; }
.folio .fk { padding: 14px 20px 32px; }
.folio .fk-head { display: flex; flex-direction: column; gap: 8px; }
.folio .fk-head__line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.folio .fk-head__title { font-family: var(--fo-serif); font-size: 16px; letter-spacing: -0.02em; color: var(--fo-ink); }
.folio .fk-head__line .fo-eyebrow { color: var(--fo-graphite); }
.folio .fk-bar { height: 4px; background: var(--fo-rule); }
.folio .fk-bar span { display: block; height: 4px; background: var(--fo-ink); transition: width .3s ease-out; }
.folio .fk-head .fo-quiet { font-size: 12px; }
.folio .fk-list { padding-top: 6px; display: flex; flex-direction: column; }
.folio .fk-item { display: flex; align-items: center; gap: 4px; min-height: 44px; border-bottom: 1px dashed var(--fo-hair); }
.folio .fk-tick { flex: 1; min-width: 0; min-height: 44px; padding: 0; border: none; background: transparent; display: flex; align-items: center; gap: 12px; text-align: left; color: var(--fo-ink); cursor: pointer; }
.folio .fk-box { width: 18px; height: 18px; flex: none; box-sizing: border-box; border: 1.5px solid var(--fo-ink); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; color: var(--fo-graphite); }
.folio .fk-text { flex: 1; min-width: 0; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.folio .fk-item.is-done .fk-box { border-color: var(--fo-pale); background: var(--fo-band); }
.folio .fk-item.is-done .fk-text { color: var(--fo-pale); text-decoration: line-through; text-decoration-thickness: 1px; }
.folio .fk-remove { flex: none; width: 44px; min-height: 44px; padding: 0; border: none; background: transparent; font-size: 14px; color: var(--fo-pale); cursor: pointer; }
.folio .fk-add { display: flex; align-items: center; gap: 12px; min-height: 48px; border-bottom: 1px dashed var(--fo-hair); cursor: text; }
.folio .fk-box--add { border: 1.5px dashed var(--fo-pale); }
.folio .fk-add__input { flex: 1; min-width: 0; min-height: 32px; padding: 0 0 2px; border: none; border-bottom: 1.5px solid var(--fo-ink); background: transparent; font-family: var(--fo-sans); font-size: 14px; color: var(--fo-ink); outline: none; }
.folio .fk-add__input:focus-visible { border-bottom: 1.5px solid var(--fo-ink); box-shadow: inset 0 -1px 0 0 var(--fo-ink); }
.folio .fk-done-head { width: 100%; min-height: 44px; margin-top: 18px; padding: 0 0 6px; border: none; border-bottom: 1px solid rgba(26,22,20,0.4); background: transparent; display: flex; justify-content: space-between; align-items: flex-end; color: var(--fo-ink); cursor: pointer; }
.folio .fk-done-head__word { font-size: 12px; color: var(--fo-graphite); }
.folio .fk-empty { margin: 14px 0 6px; font-family: var(--fo-serif); font-style: italic; font-size: 16px; line-height: 1.4; color: var(--fo-graphite); }
.folio .fk-start { width: 100%; padding: 14px 0; border: none; border-bottom: 1px dashed var(--fo-hair); background: transparent; display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: left; color: var(--fo-ink); cursor: pointer; }
.folio .fk-start__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.folio .fk-start__name { font-size: 14px; font-weight: 500; }
.folio .fk-start .fo-quiet { font-size: 12px; line-height: 1.45; }
.folio .fk-start .fo-way { color: var(--fo-pale); }
.folio .fk-list > .fk-add { margin-top: 10px; }
.folio .fk-item + .fk-add, .folio .fk-list > .fk-add:first-child { margin-top: 0; }