/* ======================================
   DUTY & LEISURE (maggie, 2026-10-01)
   The page drawn by js/ui/routine.js: two columns of cards, duties and
   leisures, in the shape of the Travel tab's destination list, and the
   routine line under the avatar. Colours from tokens.css only, so light
   mode follows by itself.
   ====================================== */

/* The page sits in the same gilt-cornered leaf (.panel-card) the Travel and
   Skills tabs set their lists in, under the tab's art banner (theme pass,
   2026-10-02). */
.routine-page {
  padding: 0.75rem;
  max-width: var(--page-default);
}
.routine-page > .panel-card { margin: 0; }
.rt-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
}
@media (max-width: 860px) {
  .rt-cols { grid-template-columns: 1fr; }
}
.rt-col-head { margin-bottom: 0.45rem; }
.rt-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.rt-locked {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-small);
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}

/* -- One card ------------------------------------------------------------ */
/* ONE LEAF, HEAD TO FOOT (theme pass, 2026-10-02): the card is the same
   vellum as its banner band, so the description under the name is not a
   second, bluer panel in the dark. */
.rt-item {
  border: 1px solid var(--gild-faint);
  border-radius: 2px;
  background: var(--leaf);
  overflow: hidden;
  transition: border-color 0.15s;
}
@media (hover: hover) { .rt-item:hover { border-color: var(--gild); } }
.rt-item.open { border-color: var(--accent-ember); background: var(--leaf); box-shadow: var(--vellum-shadow); }
/* The current pick: a rubric rule down the left edge, nothing written. */
.rt-item.current { box-shadow: inset 3px 0 0 var(--rubric); }
.rt-item.current.open { box-shadow: inset 3px 0 0 var(--rubric), var(--vellum-shadow); }
.rt-item.current .rt-row { box-shadow: inset 3px 0 0 var(--rubric); }

/* The banner band. With no art (every record today - the art is to come) it
   is a vellum leaf with a gilt rule under it and the name's rubric initial;
   with art, the picture sits under the same veil the travel rows use. A
   missing picture leaves the veil and the gradient under it, never a broken
   image. */
.rt-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  min-height: 60px;
  padding: 0.5rem 0.65rem;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  text-align: left;
  color: var(--text-primary);
  font: inherit;
  background: var(--gilt-rule), var(--leaf);
}
.rt-row.has-art {
  position: relative;
  isolation: isolate;
  background: linear-gradient(120deg, var(--bg-panel) 0%, var(--bg-base) 100%);
}
.rt-row.has-art .rt-art {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
/* The veil over the picture - the travel rows' own, in both themes. */
.rt-row.has-art::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(10,8,18,0.94) 0%, rgba(10,8,18,0.8) 45%, rgba(10,8,18,0.5) 100%);
}
:root.light-mode .rt-row.has-art { background: linear-gradient(120deg, var(--bg-panel) 0%, var(--bg-void) 100%); }
:root.light-mode .rt-row.has-art::before {
  background: linear-gradient(100deg, rgba(249,244,231,0.95) 0%, rgba(249,244,231,0.87) 45%, rgba(249,244,231,0.62) 100%);
}
.rt-row:focus-visible { outline: 1px solid var(--gild); outline-offset: -2px; }

/* The rubric initial: the diary's illuminated capital, small. */
.rt-initial {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1;
  color: var(--initial-ink);
  background: var(--initial-ground);
  border: 1px solid var(--gild);
  box-shadow: inset 0 0 0 2px var(--initial-edge), inset 0 0 0 3px var(--gild-faint);
  text-shadow: 0 1px 0 #000;
}
.rt-titles {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.rt-name {
  font-family: var(--font-display);
  font-variant: small-caps;
  letter-spacing: 0.05em;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--accent-gold);
  overflow-wrap: anywhere;
}
.rt-row.has-art .rt-name { text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
:root.light-mode .rt-row.has-art .rt-name { text-shadow: 0 1px 2px rgba(252,248,236,0.9); }
.rt-note {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-small);
  color: var(--text-secondary);
}
.rt-srcs { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; }
.rt-srcs:empty { display: none; }
/* Where it comes from: rubric small caps, the voice of a manuscript's rubric. */
.rt-src {
  font-family: var(--font-display);
  font-variant: small-caps;
  letter-spacing: 0.06em;
  font-size: var(--fs-fine);
  color: var(--rubric);
}
.rt-chevron {
  flex: none;
  font-size: var(--fs-small);
  color: var(--text-muted);
  width: 12px;
  text-align: center;
}

/* The tooltip she asked for: the record's own description, always under it. */
.rt-desc {
  font-family: var(--font-serif);
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--text-muted);
  padding: 0.35rem 0.65rem 0.45rem;
  border-top: 1px dotted var(--gild-faint);
}

/* -- Unrolled ------------------------------------------------------------ */
.rt-body {
  font-family: var(--font-serif);   /* the book face, never the UI sans */
  padding: 0.5rem 0.65rem 0.65rem;
  border-top: 1px dotted var(--gild-faint);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.rt-since {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-small);
  color: var(--text-secondary);
}
.rt-wear {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-small);
  line-height: 1.3;
  color: var(--text-muted);
}
.rt-wear.is-spent { color: var(--accent-ember); }
.rt-wear .bar-track { margin: 0.2rem 0 0.15rem; }

.rt-skills { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.2rem; }
/* Set as the Skills tab sets a skill: the name in the book face, the rank in
   muted italic, the five lozenges between. */
.rt-skill {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(4.5rem, auto);
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-serif);
  font-size: var(--fs-text);
  color: var(--text-secondary);
}
.rt-skill-name { font-family: var(--font-serif); line-height: 1.2; }
.rt-skill.is-primary { color: var(--text-primary); font-weight: 500; }
.rt-skill.is-whisper .rt-skill-name { color: var(--accent-violet); }
.rt-skill-rank {
  font-family: var(--font-serif);
  font-size: var(--fs-small);
  font-style: italic;
  color: var(--text-muted);
  text-align: right;
}
.rt-pips { margin: 0; }
/* The whisper arts this work may bring nearer, under "and if fortune smiles". */
.rt-luck {
  margin: 0.45rem 0 0.15rem;
  font-family: var(--font-serif);
  font-size: var(--fs-small);
  font-style: italic;
  color: var(--accent-violet);
}
.rt-skill.is-locked .rt-skill-name { color: var(--text-muted); letter-spacing: 0.1em; }

.rt-fxs {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.9rem;
  padding-top: 0.35rem;
  border-top: 1px dotted var(--gild-faint);
}
.rt-fx { display: flex; align-items: baseline; gap: 0.35rem; font-family: var(--font-serif); font-size: var(--fs-text); }
.rt-fx dt {
  font-family: var(--font-serif);
  font-size: var(--fs-small);
  font-variant: small-caps;
  text-transform: lowercase;
  letter-spacing: 0.1em;
  color: var(--gild-ink);
}
.rt-fx dd { margin: 0; font-family: var(--font-serif); color: var(--text-primary); }

/* Square brick, like every other primary control (.btn .btn-primary). */
.rt-set { align-self: flex-start; min-width: 6rem; min-height: var(--tap-min); }

/* -- Approach ------------------------------------------------------------ */
.rt-approach { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--gild-faint); }
.rt-appr-row { display: flex; flex-wrap: wrap; gap: 0.35rem; }
/* The game's own pair of buttons: chosen is .btn-primary, the rest
   .btn-secondary (controls.css). Only the tap height is this page's. */
.rt-appr { min-height: var(--tap-min); }
.rt-appr-desc { border-top: 0; padding-left: 0; padding-right: 0; }

/* -- The line under the avatar ------------------------------------------- */
/* CENTRED, NO BOX (maggie, 2026-10-02: "Ugly. Make it more aesthetically
   pleasing, do some centering."). It was a double-ruled box with the labels
   flush left and a bordered button flush right. Now: a thin gilt rule broken
   by a lozenge at its middle (the fleuron the family tree and the chosen tab
   already use), the duty and the leisure as two centred columns - label in
   gilt small caps over the value - parted by a faint upright rule, and
   "Change ->" centred under them as a quiet text button whose gilt underline
   draws out on hover. The markup in routine.js is unchanged: the box is the
   grid, its two .sr-row are the columns, the button spans both. */
.sidebar-routine {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  margin: 0.75rem 0.5rem 0.15rem;
  padding: 0.8rem 0 0;
  text-align: center;
}
/* the rule, with a gap left open at the middle for the lozenge */
.sidebar-routine::before {
  content: '';
  position: absolute;
  top: 0;
  left: 6%;
  right: 6%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, var(--gild) 40%, transparent 46%,
    transparent 54%, var(--gild) 60%, transparent 100%);
}
.sidebar-routine::after {
  content: '';
  position: absolute;
  top: -3px;
  left: 50%;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  background: var(--accent-gold);
  transform: rotate(45deg);
}
.sidebar-routine .sr-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  min-width: 0;
  padding: 0 0.3rem;
  font-size: var(--fs-small);
  line-height: 1.3;
}
.sidebar-routine .sr-row + .sr-row { border-left: 1px solid var(--gild-faint); }
.sidebar-routine .sr-k {
  font-family: var(--font-display);
  font-variant: small-caps;
  text-transform: lowercase;
  letter-spacing: 0.12em;
  color: var(--gild-ink);
}
/* A long name wraps between words and is balanced over its lines; a single
   word too wide for the column is hyphenated where the browser knows the
   language, broken where it does not. The narrow side margins above are what
   lets "Odpoczywanie" sit whole in a 220px sidebar. */
.sidebar-routine .sr-v {
  max-width: 100%;
  font-family: var(--font-serif);
  font-size: var(--fs-fine);   /* smaller, at maggie's word (2026-10-02) */
  color: var(--text-primary);
  overflow-wrap: break-word;
  hyphens: auto;
  text-wrap: balance;
}
.sidebar-routine .sr-link {
  grid-column: 1 / -1;
  justify-self: center;
  margin-top: 0.55rem;
  padding: 0.15rem 0 0.2rem 0.18em;   /* the left pad offsets the tracking after the last letter */
  border: 0;
  border-radius: 0;
  background: linear-gradient(var(--accent-gold), var(--accent-gold)) center bottom / 0 1px no-repeat;
  font-family: var(--font-display);
  font-size: var(--fs-fine);
  font-variant: small-caps;
  text-transform: lowercase;
  letter-spacing: 0.18em;
  color: var(--gild-ink);
  cursor: pointer;
  min-height: 0;
  transition: background-size 0.2s ease, color 0.2s ease;
}
.sidebar-routine .sr-link:focus-visible { background-size: 100% 1px; color: var(--accent-gold); }
@media (hover: hover) { .sidebar-routine .sr-link:hover { background-size: 100% 1px; color: var(--accent-gold); } }