/* ============================================================
   DOINGS — a weekend ledger
   paper / ink / one vermilion stamp
   ============================================================ */

@font-face { font-family:'Oswald'; src:url('assets/oswald.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Literata'; src:url('assets/literata.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Plex Mono'; src:url('assets/ibm-plex-mono.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'DM Sans'; src:url('assets/dm-sans.ttf') format('truetype'); font-display:swap; }

:root{
  --paper:      #F2EDE0;
  --paper-deep: #E9E2CF;
  --ink:        #1C1913;
  --ink-soft:   #5F5949;
  --rule:       rgba(28,25,19,.30);
  --rule-faint: rgba(28,25,19,.14);
  --stamp:      #C7431D;      /* vermilion */
  --stamp-dark: #A53617;
  --on-stamp:   #F7F1E3;

  --f-display:'Oswald', sans-serif;
  --f-title:'Literata', Georgia, serif;
  --f-mono:'Plex Mono', monospace;
  --f-body:'DM Sans', sans-serif;

  --gut: clamp(20px, 4vw, 56px);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.55;
  /* faint paper grain */
  background-image:
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(28,25,19,.012) 2px 3px);
  padding-bottom:0;
}

::selection{ background:var(--stamp); color:var(--on-stamp); }

:focus-visible{
  outline:3px solid var(--stamp);
  outline-offset:2px;
  border-radius:2px;
}

.skip{
  position:absolute; left:-9999px; top:8px; z-index:99;
  background:var(--ink); color:var(--paper);
  font-family:var(--f-mono); font-size:13px; padding:10px 16px;
}
.skip:focus{ left:8px; }

/* ---------------- masthead ---------------- */

.masthead{ border-bottom:3px double var(--ink); }

.topstrip{
  display:flex; justify-content:space-between; gap:16px;
  padding:10px var(--gut) 8px;
  border-bottom:1px solid var(--rule);
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.08em;
  color:var(--ink-soft);
  white-space:nowrap; overflow:hidden;
}

.mast-inner{
  max-width:1360px; margin:0 auto;
  padding:clamp(28px,5vw,64px) var(--gut) clamp(24px,4vw,48px);
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(20px,4vw,64px); align-items:end;
}

.mast-word{
  position:relative;
  font-family:var(--f-display);
  font-weight:600;
  font-size:clamp(84px,11.5vw,164px);
  line-height:.92;
  letter-spacing:-.015em;
  text-transform:uppercase;
  align-self:end;
}
.mast-period{ color:var(--stamp); }
.mast-stamp{
  position:absolute; right:.2em; top:-.18em;
  font-size:clamp(15px,1.6vw,22px);
  letter-spacing:.14em;
  color:var(--stamp-dark);
  border:3px solid var(--stamp);
  padding:.18em .5em;
  transform:rotate(7deg);
  font-weight:600;
}

.mast-dek{
  font-family:var(--f-title);
  font-size:clamp(17px,1.5vw,20px);
  line-height:1.6;
  max-width:46ch;
  padding-bottom:.4em;
}
.mast-dek em{ font-style:italic; color:var(--stamp-dark); }
.mast-dek strong{ font-weight:700; }

/* ---------------- query line ---------------- */

.querybar{ border-bottom:1px solid var(--ink); background:var(--paper-deep); }
.query-inner{
  max-width:1360px; margin:0 auto;
  padding:18px var(--gut);
  display:grid;
  grid-template-columns:minmax(220px,1.4fr) minmax(160px,.9fr) auto 1fr;
  gap:clamp(16px,2.5vw,40px);
  align-items:end;
}
.q-label{
  display:block;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:4px;
}
.q-input{
  width:100%;
  background:transparent; border:0; border-bottom:2px solid var(--ink);
  font-family:var(--f-body); font-size:18px; color:var(--ink);
  padding:6px 2px 8px; border-radius:0;
}
.q-input::placeholder{ color:var(--ink-soft); opacity:.75; }
.q-select{
  font-family:var(--f-body); font-size:17px;
  cursor:pointer; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231C1913' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 4px center;
  padding-right:24px;
}

.docket-toggle{
  display:inline-flex; align-items:center; gap:10px;
  background:transparent; border:2px solid var(--ink);
  font-family:var(--f-mono); font-size:13px; letter-spacing:.08em;
  color:var(--ink); padding:9px 16px; cursor:pointer;
  text-transform:uppercase;
  transition:background .15s ease, color .15s ease, transform .15s ease;
}
.docket-toggle .dt-mark{
  display:inline-grid; place-items:center;
  width:18px; height:18px; border:1.5px solid currentColor;
  font-size:12px; line-height:1;
}
.docket-toggle:hover{ background:var(--ink); color:var(--paper); }
.docket-toggle[aria-pressed="true"]{
  background:var(--stamp); border-color:var(--stamp); color:var(--on-stamp);
  transform:rotate(-1.5deg);
}
.docket-toggle[aria-pressed="true"] .dt-mark{ border-color:var(--on-stamp); }

.q-count{
  font-family:var(--f-mono); font-size:12px; letter-spacing:.06em;
  color:var(--ink-soft); text-align:right; align-self:center;
  justify-self:end;
}

/* ---------------- sheet: register + docket ---------------- */

.sheet{
  max-width:1360px; margin:0 auto;
  padding:0 var(--gut) clamp(40px,6vw,80px);
  display:grid; grid-template-columns:minmax(0,1fr) 316px;
  gap:clamp(24px,3vw,56px);
  align-items:start;
}

/* ledger column heads */
.rule-head{
  display:grid;
  grid-template-columns:56px 150px minmax(0,1fr) 190px 118px 64px;
  gap:14px; align-items:baseline;
  padding:26px 0 10px;
  border-bottom:3px double var(--ink);
  font-family:var(--f-mono); font-size:11px; letter-spacing:.16em;
  color:var(--ink-soft);
}
.rule-head span:nth-child(4){ text-align:left; }
.rule-head span:nth-child(5),
.rule-head span:nth-child(6){ text-align:right; }

/* ---------------- ledger rows ---------------- */

.ledger{ list-style:none; }
.row{
  display:grid;
  grid-template-columns:56px 150px minmax(0,1fr) 190px 118px 64px;
  gap:14px; align-items:baseline;
  padding:20px 0 18px;
  border-bottom:1px solid var(--rule-faint);
  position:relative;
  transition:background .15s ease;
}
.row:hover{ background:rgba(199,67,29,.05); }
.row.row-saved::before{
  content:"✓ FILED";
  position:absolute; right:0; top:6px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.12em;
  color:var(--stamp); border:1.5px solid var(--stamp);
  padding:2px 6px; transform:rotate(-3deg);
  background:var(--paper);
}

.row-no{
  font-family:var(--f-display); font-weight:600;
  font-size:20px; color:var(--ink-soft);
  letter-spacing:.02em;
}
.row-when{
  font-family:var(--f-mono); font-size:12.5px; letter-spacing:.04em;
  color:var(--ink); line-height:1.5;
}
.row-when .row-day{
  display:block; font-weight:700; color:var(--stamp-dark);
  letter-spacing:.1em;
}

.row-open{
  display:flex; align-items:baseline; gap:12px;
  width:100%; background:none; border:0; cursor:pointer;
  text-align:left; color:var(--ink); padding:0;
  font:inherit; min-width:0;
}
.row-title{
  font-family:var(--f-title); font-weight:500;
  font-size:clamp(19px,1.6vw,22px); line-height:1.3;
  text-decoration:underline transparent;
  text-decoration-thickness:1.5px;
  transition:text-decoration-color .15s ease;
}
.row-open:hover .row-title,
.row-open:focus-visible .row-title{ text-decoration-color:var(--stamp); }
.leader{
  flex:1 1 24px; min-width:24px;
  border-bottom:2px dotted var(--rule);
  transform:translateY(-5px);
}

.row-venue{
  font-family:var(--f-mono); font-size:12.5px; line-height:1.5;
  color:var(--ink-soft);
}

.stamp{
  justify-self:end;
  display:inline-block;
  font-family:var(--f-display); font-weight:600;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--stamp-dark);
  border:2px solid var(--stamp-dark);
  padding:3px 9px 2px;
  transform:rotate(-2deg);
  white-space:nowrap;
}
.row:nth-child(even) .stamp{ transform:rotate(2deg); }

.row-price{
  font-family:var(--f-display); font-weight:600; font-size:19px;
  text-align:right; font-variant-numeric:tabular-nums;
}
.row-price.free{ color:var(--stamp-dark); font-size:15px; letter-spacing:.05em; align-self:center; }

/* ---------------- empty state ---------------- */

.empty{
  padding:clamp(48px,8vw,96px) 0; text-align:center;
}
.empty-stamp{
  display:inline-block;
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(34px,5vw,56px); letter-spacing:.12em;
  color:var(--stamp); border:4px solid var(--stamp);
  padding:.2em .5em; transform:rotate(-4deg);
  margin-bottom:24px;
}
.empty-copy{
  font-family:var(--f-title); font-size:18px; max-width:44ch;
  margin:0 auto 24px; color:var(--ink);
}
.empty-reset{
  font-family:var(--f-mono); font-size:13px; letter-spacing:.06em;
  background:var(--ink); color:var(--paper); border:0;
  padding:12px 20px; cursor:pointer;
}
.empty-reset:hover{ background:var(--stamp); }

/* ---------------- the docket / receipt ---------------- */

.docket{ position:sticky; top:16px; padding-top:26px; }
.receipt{
  background:#FBF8EF;
  border:1px solid var(--rule);
  box-shadow:4px 5px 0 rgba(28,25,19,.12);
  padding:20px 18px 14px;
  font-family:var(--f-mono);
  position:relative;
}
/* perforated tear-off top */
.receipt::before{
  content:""; position:absolute; left:0; right:0; top:-7px; height:7px;
  background:radial-gradient(circle at 8px 7px, transparent 4px, var(--paper) 4px);
  background-size:16px 7px; background-position:0 0;
  background-repeat:repeat-x;
}
.r-head{
  display:flex; justify-content:space-between; align-items:baseline;
  border-bottom:2px dashed var(--rule); padding-bottom:10px; margin-bottom:12px;
}
.r-name{
  font-family:var(--f-display); font-weight:600; font-size:20px;
  letter-spacing:.1em;
}
.r-sub{ font-size:10px; letter-spacing:.06em; color:var(--ink-soft); }

.r-list{ list-style:none; }
.r-item{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto auto;
  gap:8px; align-items:start;
  padding:7px 0;
  border-bottom:1px dotted var(--rule-faint);
  font-size:12.5px; line-height:1.45;
}
.r-item .r-no{ color:var(--stamp-dark); font-weight:600; }
.r-item .r-title{ font-family:var(--f-title); font-size:14px; line-height:1.35; }
.r-item .r-when{ font-size:10.5px; color:var(--ink-soft); white-space:nowrap; text-align:right; }
.r-item .r-overlap{
  display:block; color:var(--stamp-dark); font-size:10px; letter-spacing:.08em;
}
.r-remove{
  background:none; border:0; cursor:pointer;
  font-family:var(--f-mono); font-size:14px; color:var(--ink-soft);
  padding:0 2px; line-height:1;
}
.r-remove:hover{ color:var(--stamp); }
.r-remove:focus-visible{ outline-offset:1px; }

.r-empty{ font-size:12.5px; color:var(--ink-soft); padding:14px 0; line-height:1.6; }

.r-totals{ margin-top:10px; border-top:2px dashed var(--rule); padding-top:12px; }
.r-line{
  display:flex; justify-content:space-between;
  font-size:13px; padding:3px 0;
}
.r-line b{ font-weight:700; font-variant-numeric:tabular-nums; }
.r-note{
  font-family:var(--f-title); font-style:italic; font-size:13px;
  color:var(--ink-soft); margin-top:8px;
}
.r-foot{
  display:flex; justify-content:center; gap:8px;
  margin-top:14px; padding-top:10px;
  border-top:1px solid var(--rule-faint);
  font-size:9.5px; letter-spacing:.2em; color:var(--ink-soft);
}
.docket-hint{
  font-family:var(--f-mono); font-size:11px; color:var(--ink-soft);
  margin-top:12px; letter-spacing:.04em;
}

/* ---------------- mobile docket bar ---------------- */

.dockbar{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  background:var(--ink); color:var(--paper);
  padding:10px 16px;
  align-items:center; justify-content:space-between; gap:12px;
}
.dockbar-count{ font-family:var(--f-mono); font-size:13px; letter-spacing:.04em; }
.dockbar-btn{
  font-family:var(--f-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  background:var(--stamp); color:var(--on-stamp); border:0;
  padding:10px 16px; cursor:pointer;
}

body.docket-open .docket{
  position:fixed; inset:auto 12px 70px 12px; z-index:39; top:auto;
}
body.docket-open .receipt{ max-height:min(60vh,540px); overflow:auto; }

/* ---------------- detail card ---------------- */

.card{
  border:0; padding:0; background:transparent;
  max-width:760px; width:min(760px, calc(100vw - 32px));
  margin:auto;
}
.card::backdrop{
  background:rgba(28,25,19,.55);
  backdrop-filter:blur(2px);
}
.card-inner{
  background:var(--paper);
  border:2px solid var(--ink);
  box-shadow:8px 10px 0 rgba(28,25,19,.28);
  padding:clamp(20px,3.5vw,40px) clamp(20px,4vw,48px) 28px;
  max-height:min(88vh, 900px);
  overflow:auto;
}

.card-head{
  display:flex; justify-content:space-between; align-items:center;
  gap:16px; margin-bottom:6px;
}
.card-meta{ display:flex; align-items:center; gap:14px; }
.card-no{
  font-family:var(--f-display); font-weight:600; font-size:24px;
  color:var(--ink-soft);
}
.card-close{
  font-family:var(--f-mono); font-size:12px; letter-spacing:.08em;
  background:none; border:2px solid var(--ink);
  padding:8px 14px; cursor:pointer; color:var(--ink);
  text-transform:uppercase;
}
.card-close:hover{ background:var(--ink); color:var(--paper); }

.card-title{
  font-family:var(--f-title); font-weight:600;
  font-size:clamp(28px,4.5vw,44px); line-height:1.12;
  margin:10px 0 6px;
  letter-spacing:-.01em;
}
.card-when{
  font-family:var(--f-mono); font-size:13.5px; letter-spacing:.06em;
  color:var(--stamp-dark); font-weight:700;
  margin-bottom:18px;
}

.card-photo{
  margin:0 0 20px;
  border:2px solid var(--ink);
  background:var(--stamp);
  line-height:0;
}
.card-photo img{
  width:100%; height:220px; object-fit:cover; display:block;
  filter:grayscale(1) contrast(1.08) brightness(1.04);
  mix-blend-mode:multiply;   /* two-colour riso treatment */
}

.card-body{ font-size:16.5px; line-height:1.62; }
.card-body p + p{ margin-top:.9em; }

.card-facts{
  margin:22px 0 4px;
  border-top:3px double var(--ink);
  display:grid; grid-template-columns:repeat(2,1fr); gap:0 28px;
}
.card-facts > div{
  display:flex; justify-content:space-between; gap:12px;
  padding:9px 0; border-bottom:1px solid var(--rule-faint);
}
.card-facts dt{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-soft); padding-top:3px;
}
.card-facts dd{ font-family:var(--f-title); font-size:15.5px; text-align:right; }

.card-access{
  font-family:var(--f-mono); font-size:13px; line-height:1.6;
  margin:16px 0 4px; color:var(--ink-soft);
}
.card-access b{ color:var(--stamp-dark); letter-spacing:.1em; }

.card-actions{
  margin-top:24px; display:flex; gap:14px; flex-wrap:wrap;
}
.save-btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:14px; letter-spacing:.05em;
  border:2px solid var(--ink); background:transparent; color:var(--ink);
  padding:12px 20px; cursor:pointer;
  transition:transform .15s ease;
}
.save-btn .save-ink{ font-size:16px; }
.save-btn:hover{ background:var(--ink); color:var(--paper); }
.save-btn[aria-pressed="true"]{
  background:var(--stamp); border-color:var(--stamp-dark); color:var(--on-stamp);
  transform:rotate(-1.2deg);
  box-shadow:3px 3px 0 rgba(165,54,23,.35);
}

.card-colophon{
  margin-top:26px; padding-top:12px;
  border-top:1px solid var(--rule-faint);
  font-family:var(--f-mono); font-size:10px; letter-spacing:.18em;
  color:var(--ink-soft); text-align:center;
}

/* ---------------- footer ---------------- */

.colophon{
  border-top:3px double var(--ink);
  padding:26px var(--gut) 40px;
  font-family:var(--f-mono); font-size:12px; line-height:1.7;
  color:var(--ink-soft);
  max-width:1360px; margin:0 auto;
}
.colophon strong{ color:var(--ink); letter-spacing:.14em; }
.colophon-type{ margin-top:6px; font-size:10.5px; letter-spacing:.06em; opacity:.8; }

/* ---------------- responsive ---------------- */

@media (max-width:1080px){
  .rule-head{ grid-template-columns:48px 118px minmax(0,1fr) 150px 100px 56px; }
  .row{ grid-template-columns:48px 118px minmax(0,1fr) 150px 100px 56px; }
  .sheet{ grid-template-columns:minmax(0,1fr) 280px; }
}

@media (max-width:880px){
  .mast-inner{ grid-template-columns:1fr; gap:14px; align-items:start; }
  .mast-stamp{ top:auto; bottom:-.1em; right:.05em; }
  .sheet{ grid-template-columns:1fr; }
  .docket{ position:static; padding-top:34px; }
  .q-count{ grid-column:1 / -1; text-align:left; justify-self:start; }
}

@media (max-width:700px){
  .rule-head{ display:none; }  /* ledger heads become row labels */

  .row{
    grid-template-columns:auto 1fr auto;
    grid-template-areas:
      "no  when   stamp"
      "open open   open"
      "venue venue price";
    row-gap:8px; column-gap:14px;
    padding:22px 0 20px;
  }
  .row-no{ grid-area:no; font-size:17px; }
  .row-when{ grid-area:when; }
  .row-when .row-day{ display:inline; margin-right:.6em; }
  .row-open{ grid-area:open; }
  .row-venue{ grid-area:venue; align-self:end; }
  .stamp{ grid-area:stamp; justify-self:end; }
  .row-price{ grid-area:price; align-self:end; font-size:22px; }
  .row.row-saved::before{ top:-6px; right:2px; }

  .query-inner{ grid-template-columns:1fr; gap:14px; }
  .q-count{ display:none; }

  body{ padding-bottom:64px; }  /* room for the dock bar */
  .dockbar{ display:flex; }
  body.docket-open .docket{ inset:auto 12px 66px 12px; }

  .card-facts{ grid-template-columns:1fr; }
  .card-photo img{ height:180px; }

  .topstrip span:nth-child(2), .topstrip span:nth-child(3){ display:none; }
}

/* ---------------- motion ---------------- */

@media (prefers-reduced-motion: no-preference){
  dialog[open] .card-inner{ animation:stamp-in .28s cubic-bezier(.2,1.4,.4,1) both; }
  @keyframes stamp-in{
    from{ transform:scale(1.06) rotate(-1deg); opacity:0; }
    to{ transform:scale(1) rotate(0); opacity:1; }
  }
  html{ scroll-behavior:smooth; }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ transition:none !important; animation:none !important; }
}