/* flat-hunt: stackwerk design language (same tokens as tools/area-picker/index.html). Light theme only. */
:root {
  --ink: #1c1917;
  --ink-75: rgba(28, 25, 23, .75);
  --ink-55: rgba(28, 25, 23, .55);
  --ink-45: rgba(28, 25, 23, .45);
  --line: rgba(28, 25, 23, .10);
  --line-strong: rgba(28, 25, 23, .15);
  --white: #ffffff;
  --background: #f5f3ee;
  --paper: #e8e4dd;
  --accent: #2eae74;
  --accent-ink: #1b7f54;
  --sage: #c2d4c0;
  --sky: #b6c8da;
  --peach: #e5c4a8;
  --sand: #ddd5be;
  --warn: #b7791f;
  --bad: #b42318;
  --sans: "Schibsted Grotesk", system-ui, sans-serif;
  --heading: "Space Grotesk", system-ui, sans-serif;
  --mono: "Space Mono", ui-monospace, monospace;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--white); color: var(--ink); font: 15px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
::selection { background: var(--accent); color: var(--white); }
a { color: inherit; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--accent-ink); }
h1, h2, h3 { font-family: var(--heading); letter-spacing: -.02em; margin: 0; }
h1 { font-size: 1.9rem; line-height: 1.15; }
h2 { font-size: 1.15rem; margin-bottom: 10px; }
h3 { font-size: 1rem; }
code, .mono { font-family: var(--mono); font-size: .92em; }
.nowrap { white-space: nowrap; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.muted { color: var(--ink-55); }
.small { font-size: 13px; }
[hidden] { display: none !important; }

/* ------------------------------------------------------------ chrome */
.top {
  position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .94); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px 20px; padding: 0 28px; min-height: 56px;
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 8px; font: 700 15px/1 var(--heading); letter-spacing: -.01em; text-decoration: none; }
.discs { display: inline-flex; gap: 3px; }
.discs i { width: 8px; height: 8px; border-radius: 50%; display: block; }
.top nav { display: flex; flex-wrap: wrap; gap: 2px; flex: 1; }
.top nav a {
  padding: 7px 9px; border-radius: 3px; text-decoration: none; color: var(--ink-75); font-size: 14px; white-space: nowrap;
}
.top nav a:hover { background: var(--background); color: var(--ink); }
.top nav a.on { color: var(--ink); background: var(--background); font-weight: 600; }
/* the menu at the right: the money and setup pages, Fetch now with its state, Sign out */
.menu { position: relative; margin-left: auto; flex: none; }
.menu-btn {
  position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; border: 0; border-radius: 3px; background: none;
  color: var(--ink-75); font-size: 14px; line-height: 1.2; cursor: pointer; white-space: nowrap;
}
.menu-btn:hover, .menu.open .menu-btn { background: var(--background); color: var(--ink); }
.menu-btn.on { color: var(--ink); background: var(--background); font-weight: 600; }  /* the current page is inside */
.menu-btn .ham { display: none; }
.menu-btn .chev { transition: transform .15s; }
.menu.open .menu-btn .chev { transform: rotate(180deg); }
.menu-btn .ind { position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%; display: none; }
.menu:has(#job .dot) .ind { display: block; background: var(--accent); animation: ping 1.4s infinite; }  /* a fetch runs */
.menu:has(#job .err) .ind { display: block; background: var(--bad); }  /* the last one failed */
.menu-panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 70; min-width: 236px; padding: 6px; background: #fff;
  border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 36px rgba(20,18,14,.16);
}
.menu-panel .grp { padding: 4px 0 6px; border-bottom: 1px solid var(--line); }
.menu-panel .grp:last-child { border-bottom: 0; padding-bottom: 2px; }
.menu-panel .grp-h { font: 400 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-45); padding: 6px 10px 5px; }
.menu-panel a { display: block; padding: 7px 10px; border-radius: 6px; text-decoration: none; color: var(--ink-75); font-size: 14px; white-space: nowrap; }
.menu-panel a:hover { background: var(--background); color: var(--ink); }
.menu-panel a.on { color: var(--ink); background: var(--background); font-weight: 600; }
.menu-panel form { padding: 6px 10px; }
#job { font-size: 13px; color: var(--ink-55); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 10px; }
#job .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: ping 1.4s infinite; flex: none; }
#job button { margin-left: auto; }
@keyframes ping { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

main { max-width: 1240px; margin: 0 auto; padding: 32px 28px 80px; }
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; flex-wrap: wrap; }
.eyebrow { font: 400 11px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-45); margin-bottom: 10px; }
.lede { color: var(--ink-75); margin: 8px 0 0; max-width: 680px; }

/* ------------------------------------------------------------ panels and grids */
.panel { border: 1px solid var(--line); border-radius: 4px; padding: 18px 20px; background: var(--white); }
.panel.tint { background: rgba(245, 243, 238, .7); border-color: transparent; }
.panel + .panel { margin-top: 16px; }
.cols { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; }
.cols-2 { display: grid; gap: 24px; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
@media (max-width: 900px) { .cols-2 { grid-template-columns: minmax(0, 1fr); } }
.stack > * + * { margin-top: 16px; }

.cols > .panel + .panel { margin-top: 0; }  /* side by side, not stacked: no stack margin inside a grid */
.head .filters { flex: 1 1 100%; margin: 0; }  /* the filters: a full-width row under the title, the count at its right */
.head .filters > span:last-child { margin-left: auto; }
h1 button.info { vertical-align: middle; margin-left: 6px; }  /* the "i" after a page title */

/* Overview: listing rows with a thumbnail, a two-line title and a small verdict pill */
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.panel-head h2 { margin: 0; }
.listings { list-style: none; margin: 0; padding: 0; }
.listings li + li { border-top: 1px solid var(--line); }
.listings .item { display: flex; gap: 12px; padding: 10px 0; text-decoration: none; align-items: flex-start; }
.listings .thumb { flex: 0 0 72px; width: 72px; height: 54px; border-radius: 3px; background: var(--background) center / cover no-repeat; }
.listings .text { min-width: 0; flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.listings .ttl { font-weight: 600; font-size: 14px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.listings .item:hover .ttl { text-decoration: underline; text-decoration-color: var(--accent-ink); text-underline-offset: 3px; }
.listings .meta { font-size: 12.5px; color: var(--ink-55); }
.mini .badge { font-size: 11px; padding: 1px 6px; line-height: 1.4; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.kpi { border: 1px solid var(--line); border-radius: 4px; padding: 14px 16px; }
.kpi .label { font-size: 13px; color: var(--ink-55); }
.kpi .value { font: 700 1.45rem/1.2 var(--mono); letter-spacing: -.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi .sub { font-size: 12.5px; color: var(--ink-55); margin-top: 2px; }

/* rows of label / value, like the sheet */
table { border-collapse: collapse; width: 100%; }
.rows td { padding: 6px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.rows tr:last-child td { border-bottom: 0; }
.rows td:last-child { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 16px; }
.rows tr.strong td { font-weight: 700; }
.rows tr.strong td:first-child { font-weight: 600; }
.rows td .yes { color: var(--accent-ink); }
.rows td .no { color: var(--bad); }

.data { font-size: 14px; }
.data th { font: 400 11px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-45); text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
.data th.wrap { white-space: normal; min-width: 90px; }
.data td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.data td.r, .data th.r { text-align: right; }
.data tr:hover td { background: rgba(245, 243, 238, .6); }
.data tr.dim td { opacity: .5; }
.scroll { overflow-x: auto; }
.data td.listing { min-width: 220px; }

/* ------------------------------------------------------------ verdicts and badges */
.badge {
  display: inline-block; padding: 3px 8px; border-radius: 3px; font-size: 12.5px; font-weight: 600; line-height: 1.3; white-space: nowrap;
  background: var(--paper); color: var(--ink);
}
.badge.ok { background: rgba(46, 174, 116, .16); color: #0f4f33; }
.badge.tight { background: rgba(229, 196, 168, .55); color: #6b3d16; }
.badge.no { background: rgba(180, 35, 24, .09); color: var(--bad); }
.badge.none { background: var(--background); color: var(--ink-55); }
.badge.status { background: rgba(182, 200, 218, .45); }
.badge.gone { background: var(--ink); color: var(--white); }

/* ------------------------------------------------------------ forms */
label.field { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 12px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); }
label.field:last-child { border-bottom: 0; }
label.field > span { font-size: 14px; color: var(--ink-75); }
.input { position: relative; }
.input input[type=text], .input select { padding-right: 30px; }
.input .unit { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--ink-45); font: 12px var(--mono); pointer-events: none; }
input[type=text], input[type=url], input[type=search], input[type=password], select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 3px;
  background: #fffdf2; color: var(--ink); font: inherit; font-size: 14px;
}
input.n { font-family: var(--mono); text-align: right; font-variant-numeric: tabular-nums; }
select { background: var(--white); padding-right: 10px; }
input.plain, textarea.plain { background: var(--white); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); background: var(--white); box-shadow: 0 0 0 3px rgba(46, 174, 116, .22); }
input.invalid, input.invalid:focus { border-color: var(--bad); background: rgba(180, 35, 24, .05); box-shadow: 0 0 0 3px rgba(180, 35, 24, .14); }
/* the source note under an assumption: quiet until you use it */
input.note-in {
  display: block; width: 100%; margin: -4px 0 4px; padding: 2px 0; border: 0; border-bottom: 1px dashed transparent; border-radius: 0;
  background: transparent; font-size: 12.5px; color: var(--ink-55); text-overflow: ellipsis;
}
input.note-in::placeholder { color: var(--ink-45); opacity: .7; }
input.note-in:hover { border-bottom-color: var(--line-strong); }
input.note-in:focus { box-shadow: none; border-bottom-color: var(--ink); color: var(--ink); background: transparent; }
textarea { min-height: 80px; resize: vertical; line-height: 1.5; }
.form-note { font-size: 13px; color: var(--ink-55); margin: 4px 0 0; }

button, .button {
  font: 500 14px/1 var(--sans); padding: 9px 14px; border-radius: 3px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line-strong); background: var(--white); color: var(--ink); transition: background-color .15s, border-color .15s, color .15s;
}
button:hover, .button:hover { border-color: var(--ink); }
button.primary, .button.primary { background: var(--ink); border-color: var(--ink); color: var(--white); }
button.primary:hover, .button.primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
button.link { border: 0; background: none; padding: 0; color: var(--ink-55); text-decoration: underline; text-underline-offset: 3px; }
button.link:hover { color: var(--ink); }
button:disabled { opacity: .45; cursor: default; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.stamp { font-size: 12.5px; color: var(--accent-ink); }
/* the toast: "Saved" and form errors, bottom right, wherever you are on the page */
#stamp { position: fixed; right: 20px; bottom: 20px; z-index: 60; max-width: min(440px, calc(100vw - 32px)); }
#stamp:empty { display: none; }
#stamp .stamp { display: block; padding: 8px 12px; border-radius: 3px; background: var(--white); border: 1px solid var(--line-strong); box-shadow: 0 6px 20px rgba(28, 25, 23, .08); }
#stamp .error { margin: 0; background: #fbeceb; border: 1px solid rgba(180, 35, 24, .25); box-shadow: 0 6px 20px rgba(28, 25, 23, .08); }
.error { display: block; padding: 10px 12px; border-radius: 3px; background: rgba(180, 35, 24, .08); color: var(--bad); font-size: 14px; margin-bottom: 12px; }
.note { padding: 10px 12px; border-radius: 3px; font-size: 13.5px; line-height: 1.5; background: rgba(182, 200, 218, .3); color: var(--ink-75); }
.note.warn { background: rgba(229, 196, 168, .45); }

/* ------------------------------------------------------------ flats grid */
.cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.card { border: 1px solid var(--line); border-radius: 4px; text-decoration: none; display: flex; flex-direction: column; background: var(--white); transition: border-color .15s, opacity .4s; }
.card:hover { border-color: var(--ink); }
.card.dim { opacity: .55; }
.card.fading { opacity: 0; transition: opacity 1.2s .3s; }  /* set to Rejected / Unavailable on the Active view: it goes */
.card .photo { aspect-ratio: 16 / 10; border-radius: 3px 3px 0 0; overflow: hidden; background: var(--background) center / cover no-repeat; }  /* no overflow:hidden on the card itself: the status menu hangs out of it */

/* the status badge on a card is a menu (static/app.js) */
.status-menu { position: relative; display: inline-block; }
.status-menu .badge { cursor: pointer; border: 0; font: inherit; font-size: 12.5px; font-weight: 600; padding: 3px 22px 3px 8px; position: relative; transition: background-color .15s; }
.status-menu .badge::after { content: ""; position: absolute; right: 8px; top: 50%; width: 5px; height: 5px; margin-top: -4px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); opacity: .6; }
.status-menu .badge:hover, .status-menu.open .badge { background: rgba(182, 200, 218, .8); }
.status-menu .menu {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 40; min-width: 180px; padding: 4px; border-radius: 4px;
  background: var(--white); border: 1px solid var(--line-strong); box-shadow: 0 10px 30px rgba(28, 25, 23, .14); display: flex; flex-direction: column;
}
.status-menu .menu button {
  border: 0; border-radius: 3px; background: none; padding: 7px 10px 7px 26px; text-align: left; font-size: 13.5px; font-weight: 400; position: relative; justify-content: flex-start;
}
.status-menu .menu button:hover, .status-menu .menu button:focus-visible { background: var(--background); outline: none; }
.status-menu .menu button[aria-checked="true"] { font-weight: 600; }
.status-menu .menu button[aria-checked="true"]::before { content: "✓"; position: absolute; left: 9px; color: var(--accent-ink); }
.card .body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card .title { font-weight: 600; line-height: 1.3; }
.card .meta { font-size: 13px; color: var(--ink-55); }
.card dl { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; margin: 0; font-size: 13px; }
.card dt { color: var(--ink-55); }
.card dd { margin: 0; text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.card dd .yes { color: var(--accent-ink); }
.card dd .no { color: var(--bad); }

/* photo carousel on the cards (static/app.js): arrows, or drag the photo sideways (finger or mouse) */
.carousel { position: relative; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.carousel:has(.next) { cursor: grab; }
.carousel.dragging { cursor: grabbing; }
.carousel .prev, .carousel .next {
  position: absolute; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; padding: 0; justify-content: center;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, .85); font-size: 20px; line-height: 1; opacity: 0; transition: opacity .15s;
  cursor: pointer; z-index: 1;
}
.carousel .prev { left: 8px; } .carousel .next { right: 8px; }
.card:hover .carousel .prev, .card:hover .carousel .next, .fcard:hover .carousel .prev, .fcard:hover .carousel .next,
.carousel button:focus-visible { opacity: 1; }
@media (hover: none) { .carousel .prev, .carousel .next { opacity: .9; } }
.carousel .count { position: absolute; right: 8px; bottom: 8px; padding: 2px 7px; border-radius: 3px; background: rgba(28, 25, 23, .6); color: #fff; font: 11px var(--mono); z-index: 1; }
.nophoto, .hero.none { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--ink-45); font-size: 13px; }
.hero.none { aspect-ratio: auto; height: 120px; }

/* Feed: photo column, decisions */
.data td.thumb { width: 114px; padding: 6px 4px 6px 10px; }
.data td.thumb > span { display: block; width: 104px; height: 72px; border-radius: 3px; background: var(--background) center / cover no-repeat; overflow: hidden; }
.data td.thumb .carousel { touch-action: auto; }  /* the table scrolls sideways on a tablet; page with the arrows there */
.data td.thumb .prev, .data td.thumb .next { width: 22px; height: 22px; font-size: 15px; background: rgba(255, 255, 255, .9); }
.data td.thumb .prev { left: 3px; } .data td.thumb .next { right: 3px; }
.data tr:hover td.thumb .prev, .data tr:hover td.thumb .next { opacity: 1; }
.data td.thumb .count { right: 3px; bottom: 3px; padding: 1px 5px; font-size: 10px; }
/* Feed rows on desktop: drag an open row to decide (app.js sets --p, --dx, going-yes / going-no, armed, leaving),
   the same feedback as the phone cards: the cells slide with the mouse, tint green / red, a stamp grows on the title */
tr.swipe { --p: 0; --dx: 0px; }
tr.swipe > td { cursor: grab; transform: translateX(var(--dx)); transition: transform .35s cubic-bezier(.2, .9, .3, 1.2), background-color .2s, opacity .25s; }
tr.swipe > td :is(a, input, button, .carousel) { cursor: auto; }
tr.swipe > td button { cursor: pointer; }
tr.swipe.dragging > td { transition: none; cursor: grabbing; user-select: none; -webkit-user-select: none; }
tr.swipe.going-yes { --tint: var(--accent); --tint-ink: var(--accent-ink); }
tr.swipe.going-no { --tint: var(--bad); --tint-ink: var(--bad); }
.data tr.swipe.going-yes td, .data tr.swipe.going-no td { background: color-mix(in srgb, var(--tint) calc(var(--p) * 35%), transparent); }
.data tr.swipe.armed td { background: color-mix(in srgb, var(--tint) 45%, transparent); box-shadow: inset 0 2px 0 var(--tint-ink), inset 0 -2px 0 var(--tint-ink); }
tr.swipe.leaving > td { transition: transform .25s ease-in, opacity .25s ease-in; opacity: 0; }
tr.swipe td.listing { position: relative; }
tr.swipe .hint {
  position: absolute; top: 50%; left: 50%; z-index: 3; pointer-events: none; display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border: 2px solid rgba(255, 255, 255, .92); border-radius: 4px; color: #fff;
  font: 700 15px/1 var(--heading); letter-spacing: -.01em; white-space: nowrap; box-shadow: 0 8px 24px rgba(28, 25, 23, .22);
  opacity: 0; transform: translate(-50%, -50%) scale(.6); transition: opacity .15s, transform .15s;
}
tr.swipe .hint i { font-style: normal; font-size: 20px; line-height: 1; }
tr.swipe .hint em { display: none; font-style: normal; }
tr.swipe .hint.yes { background: var(--accent-ink); }
tr.swipe .hint.no { background: var(--bad); }
tr.swipe.going-yes .hint.yes { opacity: min(1, calc(var(--p) * 2)); transform: translate(-50%, -50%) scale(calc(.75 + .25 * var(--p))) rotate(-3deg); }
tr.swipe.going-no .hint.no { opacity: min(1, calc(var(--p) * 2)); transform: translate(-50%, -50%) scale(calc(.75 + .25 * var(--p))) rotate(3deg); }
tr.swipe.armed .hint.yes { transform: translate(-50%, -50%) scale(1.08) rotate(-3deg); }
tr.swipe.armed .hint.no { transform: translate(-50%, -50%) scale(1.08) rotate(3deg); }
tr.swipe.armed .hint b { display: none; }
tr.swipe.armed .hint em { display: inline; }
tr.swipe.dragging .hint, tr.swipe.dragging > td { transition: none; }
button.yes { border-color: rgba(46, 174, 116, .5); color: var(--accent-ink); }
button.yes:hover { background: rgba(46, 174, 116, .1); border-color: var(--accent-ink); }
button.no { color: var(--bad); }
button.no:hover { border-color: var(--bad); }
.fcards { display: none; }
.fcard { position: relative; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--white); margin-bottom: 14px; touch-action: pan-y; will-change: transform; }
.fcard.dim { opacity: .55; }
.fcard .fphoto { position: relative; aspect-ratio: 16 / 10; background: var(--background) center / cover no-repeat; }
/* Swipe to decide (app.js sets --p = 0..1 of the way to the threshold, going-yes / going-no, armed past it).
   The whole card tints green or red as you drag, a stamp grows in the top corner, and past the threshold the
   border takes the colour and the stamp says what a release does. */
.fcard.swipe { --p: 0; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.fcard.going-yes { --tint: var(--accent); --tint-ink: var(--accent-ink); }
.fcard.going-no { --tint: var(--bad); --tint-ink: var(--bad); }
.fcard.swipe::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background: var(--tint, transparent); opacity: calc(var(--p) * .4); transition: opacity .25s;
}
.fcard.armed::after { opacity: .5; }
.fcard.armed { border-color: var(--tint-ink); box-shadow: 0 0 0 3px var(--tint); }
.fcard.dragging { cursor: grabbing; transition: none; }
.fcard.dragging::after { transition: none; }
.fcard.settling { transition: transform .35s cubic-bezier(.2, .9, .3, 1.2), box-shadow .25s, border-color .25s; }
.fcard.leaving { transition: transform .25s ease-in, opacity .25s ease-in; opacity: 0; }
.fcard .hint {
  position: absolute; top: 50%; left: 50%; z-index: 3; pointer-events: none; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border: 2px solid rgba(255, 255, 255, .92); border-radius: 4px; color: #fff;
  font: 700 18px/1 var(--heading); letter-spacing: -.01em; white-space: nowrap; box-shadow: 0 8px 24px rgba(28, 25, 23, .22);
  opacity: 0; transform: translate(-50%, -50%) scale(.6); transition: opacity .15s, transform .15s;
}
.fcard .hint i { font-style: normal; font-size: 24px; line-height: 1; }
.fcard .hint em { display: none; font-style: normal; }
.fcard .hint.yes { background: var(--accent-ink); }
.fcard .hint.no { background: var(--bad); }
/* the stamp leans against the drag a little, so it stays on screen while the card slides away */
.fcard.going-yes .hint.yes { opacity: min(1, calc(var(--p) * 2)); transform: translate(calc(-50% - 36px * var(--p)), -50%) scale(calc(.7 + .3 * var(--p))) rotate(-6deg); }
.fcard.going-no .hint.no { opacity: min(1, calc(var(--p) * 2)); transform: translate(calc(-50% + 36px * var(--p)), -50%) scale(calc(.7 + .3 * var(--p))) rotate(6deg); }
.fcard.armed .hint.yes { transform: translate(calc(-50% - 36px), -50%) scale(1.15) rotate(-6deg); }
.fcard.armed .hint.no { transform: translate(calc(-50% + 36px), -50%) scale(1.15) rotate(6deg); }
.fcard.armed .hint b { display: none; }
.fcard.armed .hint em { display: inline; }
.fcard.dragging .hint { transition: none; }
.fcard .fbody { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.fcard .ftitle { font-weight: 600; line-height: 1.3; text-decoration: none; }
.fcard dl { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; margin: 0; font-size: 13.5px; }
.fcard dt { color: var(--ink-55); } .fcard dd { margin: 0; text-align: right; font-family: var(--mono); }
.fcard .actions button { flex: 1; justify-content: center; padding: 11px 12px; }

/* flat detail */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.gallery button { padding: 0; border: 2px solid transparent; border-radius: 3px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--background) center / cover no-repeat; }
.gallery button.on { border-color: var(--accent); }
/* the photo strip: one row of thumbnails that scrolls (arrows, swipe, snap; static/app.js) */
.strip { position: relative; }
.strip .gallery { display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 36px; padding: 2px 0 8px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.strip .gallery button { flex: 0 0 112px; width: 112px; scroll-snap-align: start; }
.strip .gallery button.on { box-shadow: 0 0 0 1px var(--white) inset; }
.strip .prev, .strip .next {
  position: absolute; top: calc(50% - 4px); transform: translateY(-50%); width: 32px; height: 32px; padding: 0; justify-content: center; z-index: 1;
  border: 1px solid var(--line-strong); border-radius: 50%; background: rgba(255, 255, 255, .94); font-size: 20px; line-height: 1; box-shadow: 0 2px 8px rgba(28, 25, 23, .12);
}
.strip .prev { left: -12px; } .strip .next { right: -12px; }
.strip:not(.scrolls) .prev, .strip:not(.scrolls) .next { display: none; }
.strip.at-start .prev, .strip.at-end .next { opacity: .3; pointer-events: none; }

/* the flat's title: double-click (or the pencil) to rename it in place (static/app.js) */
.title-edit { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.title-edit h1 { min-width: 0; border-radius: 3px; outline: none; }
.title-edit h1[contenteditable] { background: var(--white); box-shadow: 0 0 0 3px rgba(46, 174, 116, .22); padding: 0 6px; margin: 0 -6px; cursor: text; }
.title-edit .pencil { margin-top: 5px; width: 28px; height: 28px; padding: 0; justify-content: center; border-radius: 50%; color: var(--ink-55); font-size: 14px; opacity: 0; transition: opacity .15s, color .15s, border-color .15s; }
.title-edit:hover .pencil, .title-edit .pencil:focus-visible { opacity: 1; }
.title-edit .pencil:hover { color: var(--ink); }
@media (hover: none) { .title-edit .pencil { opacity: 1; } }
.title-edit .edit-hint { flex-basis: 100%; font-size: 12.5px; color: var(--ink-55); }
.hero { width: 100%; aspect-ratio: 16 / 9; border-radius: 4px; background: var(--background) center / cover no-repeat; }
.hero.broken { display: none; }
.side { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow: auto; }
.ai p { margin: 0 0 10px; }
.ai blockquote { margin: 6px 0; padding: 6px 10px; border-left: 2px solid var(--sage); color: var(--ink-75); font-size: 13.5px; }
.answers { list-style: none; padding: 0; margin: 0 0 10px; font-size: 13.5px; }
.answers li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.answers .date { font: 12px var(--mono); color: var(--ink-45); margin-right: 6px; }
.spark { width: 100%; height: 70px; }

/* ------------------------------------------------------------ Finances: the people as a pile of cards (app.js) */
.people-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.people-nav .who { flex: 1; text-align: center; font: 600 14px/1.3 var(--heading); letter-spacing: -.01em; color: var(--ink-75); }
.people-nav .turn { width: 34px; height: 34px; padding: 0; justify-content: center; border-radius: 50%; font-size: 20px; line-height: 1; }
.deck { display: grid; position: relative; touch-action: pan-y; }
.people.many .deck { padding: 0 16px 16px 0; cursor: grab; }
.deck .person { grid-area: 1 / 1; transform-origin: left center; will-change: transform; transition: transform .3s ease, box-shadow .3s ease, opacity .3s; }
.deck .person > * { transition: opacity .2s; }
.deck .person.on { z-index: 3; box-shadow: 0 10px 28px rgba(28, 25, 23, .08); border-color: var(--line-strong); }
.deck .person:not(.on) { cursor: pointer; }
.deck .person:not(.on) > * { opacity: 0; transition: opacity .15s; }  /* behind: just the card's edge shows; the fields stay in the form */
.deck .person.behind-1 { z-index: 2; transform: translate(8px, 8px); }
.deck .person.behind-2 { z-index: 1; transform: translate(16px, 16px); }
.deck .person.dragging { transform-origin: center; transition: none; cursor: grabbing; }
.deck .person.turning { z-index: 4; transform: perspective(1200px) rotateY(-75deg); opacity: .4; transition: transform .22s ease-in, opacity .22s ease-in; }
.deck .person.turning-in { z-index: 4; transform: perspective(1200px) rotateY(75deg); opacity: .4; transition: none; }
.deck .person.turning-back { z-index: 4; }
.deck .actions, .deck label.field > span, .deck h3 { user-select: none; -webkit-user-select: none; }
@media (prefers-reduced-motion: reduce) { .deck .person, .deck .person > * { transition: none; } }

/* ------------------------------------------------------------ Search: limits beside the map */
.search-layout { display: grid; gap: 24px; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); align-items: start; }
.search-layout .stack > .panel + .panel { margin-top: 0; }
.map-col { position: sticky; top: 72px; }
.map-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.map-head h2 { margin: 0; }
.map-head .form-note { margin: 0; }
iframe.map { display: block; width: 100%; height: calc(100vh - 150px); min-height: 420px; border: 1px solid var(--line); border-radius: 4px; background: var(--background); }
@media (max-width: 900px) {
  .search-layout { grid-template-columns: minmax(0, 1fr); }
  .map-col { position: static; }
  iframe.map { height: 70vh; min-height: 360px; }
}

/* ------------------------------------------------------------ the "i" next to a label (macros.html info(), app.js) */
button.info {
  position: relative; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0; margin-left: 2px;
  border: 1px solid var(--line-strong); border-radius: 50%; background: var(--white); color: var(--ink-55);
  font: 700 10px/1 var(--mono); vertical-align: 1px; cursor: help; transition: color .15s, border-color .15s;
}
button.info:hover, button.info:focus-visible, button.info.open { border-color: var(--ink); color: var(--ink); }
button.info:focus-visible { outline-offset: 1px; }
/* the tip sits inside the button (hidden) and moves to <body>, fixed, while open (app.js): nothing clips it */
.tip {
  display: none; z-index: 70; width: max-content; max-width: min(300px, calc(100vw - 32px));
  padding: 10px 12px; border-radius: 4px; background: var(--ink); color: var(--white); text-align: left; white-space: normal;
  font: 400 13px/1.5 var(--sans); letter-spacing: 0; box-shadow: 0 10px 30px rgba(28, 25, 23, .18); cursor: auto; pointer-events: none;
}
.tip.floating { display: block; position: fixed; left: 0; top: 0; }
.tip::before { content: ""; position: absolute; left: var(--arrow, 11px); top: -5px; border: 5px solid transparent; border-top: 0; border-bottom-color: var(--ink); }
.tip.up::before { top: auto; bottom: -5px; border-bottom: 0; border-top: 5px solid var(--ink); }
.tip b { color: var(--sage); font-weight: 600; }

/* Finances, other money: one block per loan */
.money .loan { padding: 12px 0; border-top: 1px solid var(--line); }
.money .loan:first-child { border-top: 0; padding-top: 4px; }
.loan-head { display: flex; align-items: center; gap: 12px; }
.loan-head input { flex: 1; font-weight: 600; }
.loan-head .link { flex: none; }
.loan-row { display: grid; grid-template-columns: minmax(130px, 1.4fr) minmax(84px, 1fr) minmax(84px, 1fr) auto; gap: 10px; align-items: end; margin-top: 8px; }
.loan-row label > span:first-child { display: block; font-size: 12px; color: var(--ink-55); margin-bottom: 3px; }
.loan-row .input input { padding-right: 34px; }
.loan-row .check { display: flex; align-items: center; gap: 6px; padding-bottom: 9px; font-size: 13.5px; white-space: nowrap; }
.loan-row .check input { width: auto; margin: 0; }
@media (max-width: 480px) {
  .loan-row { grid-template-columns: 1fr 1fr; }
  .loan-row .check { grid-column: 1 / -1; padding-bottom: 0; }
}

/* the "Watch price" prompt (app.js ask()): a price input with Save / Cancel, in a card's status menu or by the flat's status */
.ask { display: flex; flex-direction: column; gap: 8px; padding: 8px; min-width: 220px; }
.ask label > span:first-child { display: block; font-size: 12.5px; color: var(--ink-75); margin-bottom: 4px; }
.ask .input { display: block; }
.ask .actions { gap: 6px; }
.ask .actions button { padding: 7px 10px; }
.ask .err { color: var(--bad); }
.status-menu .menu.asking > [data-status] { display: none; }
.status-menu .watch { margin-left: 6px; white-space: nowrap; }
.flat-status { align-items: center; }
.flat-status .ask { flex-basis: 100%; padding: 8px 0 0; border-top: 1px solid var(--line); }
.flat-status .ask .actions { flex-direction: row; }

/* the flat page head: address and status on one line, then the four figures in a tight row */
.flat-head { margin-bottom: 18px; }
.lede-row { display: flex; align-items: center; gap: 10px 24px; flex-wrap: wrap; margin-top: 6px; }
.fig .val .badge { white-space: normal; line-height: 1.3; }
.lede-row .lede { margin: 0; }
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; }
.fig { border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; min-width: 0; }
.fig .label { font-size: 11.5px; color: var(--ink-55); line-height: 1.3; }
.fig .value { font: 700 1.1rem/1.2 var(--mono); letter-spacing: -.02em; margin-top: 3px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fig .val { margin-top: 5px; }
.fig .sub { font-size: 11.5px; color: var(--ink-55); margin-top: 1px; }
.flat-layout .note.small { font-size: 13px; padding: 8px 10px; }

/* "↺ use it" under a flat input: a quiet link that sits in the hint line */
button.revert {
  display: inline; padding: 0 1px; margin-left: 4px; border: 0; border-radius: 2px; background: none; font: inherit; line-height: inherit;
  color: var(--accent-ink); text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; vertical-align: baseline; white-space: nowrap;
}
button.revert:hover { color: var(--ink); text-decoration-style: solid; border-color: transparent; }

.empty { color: var(--ink-55); padding: 28px 0; text-align: center; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.filters select { width: auto; }
details summary { cursor: pointer; color: var(--ink-75); font-size: 14px; }
details[open] summary { margin-bottom: 8px; }

@media (max-width: 900px) {
  .side { position: static; max-height: none; overflow: visible; }
  .flat-layout > .side { order: -1; }  /* the verdict first, then the inputs */
}
@media (max-width: 760px) {
  /* the header on a phone: one row. The brand is its discs, New and Watchlist, then the ≡ menu (with the page's
     name on it when the page is inside the menu) */
  .top { padding: 0 12px; gap: 6px; min-height: 48px; flex-wrap: nowrap; }
  .brand .name { display: none; }
  .top nav { flex: 1; min-width: 0; gap: 0; }
  .top nav a { padding: 7px 9px; font-size: 14px; }
  .menu-btn { padding: 6px 8px; gap: 4px; }
  .menu-btn .lbl, .menu-btn .chev { display: none; }
  .menu-btn.on .lbl { display: inline; font-size: 13.5px; }
  .menu-btn .ham { display: block; }
  .menu-panel { position: fixed; left: 12px; right: 12px; top: 54px; min-width: 0; }
  .menu-panel a { white-space: normal; }
  main { padding: 22px 16px 60px; }
  label.field { grid-template-columns: 1fr; gap: 4px; }
  .data .opt { display: none; }
  .fcards { display: block; }  /* the Feed on a phone: cards you swipe, not the table */
  .ftable { display: none; }
  .data td.listing { min-width: 160px; }
}

/* New: Feed | Map segmented control in the head, and the Map view */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; background: var(--paper, #fff); align-self: center; }
.seg a { padding: 5px 14px; border-radius: 999px; font-size: 13.5px; color: var(--ink-75); text-decoration: none; white-space: nowrap; }
.seg a:hover { color: var(--ink); }
.seg a.on { background: var(--ink); color: #fff; }
.filters-toggle { display: none; }  /* phones only: opens the filters in a small sheet under the bar */
.map-head { margin-bottom: 16px; }
main:has(#feed-map) { padding-bottom: 24px; }  /* the map fills the viewport (app.js sizes it), no page scroll */
.map-wrap { position: relative; z-index: 0; }  /* its own stacking context: the legend stays under the menus */
#feed-map { height: calc(100vh - 290px); min-height: 320px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #f5f3ee; isolation: isolate; }
#feed-map .basemap { filter: saturate(.55) brightness(1.03); }  /* lighter tiles, so the markers carry the colour */
/* the legend: a small panel in the map's top-right corner (the zoom control sits top-left) */
.map-wrap .legend { position: absolute; top: 8px; right: 8px; z-index: 800; display: grid; gap: 3px; margin: 0; padding: 7px 10px; font-size: 11.5px; line-height: 1.3; background: rgba(255,255,255,.9); border-radius: 8px; box-shadow: 0 1px 4px rgba(20,18,14,.15); pointer-events: none; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend .dot { width: 11px; height: 11px; border-radius: 50%; border: 2px solid; box-sizing: border-box; flex: none; }
.legend .dot.ok { background: #2eae74; border-color: #1b7f54; }
.legend .dot.tight { background: #e5c4a8; border-color: #8a5a2b; }
.legend .dot.no { background: #b42318; border-color: #7a1811; }
.legend .dot.none { background: #b6c8da; border-color: #5b7390; }
.legend .dot.approx { background: rgba(46,174,116,.18); border: 1.5px dashed #1b7f54; }
/* the listing's card, in a Leaflet popup or the phone sheet */
.mpopup .leaflet-popup-content-wrapper { border-radius: 12px; padding: 0; box-shadow: 0 10px 30px rgba(20,18,14,.18); overflow: hidden; }
.mpopup .leaflet-popup-content { margin: 0; width: auto !important; font: inherit; line-height: 1.4; }
.mpopup .leaflet-popup-close-button { z-index: 2; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5); font-size: 20px; padding: 2px 6px 0 0; }
.mpopup .leaflet-popup-tip { box-shadow: none; }
.mpop { width: 300px; max-width: 100%; }
.mpop .mphoto { position: relative; height: 160px; background: #e8e4dc center/cover no-repeat; user-select: none; }
.mpop .mphoto .prev, .mpop .mphoto .next { position: absolute; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(255,255,255,.85); color: var(--ink); font-size: 18px; line-height: 1; cursor: pointer; padding: 0; }
.mpop .mphoto .prev { left: 8px; } .mpop .mphoto .next { right: 8px; }
.mpop .mphoto .count { position: absolute; right: 8px; bottom: 8px; font-size: 11px; background: rgba(0,0,0,.5); color: #fff; padding: 2px 7px; border-radius: 999px; }
.mpop .approx-tag { position: absolute; left: 8px; bottom: 8px; font-size: 11px; background: rgba(255,255,255,.9); color: var(--ink-75); padding: 2px 7px; border-radius: 999px; }
.mpop .mbody { padding: 10px 12px 12px; display: grid; gap: 8px; }
.mpop .mtitle { font-weight: 600; color: var(--ink); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mpop .mtitle:hover { text-decoration: underline; }
.mpop dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0; font-size: 13.5px; }
.mpop dt { color: var(--ink-55); } .mpop dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.mpop .mdecide { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 2px; }
.mpop .mdecide button { width: 100%; }
.mpop .mdecide button.no { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent); }
#map-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200; background: #fff; border-radius: 16px 16px 0 0; box-shadow: 0 -8px 30px rgba(20,18,14,.22); transform: translateY(100%); transition: transform .25s; max-height: 85vh; overflow: auto; padding-bottom: env(safe-area-inset-bottom); }
#map-sheet.open { transform: none; }
#map-sheet .close { position: absolute; top: 8px; right: 8px; z-index: 2; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(255,255,255,.9); color: var(--ink); font-size: 16px; padding: 0; cursor: pointer; }
#map-sheet .mpop { width: auto; }
#map-sheet .mpop .mphoto { height: 200px; border-radius: 16px 16px 0 0; }
@media (max-width: 760px) {
  /* Feed, Watchlist and both maps on a phone: the head is one bar. The section name (the eyebrow) is the title, the
     h1 and its "i" go, the view switch stays, and the filters (or the Watchlist's actions) open from a Filters button. */
  .bar-head { position: relative; display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; margin-bottom: 12px; }
  .bar-head > div:first-child { flex: 1 1 auto; min-width: 0; }
  .bar-head .eyebrow { font: 600 16px/1.2 var(--heading); letter-spacing: -.01em; text-transform: none; color: var(--ink); margin: 0; }
  .bar-head h1 { display: none; }
  .bar-head .seg { flex: none; padding: 2px; }
  .bar-head .seg a { padding: 5px 11px; font-size: 13px; }
  .filters-toggle { display: inline-flex; flex: none; padding: 6px 11px; font-size: 13px; }
  .bar-head.filters-open .filters-toggle { background: var(--ink); color: #fff; border-color: var(--ink); }
  .bar-head .filters, .bar-head .actions { display: none; }
  .bar-head.filters-open .filters, .bar-head.filters-open .actions {
    display: flex; flex-direction: column; align-items: stretch; gap: 8px; position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60;
    background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px; box-shadow: 0 10px 30px rgba(20,18,14,.18);
  }
  .bar-head.filters-open .filters select, .bar-head.filters-open .actions .button, .bar-head.filters-open .actions button { width: 100%; text-align: left; }
  .bar-head.filters-open .filters > span:last-child { margin: 2px 0 0; }
  .bar-head.filters-open .actions .ext-only { display: block; }
  html:not([data-flat-import]) .bar-head.filters-open .actions .ext-only { display: none; }
  /* the map is what you see first: it fills the viewport under the nav (app.js sets the exact height) */
  main:has(#feed-map) { padding: 10px 12px 10px; }
  .map-head { margin-bottom: 10px; }
  #feed-map { height: calc(100vh - 220px); min-height: 320px; border-radius: 10px; }
  .map-wrap .legend { padding: 5px 8px; font-size: 10.5px; gap: 2px; }
  .mpopup { display: none; }  /* the sheet, not a popup, on a phone */
}

/* Shown only where the Flat import extension runs (it sets html[data-flat-import]) */
html:not([data-flat-import]) .ext-only { display: none !important; }
#price-check { margin: 0 0 18px; }
#price-check ul { margin: 6px 0 0; padding-left: 18px; }