/* ======================================
   DUTY & LEISURE (maggie, 2026-10-01)
   The page drawn by js/ui/routine.js: duties, then leisures under them, 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 general page's own margins; the CARDS inside it are the
   leaves (2026-10-24), so this wrapper paints nothing. */
.routine-page {
  padding: 0.75rem;
}
/* Duties and leisures side by side again (maggie, 2026-10-23: "make duty and
   leisure side by side again"), one under the other on a narrow screen. */
.rt-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
}
@media (max-width: 860px) {
  .rt-cols { grid-template-columns: 1fr; }
}
/* A column is a card, so its heading is the shared one; the Approach card comes
   under both of them with air above it. */
.rt-col, .rt-approach { margin: 0; }
.rt-approach { margin-top: 1rem; }
.rt-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.rt-group-title {
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 0.35rem;
}
.rt-after-started { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--gild-faint); }
.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 {
  position: relative;
  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-size: 1.1rem;
  font-weight: 500;
  color: var(--accent-gold);
  overflow-wrap: break-word;   /* a whole word to a line, never "Administrati-ve" (2026-10-26) */
  letter-spacing: -0.005em;   /* the serif as cut, no small capitals (the watercolour redesign) */
}
.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 {
  color: var(--rubric);
  /* a label in the watercolour redesign (2026-10-23): DM Sans capitals, small
     and spaced - Gloock has no small capitals */
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.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 {
  color: var(--gild-ink);
  /* a label in the watercolour redesign (2026-10-23): DM Sans capitals, small
     and spaced - Gloock has no small capitals */
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.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); }
/* Centred on the page's own axis (maggie, 2026-10-24: "Center this podejscie
   buttons"). The row wraps to a second line at a narrow width; both lines take
   the centre. The heading and the description under it stay where they were. */
.rt-appr-row { display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: center; }
/* 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. */
/* THE PLAN STRIP (the watercolour redesign, 2026-10-23, her mock-up). The
   line above moved from under the avatar to the foot of the General banner:
   a sheet of paper tucked under the picture, holding the duty, the leisure
   and the open threads side by side - each beside a round painted mark in
   its own pigment - and "Change ->" at the end in rust capitals. On a phone
   the three stack. The class names are the ones the routine renderer and the
   tour have always used. */
.sidebar-routine {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: center;
  min-height: 86px;
  margin: -2.3rem 1.25rem 0;
  padding: 0.65rem 1.4rem;
  background:
    radial-gradient(ellipse at 8% 8%, color-mix(in srgb, var(--rust) 9%, transparent), transparent 27%),
    radial-gradient(ellipse at 95% 92%, color-mix(in srgb, var(--moss) 8%, transparent), transparent 31%),
    color-mix(in srgb, var(--cream) 94%, transparent);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 14px 35px rgba(67, 60, 43, 0.08);
  backdrop-filter: blur(8px);
  text-align: left;
}
.sidebar-routine .sr-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-width: 0;
  padding: 0.35rem 1.1rem 0.35rem 0;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  text-align: left;
}
.sidebar-routine .sr-row + .sr-row { padding-left: 1.1rem; border-left: 1px solid var(--line); }
.sidebar-routine button.sr-row { cursor: pointer; }
@media (hover: hover) { .sidebar-routine button.sr-row:hover .sr-v { color: var(--rust); } }
/* the round painted mark: a blot of the item's pigment with its line drawing on it */
.sidebar-routine .sr-ico {
  display: grid;
  flex: 0 0 38px;
  height: 38px;
  place-items: center;
  border-radius: 48% 52% 45% 55% / 54% 43% 57% 46%;
  color: var(--rust);
  background: radial-gradient(circle at 45% 48%, color-mix(in srgb, var(--rust) 24%, transparent) 0 47%, transparent 74%);
}
.sidebar-routine .sr-leisure .sr-ico { color: var(--moss); background: radial-gradient(circle at 52% 43%, color-mix(in srgb, var(--moss) 26%, transparent) 0 45%, transparent 76%); }
.sidebar-routine .sr-threads .sr-ico { color: var(--indigo); background: radial-gradient(circle at 48% 48%, color-mix(in srgb, var(--indigo) 24%, transparent) 0 46%, transparent 75%); }
.sidebar-routine .sr-kv { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.sidebar-routine .sr-k {
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* A long name wraps between words and is balanced over its lines. */
.sidebar-routine .sr-v {
  max-width: 100%;
  font-family: var(--font-display);
  font-size: 1.07rem;
  line-height: 1.25;
  color: var(--text-primary);
  overflow-wrap: break-word;
  hyphens: auto;
  text-wrap: balance;
  transition: color 0.15s;
}
.sidebar-routine .sr-link {
  justify-self: end;
  padding: 0.6rem 0.4rem;
  border: 0;
  border-radius: 0;
  background: none;
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rust);
  cursor: pointer;
  min-height: 0;
  white-space: nowrap;
}
.sidebar-routine .sr-link span { display: inline-block; margin-left: 0.3rem; transition: transform 0.15s ease; }
.sidebar-routine .sr-link:focus-visible span { transform: translateX(4px); }
@media (hover: hover) { .sidebar-routine .sr-link:hover span { transform: translateX(4px); } }
@media (max-width: 900px) {
  .sidebar-routine { grid-template-columns: 1fr 1fr; margin: -1.6rem 0.6rem 0; padding: 0.8rem; }
  .sidebar-routine .sr-row,
  .sidebar-routine .sr-row + .sr-row { padding: 0.5rem; border-left: 0; }
  .sidebar-routine .sr-link { justify-self: start; }
}
@media (max-width: 560px) {
  .sidebar-routine { grid-template-columns: 1fr; margin: -1.2rem 0.4rem 0; }
  .sidebar-routine .sr-row { border-bottom: 1px solid var(--line); }
}

/* THE ROUTINE IN THE SIDE MENU (maggie, 2026-10-26: "bring back endeavour
   switcher to the menu on the left, like it is in old version"): the pre-
   redesign layout - two centred columns parted by a faint rule, Change under
   them - in the side menu's own colours. */
.side-routine {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  margin: 0.6rem 0.5rem 0.2rem;
  text-align: center;
}
.side-routine:empty { display: none; }
.side-routine .sr-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  min-width: 0;
  padding: 0 0.3rem;
  line-height: 1.3;
}
.side-routine .sr-row + .sr-row { border-left: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.side-routine .sr-k { font-size: var(--fs-micro); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; }
.side-routine .sr-v { max-width: 100%; font-size: var(--fs-small); overflow-wrap: break-word; hyphens: auto; text-wrap: balance; }
.side-routine .sr-link {
  grid-column: 1 / -1;
  justify-self: center;
  margin-top: 0.45rem;
  min-height: 0;
  padding: 0.1rem 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.8;
  cursor: pointer;
}
@media (hover: hover) { .side-routine .sr-link:hover { opacity: 1; text-decoration: underline; } }

/* The favourite star (2026-10-26), over the band left of the chevron; a
   favourite is listed first in its column (routine.js _columnHtml). */
.rt-fav {
  position: absolute;
  top: 0.55rem;
  right: 0.35rem;
  z-index: 1;
  min-height: 0;
  padding: 0.15rem 0.3rem;
  border: 0;
  background: none;
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.rt-fav.is-on { color: var(--accent-gold); }
@media (hover: hover) { .rt-fav:hover { color: var(--accent-gold); } }
.rt-row { padding-right: 2.2rem; }

/* A card folds on its heading (maggie, 2026-10-27), as the Endeavours cards do:
   the shared gold heading, as a button. */
.rt-fold {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  width: 100%; border: 0; text-align: left; cursor: pointer;
  background-color: transparent; padding-left: 0; padding-right: 0;
}
.rt-fold-chev { font-size: 0.75em; color: var(--text-muted); letter-spacing: 0; }
.rt-col.is-folded > :not(.rt-fold),
.rt-starred.is-folded > :not(.rt-fold) { display: none; }
.rt-col.is-folded > .rt-fold,
.rt-starred.is-folded > .rt-fold { margin-bottom: 0; }
/* The starred card sits on top of the two columns. */
.rt-starred { margin: 0 0 1rem; }