/* Quiet Stanza — today's pick.
   The desk's wide column, the poem title and author, the pick as a cigarette card, the
   select tools under it and the Poem / Quote switch. */

/* ═══ today ═══
   The poem title is the hero. Page chrome ("Poem of the day" / "Today's poem") stays out.
   Once Begin is pressed, the desk shifts weight to the journal. */
/* The desk is the open book on its mat (OpenBookDesk); today-desk only marks it. */
.today-desk .journal-stage { max-width: none; }
.journal-wrap.is-fullscreen .journal-root.is-framed .journal-stage {
  width: auto;
  max-width: none;
  max-height: none;
  height: auto;
  aspect-ratio: 892 / 644;
  flex: 0 0 auto;
}
.rule { border: none; border-top: 1px solid var(--sheet-edge); margin: 18px 0; }

.today-streak { margin: 0; }
.today-pick-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.today-pick-main { min-width: 0; flex: 1; }
.poem-title {
  font-family: var(--serif);
  font-size: clamp(38px, 5vw, 52px);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.poem-title-link {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.poem-title-link:hover {
  color: var(--wax);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.today-pick-meta {
  flex: 0 0 auto;
  text-align: right;
  max-width: 42%;
  padding-top: 8px;
}
.today-author-link {
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--text-primary);
  cursor: pointer;
  text-align: inherit;
}
.today-author-link:hover {
  color: var(--wax);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.today-year {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 2px 0 0;
  letter-spacing: 0.04em;
}

/* Select step: Poem/Quote switch + ask pill */
/* ── today's pick as a cigarette card ──
   Card stock a shade warmer than the sheet, a double rule the lithographers used (a hair
   inside a heavier line), the title and maker along the top edge, the caption on the
   front and the small print on the back. Nothing on it is decoration that a printed card
   would not have carried. */
.cig-card {
  --card-stock: #F6EFDC;
  --card-rule: #4A463C;
  --card-hair: #BDB197;
  --card-calm: #4F6F68;          /* a sage-slate: the corner's ink, quieter than wax */
  --card-tint: color-mix(in srgb, var(--card-calm) 10%, var(--card-stock));
  /* a lozenge at each corner of the inner hairline, as the printer's frame carried */
  --card-pip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M4.5 0 9 4.5 4.5 9 0 4.5z' fill='%23BDB197'/%3E%3C/svg%3E");
  /* the stock's weave: a linen, its threads running across, the cross-threads fainter */
  --card-linen:
    repeating-linear-gradient(to bottom, rgba(255, 255, 255, .20) 0 1px, rgba(95, 75, 45, .075) 1px 2px, transparent 2px 3px),
    repeating-linear-gradient(to right, rgba(95, 75, 45, .03) 0 1px, transparent 1px 3px);
  /* the stock's fibre: a fine grain, and the broad mottle of a card that has been handled */
  --card-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.38 0 0 0 0 0.25 0 0 0 0.42 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
  --card-mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.007' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeGaussianBlur stdDeviation='1.2'/%3E%3CfeColorMatrix values='0 0 0 0 0.62 0 0 0 0 0.48 0 0 0 0 0.26 0 0 0 0.34 -0.08'/%3E%3C/filter%3E%3Crect width='480' height='480' filter='url(%23m)'/%3E%3C/svg%3E");
  /* the frayed edge: the frame's line nudged in and out by a fine noise */
  --card-fray: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='f' x='-2%25' y='-2%25' width='104%25' height='104%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.28' numOctaves='2' seed='9' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='1.7' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/svg%3E#f");
  /* how it has aged (PickCard sets these for the piece): a little by default */
  --age: .4;
  --fox-a: 22% 28%;
  --fox-b: 71% 64%;
  --fox-c: 48% 86%;
  --wear: 100% 0%;
  --mottle-at: 0px 0px;
  position: relative;
  isolation: isolate;
  display: flow-root;          /* holds the corner panel's float */
  max-width: 36rem;
  margin: 4px 0 0;
  padding: 18px 24px 16px;
  background:
    var(--card-pip) left 1.5px top 1.5px / 9px no-repeat,
    var(--card-pip) right 1.5px top 1.5px / 9px no-repeat,
    var(--card-pip) left 1.5px bottom 1.5px / 9px no-repeat,
    var(--card-pip) right 1.5px bottom 1.5px / 9px no-repeat,
    radial-gradient(ellipse 120% 80% at 50% 0%, rgba(255, 252, 244, .9), transparent 70%),
    var(--card-stock);
  border: 1.5px solid transparent;   /* the frame is drawn frayed on .cig-edge */
  outline: 1px solid var(--card-hair);
  outline-offset: -5px;
  border-radius: 2px;
  box-shadow:
    inset 0 0 28px rgba(150, 120, 70, .10),      /* the stock browns a little toward its edges */
    0 1px 1px rgba(43, 42, 36, .08),
    2px 4px 14px rgba(43, 42, 36, .13);
  color: var(--text-primary);
}
/* The surface of the stock, under the print: its grain and mottle, the stock yellowing a
   little toward the edges and more at the worn corner, and a few foxing spots — each card
   its own (the --age and the places come from the piece). Multiplied into the stock below the
   print, so the type and the ink stay crisp on top. */
.cig-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--fox-a), rgba(135, 92, 38, calc(.13 * var(--age))) 0, rgba(135, 92, 38, calc(.06 * var(--age))) 3px, transparent 11px),
    radial-gradient(circle at var(--fox-b), rgba(120, 82, 34, calc(.10 * var(--age))) 0, transparent 9px),
    radial-gradient(ellipse 18px 9px at var(--fox-c), rgba(150, 108, 56, calc(.09 * var(--age))) 0, transparent 100%),
    radial-gradient(ellipse 48% 44% at var(--wear), rgba(190, 150, 82, calc(.14 * var(--age))), transparent 76%),
    radial-gradient(ellipse 96% 90% at 50% 48%, transparent 62%, rgba(172, 132, 66, calc(.07 + .09 * var(--age))) 100%),
    var(--card-mottle) var(--mottle-at) / 480px 480px;
  mix-blend-mode: multiply;
  opacity: .7;
}
/* The frame, drawn on its own layer with a frayed edge: the line of the stock's cut wavers by
   a hair, as a card's edge does after years in a drawer. */
.cig-card .cig-edge {
  position: absolute;
  inset: 0;
  z-index: 3;
  border: 1.5px solid var(--card-rule);
  border-radius: 2px;
  pointer-events: none;
  filter: var(--card-fray);
  opacity: .9;
}
/* The weave itself — a linen-finish stock, its threads running across — laid over everything as
   light rather than ink, with a fine fibre under it: it never muddies the type. */
.cig-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(118deg, rgba(255, 252, 244, .18), transparent 38%, transparent 70%, rgba(120, 95, 50, .04)),
    var(--card-linen),
    var(--card-grain) 0 0 / 160px 160px;
  mix-blend-mode: soft-light;
  opacity: .9;
}

/* The corner panel: the maker and the year, set into the top-right of the frame like the
   keyed corner of a series card. It floats, so the title runs round it. */
.cig-corner {
  float: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  max-width: min(12em, 40%);   /* a long name wraps rather than crowding the title */
  margin: -13.5px -19.5px 10px 14px;   /* flush to the inner hairline */
  padding: 9px 14px 10px 16px;
  background: var(--card-tint);
  border-left: 1px solid var(--card-hair);
  border-bottom: 1px solid var(--card-hair);
  border-bottom-left-radius: 10px 8px;
  font-family: var(--serif);
  text-align: right;
}
/* The corner is typed too: the poet and the year, in Courier, right against the panel's edge. */
.cig-corner .today-author-link { font-family: var(--card-type); font-size: 15px; line-height: 1.35; text-align: right; }
.cig-corner .cig-year { font-family: var(--card-type); font-size: 13.5px; }
/* tags along the foot: mood and theme, in the corner's calm ink */
.cig-card .cig-tags { margin-top: 8px; }
.cig-card .cig-tags dd { column-gap: .7em; }
.cig-term {
  font-size: 16px;
  line-height: 1.3;
  color: var(--card-calm);
}
.cig-term::before {
  content: "#";
  content: "#" / "";           /* a tag mark to the eye, not read aloud */
  margin-right: 1px;
  opacity: .55;
}
.cig-term .slip-term {
  text-decoration-color: color-mix(in srgb, var(--card-calm) 30%, transparent);
}
.cig-term .slip-term:hover, .cig-term .slip-term:focus-visible { color: var(--ink); }
.cig-title {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-size: clamp(26px, 4vw, 32px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.005em;
  color: var(--text-primary);
  text-wrap: balance;
}
.cig-title .poem-title-link { text-decoration: none; }
.cig-title .poem-title-link:hover { text-decoration: underline; }
.cig-title.is-long { font-size: clamp(20px, 2.6vw, 24px); font-weight: 500; line-height: 1.25; }
.cig-year {
  font-size: 15px;
  letter-spacing: .04em;
  font-variant-numeric: oldstyle-nums;
  color: var(--text-secondary);
}
/* The card's small print is typed, as the landing page's letter is: Courier Prime, a step
   smaller than the serif since it runs wide. The title and the corner stay in print. */
.cig-card { --card-type: "Courier Prime", "Courier New", monospace; }
.cig-caption {
  clear: right;                /* the caption is centred on the card, so it starts below the corner */
  margin: 0;
  font-family: var(--card-type);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-primary);
  text-align: left;
}
.cig-rule {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0 10px;
  color: var(--card-hair);
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1;
}
.cig-rule::before, .cig-rule::after { content: ""; flex: 1; height: 1px; background: var(--card-hair); }
.cig-rule span { color: var(--text-secondary); }
.cig-text {
  margin: 0;
  font-family: var(--card-type);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.cig-incipit { text-align: center; }
.cig-incipit::before { content: "“"; }
.cig-incipit::after { content: "…”"; }
/* A quote's provenance: typed, and in the card's own ink, not the secondary grey that sank
   into the stock. The source line is the darkest; "Ideas" and "Useful when" carry a label. */
.cig-quote { margin: 10px 0 0; }
.cig-quote .small { font-family: var(--card-type); font-size: 13px; line-height: 1.55; color: var(--ink-soft); margin: 3px 0 0; }
.cig-quote .small:first-child { color: var(--text-primary); }
/* sitting and style side by side, each a label over its line, split by a hairline */
.cig-card .cig-slip {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);   /* the sitting carries more */
  margin: 14px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--card-hair);
  max-width: none;
}
.cig-card .sitting-slip-row {
  display: block;
  padding: 0 0 0 14px;
  border-bottom: none;
  border-left: 1px solid var(--card-hair);
}
.cig-card .sitting-slip-row:first-child { padding-left: 0; border-left: none; }
.cig-card .sitting-slip-row:only-child { grid-column: 1 / -1; }
/* in a narrow column the facts wrap, so they run on with a word space rather than the
   slip's pull-back, which would push a wrapped fact out past the frame */
.cig-card .sitting-slip dd { column-gap: .3em; }
.cig-card .sitting-slip .slip-fact + .slip-fact { margin-left: 0; }
.cig-card .slip-group { white-space: normal; display: inline-flex; flex-wrap: wrap; column-gap: .3em; }
.cig-card .slip-group .slip-term + .slip-term { margin-left: 0; }
/* A tag's mark and its words stay together: the term wraps inside its button, in the column's
   width, rather than the whole button dropping to the next line and leaving the # on its own. */
.cig-card .cig-term { display: inline-flex; align-items: baseline; }
.cig-card .cig-term .slip-term { text-align: left; }
.cig-card .sitting-slip dt { margin-bottom: 1px; }
.cig-card .sitting-slip dd { font-family: var(--card-type); font-size: 13.5px; }
.cig-card .sitting-slip dt { font-family: var(--card-type); font-style: normal; font-size: 12.5px; }

/* the pack: another card, or a word with the librarian — quiet links under the card */
.sitting-select-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin: 2px 0 14px; }
.sitting-select-tools /* the feather for a poem, the open quotation mark for a quote */
.kind-switch-icon { font-size: .82em; margin-right: .45em; opacity: .8; }
.kind-switch-on .kind-switch-icon { opacity: 1; }
.kind-switch { margin-right: 4px; }
.cig-tool {
  background: none; border: none; padding: 2px 0; margin: 0; cursor: pointer;
  font-family: var(--serif); font-size: 15px; color: var(--text-primary);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--text-secondary) 55%, transparent);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  border-radius: 2px;
}
.cig-tool { display: inline-flex; align-items: baseline; gap: .5em; }
.cig-tool .fa { font-size: 13px; color: var(--text-secondary); }   /* inline-block, so the underline skips it */
.cig-tool:hover:not(:disabled) .fa { color: inherit; }
.cig-tool:hover:not(:disabled) { color: var(--wax); text-decoration-color: currentColor; }
.cig-tool:disabled { color: var(--text-secondary); cursor: default; text-decoration-color: transparent; }
.cig-tool:focus-visible { outline: 2px solid var(--laurel); outline-offset: 3px; }

/* a long quote is the whole line, set smaller so it stays a title */
.poem-title.is-long { font-size: clamp(26px, 3.2vw, 34px); line-height: 1.2; font-weight: 500; }
.kind-switch {
  display: inline-flex;
  border: 1px solid var(--sheet-edge);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--sheet);
}
.kind-switch-opt {
  border: none;
  background: transparent;
  padding: 8px 14px;
  font-family: var(--ui);
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  line-height: 1.2;
}
.kind-switch-opt + .kind-switch-opt { border-left: 1px solid var(--sheet-edge); }
.kind-switch-opt:hover:not(:disabled):not(.kind-switch-on) { background: color-mix(in srgb, var(--ink) 6%, var(--sheet)); }
.kind-switch-opt:disabled { opacity: .55; cursor: default; }
.kind-switch-on {
  background: var(--ink);
  color: var(--paper);
}
.kind-switch-opt:focus-visible {
  outline: 2px solid var(--laurel);
  outline-offset: -2px;
  z-index: 1;
}
.kind-switch-compact {
  border-radius: 999px;
  flex-shrink: 0;
}
.kind-switch-compact .kind-switch-opt {
  padding: 5px 12px;
  font-size: 12px;
  letter-spacing: 0.02em;
}