/* Quiet Stanza — Practice and the desk's threshold.
   The calendar, the ledger, finding a gift, the look-back head; then the threshold: today's
   sittings ticked off, and the books and pads laid on the desk to choose from. */

/* ═══ practice ═══ */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; max-width: 340px; }
.cal-cell { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 13.5px; color: var(--text-secondary); }
.cal-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 3px; background: transparent; }
.cal-dot-on { background: var(--laurel); }
.cal-dot-quote { background: var(--wax); }
.cal-dot-haiku { background: #6b8f71; }
.cal-dot-both {
  background: linear-gradient(135deg, var(--laurel) 50%, var(--wax) 50%);
}
.today-quote-card { margin: 8px 0 4px; padding: 0; }
.cal-today { outline: 1.5px solid var(--ink); border-radius: 6px; }
.cal-future { opacity: .4; }
.cal-head { font-size: 11px; color: var(--text-secondary); text-align: center; }
.ledger-item { padding: 12px 0; border-bottom: 1px solid var(--sheet-edge); }
.gift-given { margin-bottom: 28px; }
.gift-given-name { font-size: 16px; }
.stars { color: var(--gold); letter-spacing: 2px; }
/* Progress: the look-back head with the small calendar at its right, then the table. */
.progress-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding: 8px 0 24px; margin-bottom: 24px; border-bottom: 1px solid var(--sheet-edge);
}
.progress-head-text { min-width: 0; flex: 1; }
.progress-head .page-title { margin-top: 10px; }

/* The habit tracker: small, in the corner, a dot a day. A day written can be pressed to show it. */
.progress-cal { flex: none; width: 196px; }
.progress-cal-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12.5px; font-weight: 600; color: var(--text-secondary); margin-bottom: 4px;
}
.progress-cal .cal-grid { gap: 2px; max-width: none; }
.progress-cal .cal-head { font-size: 9.5px; }
.progress-cal .cal-cell {
  font-size: 10.5px; padding: 0; border: 0; background: none; font-family: var(--ui);
  border-radius: 5px; cursor: pointer;
}
.progress-cal .cal-cell:disabled { cursor: default; }
.progress-cal .cal-cell:not(:disabled):hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.progress-cal .cal-cell.is-picked { background: var(--chosen); color: var(--paper); }
.progress-cal .cal-dot { width: 5px; height: 5px; margin-top: 1px; }
.progress-cal .cal-today { outline-width: 1px; }

/* ═══ what you've written ═══ */
.written-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.written-filters { display: grid; gap: 12px; margin-bottom: 16px; }
.written-search-row { display: flex; align-items: center; gap: 12px; }
.written-search { flex: 1; width: 100%; max-width: none; }
.written-search-note { flex: none; font-style: italic; }
.written-why {
  display: block; margin-top: 3px; font-family: var(--serif); font-style: italic;
  font-size: 13.5px; line-height: 1.4; color: var(--chosen);
}
.written-filter-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 18px; }
.written-filter { display: grid; gap: 4px; }
.written-filter > span {
  font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary);
}
.written-filter select, .written-filter input { min-width: 9rem; }
.written-toggles { display: flex; flex-wrap: wrap; gap: 6px; }
.written-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 10px; font: 13px var(--ui); color: var(--text-primary);
  background: var(--sheet); border: 1px solid var(--sheet-edge); border-radius: var(--radius-card); cursor: pointer;
}
.written-toggle:hover { border-color: var(--text-secondary); }
.written-toggle.is-on { background: var(--chosen); border-color: var(--chosen); color: var(--paper); }
.written-toggle.is-open:not(.is-on) { border-color: var(--chosen); color: var(--chosen); }
.written-heart { width: 15px; height: 15px; }
.written-tags { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.written-tag {
  padding: 2px 4px; border: 0; background: none; cursor: pointer;
  font-family: var(--serif); color: var(--text-secondary); border-radius: 4px; line-height: 1.3;
}
.written-tag:hover { color: var(--text-primary); text-decoration: underline; }
.written-tag.is-on { background: var(--chosen); color: var(--paper); text-decoration: none; }

.written-ico {
  width: 18px; height: 18px; flex: none; vertical-align: middle;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
/* the index card: the classic red title rule and blue rules (CardCatalog "classic") */
.written-ico .written-ico-card-head { stroke: rgb(205, 92, 92); stroke-width: 1.4; }
.written-ico .written-ico-card-rule { stroke: rgb(112, 156, 204); stroke-width: 1.2; }
.written-table-wrap { overflow-x: auto; }
.written-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.written-table th {
  text-align: left; font-weight: 600; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-secondary); border-bottom: 1px solid var(--sheet-edge); padding: 0 8px 6px; white-space: nowrap;
}
.written-sort {
  display: inline-flex; align-items: center; gap: 3px; padding: 4px 0; border: 0; background: none;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer;
}
.written-sort:hover, .written-sort.is-on { color: var(--text-primary); }
.written-sort-mark { display: inline-block; width: 8px; color: var(--chosen); }
.written-table td {
  padding: 9px 8px; border-bottom: 1px solid color-mix(in srgb, var(--sheet-edge) 70%, transparent);
  vertical-align: top; color: var(--text-primary);
}
.written-table tr.is-openable { cursor: pointer; }
.written-table tbody tr:hover td { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.written-table .col-icon { width: 34px; text-align: center; padding-inline: 4px; color: var(--text-secondary); }
.written-table .col-date { white-space: nowrap; }
.written-table .col-rating { white-space: nowrap; }
.written-table .col-rating .stars { font-size: 12px; letter-spacing: 1px; }
.written-table .col-actions { white-space: nowrap; text-align: right; width: 100px; }
.written-title { font-family: var(--serif); font-size: 16px; color: var(--text-primary); text-decoration: none; }
a.written-title:hover { text-decoration: underline; }
.written-note { display: block; font-size: 12.5px; color: var(--text-secondary); font-style: italic; margin-top: 2px; }
.written-slot { display: block; font-size: 11.5px; color: var(--text-secondary); text-transform: capitalize; }
.written-fav, .written-act {
  display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--text-secondary); cursor: pointer;
}
/* The heart and the envelope share a line and a size; a favourite fills bright pink. */
.written-fav, .written-act { vertical-align: middle; }
.written-fav .ink-heart, .written-act svg { display: block; width: 18px; height: 18px; }
.written-fav.is-on { --journal-ink: var(--favourite); color: var(--favourite); }
.written-fav.is-on .ink-heart .ink-heart-fill { opacity: 1; }
.written-author { color: var(--text-primary); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: color-mix(in srgb, var(--text-primary) 40%, transparent); }
.written-author:hover { text-decoration-color: currentColor; }
.written-fav:hover, .written-act:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); }
.written-act svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.written-empty { margin-top: 14px; }
.progress-giving { margin-top: 40px; display: grid; gap: 8px; }

/* On a narrow screen the calendar goes under the head, and the table keeps what matters. */
@media (max-width: 860px) {
  .progress-head { flex-direction: column; }
}
@media (max-width: 600px) {
  .written-table .col-author, .written-table .col-rating, .written-table .col-where { display: none; }
  .written-table td { padding: 8px 4px; }
}
.sitting-line {
  font-family: var(--serif); font-style: italic; font-size: 18px; line-height: 1.45;
  color: var(--text-primary); margin: 14px 0 0; max-width: 36rem;
}
.progress-facts { font-size: 14px; color: var(--text-secondary); margin: 12px 0 0; letter-spacing: .01em; }

@media (max-width: 860px) {
  .cal-grid { max-width: none; }
}

/* ═══ passing it on: Send a poem, Invite a friend ═══ */
.pass-on-page { max-width: 640px; }
.pass-on-lede { margin: 6px 0 28px; color: var(--text-secondary); font-size: 15px; max-width: 34rem; }
.pass-on-section { margin: 0 0 36px; }
.pass-on-section .section-title { margin: 0 0 4px; }
.pass-on-recent { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pass-on-off { color: var(--text-secondary); font-style: italic; }
.pass-on-form { display: grid; gap: 2px; margin-bottom: 36px; }
.pass-on-field .setting-label { margin-top: 12px; }
.pass-on-field .setting-label em { text-transform: none; letter-spacing: 0; font-weight: 400; font-style: italic; }
.pass-on-note .qs-field { max-width: 34rem; resize: vertical; }
.pass-on-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 18px; }
.pass-on-message { margin: 12px 0 0; font-size: 14px; color: var(--text-primary); }
.pass-on-message.is-error { color: var(--wax); }

/* ═══ Progress fits the window ═══
   The sheet is as tall as the window and no taller: the head stays, the ledger scrolls inside
   its own frame (its heading row kept at the top), and the Given list in its own below, so the
   window itself never scrolls. (.content .page-wrap outranks common.css's sheet rule.) On a
   phone the sheet runs on as it always has. */
.content:has(> .page-wrap.progress-page) { display: flex; flex-direction: column; }
.content .page-wrap.progress-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;
}
.progress-page .progress-head { flex: none; padding: 0 0 10px; margin-bottom: 10px; }
.progress-page .progress-head .page-title { margin-top: 4px; font-size: 30px; }
.progress-page .progress-head .sitting-line { margin: 4px 0 0; }
.progress-page .progress-cal { width: 176px; }
.progress-page .written { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.progress-page .written-head { flex: none; margin-bottom: 6px; }
.progress-page .written-filters { flex: none; gap: 8px; margin-bottom: 8px; }
.progress-page .written-table-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; scrollbar-width: thin; }
.progress-page .written-table { font-size: 13px; }
.progress-page .written-table th { position: sticky; top: 0; z-index: 1; background: var(--letter-paper); padding: 0 8px 4px; }
.progress-page .written-table td { padding: 5px 8px; }
.progress-page .progress-giving {
  flex: none; max-height: 22vh; overflow-y: auto; scrollbar-width: thin;
  margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--sheet-edge);
}
.progress-page .gift-given { margin-bottom: 6px; }
.progress-page .ledger-item { padding: 6px 0; }
@media (max-width: 1199px) {
  .content .page-wrap.progress-page { margin: 12px auto calc(var(--dock-height, 0px) + 12px); padding: 16px 20px 12px; }
}
/* …and on a phone on its side, where the window is too short for the head and the ledger both:
   the sheet runs on and the window scrolls, rather than the ledger being cut off under the head. */
@media (max-width: 699px), (max-height: 500px) {
  .content:has(> .page-wrap.progress-page) { display: block; }
  .content .page-wrap.progress-page { overflow: visible; display: block; margin: 10px auto 20px; padding-bottom: calc(var(--dock-height) + 24px); }
  .progress-page .written-table-wrap { overflow: visible; }
  .progress-page .progress-giving { max-height: none; overflow: visible; }
}
/* The month's arrows and the kind column's sort are a finger's width, not a glyph's. */
.progress-cal-head .link-button { min-width: 32px; min-height: 28px; }
.written-table .col-icon .written-sort { min-width: 28px; min-height: 28px; justify-content: center; }