/* ==========================================================================
   הכלב שלנו — one stylesheet for every page.

   The look is a warm field notebook rather than a dashboard: espresso paper,
   one amber-family accent per dog, chunky targets meant for a thumb outdoors
   and a vertical day-rail that reads like a day unfolding. Deliberately not
   the cool navy of the sibling trips app -- a different job, a different feel.
   ========================================================================== */

:root{
  /* Warm paper, not white: a screen held in daylight in a garden. Surfaces sit
     *above* the ground rather than below it, so cards are the lightest thing
     on the page and the ground carries the tint. */
  --bg:#F6F1E7; --bg-2:#FFFDF8;
  --card:#FFFCF6; --card-2:#F1EADC; --card-3:#E7DFCD;
  --line:#E2D8C4; --line-soft:#EDE5D6;
  --ink:#241C12; --ink-2:#645843; --ink-3:#7A6D55;

  /* Two ambers: one to fill with, one to write in. A single amber cannot do
     both jobs on a light ground -- the fill wants saturation, the text wants
     contrast against cream. */
  --accent:#C97A1C; --accent-deep:#8A4C0D; --accent-ink:#2A1A06;
  --accent-soft:rgba(201,122,28,.13);

  --good:#2F7D32; --good-soft:rgba(47,125,50,.12);
  --mid:#98690A;  --mid-soft:rgba(152,105,10,.14);
  --bad:#B3402B;  --bad-soft:rgba(179,64,43,.10);

  /* The frosted bars, the modal backdrop and the lit-from-above button face,
     kept as tokens so the whole scheme can be changed from this block alone. */
  --veil:rgba(246,241,231,.86); --veil-2:rgba(255,252,246,.92);
  --scrim:rgba(52,38,18,.34);
  --raise-a:#FFFDF9; --raise-b:#F3ECDE;
  --tint:rgba(0,0,0,.018);

  /* The filled button's face, and the hairline rule behind the home header.
     Tokens so a theme can make either a gradient without touching a component. */
  --accent-grad:var(--accent);
  --rule:rgba(201,122,28,.07);

  /* How much of the bottom of the screen the tab bar occupies, safe area and
     all. Declared here as the shape it ought to be, then overwritten by the
     shell with the shape it actually is; everything that sits above the bar
     reads this one number rather than adding up its own. */
  --tabs-h:calc(69px + env(safe-area-inset-bottom));

  --radius:16px; --radius-sm:11px;
  --shadow:0 18px 40px -20px rgba(72,52,20,.30);
  --tap:52px;
  color-scheme:light;
}

/* ---------- לבן וזהב — pristine white, gold gradients ----------
   White paper rather than cream, so the gold has somewhere clean to sit. The
   ink warms very slightly rather than going pure black, which on true white
   reads as harsh. */
:root[data-theme="gold"]{
  --bg:#FFFFFF; --bg-2:#FFFFFF;
  --card:#FFFFFF; --card-2:#FAF6EC; --card-3:#F1E9D6;
  --line:#EBE1CB; --line-soft:#F4EEE0;
  --ink:#1B1813; --ink-2:#5A5344; --ink-3:#7C7565;

  /* The fill is a light leaf gold; the writing gold stays deeper, because it
     is thin text and has to clear 4.5:1 on the tinted chip it sits in. */
  --accent:#D8B547; --accent-deep:#7E6209; --accent-ink:#221900;
  --accent-soft:rgba(216,181,71,.16);

  --good:#2F7D32; --good-soft:rgba(47,125,50,.12);
  --mid:#9A7B12;  --mid-soft:rgba(154,123,18,.15);
  --bad:#B3402B;  --bad-soft:rgba(179,64,43,.10);

  --veil:rgba(255,255,255,.88); --veil-2:rgba(255,255,255,.94);
  --scrim:rgba(46,38,14,.32);
  --raise-a:#FFFFFF; --raise-b:#F8F2E4;
  --tint:rgba(0,0,0,.014);

  --accent-grad:linear-gradient(135deg,#F0DC9A 0%,#D8B547 48%,#BE9A2E 100%);
  --rule:rgba(216,181,71,.12);
  --shadow:0 18px 40px -20px rgba(160,130,45,.22);
}
:root[data-theme="gold"] body::before{
  background:
    radial-gradient(120% 70% at 50% -15%, rgba(216,181,71,.20), transparent 64%),
    radial-gradient(85% 55% at 100% 100%, rgba(240,220,154,.20), transparent 72%),
    radial-gradient(70% 45% at 0% 88%, rgba(216,181,71,.09), transparent 70%);
}
/* True white shows the grain far more than cream does. */
:root[data-theme="gold"] body::after{opacity:.05}

/* ---------- תכלת — white paper, light blue ----------
   White is the ground and the blue is the guest, which is the opposite of how
   this started: a saturated mid blue filling every button read as a corporate
   dashboard rather than a notebook. */
:root[data-theme="sky"]{
  --bg:#FFFFFF; --bg-2:#FFFFFF;
  --card:#FFFFFF; --card-2:#F4FAFE; --card-3:#E6F1F9;
  --line:#DCEAF4; --line-soft:#EDF5FB;
  --ink:#15222C; --ink-2:#4B5E6E; --ink-3:#5F7484;

  /* A light fill cannot carry white text, so the ink flips dark -- the same
     trade the gold makes. The writing blue stays deeper for the same reason
     the writing gold does: it is thin text, not a block. */
  --accent:#8CCBEC; --accent-deep:#26709F; --accent-ink:#0E2A3D;
  --accent-soft:rgba(140,203,236,.22);

  --good:#1F7A4D; --good-soft:rgba(31,122,77,.12);
  --mid:#9A6B0A;  --mid-soft:rgba(154,107,10,.14);
  --bad:#B3402B;  --bad-soft:rgba(179,64,43,.10);

  --veil:rgba(255,255,255,.88); --veil-2:rgba(255,255,255,.94);
  --scrim:rgba(20,40,56,.30);
  --raise-a:#FFFFFF; --raise-b:#EFF7FD;
  --tint:rgba(0,0,0,.012);

  --accent-grad:linear-gradient(135deg,#C2E5F7 0%,#8CCBEC 48%,#6FB8DF 100%);
  --rule:rgba(140,203,236,.16);
  --shadow:0 18px 40px -20px rgba(40,95,135,.20);
}
:root[data-theme="sky"] body::before{
  background:
    radial-gradient(120% 70% at 50% -15%, rgba(140,203,236,.26), transparent 64%),
    radial-gradient(85% 55% at 100% 100%, rgba(194,229,247,.24), transparent 72%),
    radial-gradient(70% 45% at 0% 85%, rgba(140,203,236,.12), transparent 70%);
}
:root[data-theme="sky"] body::after{opacity:.05}


*{box-sizing:border-box}
[hidden]{display:none !important}
/* No view here is ever wider than the screen, and in a right-to-left page any
   stray overflow does not just add a scrollbar -- it moves the scroll origin
   and drags the whole layout sideways, clipping the header and the tab bar.
   `clip` rather than `hidden` because `hidden` would make this a scroll
   container and break the sticky header. */
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip}
body{overflow-x:clip}
body{
  margin:0; min-height:100dvh; background:var(--bg); color:var(--ink);
  font-family:"Assistant",-apple-system,"Segoe UI",Arial,sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
  overflow-wrap:anywhere;
}
/* warm glow + a fine grain, so large dark areas have some tooth */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(120% 70% at 50% -15%, rgba(201,122,28,.10), transparent 62%),
    radial-gradient(80% 50% at 100% 100%, rgba(179,64,43,.045), transparent 70%);
}
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.10;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
body > *{position:relative; z-index:1}

a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:10px}
::selection{background:var(--accent); color:var(--accent-ink)}

h1,h2,h3{font-family:"Suez One",Georgia,serif; font-weight:400; letter-spacing:.005em; margin:0}
.num{font-family:"DM Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums; direction:ltr; display:inline-block}

.wrap{max-width:760px; margin-inline:auto; padding-inline:18px; width:100%}
.eyebrow{
  display:flex; align-items:center; gap:9px; font-size:.7rem; font-weight:700;
  letter-spacing:.19em; color:var(--ink-3); text-transform:uppercase;
}
.eyebrow i{display:block; width:26px; height:1px; background:var(--accent); font-style:normal}
.muted{color:var(--ink-2)}
.dim{color:var(--ink-3)}
.tiny{font-size:.78rem}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:46px; padding:11px 18px; border-radius:var(--radius-sm);
  border:1px solid var(--line); background:var(--card-2); color:var(--ink);
  font-weight:600; cursor:pointer; transition:transform .12s, border-color .15s, background .15s;
  -webkit-tap-highlight-color:transparent; white-space:nowrap; flex:none;
}
.btn:hover{border-color:var(--ink-3); background:var(--card-3)}
.btn:active{transform:scale(.97)}
.btn[disabled]{opacity:.5; cursor:default; transform:none}
.btn--go{background:var(--accent-grad); border-color:var(--accent); color:var(--accent-ink); font-weight:700}
.btn--go:hover{filter:brightness(1.06)}
.btn--ghost{background:transparent}
.btn--bad{border-color:var(--bad); color:var(--bad); background:transparent}
.btn--bad:hover{background:var(--bad-soft); border-color:var(--bad)}
.btn--sm{min-height:36px; padding:6px 12px; font-size:.85rem; border-radius:9px}

/* ---------- a page's own header ----------
   One block for every tab, so switching between them does not nudge
   everything underneath up and down. The min-height holds whether or not the
   page carries an action, which is what made גלריה and יעדים disagree: a
   46px button on one and a 36px one on the other. */
.phead{
  display:flex; align-items:center; gap:10px;
  min-height:68px; padding:14px 0 10px;
}
.phead h2{font-size:1.4rem; flex:1; min-width:0}

/* A lean action: a mark and a word, not a button.

   This is the page's own verb -- "one more of these" -- and it should not
   carry the weight of a filled button, which in this app means "commit what
   you just typed". A form's submit stays a real button; these do not.
   The hit area is a full 44px even though almost none of it is painted:
   thumbs outdoors do not aim well. */
.lnk{
  display:inline-flex; align-items:center; gap:6px; flex:none;
  min-height:44px; padding:0 8px; margin:0;
  background:none; border:0; border-radius:10px;
  color:var(--accent-deep); font:inherit; font-size:.92rem; font-weight:700;
  cursor:pointer; white-space:nowrap; -webkit-tap-highlight-color:transparent;
}
.lnk i{font-style:normal; font-size:1.15rem; line-height:1; font-weight:400}
.lnk:hover{background:var(--accent-soft)}
.lnk:active{transform:scale(.97)}
.lnk[disabled]{opacity:.5; cursor:default; transform:none}
.btn--wide{width:100%}
.btn--icon{min-height:40px; width:40px; padding:0; border-radius:10px}

/* ---------- fields ---------- */
label.fl{display:block; font-size:.72rem; font-weight:700; letter-spacing:.11em;
         color:var(--ink-3); margin-bottom:6px; text-transform:uppercase}
.inp{
  width:100%; padding:12px 14px; border-radius:var(--radius-sm);
  border:1px solid var(--line); background:var(--bg-2); color:var(--ink); font-size:1rem;
}
.inp:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
textarea.inp{min-height:86px; resize:vertical; line-height:1.5}
select.inp{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:18px calc(50% + 1px),23px calc(50% + 1px);
  background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-inline-start:38px;
}
input[type=time].inp,input[type=date].inp{direction:ltr; text-align:start; min-height:48px}
.field + .field{margin-top:14px}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:12px}

.err{
  margin-top:14px; padding:10px 13px; border-radius:10px; font-size:.88rem;
  background:var(--bad-soft); border:1px solid var(--bad); color:#F1B3A4;
}
.ok-note{
  margin-top:14px; padding:10px 13px; border-radius:10px; font-size:.88rem;
  background:var(--good-soft); border:1px solid var(--good); color:#BEE0BA;
}

/* ---------- pills & chips ---------- */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-size:.78rem;
  padding:4px 11px; border-radius:999px; border:1px solid var(--line);
  color:var(--ink-2); background:var(--tint); white-space:nowrap;
}
.pill--open{border-color:var(--good); color:var(--good); background:var(--good-soft)}
.pill--lock{border-color:var(--line); color:var(--ink-3)}
.pill--last{border-color:var(--accent); color:var(--accent-deep); background:var(--accent-soft); font-weight:700}
.pill--ok{border-color:var(--good); color:var(--good); background:var(--good-soft)}
.pill--part{border-color:var(--mid); color:var(--mid); background:var(--mid-soft)}
.pill--fail{border-color:var(--bad); color:var(--bad); background:var(--bad-soft)}
.pill--place-out{border-color:var(--good); color:var(--good); background:var(--good-soft)}
.pill--place-in{border-color:var(--accent); color:var(--accent-deep); background:var(--accent-soft)}

.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{
  display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:999px;
  border:1px solid var(--line); background:var(--card); color:var(--ink-2);
  font-size:.86rem; cursor:pointer; transition:.14s; -webkit-tap-highlight-color:transparent;
  /* a chip must keep its own width: in a nowrap scroller a shrinkable flex item
     collapses to one character per line rather than overflowing, which is what
     the horizontal scroll is there to allow */
  flex:none; white-space:nowrap;
}
.chip:hover{border-color:var(--ink-3); color:var(--ink)}
.chip[aria-pressed=true]{background:var(--accent-soft); border-color:var(--accent); color:var(--accent-deep); font-weight:700}
.chip--scroll{overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; scrollbar-width:none}
.chip--scroll::-webkit-scrollbar{display:none}

/* ---------- cards ---------- */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px}
.sect{font-size:.7rem; font-weight:700; letter-spacing:.17em; color:var(--ink-3);
      margin:0 0 12px; text-transform:uppercase}
.sect:not(:first-child){margin-top:30px}
.empty{
  padding:28px 18px; text-align:center; color:var(--ink-3); font-size:.9rem;
  border:1px dashed var(--line); border-radius:var(--radius); background:var(--tint);
}
.empty b{display:block; color:var(--ink-2); font-size:1rem; margin-bottom:4px; font-weight:600}

/* ==========================================================================
   the app shell
   ========================================================================== */
.app{padding-bottom:calc(var(--tabs-h) + 15px)}

/* `viewport-fit=cover` lets the page run under the iPhone's status bar and
   notch, which the bottom bar already allows for. The header did not, so on an
   installed copy the dog's name sat under the clock. The veil still extends up
   behind the status bar -- that is the point -- but the content starts below
   it. Note the status-bar *style* meta is captured by iOS at install time, so
   this padding is the fix that reaches a phone that already has the app. */
.hdr{
  position:sticky; top:0; z-index:30; background:var(--veil);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top, 0px);
}
.hdr__in{display:flex; align-items:center; gap:12px; padding:12px 18px;
         max-width:760px; margin-inline:auto}
.hdr__dog{
  display:flex; align-items:center; gap:10px; min-width:0; flex:1;
  background:none; border:0; padding:4px 6px; margin-inline-start:-6px;
  border-radius:12px; color:inherit; cursor:pointer; text-align:start;
  -webkit-tap-highlight-color:transparent; font:inherit;
}
.hdr__dog:hover{background:var(--card-2)}
.hdr__dog:active{transform:scale(.99)}


/* ---------- picking a look ---------- */
.themes{display:flex; flex-direction:column; gap:9px}
.theme{
  display:flex; align-items:center; gap:13px; width:100%; padding:11px 13px;
  border:1px solid var(--line); border-radius:13px; background:var(--card-2);
  cursor:pointer; color:inherit; font:inherit; text-align:start;
}
.theme:hover{border-color:var(--accent)}
.theme[aria-pressed=true]{border-color:var(--accent); background:var(--accent-soft)}
.theme[aria-pressed=true] .theme__id b{color:var(--accent-deep)}
/* Three bands rather than three dots: a theme is a ground and two inks, and
   the ground is most of what you actually see. Weighted roughly the way the
   screen is -- the deep colour is thin text, so an even third of the chip
   made every theme look darker than it turns out to be. */
.theme__sw{
  display:flex; width:62px; height:38px; border-radius:9px; overflow:hidden;
  border:1px solid var(--line); flex:none;
}
.theme__sw i{display:block}
.theme__sw i:nth-child(1){flex:3}
.theme__sw i:nth-child(2){flex:1.4}
.theme__sw i:nth-child(3){flex:.6}
.theme__id b{display:block; font-size:.98rem}
.theme__id small{display:block; font-size:.76rem; color:var(--ink-3); margin-top:2px}

/* ---------- the space menu ---------- */
.menu{display:flex; flex-direction:column; gap:2px; margin:6px 0 0}
.menu__i{
  display:flex; align-items:center; gap:13px; width:100%; padding:14px 12px;
  border:0; border-radius:13px; background:none; color:inherit; cursor:pointer;
  font:inherit; font-size:1rem; text-align:start; text-decoration:none;
}
.menu__i:hover{background:var(--card-2)}
.menu__i i{font-style:normal; font-size:1.25rem; width:26px; text-align:center; flex:none}
.menu__i small{display:block; font-size:.76rem; color:var(--ink-3); margin-top:2px}
.menu__sep{height:1px; background:var(--line); margin:8px 4px}
.hdr__emoji{font-size:1.6rem; line-height:1; flex:none}
/* A chosen photo stands in for the emoji at the same footprint, so the header
   never changes height when one is set or cleared. */
.hdr__cover{
  display:block; width:34px; height:34px; border-radius:50%; object-fit:cover; flex:none;
  border:1.5px solid var(--accent); background:var(--card-2);
}
.hdr__name{font-family:"Suez One",Georgia,serif; font-size:1.25rem; line-height:1.1;
           white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hdr__share{min-height:36px; width:36px; border-radius:10px; flex:none; color:var(--ink-2)}
.hdr__share:hover{color:var(--accent-deep); border-color:var(--accent)}
.sharelink{
  padding:11px 13px; border-radius:11px; border:1px solid var(--line);
  background:var(--bg-2); font-size:.82rem; direction:ltr; text-align:left;
  overflow-wrap:anywhere; font-family:"DM Mono",monospace;
}
.sharemsg{
  padding:12px 14px; border-radius:11px; border:1px solid var(--line);
  background:var(--bg-2); font-size:.86rem; white-space:pre-wrap; line-height:1.5;
  color:var(--ink-2); max-height:180px; overflow-y:auto;
}
.save{font-size:.72rem; color:var(--ink-3); white-space:nowrap; padding:3px 9px;
      border-radius:999px; border:1px solid transparent}
.save[data-s=offline]{color:var(--bad); border-color:var(--bad)}
.save[data-s=error]{color:var(--bad); border-color:var(--bad)}
.save[data-s=saving],.save[data-s=pending]{color:var(--accent-deep)}

/* bottom tab bar — thumb reach, not a sidebar.

   Its height is published as --tabs-h by the shell, measured rather than
   assumed: anything that has to sit exactly on top of it (the assistant's
   composer) cannot be carrying its own guess at how tall it is. */
.tabs{
  position:fixed; inset-inline:0; bottom:0; z-index:40;
  background:var(--veil-2); backdrop-filter:blur(16px);
  border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom);
}
/* Column-per-tab rather than a fixed count: the bar had been pinned at four
   and kept three-quarters of the width when settings moved into the space
   menu, leaving an empty quarter. */
.tabs__in{
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
  max-width:760px; margin-inline:auto;
}
.tab{
  display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 4px 12px;
  background:none; border:0; cursor:pointer; color:var(--ink-3); font-size:.72rem;
  font-weight:600; letter-spacing:.03em; transition:color .15s; position:relative;
  -webkit-tap-highlight-color:transparent;
}
.tab i{font-style:normal; font-size:1.5rem; line-height:1; filter:grayscale(1) opacity(.6); transition:.15s}
.tab[aria-selected=true]{color:var(--accent-deep)}
.tab[aria-selected=true] i{filter:none; transform:translateY(-1px)}
.tab[aria-selected=true]::before{
  content:""; position:absolute; top:0; inset-inline:28%; height:2px;
  background:var(--accent); border-radius:0 0 3px 3px;
}

/* ---------- the journal's two views ---------- */
.seg{
  display:flex; gap:3px; padding:3px; width:max-content; margin:14px auto 2px;
  border-radius:999px; border:1px solid var(--line); background:var(--card-2);
}
.seg__btn{
  border:0; background:transparent; padding:7px 20px; border-radius:999px;
  font-weight:600; font-size:.9rem; color:var(--ink-2); cursor:pointer; transition:.15s;
  -webkit-tap-highlight-color:transparent;
}
.seg__btn[aria-selected=true]{
  background:var(--card); color:var(--ink); box-shadow:0 1px 3px rgba(72,52,20,.14);
}

/* ---------- date strip ---------- */
.datebar{display:flex; align-items:center; gap:8px; padding:14px 0 4px}
.datebar__d{flex:1; text-align:center}
.datebar__day{font-family:"Suez One",Georgia,serif; font-size:1.12rem}
.datebar__sub{font-size:.74rem; color:var(--ink-3)}

/* ---------- quick log ---------- */
/* Leaner than they were: the grid is the busiest thing on the screen and the
   buttons were carrying more height than their content needed. Still a
   comfortable thumb target -- 62px of button plus the gap clears the 44px
   minimum with room to spare -- but more of them fit above the fold. */
.quick{display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:8px; margin-top:12px}
.qbtn{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; min-height:62px; padding:8px 5px; border-radius:12px; cursor:pointer;
  border:1px solid var(--line); background:linear-gradient(180deg,var(--raise-a),var(--raise-b));
  color:var(--ink); font-weight:600; font-size:.8rem; line-height:1.25; text-align:center;
  transition:transform .11s, border-color .15s, box-shadow .15s;
  -webkit-tap-highlight-color:transparent; overflow:hidden;
}
.qbtn em{font-style:normal; font-size:1.3rem; line-height:1}
.qbtn small{color:var(--ink-3); font-size:.64rem; font-weight:500;
            font-family:"DM Mono",monospace; direction:ltr}
.qbtn:hover{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
/* the stamp: a tap should feel like pressing a physical counter */
.qbtn:active{transform:scale(.94)}
.qbtn.stamped{animation:stamp .42s ease}
@keyframes stamp{
  0%{transform:scale(1)} 26%{transform:scale(.9)}
  55%{transform:scale(1.05); border-color:var(--accent); box-shadow:0 0 0 6px var(--accent-soft)}
  100%{transform:scale(1)}
}
.qbtn--drill{background:linear-gradient(180deg,var(--raise-a),var(--raise-b));}

/* A type that asks where takes two columns and carries its own pair of
   targets. It is not itself a button -- the two zones inside it are. */
.qbtn--split{
  grid-column:span 2; cursor:default; gap:2px; padding:7px 7px 7px;
}
.qbtn--split:hover{border-color:var(--line); box-shadow:none}
.qbtn__id{display:flex; align-items:center; gap:7px; font-weight:600}
.qbtn__id em{font-style:normal; font-size:1.15rem; line-height:1}
.qbtn__zones{display:grid; grid-template-columns:1fr 1fr; gap:5px; width:100%; margin-top:3px}
.qbtn__zone{
  display:flex; align-items:center; justify-content:center; gap:5px;
  min-height:34px; padding:5px 4px; border-radius:9px; cursor:pointer;
  border:1px solid var(--line); background:var(--card); color:var(--ink);
  font:inherit; font-size:.78rem; font-weight:600;
  transition:transform .11s, border-color .15s, background .15s;
  -webkit-tap-highlight-color:transparent;
}
.qbtn__zone:hover{border-color:var(--accent); background:var(--accent-soft)}
.qbtn__zone:active{transform:scale(.94)}
.qbtn--split.stamped,.qbtn__zone.stamped{animation:stamp .42s ease}

/* the same pair, as a choice inside a sheet */
.rbtn--out[aria-pressed=true]{border-color:var(--good); background:var(--good-soft); color:var(--good)}
.rbtn--in[aria-pressed=true]{border-color:var(--accent); background:var(--accent-soft); color:var(--accent-deep)}
.qbtn--drill::after{
  content:""; position:absolute; inset-block:0; inset-inline-start:0; width:3px; background:var(--accent);
}

/* ---------- the "you are filtered" bar ----------
   Deliberately outside the folded panel and impossible to miss: a lens the
   reader has forgotten about is indistinguishable from missing data. */
.lens{
  display:flex; align-items:center; gap:10px; width:100%; margin-top:12px;
  padding:9px 13px; border-radius:11px; cursor:pointer; text-align:start;
  border:1px solid var(--accent); background:var(--accent-soft); color:var(--ink);
  font:inherit; font-size:.85rem; -webkit-tap-highlight-color:transparent;
}
.lens:hover{background:var(--accent-soft); filter:brightness(.98)}
.lens__what{flex:1; min-width:0}
.lens__what b{font-weight:700}
.lens__n{
  flex:none; font-size:.78rem; color:var(--accent-deep); background:var(--card);
  border-radius:999px; padding:2px 9px; border:1px solid var(--accent);
}
.lens__x{flex:none; font-size:.8rem; font-weight:700; color:var(--accent-deep); white-space:nowrap}

/* ---------- the folded panel ---------- */
.panel{
  margin-top:16px; border:1px solid var(--line); border-radius:13px;
  background:var(--card); overflow:hidden;
}
.panel__head{
  display:flex; align-items:center; gap:9px; padding:11px 14px; cursor:pointer;
  list-style:none; -webkit-tap-highlight-color:transparent;
}
.panel__head::-webkit-details-marker{display:none}
.panel__head:hover{background:var(--card-2)}
.panel__title{flex:1; min-width:0; font-size:.88rem; font-weight:600; color:var(--ink-2)}
.panel__mini{font-size:.78rem; color:var(--ink-3); white-space:nowrap}
.panel__chev{display:grid; place-items:center; color:var(--ink-3); transition:transform .18s}
.panel[open] .panel__chev{transform:rotate(180deg)}
.panel[open] .panel__head{border-bottom:1px solid var(--line-soft)}
.panel__body{padding:2px 14px 12px}
/* inside the panel these lose the margins they had as standalone blocks */
.panel__body .weekstrip{margin-top:12px}
.panel__body .stats{padding-top:12px}
.panel__body .chips{margin-top:12px !important}

/* ---------- stats strip ---------- */
.stats{display:flex; gap:8px; overflow-x:auto; padding:14px 0 2px; scrollbar-width:none}
.stats::-webkit-scrollbar{display:none}
.stat{
  flex:none; min-width:88px; padding:9px 12px; border-radius:12px;
  border:1px solid var(--line); background:var(--card); white-space:nowrap;
}
.stat b{display:block; font-family:"DM Mono",monospace; font-size:1.1rem; direction:ltr;
        font-variant-numeric:tabular-nums}
.stat span{display:block; font-size:.72rem; color:var(--ink-3)}

/* ==========================================================================
   the day rail — the thing you remember about this app
   ========================================================================== */
/* The gutter, measured from the outer (inline-start) edge inward:
      44px clock · 6px · 11px dot on the line · 7px · then the card.
   Change one number here and the two below have to move with it. */
.rail{position:relative; margin-top:8px; padding-inline-start:68px}
.rail::before{
  content:""; position:absolute; inset-inline-start:55px; inset-block:6px 10px; width:2px;
  background:linear-gradient(180deg,transparent,var(--line) 8%,var(--line) 92%,transparent);
}
.ent{position:relative; padding:0 0 12px}
/* The gutter clock.

   It must NOT carry `.num`'s `direction:ltr`: `inset-inline-start` on an
   absolutely positioned box resolves against that box's own direction, so an
   LTR clock inside this RTL rail pins itself to the left edge -- off the screen
   entirely, since the gutter the rail reserves is on the right. The digits
   render left-to-right regardless, because the bidi algorithm already treats
   "07:10" as one European number run. */
.ent__time{
  position:absolute; inset-inline-start:-68px; top:9px; width:44px; text-align:center;
  font-family:"DM Mono",monospace; font-size:.78rem; color:var(--ink-3); direction:rtl;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.ent__dot{
  position:absolute; inset-inline-start:-18px; top:14px; width:11px; height:11px; border-radius:50%;
  background:var(--card-3); border:2px solid var(--line); z-index:2;
}
.ent__body{
  display:flex; gap:11px; align-items:flex-start; padding:11px 13px; border-radius:13px;
  border:1px solid var(--line); background:var(--card); cursor:pointer;
  transition:border-color .15s, background .15s, transform .12s; width:100%; text-align:start;
  -webkit-tap-highlight-color:transparent;
}
.ent__body:hover{border-color:var(--ink-3); background:var(--card-2)}
.ent__body:active{transform:scale(.99)}
.ent__emoji{font-size:1.3rem; line-height:1.2; flex:none}
.ent__main{flex:1; min-width:0}
.ent__title{font-weight:700; font-size:.97rem; display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.ent__who{font-size:.75rem; color:var(--ink-3); font-weight:500}
.ent__note{font-size:.86rem; color:var(--ink-2); margin-top:3px; white-space:pre-wrap}
.ent__thumb{
  width:52px; height:52px; border-radius:10px; object-fit:cover; flex:none;
  border:1px solid var(--line); background:var(--card-2);
}
.ent--drill .ent__dot{border-color:var(--accent); background:var(--accent)}
.ent--media .ent__dot{border-color:var(--ink-2)}

.ent--now .ent__dot{box-shadow:0 0 0 4px var(--accent-soft)}

.nowline{position:relative; height:0; margin:2px 0 14px}
.nowline::before{
  content:""; position:absolute; inset-inline:-68px 0; top:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--bad),transparent);
}
.nowline span{
  position:absolute; inset-inline-start:-68px; top:-8px; font-size:.62rem; color:var(--bad);
  background:var(--bg); padding:0 5px; font-weight:700; letter-spacing:.08em;
}

.daysep{
  display:flex; align-items:center; gap:10px; margin:22px 0 12px;
  font-size:.76rem; font-weight:700; letter-spacing:.1em; color:var(--ink-3);
}
.daysep::after{content:""; flex:1; height:1px; background:var(--line)}

/* ---------- gallery ---------- */
.grid-m{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:11px}
.mcard{
  position:relative; border-radius:14px; overflow:hidden; border:1px solid var(--line);
  background:var(--card); cursor:pointer; transition:transform .14s, border-color .15s;
  -webkit-tap-highlight-color:transparent;
}
.mcard:hover{transform:translateY(-2px); border-color:var(--accent)}
.mcard__img{display:block; width:100%; aspect-ratio:1; object-fit:cover; background:var(--card-2)}
.mcard__meta{padding:8px 11px 10px}
.mcard__cap{font-size:.84rem; line-height:1.35; max-height:2.7em; overflow:hidden}
.mcard__sub{font-size:.7rem; color:var(--ink-3); margin-top:3px;
            display:flex; gap:6px; align-items:center}
.mcard__play{
  position:absolute; top:8px; inset-inline-end:8px; background:rgba(28,20,8,.66);
  color:#FFF8EC;
  border-radius:999px; padding:2px 9px; font-size:.7rem; font-family:"DM Mono",monospace;
  direction:ltr; backdrop-filter:blur(4px);
}

/* ---------- attachments on an entry ---------- */
.attgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:9px}
.att{position:relative}
.att__img{
  display:block; width:100%; aspect-ratio:1; padding:0; border-radius:12px; overflow:hidden;
  border:1px solid var(--line); background:var(--card-2); cursor:pointer; position:relative;
}
.att__img img{width:100%; height:100%; object-fit:cover; display:block}
.att__none{display:grid; place-items:center; height:100%; font-size:1.6rem; opacity:.5}
.att__play,.att__cmt{
  position:absolute; bottom:6px; font-size:.68rem; font-family:"DM Mono",monospace; direction:ltr;
  padding:2px 7px; border-radius:999px; background:rgba(28,20,8,.66); color:#FFF8EC;
}
.att__play{inset-inline-end:6px}
.att__cmt{inset-inline-start:6px; font-family:inherit}
.att__act{
  position:absolute; top:-6px; inset-inline-start:-6px; width:26px; height:26px; border-radius:50%;
  border:2px solid var(--card); background:var(--bad); color:#fff; font-size:.85rem; font-weight:700;
  cursor:pointer; display:grid; place-items:center; line-height:1;
}
.att__act--add{background:var(--accent); color:var(--accent-ink)}
/* the strip inside an entry's own sheet */
.attrow{display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none}
.attrow::-webkit-scrollbar{display:none}
.attrow .att{flex:none; width:72px}
.attrow .att__img{border-radius:10px}

/* ---------- comments on a photo or video ---------- */
.cmts{display:flex; flex-direction:column; gap:8px; margin-top:6px}
.cmt{
  padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:var(--card-2);
  position:relative;
}
.cmt__who{font-size:.76rem; font-weight:700; color:var(--ink-2); display:flex; gap:8px; align-items:baseline}
.cmt__who .num{font-weight:400; color:var(--ink-3); font-size:.72rem}
.cmt__text{margin-top:3px; font-size:.92rem; white-space:pre-wrap}
.cmt--trainer{border-color:var(--accent); background:var(--accent-soft)}
.cmt__del{
  position:absolute; top:8px; inset-inline-start:8px; background:none; border:0;
  color:var(--ink-3); cursor:pointer; font-size:.9rem; padding:2px 6px;
}
.cmt__del:hover{color:var(--bad)}

/* ---------- sheet ---------- */
.scrim{
  position:fixed; inset:0; z-index:60; background:var(--scrim);
  backdrop-filter:blur(3px); animation:fade .2s ease;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{
  position:fixed; inset-inline:0; bottom:0; z-index:61; max-height:92dvh; overflow-y:auto;
  background:var(--card); border-radius:22px 22px 0 0; border:1px solid var(--line);
  border-bottom:0; box-shadow:var(--shadow); animation:up .26s cubic-bezier(.22,1,.36,1);
  padding:10px 18px calc(24px + env(safe-area-inset-bottom));
  max-width:760px; margin-inline:auto;
}
@keyframes up{from{transform:translateY(16px); opacity:.4}to{transform:none; opacity:1}}
.sheet__grip{width:38px; height:4px; border-radius:99px; background:var(--line);
             margin:4px auto 14px}
.sheet__head{display:flex; align-items:center; gap:10px; margin-bottom:16px}
.sheet__title{font-family:"Suez One",Georgia,serif; font-size:1.3rem; flex:1}
.sheet__foot{display:flex; gap:10px; margin-top:20px}
.sheet__foot .btn{flex:1}

/* three big result buttons — the trainer's whole vocabulary */
.results{display:grid; grid-template-columns:repeat(3,1fr); gap:9px}
#place.results{grid-template-columns:repeat(2,1fr)}
.rbtn{
  display:flex; flex-direction:column; align-items:center; gap:5px; padding:14px 6px;
  border-radius:13px; border:1px solid var(--line); background:var(--card-2);
  cursor:pointer; font-weight:700; font-size:.85rem; transition:.14s;
}
.rbtn em{font-style:normal; font-size:1.4rem}
.rbtn[aria-pressed=true][data-r=ok]{border-color:var(--good); background:var(--good-soft); color:var(--good)}
.rbtn[aria-pressed=true][data-r=part]{border-color:var(--mid); background:var(--mid-soft); color:var(--mid)}
.rbtn[aria-pressed=true][data-r=fail]{border-color:var(--bad); background:var(--bad-soft); color:var(--bad)}

.stepper{display:flex; align-items:center; gap:10px}
.stepper .btn{width:44px; min-height:44px; padding:0; font-size:1.2rem}
.stepper b{font-family:"DM Mono",monospace; font-size:1.2rem; min-width:34px; text-align:center}
/* The number is an input, so it can be typed as well as nudged -- and it has
   to *look* like one. The first attempt used the same near-white well as the
   full-width fields, which measures 1.01:1 against the sheet behind it: a
   field nobody can see is a field nobody types in. Hence a genuinely recessed
   well, a heavier rule and a size worth aiming a thumb at. */
.stepper__n{
  width:92px; flex:none; text-align:center; font-family:"DM Mono",monospace;
  font-size:1.25rem; font-weight:500; font-variant-numeric:tabular-nums; direction:ltr;
  padding:11px 6px; border-radius:var(--radius-sm);
  border:1.5px solid var(--line); background:var(--card-2); color:var(--ink);
  box-shadow:inset 0 2px 4px rgba(72,52,20,.10);
  -webkit-appearance:none; appearance:none;
}
.stepper__n:hover{border-color:var(--ink-3)}
.stepper__n:focus{
  outline:none; border-color:var(--accent); background:var(--bg-2);
  box-shadow:0 0 0 3px var(--accent-soft);
}

/* ---------- toast ---------- */
.toast{
  position:fixed; inset-inline:0; bottom:calc(var(--tabs-h) + 15px); z-index:70;
  display:flex; justify-content:center; pointer-events:none; padding-inline:18px;
}
.toast__in{
  display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:13px;
  background:var(--card-3); border:1px solid var(--line); box-shadow:var(--shadow);
  font-size:.88rem; pointer-events:auto; animation:up .22s ease; max-width:100%;
}
.toast__in b{font-weight:700}
.toast__in button{
  background:none; border:0; color:var(--accent-deep); font-weight:700; cursor:pointer;
  padding:4px 2px; font-size:.86rem;
}

/* ---------- progress bars: uploads and goals ---------- */
.bar{height:6px; border-radius:99px; background:var(--card-3); overflow:hidden; margin-top:10px}
.bar i{display:block; height:100%; background:var(--accent); width:0; transition:width .3s ease}

/* ---------- the week's expectations ---------- */
.goals{display:flex; flex-direction:column; gap:11px; margin-top:16px}
.goal{
  padding:13px 15px 15px; border-radius:14px;
  border:1px solid var(--line); background:var(--card);
}
.goal--met{border-color:var(--good); background:var(--good-soft)}
.goal--met .bar i{background:var(--good)}
.goal__head{
  display:flex; align-items:flex-start; gap:11px; width:100%; text-align:start;
  background:none; border:0; padding:0; cursor:pointer; color:inherit;
  -webkit-tap-highlight-color:transparent;
}
.goal__emoji{font-size:1.35rem; line-height:1.1; flex:none}
.goal__id{flex:1; min-width:0}
.goal__name{display:block; font-weight:700; font-size:.98rem}
.goal__metric{
  font-weight:500; font-size:.74rem; color:var(--ink-3); margin-inline-start:6px;
  border:1px solid var(--line); border-radius:999px; padding:1px 8px; white-space:nowrap;
}
.goal__nums{display:block; margin-top:3px; font-size:.86rem; color:var(--ink-2)}
.goal__nums b{font-family:"DM Mono",monospace; color:var(--ink); font-size:1rem}
.goal__end{display:flex; flex-direction:column; align-items:center; gap:5px; flex:none}
.goal__pct{
  font-family:"DM Mono",monospace; font-size:.92rem; color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
.goal--met .goal__pct{color:var(--good); font-size:1.15rem}
/* Without this the card is a read-out, and nobody thinks to tap a read-out. */
.goal__edit{
  font-size:.85rem; line-height:1; color:var(--ink-3); border:1px solid var(--line);
  border-radius:8px; padding:4px 7px; background:var(--card-2); transition:.15s;
}
.goal__head:hover .goal__edit{color:var(--accent-deep); border-color:var(--accent);
  background:var(--accent-soft)}
.goal:has(button.goal__head:hover){border-color:var(--accent)}
button.goal__head:active{transform:scale(.995)}
/* A week that has ended: read, not edited. */
.goal__head--ro{cursor:default}
/* The demonstration, under the bar: what to do, how far along, and what it is
   supposed to look like -- in that order. */
.goal__demo{display:flex; align-items:center; gap:9px; margin-top:11px}
.goal__demo .attrow{flex:1; min-width:0}
.goal__demo .att{width:64px}

/* What the trainer wrote about it. Line breaks are theirs and are kept. */
.goal__note{
  display:block; margin-top:6px; font-size:.84rem; line-height:1.45;
  color:var(--ink-2); white-space:pre-line;
}
/* A week that has not happened: the expectation, with nothing to measure yet. */
.goal--plan{border-style:dashed}

/* A daily goal's week, a cell a day. It replaces the bar, because "every day"
   is seven answers and a single bar would average them into one that means
   nothing: five good days and two empty ones is not 71% of a habit. */
.days{display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin-top:11px}
.day{
  display:flex; flex-direction:column; align-items:center; gap:3px; min-width:0;
  padding:5px 0 6px; border-radius:9px; border:1px solid var(--line-soft); background:var(--card-2);
}
.day small{font-size:.66rem; font-weight:700; color:var(--ink-3)}
.day b{
  font-family:"DM Mono",ui-monospace,monospace; font-size:.78rem; font-weight:500;
  min-height:1.15em; line-height:1.15; color:var(--ink-2); direction:ltr;
}
.day--met{border-color:var(--good); background:var(--good-soft)}
.day--met b{color:var(--good)}
.day--part{border-color:var(--mid); background:var(--mid-soft)}
.day--part b{color:var(--mid)}
.day--miss b{color:var(--bad)}
.day--today{border-color:var(--accent); background:var(--card); box-shadow:0 0 0 2px var(--accent-soft)}
.day--today b{color:var(--accent-deep)}
.day--future{background:transparent; border-style:dashed}

/* What starts later, on the week everyone actually opens. */
.upnext{display:flex; flex-direction:column; gap:8px}
.upnext__i{
  display:flex; align-items:center; gap:11px; width:100%; text-align:start;
  padding:11px 13px; border-radius:12px; border:1px dashed var(--line);
  background:transparent; color:inherit; font:inherit; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.upnext__i:hover{border-color:var(--accent); background:var(--accent-soft)}
.upnext__t{flex:1; min-width:0}
.upnext__t b{display:block; font-size:.94rem}
.upnext__t small{display:block; margin-top:2px; font-size:.8rem; color:var(--ink-3)}
.upnext__i > svg{flex:none; color:var(--ink-3)}

.goal__demo .att__img{border-radius:9px}
.goal__demo .att__play,.goal__demo .att__cmt{font-size:.6rem; padding:1px 5px; bottom:4px}
.goal__demo .att__play{inset-inline-end:4px}
.goal__demo .att__cmt{inset-inline-start:4px}
.goal__demobtn{flex:none; white-space:nowrap}

/* the one-line version, on the day screen */
.weekstrip{
  display:flex; align-items:center; gap:11px; width:100%; margin-top:16px;
  padding:11px 14px; border-radius:13px; border:1px solid var(--line);
  background:var(--card); cursor:pointer; text-align:start; color:inherit;
  -webkit-tap-highlight-color:transparent; transition:border-color .15s;
}
.weekstrip:hover{border-color:var(--accent)}
.weekstrip__t{flex:1; min-width:0; font-size:.88rem; font-weight:600}
.weekstrip__t small{display:block; font-weight:500; color:var(--ink-3); font-size:.75rem}
.weekstrip .bar{margin:0; width:78px; flex:none}
.weekstrip__n{font-family:"DM Mono",monospace; font-size:.84rem; color:var(--ink-3); flex:none}

/* ---------- a session still running ---------- */
.qbtn--running{
  border-color:var(--accent); background:linear-gradient(180deg,var(--accent-soft),var(--raise-b));
}
.qbtn--running small{color:var(--accent-deep); font-weight:700}
.qbtn--running::before{
  content:""; position:absolute; top:7px; inset-inline-end:7px;
  width:7px; height:7px; border-radius:50%; background:var(--bad);
  animation:pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.ent--running .ent__dot{background:var(--bad); border-color:var(--bad)}
.ent--running .ent__body{border-color:var(--accent)}

/* ---------- history table ---------- */
.tbl{width:100%; border-collapse:collapse; font-size:.87rem}
.tbl th,.tbl td{padding:8px 10px; border-bottom:1px solid var(--line-soft); text-align:start}
.tbl th{font-size:.7rem; letter-spacing:.1em; color:var(--ink-3); font-weight:700; text-transform:uppercase}
.tbl td.n{font-family:"DM Mono",monospace; direction:ltr; font-variant-numeric:tabular-nums}
.scroll-x{overflow-x:auto; -webkit-overflow-scrolling:touch}

/* ---------- the cover, as shown in settings ---------- */
/* The band, and the round picture sitting over its edge. */
.profile{
  position:relative; margin-bottom:18px; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--card); overflow:hidden;
}
.profile__cover{
  height:118px; background-size:cover; background-position:center;
  background-color:var(--card-2); position:relative;
}
.profile__cover--none{
  background-image:
    radial-gradient(120% 130% at 70% -20%, var(--accent-soft), transparent 60%),
    repeating-linear-gradient(115deg, transparent 0 16px, rgba(0,0,0,.022) 16px 17px);
}
.profile__coverbtn{
  position:absolute; inset-block-start:10px; inset-inline-end:10px;
  font:inherit; font-size:.76rem; font-weight:600; padding:5px 11px; border-radius:999px;
  border:1px solid rgba(255,255,255,.4); background:rgba(28,20,8,.5); color:#FFF8EC;
  cursor:pointer; backdrop-filter:blur(5px); -webkit-tap-highlight-color:transparent;
}
.profile__coverbtn:hover{background:rgba(28,20,8,.68)}
.profile__avatar{
  position:absolute; inset-inline-start:20px; top:118px; transform:translateY(-50%);
  width:88px; height:88px; border-radius:50%; padding:0; cursor:pointer;
  border:4px solid var(--card); background:var(--card-2); overflow:visible;
  display:grid; place-items:center; -webkit-tap-highlight-color:transparent;
  box-shadow:0 6px 18px -8px rgba(72,52,20,.5);
}
/* Pinned to the avatar's edges rather than sized at 100%.

   The avatar is a centred grid, so a percentage height on the image has no
   definite box to resolve against and silently falls back to the picture's own
   proportions: a portrait photo came out 107px tall inside an 88px circle and
   hung over the dog's name. `inset:0` gives it an exact square to crop into,
   and the circle cannot be escaped whatever shape is chosen. The badge is a
   sibling, so it still sits outside the ring. */
.profile__avatar img{
  position:absolute; inset:0;
  width:100%; height:100%; border-radius:50%; object-fit:cover; display:block;
}
.profile__emoji{font-size:2.6rem; line-height:1}
.profile__badge{
  position:absolute; inset-block-end:-2px; inset-inline-end:-2px;
  width:27px; height:27px; border-radius:50%; display:grid; place-items:center;
  background:var(--accent); color:var(--accent-ink); font-size:.8rem;
  border:2.5px solid var(--card);
}
/* Room for the avatar's overhang, then the name beside it. */
.profile__id{padding:14px 20px 16px; margin-inline-start:120px; min-height:56px}
.profile__name{font-family:"Suez One",Georgia,serif; font-size:1.35rem; line-height:1.15}
.profile__sub{font-size:.8rem; color:var(--ink-3); margin-top:2px}
/* Below this width the name will not fit beside the avatar, so it goes under
   it and the padding has to clear the circle's overhang rather than the band. */
@media (max-width:420px){
  .profile__id{margin-inline-start:0; padding-top:58px}
}

/* Choosing one from what is already there. */
.pickgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(86px,1fr)); gap:9px}
.pick{
  padding:0; border-radius:12px; overflow:hidden; cursor:pointer; aspect-ratio:1;
  border:2px solid var(--line); background:var(--card-2);
  display:grid; place-items:center; -webkit-tap-highlight-color:transparent;
}
.pick img{width:100%; height:100%; object-fit:cover; display:block}
.pick--on{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.pick__none{font-size:1.5rem}

.checkrow{
  display:flex; align-items:flex-start; gap:11px; padding:12px 13px; margin-top:14px;
  border:1px solid var(--line); border-radius:12px; background:var(--card-2); cursor:pointer;
}
.checkrow input{width:20px; height:20px; margin:2px 0 0; accent-color:var(--accent); flex:none}
.checkrow b{display:block; font-size:.95rem}

/* A checkbox that is comfortable to hit with a thumb, label and all. */
.checkrow{
  display:flex; align-items:flex-start; gap:11px; margin-top:14px; cursor:pointer;
  padding:12px 13px; border-radius:12px; border:1px solid var(--line); background:var(--card-2);
}
.checkrow input{width:20px; height:20px; margin:1px 0 0; accent-color:var(--accent); flex:none}
.checkrow span{font-size:.92rem; font-weight:600}
.checkrow small{display:block; font-weight:400; font-size:.76rem; color:var(--ink-3); margin-top:2px}
.checkrow:has(input:checked){border-color:var(--accent); background:var(--accent-soft)}

/* ---------- settings rows ---------- */
.rowlist{display:flex; flex-direction:column; gap:8px}
.rowitem{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px;
  border:1px solid var(--line); background:var(--card);
}
.rowitem__main{flex:1; min-width:0}
.rowitem__sub{font-size:.75rem; color:var(--ink-3)}
/* A row whose controls will not fit beside its name: they take their own line
   underneath instead of crushing it to two characters a word. */
.rowitem--stack{flex-wrap:wrap}
.rowitem--stack .rowitem__acts{
  display:flex; gap:7px; flex-wrap:wrap; width:100%; margin-top:9px;
}
.rowitem--stack .rowitem__acts .btn{flex:1 1 auto; justify-content:center}

@media (max-width:420px){
  .quick{grid-template-columns:repeat(auto-fill,minmax(76px,1fr)); gap:7px}
  .qbtn__zone{font-size:.72rem; gap:3px}
  .rail{padding-inline-start:60px}
  .rail::before{inset-inline-start:48px}
  .ent__time{inset-inline-start:-60px; width:38px; font-size:.72rem}
  .ent__dot{inset-inline-start:-17px}
  .nowline::before{inset-inline:-60px 0}
  .nowline span{inset-inline-start:-60px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

/* ---------- the assistant ----------
   A conversation, not a form: the reader's questions on one side, the
   answers on the other, and the composer riding just above the tab bar so
   the thread can be as long as the day was. Sides follow the Hebrew chat
   convention -- what you sent sits on the left, what came back on the right
   -- which in RTL flex terms is end and start. */
/* Room under the last bubble for the bar that floats over it. */
.chat{display:flex; flex-direction:column; gap:10px; padding-bottom:64px}
.chat__msg{
  max-width:86%; padding:11px 14px; border-radius:18px; line-height:1.5;
  font-size:.98rem; white-space:normal; overflow-wrap:anywhere;
}
.chat__msg--me{
  align-self:flex-end; background:var(--accent-grad); color:var(--accent-ink);
  border-end-end-radius:6px;
}
.chat__msg--ai{
  align-self:flex-start; background:var(--card); border:1px solid var(--line);
  border-end-start-radius:6px;
}
.chat__msg--err{border-color:var(--bad); color:var(--bad); background:var(--bad-soft)}
.chat__li{display:block; padding-inline-start:14px; position:relative}
.chat__li::before{content:"•"; position:absolute; inset-inline-start:0; color:var(--ink-3)}
.chat__tools{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px}
.chat__tool{
  font-size:.74rem; font-weight:600; color:var(--ink-3); background:var(--card-2);
  border-radius:999px; padding:3px 9px;
}
.chat__msg--ai:has(.chat__text:empty) .chat__tools{margin-bottom:0}
.chat__dots{display:inline-flex; gap:4px; padding:4px 2px}
.chat__dots i{
  width:6px; height:6px; border-radius:50%; background:var(--ink-3); opacity:.35;
  animation:chat-dot 1.1s infinite ease-in-out;
}
.chat__dots i:nth-child(2){animation-delay:.18s}
.chat__dots i:nth-child(3){animation-delay:.36s}
@keyframes chat-dot{0%,80%,100%{opacity:.25; transform:translateY(0)} 40%{opacity:.9; transform:translateY(-3px)}}

.chat__hello{text-align:center; padding:26px 8px 12px; color:var(--ink-2)}
.chat__face{font-size:2.6rem; line-height:1; margin-bottom:12px}
.chat__hello p{margin:0 auto 18px; max-width:34ch; line-height:1.55}
.chat__starters{display:flex; flex-wrap:wrap; gap:8px; justify-content:center}
.chat__starters .chip{white-space:normal; text-align:start}

/* One line, parked on the tab bar, on the same frosted glass.

   Fixed rather than sticky: a short thread used to leave it stranded halfway
   up the screen with a field of nothing beneath it. The side padding keeps
   its contents on the same 760px column as .wrap however wide the window is,
   while the glass itself spans the full width like the tab bar does. */
.chat__composer{
  position:fixed; inset-inline:0; z-index:39;
  bottom:var(--tabs-h);
  display:flex; align-items:flex-end; gap:8px;
  padding:8px max(18px, calc((100% - 760px) / 2 + 18px));
  background:var(--veil-2); backdrop-filter:blur(16px);
  border-top:1px solid var(--line-soft);
}

/* A textarea that starts as one line and grows only when there is something
   to grow for. The element selector is deliberate: `textarea.inp` in the form
   block is more specific than a lone class, and its 86px min-height was
   winning -- which is how an empty box came to stand three lines tall. */
textarea.chat__inp{
  flex:1; min-height:38px; height:38px; max-height:120px;
  padding:8px 14px; line-height:1.35; resize:none;
}
.chat__send{
  flex:none; width:38px; height:38px; border-radius:50%; border:0;
  background:var(--accent-grad); color:var(--accent-ink); font-size:1.05rem; font-weight:700;
  line-height:1; cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.chat__send:active{transform:scale(.94)}
.chat__send[disabled]{opacity:.45; cursor:default; transform:none}

/* With the keyboard up, iOS leaves a fixed bar pinned to the layout viewport
   -- which is to say, underneath the keyboard. --kb is how far up the real
   bottom of the screen now is; the tab bar is behind the keyboard anyway, so
   the composer sits straight on it. */
:root.kb .chat__composer{bottom:var(--kb, 0px)}

/* ---------- the assistant's conversations ----------
   Questions stay on one side and answers on the other, whoever asked: this is
   a conversation with the diary, and a question from another member is still
   a question. It carries their name, and a quieter face than your own. */
.chat__title{margin:-6px 0 12px; font-size:.84rem; color:var(--ink-3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.chat__msg--other{background:var(--card-2); color:var(--ink); border:1px solid var(--line)}
.chat__who{display:block; font-size:.74rem; font-weight:700; color:var(--accent-deep); margin-bottom:2px}
.chat__recent{margin-top:26px; text-align:start}

/* The list of conversations. */
.chats{display:flex; flex-direction:column; gap:8px; text-align:start}
.chats__i{display:flex; align-items:stretch; border:1px solid var(--line); border-radius:12px; background:var(--card)}
.chats__i:hover{border-color:var(--accent)}
.chats__open{flex:1; min-width:0; text-align:start; background:none; border:0; padding:11px 13px;
  cursor:pointer; color:inherit; font:inherit; -webkit-tap-highlight-color:transparent}
.chats__open b{display:block; font-size:.95rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.chats__open small{display:block; margin-top:3px; font-size:.78rem; color:var(--ink-3)}
.chats__del{flex:none; width:44px; background:none; border:0; border-inline-start:1px solid var(--line-soft);
  color:var(--ink-3); cursor:pointer; font-size:.95rem}
.chats__del:hover{color:var(--bad)}

/* The card under an answer that changed the diary: what was saved, with a way
   to take it out again; what waits for a tap, with the tap. */
.chg{display:flex; flex-direction:column; gap:8px; margin-top:10px}
.chg__part{border:1px solid var(--line); border-radius:12px; padding:9px 11px; background:var(--card-2)}
.chg__part--ask{border-style:dashed; border-color:var(--accent)}
.chg__head{font-size:.78rem; font-weight:700; color:var(--ink-2); margin-bottom:4px}
.chg__line{font-size:.88rem; line-height:1.45; padding:2px 0}
.chg__line--off{text-decoration:line-through; color:var(--ink-3)}
.chg__foot{display:flex; gap:8px; justify-content:flex-end; margin-top:8px}

/* A failed answer offers to try again; one cut off halfway keeps its words
   and says so. */
.chat__cut{margin:6px 0 0; font-size:.8rem; color:var(--bad)}
.chat__retry{margin-top:6px}
.chat__retry .lnk{font-size:.86rem}

/* One quiet line under the header until an account's address is verified.
   Dismissible, because nagging somebody daily about an address they will add
   when they add it is how a strip becomes furniture people stop seeing. */
.mailstrip{
  display:flex; align-items:center; gap:10px;
  max-width:760px; margin-inline:auto; padding:9px 18px;
  font-size:.82rem; color:var(--ink-2);
}
.mailstrip > span{flex:1; min-width:0}      /* the sentence wraps, the buttons do not */
.mailstrip .lnk{flex:none; font-size:.82rem}
.mailstrip__x{
  flex:none; background:none; border:0; color:var(--ink-3);
  padding:4px 6px; cursor:pointer; -webkit-tap-highlight-color:transparent;
}
[data-role=mail]:has(.mailstrip){background:var(--card-2); border-bottom:1px solid var(--line)}

/* A hairline inside a card, where one card holds two things that belong
   together but are not the same thing -- a name and an address. */
.cardline{height:1px; background:var(--line); margin:18px 0}