/* Diary — the card IS a calendar. Six months of dates, the free ones raised
   and tappable, the booked ones struck through, and one tap writes the date
   into a WhatsApp message.

   The surface is Block: flat saturated colour, square corners, thick borders
   and a hard offset shadow with ZERO blur that paints AT REST. Most
   neubrutalist sites reserve that shadow for :hover, so on a phone it never
   paints at all and the style simply is not there. Zero blur is also zero GPU
   cost, the exact opposite trade from glass.

   ONE GROUND. --ts-surface and --ts-surface-2 are the same cream on purpose:
   depth here is drawn with a 3px border and an offset shadow, never with a
   fill step. That is what Block is, it is what keeps this from reading as
   Ledger recoloured, and it is what makes the theme survive an owner-picked
   ground: deriveGround moves surface-2 AWAY from the ink, so a theme that
   hangs its page on surface-2 and its tiles on surface inverts the moment an
   owner picks a colour. Here the card, the tiles and the panel the contrast
   solver measures are all --ts-surface, so nothing can invert.

   No webfont: Android ships Roboto Black at 900 and Noto for every Indian
   script, iOS ships SF Pro Heavy. No photography needed either. */
body.ts2.theme-diary{
  --ts-font-display:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans","Helvetica Neue",Arial,sans-serif;
  --ts-stage:#ffd24a; --ts-wash-1:none; --ts-wash-2:none;
  /* One ground. --ts-surface-2 is what THEME_BG calls the panel and what
     test/cardAccent.test.js reads back out of this file, so it must be the
     colour small text actually lands on: the card. */
  --ts-surface:#fff7e8; --ts-surface-2:#fff7e8; --ts-surface-3:#ffe9b8;
  --ts-ink:#1d1206; --ts-ink-2:#4b3b28; --ts-ink-3:#6a5842; --ts-ink-on-brand:#1d1206;
  --ts-brand:#ffd24a; --ts-brand-2:#f2bd1d; --ts-brand-soft:rgba(29,18,6,.06);
  --ts-accent:#c8306b; --ts-accent-2:#a8245a; --ts-accent-soft:rgba(200,48,107,.1);
  --ts-success:#13704f; --ts-success-soft:rgba(19,112,79,.14);
  /* --ts-line is decorative; every edge that carries meaning rides
     --ts-line-strong, which is the brand pink here and becomes an owner's own
     colour corrected to 3:1 the moment they pick one. */
  --ts-line:rgba(29,18,6,.18); --ts-line-strong:#c8306b; --ts-focus:#2b4fd6;
  --ts-banner:none; --ts-banner-h:0px;
  --ts-shadow-ink:rgba(29,18,6,.2);
  --ts-shadow-card:none; --ts-shadow-btn:4px 4px 0 0 var(--ts-ink);
  --ts-r-card:0px; --ts-r-lg:0px; --ts-r-md:0px; --ts-r-sm:0px; --ts-r-pill:0px; --ts-r-avatar:0px;
  --ts-fw-display:900; --ts-ls-display:-.02em;
  --ts-fs-label:11px; --ts-ls-label:.12em; --ts-fs-body:14.5px; --ts-lh-body:1.6;
  --ts-gutter:16px; --ts-gap:10px; --ts-section-y:26px;
  --ts-align:left; --ts-ai:flex-start; --ts-jc:flex-start; --ts-glint:0;
}

/* ---------- the head ---------- */
.theme-diary .ts-dhead,.theme-diary .ts-dhead-photo{border-bottom:3px solid var(--ts-ink)}
.theme-diary .ts-dhead-name{text-transform:uppercase}
.theme-diary .ts-dhead-kick img{border:2px solid currentColor;background:var(--ts-surface)}
.theme-diary .ts-dhead+.ts-sec{margin-top:20px}

/* ---------- section heads: a reversed ink slab, not a rule ----------
   This is the single loudest difference from Ledger, which rules its heads.
   A slab also gives the eye a fixed anchor while the calendar is scrolling
   sideways underneath it. */
.theme-diary .ts-label{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:7px 11px;background:var(--ts-ink);color:var(--ts-surface);font-family:var(--ts-font-mono);font-weight:800;border:0}
.theme-diary .ts-label .ts-icon{color:var(--ts-surface)}
.theme-diary .ts-index{padding:0 4px 8px 0}
.theme-diary .ts-index a{border:2px solid var(--ts-line-strong);color:var(--ts-ink);font-family:var(--ts-font-mono);box-shadow:3px 3px 0 0 var(--ts-line-strong)}

/* ---------- the calendar ---------- */
.theme-diary .ts-diary-mh{font-family:var(--ts-font-display);font-size:17px;font-weight:900;letter-spacing:-.01em;text-transform:uppercase}
.theme-diary .ts-diary-tabs a{border-width:2px;box-shadow:3px 3px 0 0 var(--ts-line-strong)}
.theme-diary .ts-diary-tabs a[aria-current="true"]{box-shadow:3px 3px 0 0 var(--ts-accent)}
.theme-diary .ts-dd.is-free{box-shadow:2px 2px 0 0 var(--ts-success)}
.theme-diary .ts-diary-upd.is-stale{color:var(--ts-ink);font-weight:700}

/* ---------- everything else is a slab on the same ground ---------- */
.theme-diary .ts-list{border:0;border-radius:0;gap:12px;overflow:visible;background:transparent;padding:0 4px 4px 0}
.theme-diary .ts-row{background:transparent;border:3px solid var(--ts-line-strong);box-shadow:4px 4px 0 0 var(--ts-line-strong);padding:12px 13px}
.theme-diary .ts-row-nm{font-size:14.5px;font-weight:800}
.theme-diary .ts-row-ds{color:var(--ts-ink-2)}
/* Ink, not --ts-accent: base paints the figure in the accent, and an owner's
   raw pick is guaranteed only as a FILL, not as 14px text. */
.theme-diary .ts-row-pr{font-family:var(--ts-font-mono);font-size:14px;font-weight:800;color:var(--ts-ink)}
.theme-diary .ts-grid.two{gap:12px;padding:0 4px 4px 0}
.theme-diary .ts-tile{background:transparent;border:3px solid var(--ts-ink);box-shadow:4px 4px 0 0 var(--ts-accent)}
.theme-diary .ts-tile-cap{background:var(--ts-ink);color:var(--ts-surface);padding:8px 10px}
.theme-diary .ts-tile-desc{color:var(--ts-surface);font-weight:500}
.theme-diary .ts-contact,.theme-diary .ts-links{gap:14px;padding:0 4px 4px 0}
.theme-diary .ts-contact-link,.theme-diary .ts-linkrow,.theme-diary .ts-rev,.theme-diary .ts-pay,.theme-diary .ts-office{background:transparent;border:3px solid var(--ts-ink);box-shadow:4px 4px 0 0 var(--ts-ink)}
.theme-diary .ts-contact-ic{background:var(--ts-brand);color:var(--ts-ink-on-brand);border:2px solid var(--ts-ink)}
.theme-diary .ts-rev-stars{color:var(--ts-accent)}
.theme-diary .ts-qr{border:2px solid var(--ts-ink);border-radius:0}
.theme-diary .ts-bio{color:var(--ts-ink-2);font-size:15px}
.theme-diary .ts-socials{gap:12px;padding:0 4px 4px 0}
.theme-diary .ts-social{border-radius:0;border:2px solid var(--ts-ink);background:transparent;color:var(--ts-ink);box-shadow:3px 3px 0 0 var(--ts-accent)}
.theme-diary .ts-social:hover{transform:none;color:var(--ts-ink);border-color:var(--ts-ink)}

/* ---------- buttons: fill, thick edge, hard shadow, at rest ---------- */
.theme-diary .ts-cta{border:3px solid var(--ts-ink);font-weight:800;letter-spacing:.06em}
/* Authored at body.ts2.theme-diary so it beats the quiet rule in base.css,
   which is itself authored at body.ts2 for the same source-order reason. */
body.ts2.theme-diary .ts-cta.is-quiet,
body.ts2.theme-diary .ts-btn.is-brand.is-quiet{background:transparent;border:3px solid var(--ts-line-strong);box-shadow:4px 4px 0 0 var(--ts-line-strong);color:var(--ts-ink)}
.theme-diary .ts-btn{background:transparent;border:3px solid var(--ts-line-strong);box-shadow:3px 3px 0 0 var(--ts-line-strong);font-weight:800}
/* The Block press: the control moves into its own shadow. Transform only, no
   transition on box-shadow, and the global reduced-motion block still neuters
   the spring that carries it. */
.theme-diary .ts-cta:active,
.theme-diary .ts-btn:active,
.theme-diary .ts-dock-2:active,
.theme-diary .ts-contact-link:active,
.theme-diary .ts-linkrow:active,
.theme-diary .ts-tile:active,
.theme-diary .ts-social:active,
.theme-diary .ts-index a:active,
.theme-diary .ts-diary-tabs a:active{transform:translate(3px,3px);box-shadow:none}
.theme-diary .ts-dd.is-free:active{transform:translate(2px,2px);box-shadow:none}

/* ---------- the dock: solid, three pixels of ink, never glass ---------- */
.theme-diary .ts-dock{background:var(--ts-surface);border-top:3px solid var(--ts-ink);box-shadow:none}
.theme-diary .ts-dock-in{padding:0 4px 4px 0}
.theme-diary .ts-dock-2{background:transparent;border:3px solid var(--ts-ink);box-shadow:4px 4px 0 0 var(--ts-ink)}
.theme-diary .ts-footer{text-align:left}
.theme-diary .ts-footer a{color:var(--ts-ink-2)}

/* ---------- desktop ----------
   base.css makes .ts-face a sticky, 100vh-capped, independently scrolling
   column. Stacking that under a six-month horizontal track would give one
   gesture three nested scrollers, so this theme opts the face out and keeps
   only the two-column grid. Scoped to .theme-diary: no other theme moves. */
@media (min-width:1024px){
  body.ts2.theme-diary .ts-face{position:static;max-height:none;overflow:visible}
  .theme-diary .ts-body{border-left:3px solid var(--ts-ink);padding-top:22px}
}