/* ===========================================================================
   Due Mari — majolica & Seminara.
   Not cream and terracotta. Real maiolica is graphic: flat saturated fields of
   colour painted onto a hard tin-glaze white, with the pattern kept to edges and
   grounds. The ground here is cool, not buttery — that single choice is what
   stops it reading as the default warm travel app.
   =========================================================================== */

:root {
  /* the tin glaze: an opaque white with a breath of grey-green in it, the way a
     fired stannic glaze actually sits. Never #FFF, never cream. */
  --ground: #F4F5F2;
  --raised: #FBFBF9;
  --sunk:   #E8EAE4;

  /* SQUILLACE — the base register. Calabria's ceramic town glazed white and painted
     in cobalt in deliberate imitation of Chinese porcelain, and blue has dominated its
     output since the 1800s. So this app is blue-on-white first; everything else is an
     accent, used the way a painter uses a second brush. */
  --cobalt:    #17427F;   /* the porcelain blue. Nav, links, actives, numbers, Sanchi's ink */
  --cobalt-lo: #2E6099;
  --azure:     #4E86B8;   /* the lighter wash — Seminara's azzurro, for second strokes */

  /* SEMINARA — greens, azure and one very particular yellow-orange, in contrast.
     Sparing: these are what the pignatàri put on a mask, not what they covered a plate in. */
  --green:     #3F7D4A;
  --yellow:    #DE8B24;   /* the giallo-arancio. Display sizes only — hot and rare */
  --yellow-tx: #8A5410;   /* the same, darkened until it passes contrast as text */
  --manganese: #5A3A46;   /* line work, the mask's features, Andrea's ink */
  --terra:     #B0533A;   /* rarest. hairlines and the three real warnings */

  --ink:   #22262B;
  --ink2:  #5B6169;
  --ink3:  #8A9098;
  --rule:  #D6D9D1;

  --ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  --tap: 44px;
  --pad: 16px;
  --r: 3px;                /* ceramic edges are barely rounded, not pill-shaped */
}

@media (prefers-color-scheme: dark) {
  :root {
    /* OLED-honest at 8% battery — a near-black ground, not a flood of cobalt */
    --ground: #111418; --raised: #191D22; --sunk: #0C0F12;
    --cobalt: #7FA8DC; --cobalt-lo: #6B93C6;
    --green: #7FB58C; --yellow: #E8BC4A; --yellow-tx: #E8BC4A;
    --manganese: #C09AA6; --terra: #E08A70;
    --ink: #ECEEF0; --ink2: #A8AEB6; --ink3: #767C84; --rule: #2A2F36;
  }
}
:root[data-theme="light"] { color-scheme: light }
:root[data-theme="dark"]  { color-scheme: dark }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent }

html, body {
  margin: 0; padding: 0;
  background: var(--ground); color: var(--ink);
  font-family: var(--ui);
  font-size: 16px;                       /* never smaller. this is read in sunlight */
  line-height: 1.5;
  overscroll-behavior-y: none;
  -webkit-text-size-adjust: 100%;
}

/* ======================================================================== *
   THE ORNAMENT
   Maiolica is not a palette, it is a craft: a white tin-glazed ground, painted
   borders framing panels, rosettes, hard outlines, flat colour. Colour alone
   just borrows the look. Everything below is drawn as inline SVG data URIs —
   no external request, no image weight, scales to any screen.
 * ======================================================================== */

/* The ground is glaze: clean, white, undecorated. A first pass put a grout grid
   here, which is a tile FLOOR — the wrong object. Squillace was imitating porcelain,
   and a porcelain plate is bare white with the painting driven to the rim and the
   centre. Everything ornamental in this app therefore happens at edges and in
   reserves, never as wallpaper behind text. */
body { background-color: var(--ground) }

/* ---- THE RUNNING SCROLL — the border that frames a Squillace plate.
   An acanthus scroll: a wave stem with palmettes turning alternately up and down,
   caught between two rim rules, with an orange berry at each crossing. This is the
   documented Squillace framing device, not a geometric approximation of one. Blue on
   white, because that is what the pignatàri were imitating: porcelain. */
.tile {
  height: 16px;
  background-repeat: repeat-x;
  background-size: auto 16px;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='48' height='16' viewBox='0 0 48 16'>\
<rect width='48' height='16' fill='%23F5F6F4'/>\
<path d='M0 2.4H48M0 13.6H48' stroke='%2317427F' stroke-width='0.9'/>\
<path d='M0 8C6 3.4 10 3.4 12 8C14 12.6 18 12.6 24 8C30 3.4 34 3.4 36 8C38 12.6 42 12.6 48 8' \
fill='none' stroke='%2317427F' stroke-width='1.25' stroke-linecap='round'/>\
<path d='M12 7.7C10.2 5.9 10.3 4.6 12 3.6C13.7 4.6 13.8 5.9 12 7.7Z' fill='%2317427F'/>\
<path d='M9.4 7.4C8.2 6.3 8.2 5.4 9.5 4.9C10.2 5.8 10.2 6.7 9.4 7.4Z' fill='%234E86B8'/>\
<path d='M14.6 7.4C15.8 6.3 15.8 5.4 14.5 4.9C13.8 5.8 13.8 6.7 14.6 7.4Z' fill='%234E86B8'/>\
<path d='M36 8.3C34.2 10.1 34.3 11.4 36 12.4C37.7 11.4 37.8 10.1 36 8.3Z' fill='%2317427F'/>\
<path d='M33.4 8.6C32.2 9.7 32.2 10.6 33.5 11.1C34.2 10.2 34.2 9.3 33.4 8.6Z' fill='%234E86B8'/>\
<path d='M38.6 8.6C39.8 9.7 39.8 10.6 38.5 11.1C37.8 10.2 37.8 9.3 38.6 8.6Z' fill='%234E86B8'/>\
<circle cx='24' cy='8' r='1.6' fill='%23DE8B24'/><circle cx='0' cy='8' r='1.6' fill='%23DE8B24'/>\
<circle cx='48' cy='8' r='1.6' fill='%23DE8B24'/></svg>");
}
.tile.thin {
  height: 7px; background-size: auto 7px;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='24' height='7' viewBox='0 0 24 7'>\
<rect width='24' height='7' fill='%23F5F6F4'/>\
<path d='M0 3.5C4 0.9 8 6.1 12 3.5C16 0.9 20 6.1 24 3.5' fill='none' stroke='%2317427F' stroke-width='1'/>\
<circle cx='12' cy='3.5' r='1' fill='%23DE8B24'/></svg>");
}

/* ---- THE FLOWER — the six-petal rosette painted at the centre of a plate and in
   the reserves of a border. Cobalt petals, a lighter azure heart, an orange eye.
   It marks sections and stands in for a bullet. */
.rosette {
  width: 20px; height: 20px; display: inline-block; vertical-align: -4px;
  background: no-repeat center/contain url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<g fill='%2317427F'>\
<ellipse cx='12' cy='5.4' rx='2.9' ry='4.6'/>\
<ellipse cx='12' cy='5.4' rx='2.9' ry='4.6' transform='rotate(60 12 12)'/>\
<ellipse cx='12' cy='5.4' rx='2.9' ry='4.6' transform='rotate(120 12 12)'/>\
<ellipse cx='12' cy='5.4' rx='2.9' ry='4.6' transform='rotate(180 12 12)'/>\
<ellipse cx='12' cy='5.4' rx='2.9' ry='4.6' transform='rotate(240 12 12)'/>\
<ellipse cx='12' cy='5.4' rx='2.9' ry='4.6' transform='rotate(300 12 12)'/></g>\
<circle cx='12' cy='12' r='3.6' fill='%234E86B8'/>\
<circle cx='12' cy='12' r='1.7' fill='%23DE8B24'/></svg>");
}

/* ---- a section head: band, then the words, with a rosette holding the line */
.head { margin: 30px 0 12px }
.head .tile { margin-bottom: 9px }
.head h2 { margin: 0; display: flex; align-items: center; gap: 8px }
.head h2::after {
  content: ""; flex: 1; height: 1px; background: var(--rule);
}

/* ---- the panel. Content sits in a painted frame, not a material-design box:
   square corners, a hairline in manganese the way a brush outlines a reserve,
   and the rank declared as a painted band across the top rather than a stripe
   down the side. */
.row {
  border: 1px solid var(--rule);
  border-left-width: 1px;
  border-radius: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
}
.row > * { padding-left: 13px; padding-right: 13px }
.row::before {
  content: ""; display: block; height: 5px; background: var(--rule);
}
.row[data-rank="pick"]::before { background: var(--cobalt) }
.row[data-rank="solid"]::before { background: var(--green) }
.row[data-rank="situational"]::before { background: var(--rule) }
.row[data-rank="skip"]::before { background: var(--terra) }
.row .nm { padding-top: 10px }
.row .meta { padding-bottom: 11px }

/* done. Not greyed into illegibility — you still want to read what you did on
   day twelve. The band goes green and the title takes a quiet rule through it. */
.row[data-done="true"]::before { background: var(--green) }
.row[data-done="true"] .nm { text-decoration: line-through; text-decoration-color: var(--green);
                             text-decoration-thickness: 2px; color: var(--ink2) }

/* A pick earns a painted sprig in the corner — the little three-leaf spray a
   maiolica painter drops into an empty reserve so the white does not sit idle.
   It is the difference between a card and a decorated one. */
.row[data-rank="pick"]::after {
  content: ""; position: absolute; top: 12px; right: 12px;
  width: 20px; height: 20px; opacity: .7; pointer-events: none;
  background: no-repeat center/contain url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path d='M12 22C12 16 12 10 12 4' stroke='%2317427F' stroke-width='1.3' fill='none' stroke-linecap='round'/>\
<path d='M12 15C8.5 14.4 6.6 12.2 6.8 9.4C9.8 9.6 11.8 11.7 12 15Z' fill='%2317427F'/>\
<path d='M12 15C15.5 14.4 17.4 12.2 17.2 9.4C14.2 9.6 12.2 11.7 12 15Z' fill='%234E86B8'/>\
<path d='M12 9.4C9.9 8.9 8.8 7.3 9 5.4C10.9 5.7 12 7.2 12 9.4Z' fill='%234E86B8'/>\
<path d='M12 9.4C14.1 8.9 15.2 7.3 15 5.4C13.1 5.7 12 7.2 12 9.4Z' fill='%2317427F'/>\
<circle cx='12' cy='3.4' r='1.7' fill='%23DE8B24'/></svg>");
}

/* ---- the overture: the art piece. A painted panel, framed on all four sides
   the way a maiolica plaque is, with the tile band top and bottom. This is the
   one place the app stops being useful and just is. */
.overture {
  background: var(--raised);
  border: 1px solid var(--manganese);
  padding: 0;
  margin: 16px 0 22px;
  max-width: none;
}
.overture .tile { height: 11px; background-size: auto 11px }
.overture .body {
  padding: 20px 22px;
  font: 400 18px/1.66 var(--serif);
  max-width: 34em;
}
.overture .body p:first-child::first-letter {
  float: left; font-size: 3.1em; line-height: .82; padding: 4px 9px 0 0;
  color: var(--cobalt); font-weight: 600;
}

/* ---- the drop of colour a chapter opens with */
.chapterhead { margin: 0 0 6px }
.chapterhead .tile { height: 18px; background-size: auto 18px; margin-bottom: 14px }

/* ------------------------------------------------------------------ layout */
#app { padding-bottom: calc(var(--tap) + 26px + env(safe-area-inset-bottom)) }
main { padding: var(--pad); max-width: 700px; margin: 0 auto }

/* ---------------------------------------------------------------- bottom bar */
nav.bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--raised);
  border-top: 1px solid var(--rule);
  padding-bottom: env(safe-area-inset-bottom);
}
nav.bar button {
  appearance: none; border: 0; background: none;
  min-height: var(--tap); padding: 6px 2px 8px;
  font: 600 11px/1.2 var(--ui); letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink3); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  border-top: 2px solid transparent; margin-top: -1px;
}
nav.bar button .g { font-size: 17px; line-height: 1 }
nav.bar button[aria-current="page"] { color: var(--cobalt); border-top-color: var(--cobalt) }

/* ------------------------------------------------------------------ type */
h1 { font: 400 27px/1.15 var(--serif); margin: 2px 0 4px; letter-spacing: -.01em }
h2 { font: 600 12px/1.3 var(--ui); letter-spacing: .13em; text-transform: uppercase;
     color: var(--ink2); margin: 26px 0 10px }
h3 { font: 600 16px/1.3 var(--ui); margin: 18px 0 6px }
.eyebrow { font: 600 11px/1 var(--ui); letter-spacing: .16em; text-transform: uppercase;
           color: var(--cobalt); margin: 0 0 8px }
.sub { color: var(--ink2); font-size: 14px; margin: 0 0 4px }

/* the narrative voice. Wider measure, serif, and deliberately not the same
   object as the menu — the wall between them is the whole design. */
.overture {
  font: 400 18px/1.62 var(--serif);
  margin: 14px 0 6px; max-width: 34em; color: var(--ink);
}
.overture p { margin: 0 0 .8em }
.overture p:last-child { margin-bottom: 0 }

/* ------------------------------------------------------------------ cards */
.row {
  display: block; width: 100%; text-align: left;
  background: var(--raised); border: 1px solid var(--rule); border-left: 3px solid var(--rule);
  border-radius: var(--r); padding: 11px 13px; margin: 0 0 8px;
  color: inherit; font: inherit; cursor: pointer;
}
.row[data-rank="pick"] { border-left-color: var(--cobalt) }
.row[data-rank="solid"] { border-left-color: var(--green) }
.row[data-rank="situational"] { border-left-color: var(--rule) }
.row[data-rank="skip"] { border-left-color: var(--terra); opacity: .82 }
.row .nm { font-weight: 650; font-size: 16px }
.row .one { color: var(--ink2); font-size: 14px; margin-top: 3px }
.row .meta { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 5px }

.chip {
  font: 600 10px/1 var(--ui); letter-spacing: .05em; text-transform: uppercase;
  padding: 4px 6px; border-radius: 2px; background: var(--sunk); color: var(--ink2);
  white-space: nowrap;
}
.chip.effort-climb, .chip.effort-uphill { background: color-mix(in srgb, var(--yellow) 22%, transparent); color: var(--yellow-tx) }
.chip.restores { background: color-mix(in srgb, var(--green) 18%, transparent); color: var(--green) }
.chip.unknown { background: transparent; border: 1px dashed var(--rule); color: var(--ink3) }
.chip.stale { background: color-mix(in srgb, var(--terra) 16%, transparent); color: var(--terra) }
.chip.cobalt { background: color-mix(in srgb, var(--cobalt) 14%, transparent); color: var(--cobalt) }

/* ---- photographs. A picture in a maiolica panel is a RESERVE: the painted white
   field the decoration is cleared away for. So it sits flush inside the frame with
   a hairline under it, not floating in a rounded card. */
.shot { margin: 0; padding: 0; background: var(--sunk) }
.shot img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2;
  object-fit: cover; border-bottom: 1px solid var(--rule);
}
.shot.hero img { aspect-ratio: 16 / 9 }
.shot figcaption {
  padding: 7px 13px 8px; font: 400 12.5px/1.45 var(--ui); color: var(--ink2);
  background: var(--raised); border-bottom: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline;
}
.shot .cred {
  font-size: 10.5px; color: var(--ink3); letter-spacing: .02em; margin-left: auto;
  white-space: nowrap;
}
.row > .shot { padding-left: 0; padding-right: 0 }

/* a hero sits above a chapter, framed by the scroll like a plate's cavetto */
.chapterhead .shot { border: 1px solid var(--rule); border-top: 0; margin-bottom: 14px }

/* the honest blank. Absence is a value, and it should look deliberate. */
.absent {
  border: 1px dashed var(--rule); border-radius: var(--r);
  padding: 10px 12px; color: var(--ink3); font-size: 14px; font-style: italic;
}

/* ------------------------------------------------------------------ trucco */
.trucco {
  background: var(--raised); border: 1px solid var(--cobalt);
  border-radius: var(--r); padding: 13px; margin: 0 0 10px;
  position: relative; overflow: hidden;
}
.trucco::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: repeating-linear-gradient(180deg, var(--cobalt) 0 6px, var(--yellow) 6px 12px);
}
.trucco .do { font-weight: 650; padding-left: 8px }
.trucco .why { color: var(--ink2); font-size: 14px; margin-top: 6px; padding-left: 8px }
.trucco dl { margin: 8px 0 0; padding-left: 8px; font-size: 13px; color: var(--ink2) }
.trucco dt { font-weight: 650; color: var(--ink3); font-size: 11px;
             letter-spacing: .08em; text-transform: uppercase; margin-top: 6px }

/* --------------------------------------------------------------- non vale */
.nonvale { border-left: 3px solid var(--terra); padding: 8px 0 8px 12px; margin: 0 0 12px }
.nonvale .what { font-weight: 650 }
.nonvale .why { color: var(--ink2); font-size: 14px; margin-top: 2px }
.nonvale .instead { color: var(--green); font-size: 14px; margin-top: 4px; font-weight: 600 }

/* ------------------------------------------------------------------- ORA */
.now-head { background: var(--raised); border: 1px solid var(--rule); border-radius: var(--r);
            padding: 13px; margin-bottom: 12px }
.now-day { font: 600 11px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--cobalt) }
.now-leg { font: 400 23px/1.2 var(--serif); margin: 5px 0 2px }
.now-facts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 9px;
             font-size: 13px; color: var(--ink2) }
.now-facts b { color: var(--ink); font-variant-numeric: tabular-nums }

.cond { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px }
.cond button {
  appearance: none; border: 1px solid var(--rule); background: var(--ground);
  border-radius: 2px; padding: 7px 9px; min-height: 36px;
  font: 600 12px var(--ui); color: var(--ink2); cursor: pointer;
}
.cond button[aria-pressed="true"] { background: var(--cobalt); border-color: var(--cobalt); color: #fff }

.daycard { border: 1px solid var(--cobalt); border-radius: var(--r); padding: 13px; margin-bottom: 12px;
           background: color-mix(in srgb, var(--cobalt) 5%, var(--raised)) }
.daycard .t { font: 400 19px/1.25 var(--serif); margin-bottom: 5px }

/* ------------------------------------------------------------- expenses */
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px }
.keypad button {
  appearance: none; border: 1px solid var(--rule); background: var(--raised);
  border-radius: var(--r); min-height: 58px; font: 500 23px var(--ui);
  color: var(--ink); cursor: pointer; font-variant-numeric: tabular-nums;
}
.keypad button:active { background: var(--sunk) }
.amount { font: 500 42px/1 var(--ui); font-variant-numeric: tabular-nums;
          text-align: right; padding: 14px 4px; color: var(--cobalt) }
.budget-bar { height: 8px; background: var(--sunk); border-radius: 2px; overflow: hidden; margin: 8px 0 }
.budget-bar i { display: block; height: 100%; background: var(--green) }
.budget-bar i.over { background: var(--terra) }

/* ----------------------------------------------------------------- NOI */
.feed-item { border-bottom: 1px solid var(--rule); padding: 10px 0; display: flex; gap: 10px }
.ink { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: 0 0 8px }
.ink.s { background: var(--cobalt) }     /* Sanchi — the lead pigment */
.ink.a { background: var(--manganese) }
.feed-item .when { color: var(--ink3); font-size: 12px; font-variant-numeric: tabular-nums }

.pill { display: inline-block; font: 600 11px var(--ui); padding: 4px 8px; border-radius: 2px;
        background: var(--sunk); color: var(--ink2) }
.pill.pending { background: color-mix(in srgb, var(--yellow) 25%, transparent); color: var(--yellow-tx) }

/* --------------------------------------------------------------- controls */
.filter {
  width: 100%; min-height: var(--tap); padding: 10px 12px; font: 400 16px var(--ui);
  background: var(--raised); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--r); margin-bottom: 12px;
}
details.shelf { border-bottom: 1px solid var(--rule); padding: 2px 0 }
details.shelf > summary {
  list-style: none; cursor: pointer; min-height: var(--tap);
  display: flex; align-items: center; justify-content: space-between;
  font: 600 12px var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--ink2);
}
details.shelf > summary::-webkit-details-marker { display: none }
details.shelf > summary::after { content: "+"; font-size: 17px; color: var(--ink3) }
details.shelf[open] > summary::after { content: "–" }

.btn {
  appearance: none; min-height: var(--tap); padding: 11px 15px; cursor: pointer;
  background: var(--cobalt); color: #fff; border: 0; border-radius: var(--r);
  font: 600 15px var(--ui);
}
.btn.ghost { background: transparent; color: var(--cobalt); border: 1px solid var(--cobalt) }
.smallnote { font-size: 13px; color: var(--ink3) }
a { color: var(--cobalt) }

/* the mask. drawn, not imaged — an apotropaic face is the icon, the empty state
   and the decay badge, so the ornament and the honesty rule are one object. */
.mask { width: 34px; height: 34px; display: block }
.empty { text-align: center; color: var(--ink3); padding: 34px 12px }
.empty .mask { margin: 0 auto 10px; opacity: .45 }