/* app.css — Alongside app layout on top of the Organic design tokens (styles.css).
   Root font-size is driven by the text-size setting (Standard 17 / Large 19 / X-large 22). */
:root { font-size: 19px; --font-heading: 'Baloo 2', system-ui, sans-serif; --font-heading-weight: 700; }
* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: hidden; }
body {
  background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-body, 'Figtree', system-ui, sans-serif);
  -webkit-text-size-adjust: 100%;
}
h1, h2, h3, .display { font-family: var(--font-heading, 'Caprasimo'), cursive; letter-spacing: -0.015em; line-height: 1.12; }
:lang(ro) h1, :lang(ro) h2, :lang(ro) h3, :lang(ro) .display { font-family: 'Baloo 2', system-ui, sans-serif; font-weight: 700; }
/* Caprasimo lacks Romanian diacritics (ă ș ț î) — for RO, swap the heading FONT
   VARIABLE itself so every consumer (headings, .btn, .dialog-title, .card-title)
   uses Baloo 2 and diacritics render consistently. */
html[lang="ro"] { --font-heading: 'Baloo 2', system-ui, sans-serif; --font-heading-weight: 700; }

/* The phone-shaped app column, centered on desktop, full-bleed on mobile. */
#frame {
  position: relative; width: 100%; max-width: 480px; margin: 0 auto;
  min-height: 100vh; min-height: 100dvh; background: var(--color-bg);
  display: flex; flex-direction: column; overflow: hidden;
}
@media (min-width: 640px) { #frame { max-width: 640px; box-shadow: var(--shadow-lg); min-height: 96vh; margin: 2vh auto; border-radius: 12px; } }

.screen { flex: 1; overflow-y: auto; scrollbar-gutter: stable; padding: 20px 20px 84px; position: relative; }
.blob { position: absolute; border-radius: 999px; filter: blur(2px); opacity: .5; pointer-events: none; z-index: 0; }
.content { position: relative; z-index: 1; }

/* Header */
.appbar-kicker { font-size: .8em; font-weight: 700; color: var(--color-neutral-700); text-transform: none; }
.appbar-title { font-size: 1.7em; margin: 2px 0 14px; }

/* Bottom tab bar */
#tabbar { position: sticky; bottom: 0; display: flex; border-top: 1px solid var(--color-divider); background: var(--color-bg); z-index: 5; }
#tabbar button { flex: 1; min-height: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: none; border: 0; cursor: pointer; color: var(--color-neutral-600); font-family: inherit; font-size: .68em; font-weight: 700; }
#tabbar button .ico { width: 24px; height: 24px; }
#tabbar button[aria-current="page"] { color: var(--color-accent); }

/* Login */
.login-wrap { display: flex; flex-direction: column; justify-content: center; min-height: 100vh; min-height: 100dvh; padding: 40px 28px; gap: 6px; position: relative; }
.brand-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.brand-mark { width: 60px; height: 60px; border-radius: 999px; background: var(--color-accent); display: grid; place-items: center; color: #fff; }
.brand-name { font-size: 2.1em; }
.brand-tag { color: var(--color-neutral-700); font-size: .9em; }
.login-h { font-size: 1.8em; margin: 18px 0 2px; }
.login-sub { color: var(--color-neutral-700); margin: 0 0 10px; }
.error { background: var(--color-accent-100); color: var(--color-accent-800); border-radius: 14px; padding: 10px 14px; font-weight: 600; }
.muted { color: var(--color-neutral-600); }
.center { text-align: center; }
.stack > * + * { margin-top: 12px; }
.gbtn { display: flex; align-items: center; justify-content: center; gap: 10px; }
.gbtn svg { width: 20px; height: 20px; }
.divider-or { display: flex; align-items: center; gap: 10px; color: var(--color-neutral-600); font-size: .85em; margin: 6px 0; }
.divider-or::before, .divider-or::after { content: ""; flex: 1; height: 1px; background: var(--color-divider); }

/* generic list card used in the Phase-1 shell */
.plist { list-style: none; padding: 0; margin: 10px 0 0; }
.plist li { background: var(--color-surface); border-radius: 18px; padding: 14px 16px; margin-bottom: 10px; display: flex; align-items: center; gap: 12px; }
.pavatar { width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; color: #fff; font-weight: 700; background: var(--color-accent-500); }
.soon { color: var(--color-neutral-600); font-style: italic; }

/* ---- Phase 2 components ---- */
.btn.small { padding: 6px 12px; min-height: 40px; font-size: .82em; }
.btn.btn-icon { width: 44px; height: 44px; min-height: 44px; padding: 0; display: inline-grid; place-items: center; flex: 0 0 auto; }
.btn svg { vertical-align: middle; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* person switcher */
.pswitch { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 10px; margin: 0 -2px; -webkit-overflow-scrolling: touch; }
.pchip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 5px; border-radius: 999px; border: 2px solid var(--color-divider); background: transparent; cursor: pointer; font: inherit; font-weight: 600; white-space: nowrap; flex: 0 0 auto; color: var(--color-text); }
.pchip.on { border-color: var(--color-accent); background: var(--color-surface); }
.pchip-av { width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: .9em; }

/* summary card + ring */
.card.summary { display: flex; flex-direction: row; align-items: center; gap: 16px; padding: 16px; border-radius: 26px; margin-bottom: 12px; }
.summary .ring { flex: 0 0 auto; }
.sum-h { font-weight: 700; font-size: 1.1em; }
.sum-sub { font-size: .9em; margin-top: 2px; }

/* reminder banner */
.rbanner { display: flex; align-items: center; gap: 8px; border-radius: 16px; padding: 10px 14px; font-weight: 600; font-size: .92em; margin-bottom: 16px; }
.rbanner .rb-ico { display: inline-flex; }
.rb-alert { background: var(--color-accent-100); color: var(--color-accent-800); }
.rb-soon { background: var(--color-neutral-200); color: var(--color-neutral-800); }
.rb-done { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }

/* section header */
.sec-head { display: flex; align-items: center; gap: 10px; margin: 18px 0 8px; }
.sec-ico { width: 38px; height: 38px; border-radius: 999px; background: var(--color-accent-2-100); display: grid; place-items: center; flex: 0 0 auto; }
.sec-title { font-size: 1.3em; }
.sec-rem { font-size: .72em; display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.sec-rem svg { vertical-align: middle; }
.tag.b-done { background: var(--color-accent-2-200); color: var(--color-accent-2-800); }
.tag.b-due { background: var(--color-accent-500); color: var(--color-bg); }
.tag.b-over { background: var(--color-accent-700); color: var(--color-bg); }
.tag.b-soon { background: var(--color-neutral-200); color: var(--color-neutral-800); }

/* item card */
.card.itemcard { display: flex; flex-direction: row; align-items: flex-start; gap: 12px; padding: 16px; border-radius: 24px; margin-bottom: 10px; }
.itc-av { width: 54px; height: 54px; border-radius: 999px; display: grid; place-items: center; flex: 0 0 auto; background-position: center; }
.itc-av.pill { background-color: var(--color-accent-100); }
.itc-av.act { background-color: var(--color-accent-2-100); }
.itc-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.itc-name { font-weight: 700; font-size: 1.15em; }
.itc-time { font-size: .82em; white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; }
.itc-detail { font-size: .88em; margin-top: 2px; }
.itc-note { display: inline-block; background: var(--color-accent-100); color: var(--color-accent-800); border-radius: 999px; padding: 3px 12px; font-size: .8em; margin-top: 8px; }
.itc-actions { display: flex; gap: 10px; margin-top: 12px; }
.itc-actions .btn { flex: 1; min-height: 54px; }
.statebar { display: flex; align-items: center; gap: 8px; border-radius: 14px; padding: 10px 12px; margin-top: 12px; font-weight: 600; }
.sb-taken { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.sb-skip { background: var(--color-accent-100); color: var(--color-accent-800); }
/* keep the ✓ / ✕ glyph centered against the text (svg baseline nudged) */
.statebar > span:first-child { display: inline-flex; align-items: center; flex: 0 0 auto; }
.statebar svg { display: block; }
.linklike { background: none; border: 0; color: var(--color-neutral-700); text-decoration: underline; cursor: pointer; font: inherit; font-size: .82em; margin-top: 6px; padding: 2px; }
.timeedit { margin-top: 8px; }

/* manage */
.mng-listhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.mrow { display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; margin-bottom: 10px; }
.mrow > div { text-align: left; }
.mrow-av { width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; flex: 0 0 auto; }
.mrow-av.pill { background: var(--color-accent-100); } .mrow-av.act { background: var(--color-accent-2-100); }
.empty { text-align: center; padding: 30px 10px; }
.empty p { margin-bottom: 14px; }

/* dialog extras */
.daytoggles { display: flex; gap: 8px; flex-wrap: wrap; }
.segrow { display: flex; gap: 8px; flex-wrap: wrap; }
.set-label { font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.dialog-body .field { margin-bottom: 12px; }
/* dialog must sit above the app content (content z:1) and tab bar (z:5) */
.dialog-backdrop { z-index: 1000; }
.dialog { position: relative; z-index: 1001; max-height: 90vh; overflow-y: auto; width: min(440px, 100%); }
.dialog-title { font-size: 1.5em; margin-bottom: 4px; }
/* lighter, higher-contrast input fill (design surface was too close to the page) */
.input, select.input, textarea.input { background: var(--color-neutral-100); color: var(--color-text); }
/* tighter container corners (~10-12px per request); pills/chips/inputs stay round */
.card, .dialog { border-radius: 12px; }
.card.itemcard, .card.summary { border-radius: 12px; }
.mrow, .rbanner, .statebar { border-radius: 10px; }

/* Manage sub-tabs */
.subtabs { display: flex; gap: 8px; margin-bottom: 12px; }
.subtab { flex: 1; padding: 9px 12px; border-radius: 999px; border: 1.5px solid var(--color-divider); background: transparent; cursor: pointer; font: inherit; font-weight: 700; font-size: .92em; color: var(--color-neutral-700); }
.subtab.on { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg); }

/* skeleton loaders (shown while a profile's data loads) */
.sk { position: relative; overflow: hidden; background: var(--color-surface); border-radius: 12px; margin-bottom: 10px; }
.sk::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent); animation: sk 1.15s infinite; }
@keyframes sk { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .sk::after { animation: none; } }

/* transient toast (e.g. "reminder sent") */
.toast { position: fixed; left: 50%; bottom: calc(78px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 12px); z-index: 1200; max-width: 90vw; padding: 11px 18px; border-radius: 12px; background: #2c2622; color: #fff; font-weight: 600; font-size: .95em; box-shadow: 0 8px 24px rgba(0,0,0,.22); opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* item photo picker (editor) — preview + buttons on one row */
.photo-pick { display: flex; align-items: center; gap: 14px; }
.photo-prev { width: 76px; height: 76px; flex: 0 0 auto; border-radius: 50%; background: var(--color-surface); border: 2px dashed var(--color-neutral-300, #d9cfc4); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; font-size: 26px; cursor: pointer; }
.photo-prev.empty { color: var(--color-neutral-500, #9a8f82); }
.photo-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }

/* fullscreen photo viewer (Today) */
.lightbox { position: fixed; inset: 0; z-index: 1500; background: rgba(20,16,12,.93); display: flex; align-items: center; justify-content: center; padding: 12px; overflow: auto; -webkit-overflow-scrolling: touch; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; opacity: 0; transition: opacity .2s ease; cursor: zoom-in; }
.lightbox img.show { opacity: 1; }
.lightbox img.zoom { max-width: none; max-height: none; width: 190%; border-radius: 0; cursor: zoom-out; }
.lb-close { position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); right: 14px; width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; border: none; font-size: 20px; line-height: 1; cursor: pointer; }
.lb-spin { position: absolute; width: 46px; height: 46px; border-radius: 50%; border: 4px solid rgba(255,255,255,.25); border-top-color: #fff; animation: lbspin .8s linear infinite; }
@keyframes lbspin { to { transform: rotate(360deg); } }

/* per-log notes + per-day note */
.itc-linkrow { margin-top: 8px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.linklike.ml { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; max-width: 100%; }
.linklike.ml .ml-ic { display: inline-flex; flex: 0 0 auto; }
.linklike.ml .ml-ic svg { display: block; }
.linklike.ml .ml-tx { text-decoration: underline; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timeedit, .noteedit { margin-top: 8px; }
.noteedit-ta { width: 100%; resize: vertical; min-height: 46px; border-radius: 12px; }
.card.daynote { display: block; padding: 12px 14px; margin-top: 14px; }
.dn-label { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 8px; }
textarea.dn-ta { width: 100%; resize: vertical; min-height: 78px; border-radius: 12px; }
.timesel { max-width: 150px; }
.dialog .grid2 .input { height: 52px; box-sizing: border-box; }
.btn.btn-danger { background: var(--color-accent-700); color: #fff; border: none; }
.brand-name-row { display: flex; align-items: center; gap: 8px; }
.info-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: none; background: var(--color-surface); color: var(--color-neutral-700); cursor: pointer; flex: 0 0 auto; }
.login-wrap > *:not(.blob) { position: relative; z-index: 1; }
.field-hint { font-size: .78em; margin-top: 4px; }
.tg-logo { width: 26px; height: 26px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; }
.tg-logo svg, .tg-btn svg { display: block; }
.tg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.share-sec > label svg { vertical-align: -3px; }

/* readability: larger + higher-contrast secondary text */
.muted { color: var(--color-neutral-800); }
.field > label { font-size: .92em; font-weight: 600; color: var(--color-neutral-800); }
.appbar-kicker { color: var(--color-neutral-800); font-size: .86em; }
.itc-detail, .sec-rem { font-size: .9em; }
.meta { font-size: .9em; color: var(--color-neutral-800); }
.rec { font-size: .88em; color: var(--color-accent-2-700); }

/* belt-and-suspenders: no stray horizontal scroll on desktop */
.screen { overflow-x: hidden; }

/* the decorative blob is absolutely-positioned (z-index:0), which otherwise paints
   OVER in-flow siblings — lift the interactive rows above it */
.pswitch, .subtabs, .mng-listhead { position: relative; z-index: 1; }

/* inputs at 16px stop mobile browsers from auto-zooming on focus (and read better) */
.input, select.input, textarea.input, input, select, textarea { font-size: 16px; }

/* ---- History ---- */
.hist-stats { display: flex; gap: 10px; margin-bottom: 12px; }
.card.stat { flex: 1; flex-direction: column; align-items: flex-start; padding: 12px 14px; border-radius: 12px; gap: 0; }
.stat-n { font-size: 1.9em; font-weight: 800; line-height: 1.05; }
.stat-n.sage { color: var(--color-accent-2-700); }
.stat-l { font-size: .82em; margin-top: 4px; }
.weeknav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.weekcap { font-weight: 700; }
.histgrid-wrap { padding: 10px; overflow-x: auto; border-radius: 12px; }
.histgrid { display: grid; gap: 4px; min-width: 340px; }
.hg-dh { text-align: center; font-size: .74em; color: var(--color-neutral-800); }
.hg-dh.today .hg-dn { color: var(--color-accent); font-weight: 800; }
.hg-wd { font-weight: 600; }
.hg-dn { font-weight: 700; }
.hg-name { font-size: .84em; font-weight: 600; display: flex; align-items: center; min-height: 42px; padding-right: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hg-cell { min-height: 42px; border-radius: 8px; border: 0; font: inherit; font-size: 1rem; font-weight: 800; cursor: pointer; display: grid; place-items: center; }
.hg-cell.blank { background: transparent; cursor: default; }
.hg-empty { text-align: center; color: var(--color-neutral-800); padding: 16px; }
.c-taken { background: var(--color-accent-2-100); color: var(--color-accent-2-700); }
.c-skip { background: var(--color-accent-100); color: var(--color-accent-700); }
.c-none { background: var(--color-neutral-200); color: var(--color-neutral-500); }
.na { background: var(--color-neutral-100); color: var(--color-neutral-400); font-size: .62em; cursor: default; }
.legend { display: flex; gap: 12px; flex-wrap: wrap; margin: 10px 2px; }
.leg { display: inline-flex; align-items: center; gap: 5px; font-size: .82em; color: var(--color-neutral-800); }
.leg-c { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-weight: 800; font-size: .78em; }
.dirtybar { display: flex; gap: 10px; margin: 10px 0; }
.dirtybar .btn { flex: 1; }
.wl-c { width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; font-weight: 800; flex: 0 0 auto; }
.fh-day { font-weight: 700; margin: 12px 0 4px; font-size: .92em; }
.fh-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; }

/* scrollable dialog bodies: keep content off the scrollbar + theme it warmly */
.dialog-body { padding-right: 12px; scrollbar-width: thin; scrollbar-color: var(--color-neutral-400) transparent; }
.dialog-body::-webkit-scrollbar { width: 10px; }
.dialog-body::-webkit-scrollbar-track { background: transparent; }
.dialog-body::-webkit-scrollbar-thumb { background: var(--color-neutral-400); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
.dialog-body::-webkit-scrollbar-thumb:hover { background: var(--color-neutral-500); background-clip: padding-box; }