/* The panel — the controls of the thing under hand (DOCS/design/ui-inventory.md
   `reading-panel`): a card beside a held thing. Born on the reading worksheet's Working
   phase (Working-phase revisions U5, 26.09.05; restored by PR #214); LIFTED here 26.09.12
   so the chart page (astro charts, the control panel round) uses the same card, not a
   lookalike. The class names keep their `reading-` prefix — the component is the
   reading panel in the styleguide — and the worksheet's own rules (where the panel sits
   in the grid's gutter, the settled / push / shows toggles, the chip rows) stay in
   compositions/worksheet/extra_styles.css, scoped as before. Loaded by base.html with a
   cache-bust querystring — bump it on every edit (CLAUDE.md § Static asset cache busting).

   The rules below are the worksheet's own, verbatim, with the reading scope dropped:
   the box, its head / kind / title / ×, the control line, the select, the group and the
   segmented control, the icon row, the small-caps section head. */
:root { --reading-mark-ink: #7a705f; }

.reading-panel {
  position: absolute;
  left: calc(100% + .8rem);
  top: 0;
  width: 15.5rem;
  z-index: 6;
  font-size: .8rem;
  color: #444;
  background: #fff;
  border: 1px solid #d9d4ca;
  border-radius: 6px;
  padding: .45rem .6rem .5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
  text-align: left;
}
/* Room beneath an open panel (walk r-3, lbk: "scroll it up"): the site footer is fixed
   over the viewport's last band, and a panel hanging past the page's end could only
   scroll to the scroller's edge (#site-content) — behind the footer. An unseen spacer
   under the panel extends the scroller by the footer's height (reading-hold.js measures
   it into --site-footer-h), and the panel's scroll margins keep a hold's scrollIntoView
   clear of the footer and the top edge. */
.reading-panel { scroll-margin-top: .75rem; scroll-margin-bottom: calc(var(--site-footer-h, 3rem) + .75rem); }
.reading-panel::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 1px;
  height: calc(var(--site-footer-h, 3rem) + 1rem);
  pointer-events: none;
}
.reading-panel.reading-panel--inside { left: auto; right: .25rem; top: .25rem; }
.reading-panel-head {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: 0 0 .4rem;
  padding-bottom: .3rem;
  border-bottom: 1px solid #eee;
  font-weight: 500;
  color: #333;
}
.reading-panel-kind {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  white-space: nowrap;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #a09680;
  font-weight: 400;
}
.reading-panel-kind .mark { width: .85rem; height: .85rem; }
.reading-panel-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reading-panel-close {
  flex: 0 0 auto;
  margin-left: .35rem;
  color: #999;
  font-size: 1rem;
  line-height: 1;
}
.reading-panel-ctl {
  display: flex;
  align-items: center;
  gap: .4rem;
  width: 100%;
  padding: .22rem .2rem;
  border: none;
  background: none;
  font: inherit;
  color: #444;
  text-align: left;
  border-radius: 3px;
  text-decoration: none;
  white-space: nowrap;
}
/* A mark may lead a panel select (the ladder mark before the rung select, walk r-3). */
.reading-panel-select > .mark { flex: 0 0 auto; width: .95em; height: .95em; color: var(--reading-mark-ink); }
.reading-panel-select select {
  font-size: inherit;
  border: 1px solid #e3e0da;
  border-radius: 3px;
  background: #fff;
  color: #444;
  padding: 0 .2rem;
  max-width: 100%;
}
.reading-panel-group { flex-wrap: wrap; cursor: default; }
/* Tokens across (moved from the body top): always visible inside the panel. */
.reading-panel-seg button {
  padding: 0 .4rem;
  font-size: .75rem;
  color: #777;
  border: 1px solid #e3e0da;
  border-radius: 3px;
  margin-right: .15rem;
  background: #fff;
}
.reading-panel-seg button.is-active { background: #eceae5; color: #222; }
/* The icon row (KD7): edit alone at the left; stash · remove · delete clustered at the right. */
.reading-panel-icons {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-top: .45rem;
  padding-top: .4rem;
  border-top: 1px solid #eee;
}
.reading-panel-icons-away { margin-left: auto; display: inline-flex; gap: .35rem; }
.reading-panel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #777;
  font-size: 1rem;
}
.reading-panel-icon .mark { width: 1em; height: 1em; }
.reading-panel-icon:hover { color: #222; background: #f4f2ee; border-color: #e3e0da; }
.reading-panel-danger { color: #b06a5a; }
.reading-panel-danger:hover { color: #8f3f2f; background: #f8efec; border-color: #e8cfc8; }
/* The response flags (U2 · U5; walk r-2, lbk 9.8): two sections after the filing sections,
   apart from each other because they form different sorts of connection. Each opens on a
   small-caps head in the topic head's voice (.reading-chip-section-name). */
.reading-flag-section { display: flex; flex-direction: column; gap: .15rem; margin-top: .6rem; }
.reading-flag-head { flex: 0 0 auto; }

/* ---- The small-caps section head, in the kind label's voice (the worksheet's
   .reading-chip-section-name, restated for pages without chip rows). ---- */
.reading-chip-section-name {
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--reading-mark-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Phone: no gutter — the panel drops beneath the thing, in flow (the worksheet
   restates this for its own scoped positions). ---- */
@media (max-width: 700px) {
  .reading-panel,
  .reading-panel.reading-panel--inside {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    width: auto;
    margin: .3rem 0 .5rem;
    border-radius: 0 4px 4px 0;
    border-left: 3px solid #a09680;
    box-shadow: none;
    background: #fbfaf8;
  }
  .reading-panel::after { display: none; }
}