/* Quiet Stanza — Settings.
   The tab strip, the option rows, the hand list and preview, the ink bottles and their
   swabs, the slider; then the library's master-detail list, which shares the option look. */

/* ═══ tabs ═══ */
.tabs {
  display: flex; flex-wrap: wrap; column-gap: 2px;
  border-bottom: 1px solid var(--sheet-edge); margin: 20px 0 24px;
}
.tab {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  font-family: var(--ui); font-size: 13px; color: var(--text-secondary);
  padding: 10px 12px; border-bottom: 2px solid transparent; margin-bottom: -1px;
  white-space: nowrap;
}
.tab-ico {
  width: 15px; height: 15px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.tab:hover { color: var(--text-primary); }
.tab:focus-visible { outline: 2px solid var(--wax); outline-offset: 2px; }
.tab-active { color: var(--chosen); border-bottom-color: var(--chosen); font-weight: 600; }
/* On a phone six tabs are a strip you scroll to find: one dropdown says where you are and
   lists the rest. A native select, so the phone's own picker opens; the chosen tab's glyph sits
   in front of its name and a chevron at the end. */
.tabs-pick { display: none; position: relative; margin: 16px 0 22px; }
.tabs-pick-select {
  -webkit-appearance: none; appearance: none;
  width: 100%; min-height: 46px; margin: 0;
  padding: 10px 40px 10px 42px;
  background: var(--sheet); color: var(--chosen);
  border: 1px solid var(--sheet-edge); border-radius: var(--radius-card);
  box-shadow: inset 3px 0 0 var(--chosen);
  font-family: var(--ui); font-size: 16px; font-weight: 600;
  cursor: pointer;
}
.tabs-pick-select:focus { outline: none; border-color: var(--text-secondary); }
.tabs-pick-select:focus-visible { outline: 2px solid var(--wax); outline-offset: 2px; }
.tabs-pick-select option { color: var(--text-primary); background: var(--sheet); font-weight: 400; }
.tabs-pick-ico, .tabs-pick-chev {
  position: absolute; top: 50%; transform: translateY(-50%); pointer-events: none;
}
.tabs-pick-ico { left: 15px; width: 18px; height: 18px; color: var(--chosen); }
.tabs-pick-chev {
  right: 14px; width: 18px; height: 18px;
  fill: none; stroke: var(--text-secondary); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
@media (max-width: 699px) {
  .tabs { display: none; }
  .tabs-pick { display: block; }
}

/* ═══ settings ═══ */
.settings-section { margin-bottom: 32px; max-width: 620px; }
.settings-section .section-title { margin-bottom: 4px; }
.setting-label {
  display: block; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-secondary); margin: 18px 0 8px; font-weight: 600;
}
.option-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.option {
  background: var(--sheet); border: 1px solid var(--sheet-edge); border-radius: var(--radius-card);
  padding: 8px 14px; cursor: pointer; font-family: var(--ui); font-size: 14px; color: var(--text-primary);
}
.option:hover { border-color: var(--text-secondary); }
.option-on { background: var(--chosen); color: var(--paper); border-color: var(--chosen); }
.option-on:hover { background: var(--chosen-hover); border-color: var(--chosen-hover); }
.option-small { padding: 4px 12px; font-size: 13px; }
.settings-note { margin-top: 10px; }
.hand-lead { max-width: 40rem; }

/* Time: each sitting is a card with its switch in the head; when it is on, what it brings and
   when it begins open beneath. */
.slot-card {
  margin-top: 14px; padding: 12px 16px;
  background: var(--sheet); border: 1px solid var(--sheet-edge); border-radius: var(--radius-card);
}
.slot-card.is-on { border-left: 3px solid var(--chosen); padding-left: 14px; }
.slot-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.slot-card-name { font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--text-primary); }
.slot-card-body { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-top: 4px; }
.slot-card-field { display: block; }
.slot-card-field .setting-label { margin-top: 12px; }

/* Reminders: the hours, read from the sittings. */
.reminder-times { margin: 0 0 6px; padding-left: 18px; font-size: 14px; line-height: 1.6; color: var(--text-primary); }
.hand-grid { max-height: 280px; overflow-y: auto; align-items: flex-start; }
.hand-option {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-width: 7.5em; text-align: left;
}
.hand-option-name { font-size: 13px; }
.hand-option-meta {
  font-size: 11px; color: var(--text-secondary); font-weight: 400; line-height: 1.3;
}
.option-on .hand-option-meta { color: color-mix(in srgb, var(--paper) 72%, transparent); }
.ink-picker { width: 100%; }
/* Eight bottles to a row, warm to cool, so the families read down the columns. A bottle is
   39 px; on a phone too narrow for eight of those and their gaps, the columns give a little
   (never under 28 px) rather than run off the page. */
.ink-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 39px)); gap: 10px 14px; margin: 6px 0 4px; }
@media (max-width: 520px) { .ink-grid { gap: 8px clamp(4px, 1.6vw, 10px); } }
/* The end columns open their big swab inwards, so it never runs off the edge. */
.ink-grid .ink-swatch:nth-child(8n+1)::after, .ink-grid .ink-swatch:nth-child(8n+1)::before { left: 0; transform-origin: 0 100%; }
.ink-grid .ink-swatch:nth-child(8n)::after, .ink-grid .ink-swatch:nth-child(8n)::before { left: auto; right: 0; transform-origin: 100% 100%; }
@media (hover: hover) {
  .ink-grid .ink-swatch:nth-child(8n+1):not(:disabled):hover::after, .ink-grid .ink-swatch:nth-child(8n+1):not(:disabled):hover::before,
  .ink-grid .ink-swatch:nth-child(8n):not(:disabled):hover::after, .ink-grid .ink-swatch:nth-child(8n):not(:disabled):hover::before { transform: none; }
}
.ink-grid .ink-swatch:nth-child(8n+1)::after, .ink-grid .ink-swatch:nth-child(8n+1)::before,
.ink-grid .ink-swatch:nth-child(8n)::after, .ink-grid .ink-swatch:nth-child(8n)::before { transform: translateY(6px) scale(.92); }
.ink-grid .ink-swatch:nth-child(8n+1):focus-visible::after, .ink-grid .ink-swatch:nth-child(8n+1):focus-visible::before,
.ink-grid .ink-swatch:nth-child(8n):focus-visible::after, .ink-grid .ink-swatch:nth-child(8n):focus-visible::before { transform: none; }
/* On a phone the second and seventh columns sit near the edge too: they open inwards as well,
   so a swab never reaches past the page (it would widen the scroll area even while hidden). */
@media (max-width: 480px) {
  .ink-grid .ink-swatch:nth-child(8n+2)::after, .ink-grid .ink-swatch:nth-child(8n+2)::before { left: 0; transform-origin: 0 100%; }
  .ink-grid .ink-swatch:nth-child(8n+7)::after, .ink-grid .ink-swatch:nth-child(8n+7)::before { left: auto; right: 0; transform-origin: 100% 100%; }
  .ink-grid .ink-swatch:nth-child(8n+2)::after, .ink-grid .ink-swatch:nth-child(8n+2)::before,
  .ink-grid .ink-swatch:nth-child(8n+7)::after, .ink-grid .ink-swatch:nth-child(8n+7)::before { transform: translateY(6px) scale(.92); }
  .ink-grid .ink-swatch:nth-child(8n+2):focus-visible::after, .ink-grid .ink-swatch:nth-child(8n+2):focus-visible::before,
  .ink-grid .ink-swatch:nth-child(8n+7):focus-visible::after, .ink-grid .ink-swatch:nth-child(8n+7):focus-visible::before { transform: none; }
  @media (hover: hover) {
    .ink-grid .ink-swatch:nth-child(8n+2):not(:disabled):hover::after, .ink-grid .ink-swatch:nth-child(8n+2):not(:disabled):hover::before,
    .ink-grid .ink-swatch:nth-child(8n+7):not(:disabled):hover::after, .ink-grid .ink-swatch:nth-child(8n+7):not(:disabled):hover::before { transform: none; }
  }
}
.ink-swatch { width: 100%; max-width: 39px; height: auto; aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--sheet-edge); cursor: pointer; padding: 0; position: relative; }
/* Hover (or keyboard focus) lifts a large swab of the bottle above the swatch, with its name
   and character under it: the 39 px dot shows the hue, the big one shows how it shades and
   sheens. The swab image is inherited from the button, so it is the same painted bitmap. */
.ink-swatch::after, .ink-swatch::before {
  position: absolute; left: 50%; bottom: calc(100% + 12px); z-index: 60;
  pointer-events: none; opacity: 0; transition: opacity .14s ease, transform .18s ease;
  transform: translate(-50%, 6px) scale(.92); transform-origin: 50% 100%;
}
.ink-swatch::after {
  content: ""; width: 168px; height: 168px; border-radius: 50%;
  background: inherit; background-size: cover; background-position: center;
  border: 3px solid var(--paper);
  box-shadow: 0 0 0 1px var(--sheet-edge), 0 10px 28px rgba(43, 42, 36, .28);
}
/* The name sits above the swab, not between it and the swatch: a long name wraps to a third
   line, and there it has the room (the swab is 168 px and its border 3 px each side). */
.ink-swatch::before {
  bottom: calc(100% + 12px + 174px + 8px);
  content: attr(data-name) "\A" attr(data-family); white-space: pre-line;
  width: 200px; text-align: center; font: 12.5px/1.35 var(--ui); color: var(--ink);
  background: var(--paper); border: 1px solid var(--sheet-edge); border-radius: 8px;
  padding: 5px 8px; box-shadow: 0 4px 14px rgba(43, 42, 36, .14);
}
@media (hover: hover) {
  .ink-swatch:not(:disabled):hover::after, .ink-swatch:not(:disabled):hover::before {
    opacity: 1; transform: translate(-50%, 0) scale(1);
  }
}
.ink-swatch:focus-visible::after, .ink-swatch:focus-visible::before { opacity: 1; transform: translate(-50%, 0) scale(1); }
/* Under a finger, pressing and holding a bottle does what hover does (qsInkSwabs.peek). */
.ink-swatch { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.ink-swatch.is-peek::after, .ink-swatch.is-peek::before { opacity: 1; transform: translate(-50%, 0) scale(1); }
.ink-grid .ink-swatch:nth-child(8n+1).is-peek::after, .ink-grid .ink-swatch:nth-child(8n+1).is-peek::before,
.ink-grid .ink-swatch:nth-child(8n).is-peek::after, .ink-grid .ink-swatch:nth-child(8n).is-peek::before { transform: none; }
@media (max-width: 480px) {
  .ink-grid .ink-swatch:nth-child(8n+2).is-peek::after, .ink-grid .ink-swatch:nth-child(8n+2).is-peek::before,
  .ink-grid .ink-swatch:nth-child(8n+7).is-peek::after, .ink-grid .ink-swatch:nth-child(8n+7).is-peek::before { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .ink-swatch::after, .ink-swatch::before { transition: none; } }
.ink-swatch:disabled { cursor: default; opacity: .72; }
.ink-on { border-color: var(--gold); box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--gold); }
.slider { width: 100%; max-width: 420px; accent-color: var(--wax); }

/* Settings and the door lie on the desk at the same height as Progress and the library: the
   same top margin and the same room inside the sheet's head. (.content .page-wrap outranks the sheet rule.) */
.content .page-wrap.settings-page, .content .page-wrap.admin-page {
  margin: 20px auto;
  padding: 20px 32px 28px;
}
@media (max-width: 1199px) {
  .content .page-wrap.settings-page, .content .page-wrap.admin-page { margin: 12px auto calc(var(--dock-height, 0px) + 12px); padding: 16px 20px 24px; }
}
@media (max-width: 699px) {
  .content .page-wrap.settings-page, .content .page-wrap.admin-page { margin: 10px auto 20px; padding-bottom: calc(var(--dock-height) + 24px); }
}

/* ═══ master-detail (library) ═══ */
.md-layout { display: grid; grid-template-columns: 340px 1fr; gap: 28px; align-items: start; }
.md-list { display: flex; flex-direction: column; gap: 2px; max-height: 70vh; overflow-y: auto; }
/* never the scroll anchor: rows added above it would carry it along, always in view, and the
   shelf would fetch itself to the end */
.md-more { flex: none; height: 1px; overflow-anchor: none; }
/* flex-shrink: 0 — the list scrolls, its rows never squeeze: a touch screen's min-height
   otherwise lets a row shrink to 44px and its text run over the row below. */
.md-row {
  flex-shrink: 0;
  text-align: left; background: none; border: none; cursor: pointer; padding: 10px 12px;
  border-radius: var(--radius-card); font-family: var(--ui);
}
.md-row:hover { background: var(--sheet); }
.md-row-on { background: var(--sheet); box-shadow: inset 3px 0 0 var(--wax); }
.md-row-title { font-family: var(--serif); font-size: 16px; color: var(--text-primary); }
.md-row-sub { font-size: 13.5px; color: var(--text-secondary); margin-top: 2px; }
.search-bar { display: flex; gap: 10px; align-items: center; margin: 8px 0 4px; flex-wrap: wrap; }
.search-meta { font-size: 13.5px; color: var(--text-secondary); margin: 6px 0 16px; }

/* The library fits the window: the head and the search stay, the list on the left and the
   piece on the right each scroll in their own frame, so the window itself never scrolls.
   (.content .page-wrap outranks common.css's sheet rule.) On a phone the sheet runs on. */
.content:has(> .page-wrap.library-page) { display: flex; flex-direction: column; }
.content .page-wrap.library-page {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  margin: 20px auto;
  padding: 20px 32px 16px;
  overflow: hidden;
}
.library-page .library-head, .library-page .search-bar, .library-page .search-meta { flex: none; }
.library-page .search-meta { margin: 6px 0 10px; }
.library-page .md-layout { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
.library-page .md-list { max-height: none; height: 100%; min-height: 0; scrollbar-width: thin; }
.library-page .md-detail { min-height: 0; height: 100%; overflow-y: auto; scrollbar-width: thin; padding-right: 6px; }
@media (max-width: 1199px) {
  .content .page-wrap.library-page { margin: 12px auto calc(var(--dock-height, 0px) + 12px); padding: 16px 20px 12px; }
}
@media (max-width: 900px) {
  .library-page .md-layout { grid-template-rows: minmax(0, 38vh) minmax(0, 1fr); }
  .library-page .md-list { height: auto; }
}
@media (max-width: 699px) {
  .content:has(> .page-wrap.library-page) { display: block; }
  .content .page-wrap.library-page { overflow: visible; display: block; margin: 10px auto 20px; padding-bottom: calc(var(--dock-height) + 24px); }
  .library-page .md-layout { grid-template-rows: none; }
  .library-page .md-list { max-height: 38vh; }
  .library-page .md-detail { height: auto; overflow: visible; }
}
/* A phone on its side: stacked, the list's 38vh is a title or two. Side by side, as on a desk,
   the list keeps the height of the window. */
@media (orientation: landscape) and (max-height: 500px) {
  .library-page .md-layout { grid-template-columns: minmax(200px, 38%) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 16px; }
  .library-page .md-list { max-height: none; height: 100%; }
  .content .page-wrap.library-page { margin: 6px auto; padding: 8px 16px 8px; }
  .library-page .library-head .eyebrow { display: none; }
  .library-page .library-head .page-title { font-size: 22px; margin: 0; }
  .library-page .search-bar { margin-top: 6px; }
  .library-page .search-meta { margin: 4px 0 6px; }
}
@media (orientation: landscape) and (max-height: 500px) and (max-width: 699px) {
  .library-page .md-list { max-height: 70vh; height: auto; }
  /* the search on one line, not three: the query takes what the two choices leave */
  .library-page .search-bar { flex-wrap: nowrap; align-items: center; }
  .library-page .search-bar .field { width: auto; max-width: none; }
  .library-page .search-bar .search-kind { flex: 0 0 110px; max-width: 110px; }
  .library-page .search-bar .search-query { flex: 1 1 auto; min-width: 0; }
  .library-page .search-bar .search-length { flex: 0 0 120px; max-width: 120px; }
}