/* CatPlanner wire.css — copy of docs/design/canvas/ds/wire.css (canvas version 1792588352-a05d,
   DS version 1792057850-b881) with the canvas-only rules removed: `.phone` (the 390 px frame) and
   `.statusbar` (the fake 9:41 bar). Nothing else is changed; app-specific rules live in app.css
   (Decision 215). Refresh = replace this file from the canvas copy and re-apply the two deletions. */
/* CatPlanner wire.css — the one stylesheet every wireframe artboard loads.
   Source of truth for component geometry; colours come from tokens.css (tokens.json).
   Change a rule here, re-install on the canvas, every screen follows. */
.appbar { height:64px; display:flex; align-items:center; padding:0 20px; gap:12px; }
.appbar .title { font-size:24px; font-weight:700; letter-spacing:-0.01em; } /* W65 type scale, level 1: page name */
.appbar .avatar { margin-left:auto; width:32px; height:32px; border-radius:50%; background:var(--box); }
.scroll { flex:1; overflow-y:auto; padding:16px 20px 24px; scrollbar-width:none; }
.scroll::-webkit-scrollbar { display:none; }
.scroll > :first-child { margin-top:0; }
h2 { font-size:17px; line-height:1.25; color:var(--ink); margin:24px 0 8px; font-weight:600; display:flex; align-items:center; } /* W65 type scale, level 3: section heading 17/600, 24 above / 8 below — one size step above the 15 px regular row title, well under the 24 px page name (W61's 20 px collided with the page name) */
h2 .count, h2 .more { font-size:12px; color:var(--mid); }
.chip { height:22px; padding:0 8px; border-radius:11px; background:var(--box2); border:1px solid var(--line); flex:none; font-size:11px; display:inline-flex; align-items:center; } /* W61: 22 / 11 everywhere (was 20 / 10; the card chip already was) */
.chip.dark { background:var(--ink); border-color:var(--ink); color:#fff; }
.chev { width:8px; height:8px; border-right:1.5px solid var(--mid); border-bottom:1.5px solid var(--mid); transform:rotate(-45deg); flex:none; }
.sitem { position:relative; display:flex; align-items:center; gap:12px; padding:10px 0; }
/* W25: section band between sections (24 px above and below, via the next heading); hairline between rows (works when each row is a mounted component) */
.band { height:2px; background:var(--box2); margin:24px -20px 0; }
.list .sitem, .list .row { border-top:1px solid var(--box2); }
.list > :first-child .sitem, .list > .sitem:first-child, .list > :first-child .row, .list > .row:first-child { border-top:0; }
.sitem .main { flex:1; }
.sitem .l1 { font-size:15px; font-weight:400; margin-bottom:2px; } /* W61: row titles regular; bold is for headings, card names and names inside sentences */
.sitem .l2 { font-size:12px; color:var(--mid); } /* W61: second line 12 px, all grey */
.sitem .side { flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:4px; font-size:11px; color:var(--mid); line-height:1.3; text-align:right; }
.sitem .l2 .x { color:var(--mid); } /* secondary part of a row's second line (who, where) — same as .row .l2 .x (w22) */
/* Person avatar (2026-10-08, w08): 32 px circle at the start of a person row (.sitem); .av (20 px) stays for stacks */
.pav { width:32px; height:32px; border-radius:50%; background:var(--box); flex:none; }
.avs { display:flex; }
.av { width:20px; height:20px; border-radius:50%; background:var(--box); border:2px solid #fff; margin-left:-6px; }
.btn { height:32px; border-radius:16px; padding:0 14px; display:inline-flex; align-items:center; border:1.5px solid var(--ink); font-size:12px; }
.btn.primary { background:var(--ink); color:#fff; }
.btnrow { display:flex; margin:0 0 12px; }
.btnrow .btn { margin-left:auto; }
/* Page-end action row (2026-10-07): the one secondary action that closes a page (Evden çıkar, Evi sil) sits LEFT under the band, 16 px above; a form's Kaydet stays right-aligned. The action asks for confirmation, so it is a button, not a › link row (› means 'opens a page'). */
.btnrow.end { margin:16px 0 0; }
.btnrow.end > * { margin-left:0; margin-right:auto; }
/* Two-button row (2026-10-12, w22, W68 — replaces the W55 '.start' row): the two 'add a record' actions under the profile tabs (Endişe bildir · Not ekle) are two EQUAL secondary buttons filling the content width, 8 px apart, labels centred; same height as every .btn. Full width says 'these two are the page's quick actions'; the earlier left-aligned natural-width pair read as loose chips. */
.btnrow.two { gap:8px; }
.btnrow.two .go { flex:1; margin-left:0; }
.btnrow.two .btn { margin-left:0; width:100%; box-sizing:border-box; justify-content:center; }
/* Form save row (2026-10-08, w11): a form's Kaydet stays right-aligned, 16 px under the last field */
.btnrow.save { margin-top:16px; }
/* Form field (2026-10-08, w11 Ev ayarları): label above (12 px mid), 44 px box (1 px line, radius 8, 12 px inset, 14 px text), 12 px between fields; .ph = placeholder text, .ta = multi-line (min 88). Same definition the T13 form drafts use. */
.field { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.field label { font-size:12px; color:var(--mid); }
.field .in { height:44px; border:1px solid var(--line); border-radius:8px; padding:0 12px; display:flex; align-items:center; font-size:15px; } /* W65 level 4: content */
.field .in.ph { color:var(--mid); }
.field .ta { min-height:88px; align-items:flex-start; padding-top:10px; }
.field .in .chev { margin-left:auto; } /* Select (2026-10-08, w13, W45): the same box with the value text and a › on the right; tapping opens the Dropdown list under it (see .dd) */
/* Dropdown (2026-10-09, W45): every select box opens its option list right under the box (not the system picker, not a bottom sheet). Open box: 1.5 px ink border, › turns up. List: same width, 4 px under the box, white, 1 px line, radius 8, soft shadow, lies over the content below (does not push it); 44 px rows, hairline between, ✓ on the current value. Tap a row = pick + close; tap anywhere else = close. The field gets .has-dd while open. */
.field.has-dd { position:relative; }
.field .in.focus { border:1.5px solid var(--ink); }
.field .in.focus .chev { transform:rotate(-135deg); margin-top:4px; }
.dd { position:absolute; left:0; right:0; top:70px; background:var(--surface); border:1px solid var(--line); border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,.12); overflow:hidden; z-index:2; }
.dd .opt { height:44px; display:flex; align-items:center; padding:0 12px; font-size:14px; border-top:1px solid var(--box2); }
.dd > :first-child .opt, .dd > .opt:first-child { border-top:0; }
.dd .opt .ok { margin-left:auto; margin-right:4px; width:6px; height:11px; border-right:2px solid var(--ink); border-bottom:2px solid var(--ink); transform:rotate(45deg); }
/* Hint (2026-10-09, w17-w18): one helper line under a field (11 px, mid; 6 px under the box via the field gap) or under a block (12 px below) */
.hint { font-size:11px; color:var(--mid); margin:0 0 12px; }
.field .hint { margin:0; }
/* Link value (2026-10-09, w18): a long value (an invite link) on one line inside the box, cut with an ellipsis */
.in .url { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Photo picker (2026-10-08, w13): 96 px round photo like the pet tile (W23), dashed when empty (.has = filled), caption under it, 20 px above the first field; tapping opens the system picker */
.photo-pick { display:flex; flex-direction:column; align-items:center; gap:8px; margin:0 0 20px; }
.photo-pick .ph { width:96px; height:96px; border-radius:50%; border:1px dashed var(--line); box-sizing:border-box; }
.photo-pick .ph.has { background:var(--box2); border-style:solid; }
.photo-pick .cap { font-size:12px; }
/* Form bar (2026-10-08, w13, W44 = form template A): a stand-alone form page's single primary action, full width, 48 high / 24 radius like the FAB, fixed where the tab bar would be (the tab bar is hidden on form pages). A form inside a tab page (w11 Ayarlar) keeps .btnrow.save instead. */
.formbar { height:72px; box-sizing:border-box; border-top:1px solid var(--line); padding:12px 20px; }
.formbar .btn { display:flex; width:100%; height:48px; box-sizing:border-box; border-radius:24px; align-items:center; justify-content:center; font-size:15px; font-weight:600; }
/* Toggle (2026-10-08, w11): 44 x 24 switch at the end of a row (.sitem); .on = ink fill, knob right. Acts in place, opens nothing; the whole row is the touch target. */
.tg { width:44px; height:24px; border-radius:12px; border:1.5px solid var(--ink); position:relative; flex:none; }
.tg::after { content:""; position:absolute; top:3px; left:3px; width:15px; height:15px; border-radius:50%; background:var(--ink); }
.tg.on { background:var(--ink); }
.tg.on::after { left:auto; right:3px; background:#fff; }
.hscroll { display:flex; gap:10px; overflow-x:auto; margin:4px -20px 16px; padding:0 20px 4px; }
/* W22 · option A: 260 total (border-box), counters on one line, ~136 px high */
.home { flex:none; box-sizing:border-box; width:260px; background:var(--box2); border-radius:16px; padding:16px; display:flex; flex-direction:column; gap:12px; } /* W22 refinement: more air, ~136 px */
.home .top { display:flex; align-items:center; gap:8px; }
.home .top .chip { margin-left:auto; font-size:11px; height:22px; background:#fff; } /* W21: white on the card, every page */
.home .l1 { font-weight:600; font-size:20px; } /* W65 level 2: object name */
.home .kv { font-size:12px; color:var(--mid); }
.home .kv b { font-size:13px; font-weight:600; color:var(--ink); }
.home .bar { height:6px; border-radius:3px; background:var(--surface); overflow:hidden; }
.home .bar i { display:block; height:100%; background:var(--ink); }
.home .foot { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--mid); }
.home .foot .chev { margin-left:auto; }
.home .foot .av { margin:0; border-color:var(--box2); }
.empty { border:1px dashed var(--line); border-radius:12px; padding:20px 16px; text-align:center; color:var(--mid); font-size:12px; margin:4px 0 16px; }
.seg { display:flex; justify-content:center; gap:16px; border-bottom:1px solid var(--line); margin:0 0 16px; }
/* PageTabs (W91, 2026-10-14, Test 2): the linked tab is a span inside a.go, so it is not a flex item itself; display:block + the same 2 px (transparent) underline keep both tabs 120 px wide with the label at the same height. Before, the linked label sat 10 px higher. */
.seg span { display:block; width:120px; text-align:center; padding:10px 0; margin:0; color:var(--mid); font-size:13px; border-bottom:2px solid transparent; }
.seg span.on { color:var(--ink); font-weight:600; border-bottom:2px solid var(--ink); }
/* Scrolling page tabs (2026-10-08): for 3+ sections of one object (Ev yönetimi, Evcil hayvan profili). Full labels at natural width, 32 px apart, left-aligned between 44 px ‹ › arrows (each opens the previous / next tab; greyed when there is none, no wrap-around). Current tab ink, 600, 2 px underline the label's width (W9). The track's far edge fades 32 px to the page colour so a label is always cut mid-word there: the cut says 'it scrolls'. .track.end = scrolled to the end (used when the current tab would be cut at the start position): content right-aligned, fade moves to the left edge. .dot = something in that tab needs attention. */
.tabscroll { display:flex; align-items:stretch; border-bottom:1px solid var(--line); margin:0 -12px 16px; }
.tabscroll .arr { width:44px; flex:none; display:flex; align-items:center; justify-content:center; }
.tabscroll .arr .chev { border-color:var(--ink); }
.tabscroll .arr.l .chev { transform:rotate(135deg); }
.tabscroll .arr.off .chev { border-color:var(--line); }
.tabscroll .track { flex:1; min-width:0; display:flex; gap:32px; overflow:hidden; position:relative; }
.tabscroll .track.end { justify-content:flex-end; }
.tabscroll .track > * { flex:none; }
.tabscroll .track::after { content:""; position:absolute; top:0; right:0; bottom:2px; width:32px; background:linear-gradient(to right, rgba(255,255,255,0), var(--surface)); pointer-events:none; }
.tabscroll .track.end::after { left:0; right:auto; background:linear-gradient(to left, rgba(255,255,255,0), var(--surface)); }
.tabscroll .t { display:block; padding:12px 0 10px; font-size:13px; color:var(--mid); white-space:nowrap; }
.tabscroll .t.on { color:var(--ink); font-weight:600; border-bottom:2px solid var(--ink); }
.tabscroll .dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--ink); margin-left:4px; vertical-align:middle; }
.linkrow { display:flex; align-items:center; gap:6px; padding:14px 0 0; font-size:17px; font-weight:600; } /* W25 (A): reads like a section heading that opens a page; sits after a band · W65: heading size 17 */
.linkrow .count { color:var(--mid); font-weight:400; font-size:12px; }
.linkrow .chev { margin-left:auto; }
.tabbar { height:72px; border-top:1px solid var(--line); display:flex; justify-content:space-around; align-items:flex-start; padding-top:10px; }
.tab { display:flex; flex-direction:column; align-items:center; gap:6px; }
.tab .ic { width:22px; height:22px; border-radius:50%; background:var(--box); }
.tab .lb { font-size:11px; color:var(--mid); } /* W65 level 7: micro */
.tab.on .ic { background:var(--ink); }
.tab.on .lb { color:var(--ink); font-weight:600; }
.fab { position:absolute; right:20px; bottom:96px; height:48px; padding:0 18px 0 14px; border-radius:24px; background:var(--ink); color:#fff; display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; box-shadow:0 4px 12px rgba(0,0,0,.18); }
.fab .plus { font-size:20px; line-height:1; }
h2 .more { margin-left:auto; display:flex; align-items:center; gap:6px; font-weight:400; }
h2 .count { margin-left:auto; font-weight:400; }
.appbar .back { width:10px; height:10px; border-left:1.5px solid var(--ink); border-bottom:1.5px solid var(--ink); transform:rotate(45deg); margin-right:4px; }
/* Back hit area (2026-10-08, w13, W44): a.bk wraps the 10 px arrow in an invisible 44 px target; layout unchanged (W15 touch >= 44) */
.appbar a.bk { padding:17px; margin:-17px; }
/* W23 · pet tile: round 96 px photo, status chip sitting on its lower edge (dark = needs attention, light = info) */
.cgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px 8px; }
.ctile { display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; }
.ctile .photo { width:96px; height:96px; border-radius:50%; background:var(--box2); position:relative; }
.ctile .photo .chip { position:absolute; left:50%; bottom:-6px; transform:translateX(-50%); white-space:nowrap; background:#fff; }
.ctile .photo .chip.dark { background:var(--ink); }
.ctile .l1 { font-size:13px; font-weight:600; margin-top:4px; }
.ctile .l2 { font-size:10px; color:var(--mid); line-height:1.3; }
.date { color:var(--mid); margin:0 0 16px; }
.row { display:flex; align-items:center; gap:12px; padding:10px 0; position:relative; }
.row .cb { width:24px; height:24px; border:1.5px solid var(--ink); border-radius:4px; flex:none; }
.row.late::before { content:""; position:absolute; left:-12px; top:10px; bottom:10px; width:3px; border-radius:2px; background:var(--ink); }
.row .main { flex:1; }
.row .main .l1 { font-size:15px; font-weight:400; margin-bottom:2px; } /* W61 */
.row .main .l2 { font-size:12px; color:var(--mid); } /* W61 */
.row .main .l2 .x { color:var(--mid); }
.row .where { flex:none; text-align:right; font-size:12px; line-height:1.4; }
.row .where .h { color:var(--mid); }
/* Rule row (2026-10-09, w23 Evcil hayvan profili · Görevler, W59): the task row listing a RULE. The box completes today's occurrence (W6); .cb.on = done today (ink fill + tick); the rest of the row (a.go.main) opens the rule form and ends with ›. .row.off = no occurrence today: line-coloured box, row still opens the form. Late look unchanged (W5). Heading count says today's state ('bugün 2 / 3', '1 gecikti'). */
.row .cb.on { background:var(--ink); position:relative; }
.row .cb.on::after { content:""; position:absolute; left:8px; top:3px; width:5px; height:11px; border-right:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(45deg); }
.row.off .cb { border-color:var(--line); }
.note { font-size:11px; color:var(--mid); text-align:center; }
.list + .note, .acts + .note { margin-top:16px; } /* Note under a list (2026-10-12, w28 Biten görevler, W70): one centred 11 px mid line that explains the list ("Biten kurallar yalnızca okunur"), 16 px under the last row; it is not an empty state and never tappable */
/* modifiers that keep per-page variants */
.scroll.has-fab { padding-bottom:96px; }
.home.full { width:100%; margin-bottom:10px; } /* also the context card at the top of a home's pages (W48): Ev yönetimi, görev panosu */
/* Prototype link (2026-10-08, from the first approved draft w07): a.go wraps a tappable element so the canvas Play mode follows it; it adds no look of its own. */
.go { display:block; color:inherit; text-decoration:none; }
/* FAB as the link itself (2026-10-09, W57): a.go.fab keeps the FAB's flex layout and white label — .go's colour reset (ink on ink) had blanked the label on five draft boards. Both forms work: a.go wrapping .fab (approved boards) or a.go.fab. */
.go.fab { display:flex; color:#fff; }
/* Pet header (2026-10-09, w22, PetHeader): above a pet's tabs — 64 px round photo, name 18 px, one meta line 12 px mid that starts with the home name ('Ana Ev · kedi · tekir · 3 yaş · 4,2 kg'; no separate home line); Düzenle (edit the pet) as a secondary .btn at the right edge; nothing else in it is tappable */
.pethead { display:flex; align-items:center; gap:12px; margin:0 0 16px; }
.pethead .photo { width:64px; height:64px; border-radius:50%; background:var(--box2); flex:none; }
.pethead .txt { flex:1; min-width:0; }
.pethead .name { font-size:20px; font-weight:600; } /* W65 level 2: object name */
.pethead .meta { font-size:12px; color:var(--mid); margin-top:2px; }
.pethead > .go, .pethead > .btn { margin-left:auto; }
/* Summary lines (2026-10-09, w22, SummaryLines): on a summary page every section takes its own form so sections read apart. .acts = small time rows (12 px, 40 px time column, hairline between; the row may open a page); .sent = one sentence (14 px, names 600); .pline = heading-size label + 6 px bar + › (opens the page that completes it) */
.acts .act { display:flex; gap:10px; padding:6px 0; font-size:12px; border-top:1px solid var(--box2); }
.acts .act:first-child, .acts > .go:first-child .act { border-top:0; }
.act .t { width:40px; color:var(--mid); flex:none; }
.act .chev { margin-left:auto; align-self:center; } /* W57 (2026-10-09): a time row that opens a page may end with › (T08 Hareketler, T09 Günün hareketleri) */
.sent { font-size:14px; }
.sent b { font-weight:600; }
.pbar { height:6px; border-radius:3px; background:var(--box2); overflow:hidden; margin:4px 0 12px; }
.pbar i { display:block; height:100%; background:var(--ink); }
.pline { display:flex; align-items:center; gap:12px; padding:14px 0 0; }
.pline .lb { font-size:17px; font-weight:600; flex:none; } /* W65: heading size */
.pline .pbar { flex:1; margin:0; }
/* Entry (2026-10-09, w25 Evcil hayvan profili · Notlar, W63): a dated text entry by a person — 32 px author avatar (.pav) left; 'Name · date' 13 px (name 600 ink, rest mid) above a 14 px / 1.4 text; optional 12 px grey context line (the linked sitting). 8 px padding top and bottom (16 between entries), no hairline, grouped by month heading (w03); an entry opens nothing. */
.entry { display:flex; gap:12px; padding:8px 0; }
.entry .body { flex:1; min-width:0; }
.entry .who { font-size:13px; color:var(--mid); margin-bottom:4px; }
.entry .who b { font-weight:600; color:var(--ink); }
.entry .txt { font-size:15px; line-height:1.4; color:var(--ink); } /* W65 level 4: content */
.entry .ctx { font-size:12px; color:var(--mid); margin-top:4px; }
/* Edit button (2026-10-12, w26 Evcil hayvan profili · Acil, W66): ONE edit language. The object's own edit (pet header 'Düzenle') is the secondary .btn with a leading 14 px pencil (.btn.ic, inline SVG, 1.5 px ink stroke, 6 px gap). A section's edit is the pencil alone in a 32 px round secondary button at the heading's right edge (h2 .edit .ib — the 'tümü ›' slot); it opens that section's form or page. A count may stay beside the heading (h2 .count.n) when the pencil takes the edge. Replaces 'Talimatları düzenle' button rows and 'X düzenle ›' link rows for the same job. */
.pen { width:14px; height:14px; flex:none; display:block; }
.btn.ic { gap:6px; }
h2 .edit { margin-left:auto; }
h2 .edit .ib { width:32px; height:32px; border-radius:16px; border:1.5px solid var(--ink); display:flex; align-items:center; justify-content:center; }
h2 .count.n { margin-left:6px; }
/* Critical rows (2026-10-12, w26 Evcil hayvan profili · Acil, W67): emergency instructions are rows, not a paragraph and not a box (W3: filled box = home card only). Each instruction: 3 px ink stripe on the left (the task row's 'late' stripe — W5: text + stripe, never colour alone), 14 px inset, 15 px / 1.4 content (W65 level 4), a 600 lead word before ' · ' so the eye scans 'Astım · Zehirli · Taşıma'. 8 px above and below, no hairline. A row opens nothing; the section's pencil edits the set. */
.crit { margin:0 0 4px; }
.crit .item { position:relative; padding:8px 0 8px 14px; font-size:15px; line-height:1.4; }
.crit .item::before { content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px; border-radius:2px; background:var(--ink); }
.crit .item b { font-weight:600; }
/* Segment (2026-10-12, w27 Form · Endişe bildir, W69; FormField): 2–5 exclusive choices INSIDE a form (not a page tab) — 44 px box like the input, 1.5 px ink frame, radius 8, equal cells with 1.5 px dividers, 12 px labels; the chosen cell is ink-filled, white 600. Under a 1–5 scale, .ends writes the two end words (11 px mid) left and right. A chip is never a choice (W2). */
.segc { display:flex; height:44px; border:1.5px solid var(--ink); border-radius:8px; overflow:hidden; }
.segc span { flex:1; display:flex; align-items:center; justify-content:center; font-size:12px; border-left:1.5px solid var(--ink); }
.segc span:first-child { border-left:0; }
.segc span.on { background:var(--ink); color:#fff; font-weight:600; }
.ends { display:flex; justify-content:space-between; font-size:11px; color:var(--mid); }
/* Photo box (2026-10-12, w27, W69; FormField): a dashed drop area for a photo attached to a record — 1 px dashed line, radius 12, 13 px mid caption centred. .small = optional attachment, 72 px ('+ Fotoğraf ekle · isteğe bağlı'); .big = required proof photo, 240 px, 15 px ink title (T13 Fotoğraf tamamla, draft). The round .photo-pick stays for the pet's own portrait. */
.photobox { border:1px dashed var(--line); border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; color:var(--mid); font-size:13px; }
.photobox.big { height:240px; }
.photobox.big b { font-size:15px; color:var(--ink); }
.photobox.small { height:72px; }
/* Repeat picker parts (2026-10-12, w29 Form · Görev kuralı, W71 = option A 'segment + günler + saat listesi'; FormField). .picks = multi-select day pills under the 'Haftanın günleri' segment: 7 equal 44 px pills, 1 px line, radius 22, 8 px apart; chosen = ink fill, white 600 (a pill is a choice, never a status chip — W2). .stack = several boxes under one label (the rule's times), 8 px apart; .in.add = dashed '+ Saat ekle' box that adds a row in place. .cols2 = two short fields side by side (start / end dates only), 12 px gap; a hint right after it closes the gap. */
.picks { display:flex; gap:8px; }
.picks span { flex:1; height:44px; border:1px solid var(--line); border-radius:22px; display:flex; align-items:center; justify-content:center; font-size:12px; }
.picks span.on { background:var(--ink); border-color:var(--ink); color:#fff; font-weight:600; }
.segc + .picks { margin-top:8px; }
.stack { display:flex; flex-direction:column; gap:8px; }
.field .in.add { border-style:dashed; color:var(--mid); }
.cols2 { display:flex; gap:12px; }
.cols2 .field { flex:1; min-width:0; }
.cols2 + .hint { margin-top:-6px; }
/* Trend sign (2026-10-12, w30 Durum zaman çizelgesi, W73): a condition entry's change against the previous entry — the model's three values (Decision 69): ▲ daha iyi · — aynı · ▼ daha kötü. Sign + word, never colour alone (W5); 11 px ink by default, 12 px inside an Entry's context line. The 1–5 five-dot score (option A) was not chosen. */
.trend { display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--ink); }
.trend i { width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; }
.trend.up i { border-bottom:8px solid var(--ink); }
.trend.down i { border-top:8px solid var(--ink); }
.trend.same i { width:10px; height:2px; border:0; background:var(--mid); }
.entry .ctx .trend { font-size:12px; }
/* Entry with a photo (2026-10-12, w30, W73): a 56 px rounded thumbnail under the text, 8 px above the context line; it opens the photo */
.entry .thumb { width:56px; height:56px; border-radius:8px; background:var(--box2); margin-top:8px; }
/* Status head (2026-10-12, w30, W74): the page's object line in the row anatomy (.sitem.head: name 15 px, 'Ana Ev · başladı 1 Eki · 6. gün' 12 px mid, status chip at the right); no top padding so the 16 px under the app bar holds, 12 px below before the two-button row */
.sitem.head { padding-top:0; padding-bottom:12px; }

/* ===== W82 (2026-10-12) · Akış 3 onayı — w36 Bakım dönemi · sahip (sürüyor / planlı / bitti), w37 Görev panosu · sahip (bugün / takip dışı gün / korumalı gün), w38 Form · Bakım planla, w39 Onay · alt sayfacık ===== */

/* DayRows · Gün dağılımı satırı (w36; T08 bakıcı sayfasında da): 44 px satır, 10 px iç boşluk, listede ince çizgi (W3 beyaz satır = liste öğesi); 84 px gün sütunu ('Cum 2 Eki' + altında 11 px gri 'bugün'), avatar + ad; boş gün koyu 'boş' etiketi (W5/W23: metin + etiket, yalnız renk değil). Sahip yalnız okur; bakıcıda satır sonunda yuvarlak işaret (.mark) günü al / bırak */
.prow { display:flex; align-items:center; gap:12px; min-height:44px; box-sizing:border-box; padding:10px 0; }
.list .prow { border-top:1px solid var(--box2); }
.list > :first-child .prow, .list > .prow:first-child { border-top:0; }
.prow .d { flex:none; width:84px; font-size:15px; line-height:1.3; }
.prow .d small { display:block; font-size:11px; color:var(--mid); }
.prow .who { flex:1; display:flex; align-items:center; gap:8px; font-size:15px; min-width:0; }
.prow .av { margin-left:0; flex:none; }

/* SmallParts · yuvarlak seçim işareti .mark (w38 bakıcı seçimi; gün dağılımı · bakıcı): 24 px, 1.5 px ink halka, seçili = ink dolgu. Yuvarlak = seç / bırak, kare kutu = görevi tamamla (W4) */
.mark { width:24px; height:24px; border-radius:50%; border:1.5px solid var(--ink); box-sizing:border-box; flex:none; }
.mark.on { background:var(--ink); }

/* SmallParts · bilgi kutusu .notice (w37 takip dışı gün, Karar 149): çerçeveli, dolgusuz (W3), 12 px mid, 1.4; içindeki bağlantı satırı 32 px koyu + › */
.notice { border:1px solid var(--line); border-radius:8px; padding:12px 14px; font-size:12px; color:var(--mid); line-height:1.4; }
.notice .go { display:flex; align-items:center; gap:6px; min-height:32px; margin-top:4px; color:var(--ink); font-weight:600; }
.notice .go .chev { border-color:var(--ink); }

/* TaskRow · yapılmış hâli .done (w37 pano; bileşende prop yok, sarmalayıcı sınıf): kutu dolu + beyaz tik, görev adı soluk; l2 = saat · kim, ne zaman · not / fotoğraf / korumalı */
.done .row .cb { background:var(--ink); border-color:var(--ink); position:relative; }
.done .row .cb::after { content:""; position:absolute; left:8px; top:3px; width:5px; height:11px; border-right:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(45deg); }
.done .row .l1 { color:var(--mid); }
/* TaskRow · otomatik hâli .auto (w37 takip dışı gün, Karar 149): açık kutu + gri tik, denetim yok */
.auto .row .cb { background:var(--box2); border-color:var(--line); position:relative; }
.auto .row .cb::after { content:""; position:absolute; left:8px; top:3px; width:5px; height:11px; border-right:2px solid var(--mid); border-bottom:2px solid var(--mid); transform:rotate(45deg); }
.auto .row .l1 { color:var(--mid); }

/* HomeCard · hedefsiz ev kartı: .still sarmalayıcısı (w36 planlı dönem başlığı, Katıl, davet kartı) — kart bir sayfa açmıyorsa alt satırdaki › yok (W2) */
.still .home .foot .chev { display:none; }

/* ButtonRow · geniş düğme .btn.wide (w39 onay, giriş sayfaları, davet): tam genişlik, 48 px, hap, 14 px 600, altında 16; kaydırma alanı içinde durur (W15 ≥ 44) */
.btn.wide { display:flex; width:100%; box-sizing:border-box; height:48px; border-radius:24px; justify-content:center; font-size:14px; font-weight:600; margin:8px 0 16px; }

/* Sheet · alt sayfacık (w39 Onay): .scrim sayfanın üstünde %30 ink perde, dokunmak kapatır (= Vazgeç); .sheet alttan açılır, üst köşeler 16, iç boşluk 8 / 20 / 24, tutamaç 36×4; soru .q 18 px 600, açıklama .p 13 px mid; geniş düğmeler aralık 8, yıkıcı birincil üstte, Vazgeç en altta. Aynı gövde malzeme durumu ve tamamlama sayfacıklarında (onaylarında bu dile çekilecek) */
.scrim { position:absolute; left:0; top:0; right:0; bottom:0; background:var(--ink); opacity:.3; }
.sheet { position:absolute; left:0; right:0; bottom:0; background:var(--surface); border-radius:16px 16px 0 0; padding:8px 20px 24px; }
.sheet .grip { width:36px; height:4px; border-radius:2px; background:var(--line); margin:0 auto 16px; }
.sheet .q { font-size:18px; font-weight:600; margin:0 0 8px; }
.sheet .p { font-size:13px; color:var(--mid); line-height:1.4; margin:0 0 20px; }
.sheet .btn.wide { margin:8px 0 0; }

/* ===== W83 (2026-10-12) · Akış 4 onayı — w40 Bakım dönemi · bakıcı (sürüyor) + topluluk üyesi · Katıl, w41 Görev panosu · bakıcı (bugün / önceki gün), w42 Davet kabul ===== */

/* SmallParts · grup etiketi .glab (w40 Acil bölümü: 'Veterinerler' / 'Kritik talimatlar 3'): bölüm içinde iki grubu ayıran 12 px mid satır (kademe 6), altında 4 px; ikinci grup bir önceki listenin 16 px altında; sayaç gri. Tasarımcı seçimi B (2026-10-12): ayrı bölümler yerine tek 'Acil' başlığı */
.glab { font-size:12px; color:var(--mid); margin:0 0 4px; display:flex; gap:6px; }
.list + .glab { margin-top:16px; }

/* SmallParts · karo ızgarasının altındaki not (w40 Katıl: 'Profiller ve görev panosu bakım başlayınca açılır.'): .list + .note kuralının karo hâli, 16 px üst boşluk */
.cgrid + .note { margin-top:16px; }

/* SmallParts · sayfa düzeyinde soru + açıklama (w42 Davet kabul): .q 18 px 600 (nesne adı kademesi), .p 13 px mid 1.4, altında 16 px; alt sayfacıkta aynı çift .sheet .q / .p (Sheet) */
.q { font-size:18px; font-weight:600; margin:0 0 8px; }
.p { font-size:13px; color:var(--mid); line-height:1.4; margin:0 0 16px; }

/* ===== W84 (2026-10-13) · Akış 5 onayı — w43 Günün görevleri, w44 Tamamlama · alt sayfacık (yapılmış / bekleyen), w45 Form · Fotoğrafla tamamla; gün gezgini B bütün panolarda (w37 ×3, w41 ×2) ===== */

/* DayNav · gün gezgini .daynav2 (w37 / w41 panoların üstünde, uygulama çubuğunun altında; tasarımcı seçimi B, 2026-10-13): iki satırlı sabit gezgin 64 px — üstte ‹ › içerik kenarlarında (44 px hedef, birbirinden uzak), ortada 16 px 600 tarih; altta 20 px / 11 px mid bağlam satırı 'ev · n / m. gün · bugün' ya da '… · Bugüne dön' (ink 600 bağlantı .lnk). Yalnız bağlantı olan ok chevron taşır; gidilecek gün yoksa 44 px boş yer tutucu kalır ki tarih ortada dursun. Adı .daynav2: elenen A seçeneğinin .daynav'ı (flow-options'taki onay kaydı kopyalarında duruyor) ile çakışmasın diye */
.daynav2 { flex:none; padding:0 20px; border-bottom:1px solid var(--box2); }
.daynav2 .top { height:44px; display:flex; align-items:center; }
.daynav2 .arr { width:44px; height:44px; display:flex; align-items:center; justify-content:center; margin:0 -12px; }
.daynav2 .arr .chev { border-color:var(--ink); width:10px; height:10px; }
.daynav2 .arr.prev .chev { transform:rotate(135deg); }
.daynav2 .d { flex:1; text-align:center; font-size:16px; font-weight:600; }
.daynav2 .meta { height:20px; text-align:center; font-size:11px; color:var(--mid); }
.daynav2 .meta .lnk { display:inline; color:var(--ink); font-weight:600; }

/* Sheet · eylem satırları .sheet .opt (w44 Tamamlama sayfacığı): kayıt özetinin (.q 'Mama · E1-Hayvan1', .p '08:00 · sen, 08:05') altında 48 px satırlar, 15 px ink, aralarında 1 px box2; en altta .opt.cancel gri ortalı Vazgeç. Düğme yerine satır: 3–4 eşdeğer seçenek (yapılmış: Not ekle · Fotoğraf ekle · Geri al; bekleyen: Yapıldı · Not ekleyerek yapıldı · Fotoğraf ekleyerek yapıldı). Perde ya da Vazgeç kapatır */
.sheet .opt { display:flex; align-items:center; height:48px; font-size:15px; color:var(--ink); border-top:1px solid var(--box2); }
.sheet .opt.cancel { color:var(--mid); justify-content:center; }

/* SmallParts · evcil hayvan alt başlığı .sub (w43 Günün görevleri): ev başlığının (h2 + 'yapılan / toplam') altında 13 px 600 ad + 7 px ›, üst 12 / alt 4; a.go.sub satırın tamamı profili açar — pano dilinin ikinci kademesi (bölüm başlığı 17 değil, satır 15 değil; kademe 5 vurgu). wire.css'te .go'dan sonra durur ki a.go.sub flex kalsın */
.sub { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; padding:12px 0 4px; }
.sub .chev { width:7px; height:7px; }

/* FormField · bağlam bloğu .fctx (w45 Fotoğrafla tamamla): formun en üstünde salt okunur görev kimliği — .l1 15 px 600 görev adı, .l2 12 px mid 'saat · evcil hayvan · ev'; altında 16 px. Taslak adı .ctx idi; Entry'nin .ctx bağlam satırıyla çakışmasın diye .fctx */
.fctx { margin:0 0 16px; }
.fctx .l1 { font-size:15px; font-weight:600; }
.fctx .l2 { font-size:12px; color:var(--mid); margin-top:2px; }

/* ===== W85 (2026-10-13) · Akış 6 onayı — w46 Giriş, w47 Kayıt, w48 Form · Ev oluştur, w49 Şifre sıfırla (+ gönderildi), w50 Ayarlar (İlk açılış A/B açık) ===== */

/* SmallParts · uygulama işareti yer tutucusu .logo (w46 Giriş): 88 px yuvarlatılmış kare (köşe 20), box2 dolgu, ortalı; üstte 8, altında 24 px. Marka işareti seçilince aynı kutuya girer; yalnız giriş sayfasında */
.logo { width:88px; height:88px; border-radius:20px; background:var(--box2); margin:8px auto 24px; }

/* SmallParts · açıklama paragrafı .txt (w49 Şifre sıfırla ve gönderildi hâli): formun ya da sayfanın üstünde 1–2 cümlelik ink metin, 13 px 1.4 (kademe 5), altında 16 px. Not (.note) değildir: gri ve ortalı değil, okunacak ana metin */
.txt { font-size:13px; line-height:1.4; margin:0 0 16px; }

/* ===== W86 (2026-10-13) · İlk açılış A seçildi ve onaylandı — w51 İlk açılış · evi olmayan kullanıcı ===== */

/* AppBar · avatar bağlantısı (w51 İlk açılış, w01 Ana sayfa): avatar a.go ile sarıldığında sağa itme (margin-left:auto) sarmalayıcıya geçer; avatarın kendisi aynı kalır (32 px, box). Avatar → Ayarlar / hesap (W7) */
.appbar .go:last-child { margin-left:auto; }

/* ===== W87 (2026-10-13) · Kalan mobil hâller onayı — w52 Malzeme durumu · alt sayfacık, w53 Form · Not ekleyerek tamamla; hâller: w15 ortak sahip, w26 kime haber verilir, w32 kayıt türleri, w36 iptal, w37 önceki gün, w38 tarih kutusu açık, w40 bakıcı · planlı, w41 ileri gün, w44 salt okunur ===== */

/* Sheet · seçim satırı (w52 Malzeme durumu sayfacığı): .opt içinde 12 px gri açıklama .x, seçili satır .opt.on 600 + sağda tik .ok (Dropdown tikiyle aynı); seçince kaydeder ve kapanır. Seçim grubu ile eylem grubu .glab etiketleriyle ayrılır ('Durum' / 'Malzeme') */
.sheet .opt .x { font-size:12px; color:var(--mid); margin-left:8px; }
.sheet .opt.on { font-weight:600; }
.sheet .opt .ok { margin-left:auto; margin-right:4px; width:6px; height:11px; border-right:2px solid var(--ink); border-bottom:2px solid var(--ink); transform:rotate(45deg); }

/* Sheet · salt okunur hâl (w44: başkasının kaydı / korumalı satır): kayıttaki fotoğrafın 96 px küçük resmi .pic (köşe 8, box2, altında 16), kilit açıklaması .note (SmallParts .note, altında 8); eylem satırı yok, tek .opt.cancel 'Kapat' */
.sheet .pic { width:96px; height:96px; border-radius:8px; background:var(--box2); margin:0 0 16px; }
.sheet .note { margin:0 0 8px; }

/* Dropdown · tarih çifti (w38 tarih kutusu açık): .cols2.has-dd — yan yana iki tarih kutusunun açılır listesi ikisinin altında tam genişlik açılır (yarım kutu ay ızgarasına dar) */
.cols2.has-dd { position:relative; }
/* Dropdown · ay ızgarası .dcal (w38; tasarımcı seçimi B, 2026-10-13 — A gün listesi elendi): Dropdown kabuğunda bir ay. .mh 44 px başlık (‹ ay › 44 px oklar, 15 px 600), .wd Pazartesi başlı gün adları 11 px gri, .grid 7 sütun, .dn 40 px gün hücresi (içinde 36 px daire): .on seçili gün ink dolu, .rg aralığın kalan günleri box2, .out ay dışı soluk ve dokunulmaz. Güne dokun = seç ve kapan */
.dcal { padding:4px 8px 8px; }
.dcal .mh { height:44px; display:flex; align-items:center; justify-content:space-between; font-size:15px; font-weight:600; }
.dcal .mh .arr { width:44px; height:44px; display:flex; align-items:center; justify-content:center; }
.dcal .mh .arr .chev { border-color:var(--ink); }
.dcal .mh .arr.prev .chev { transform:rotate(135deg); }
.dcal .wd, .dcal .grid { display:grid; grid-template-columns:repeat(7,1fr); }
.dcal .wd span { height:24px; display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--mid); }
.dcal .dn { height:40px; display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--ink); }
.dcal .dn i { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-style:normal; }
.dcal .dn.on i { background:var(--ink); color:#fff; font-weight:600; }
.dcal .dn.rg i { background:var(--box2); }
.dcal .dn.out { color:var(--line); }

/* TaskRow · ileri gün hâli .later (w41 ileri gün; sarmalayıcı, .done / .auto gibi): kutu line rengi çizgi, dokunulmaz; görev adı ink kalır (plan okunur); satır bağlantısız; kartın altında .note 'Bu gün henüz gelmedi' */
.later .row .cb { border-color:var(--line); }

/* HomeCard · yana kayan dizide eşit boy (W88, 2026-10-13): aynı dizideki kartlar en uzun kartın boyunu alır (aynı işi yapan öğe aynı boy); kısa kartta alt satır kartın dibine oturur. Kart bir ya da iki sarmalayıcının içinde durur (a.go, bileşen kabuğu): sarmalayıcılar satır flex olur, böylece dizinin uzatması (stretch) karta kadar iner; kartın kendi sütun düzenine dokunulmaz. Web'de (web.css ızgara) de aynı çalışır */
.hscroll > :not(.home), .hscroll > * > :not(.home) { display:flex; }
.hscroll .home .foot { margin-top:auto; }
/* Dropdown · liste satırının altında (W90, w50 Ayarlar dil seçici): yerinde seçici bir liste satırından açılınca (.sitem, 44 px) satır .rowdd ile sarılır; liste satırın 4 px altında açılır (form alanındaki .dd 70 px'tedir). Seçenekler, tik ve kabuk Dropdown'ın aynısı */
.rowdd { position:relative; }
.rowdd .dd { top:48px; }