:root{
  /* 2026-08-29: palette moved back to blue/green hues, away from orange/red,
     per Paul's decision. --coral/--coral-dark names kept as-is (still the
     primary accent variable everywhere) to avoid touching every usage site --
     only the values changed. */
  --coral:#256D7B; --coral-dark:#184F59; --ink:#1C2B2E; --ink-soft:#5C6F72;
  --border:#DCE6E4; --surface:#fff; --bg:#F3F7F6; --green:#1E8F72; --red:#D1454A;
  /* Visual redesign (2026-09-13): a cyan step between --coral and --green
     for "in progress / secondary" states that used to reach for amber --
     see the status-pill-pending/activity-badge-medium/status-simulated
     fixes below, all previously the only amber left in the app. */
  --cyan:#0E8FA0; --cyan-tint:#DFF3F5;
  --font-display:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box;}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink);display:flex;justify-content:center;padding:32px 16px;}

/* Dyslexia-friendly font (2026-09-16, accessibility -- first-class, not
   a bolt-on): OpenDyslexic's weighted letter-bottoms and wide spacing
   are specifically designed to reduce letter-swapping/flipping. Applied
   to everything, not just body copy, via a class on <body> toggled from
   a real profile column (accessibility_font), not a local-only hack. */
@font-face{
  font-family:'OpenDyslexic';
  src:url('https://cdn.jsdelivr.net/npm/open-dyslexic@1.0.3/otf/OpenDyslexic-Regular.otf') format('opentype');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'OpenDyslexic';
  src:url('https://cdn.jsdelivr.net/npm/open-dyslexic@1.0.3/otf/OpenDyslexic-Bold.otf') format('opentype');
  font-weight:700;font-style:normal;font-display:swap;
}
body.dyslexic-font,
body.dyslexic-font input,
body.dyslexic-font textarea,
body.dyslexic-font select,
body.dyslexic-font button{
  font-family:'OpenDyslexic',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  letter-spacing:0.02em;
  line-height:1.6;
}
body.dyslexic-font h1,
body.dyslexic-font h2{
  font-family:'OpenDyslexic',var(--font-display);
}
.language-tool-bar{display:flex;gap:8px;align-items:center;margin-top:6px;flex-wrap:wrap;}
.language-tool-select{font-size:13px;padding:4px 6px;border-radius:8px;border:1px solid var(--border);background:var(--surface);}
.language-tool-result{margin-top:6px;padding:10px 12px;background:var(--bg);border-left:3px solid var(--accent,#2e7d32);border-radius:8px;font-size:14px;white-space:pre-wrap;}
.card{width:100%;max-width:420px;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:28px;box-shadow:0 2px 16px rgba(20,30,30,0.08);}
h1{font-family:var(--font-display);font-weight:700;font-size:20px;margin:0 0 4px;}
/* Legibility pass (2026-08-30, bug #256 -- "hard to read and blend
   together"): h2 does double duty as both a section divider (several
   stacked per tab, e.g. Jobs) and a page-title-style heading (e.g. a
   subcategory name) -- bigger/bolder/darker plus real top space works
   for both without needing to split it into two tags across every call
   site tonight. */
h2{font-family:var(--font-display);font-size:18px;font-weight:800;color:var(--ink);letter-spacing:-0.01em;margin:30px 0 10px;}
.sub{color:var(--ink-soft);font-size:13px;margin:0 0 20px;}
label{display:block;font-size:12px;font-weight:600;color:var(--ink-soft);margin:14px 0 4px;}
input,select{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:8px;font-size:14px;font-family:inherit;background:#fff;}
input:focus,select:focus{outline:none;border-color:var(--coral);box-shadow:0 0 0 3px rgba(37,109,123,0.15);}
button{width:100%;margin-top:20px;padding:11px;border:none;border-radius:8px;background:var(--coral);color:#fff;font-weight:600;font-size:14px;cursor:pointer;}
button:hover{background:var(--coral-dark);}
button.secondary{background:transparent;color:var(--coral);margin-top:8px;border:1px solid var(--coral);}
button.secondary:hover{background:#E3F0EF;}
button.link{width:auto;margin:0;padding:0;background:none;color:var(--coral);font-weight:600;font-size:12px;text-decoration:underline;cursor:pointer;}
.switch{text-align:center;font-size:13px;color:var(--ink-soft);margin-top:16px;}
.switch a{color:var(--coral);cursor:pointer;text-decoration:underline;}
.link-row{text-align:right;font-size:12px;margin-top:6px;}
.link-row a{color:var(--coral);cursor:pointer;text-decoration:underline;}
.msg{font-size:13px;margin-top:12px;padding:8px 10px;border-radius:8px;display:none;}
.msg.error{display:block;background:#FBEAEA;color:var(--red);}
.msg.ok{display:block;background:#E7F6F1;color:var(--green);}
.help-strip{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:var(--coral-dark);background:#EAF2F1;border:1px solid var(--border);border-radius:8px;padding:8px 10px;margin:0 0 10px;}
.help-strip span{flex:1;}
.help-strip-close{width:auto;margin:0;padding:0 2px;background:none;border:none;color:var(--coral-dark);font-size:15px;line-height:1;cursor:pointer;font-weight:700;}
.profile-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);font-size:14px;}
.profile-row:last-child{border-bottom:none;}
/* Coin balance hero (2026-09-13 visual redesign): the mockup's
   "celebratory" treatment for the one number every account cares about
   most -- a gradient card instead of plain centred text. Structure
   unchanged (#coinBalance is still just the number), .coins-hero wraps
   it and .coins-label sits inside the same card. */
.coins-hero{
  background:linear-gradient(135deg,var(--coral) 0%,var(--cyan) 55%,var(--green) 100%);
  border-radius:16px;padding:16px 10px 14px;margin:0 0 12px;text-align:center;
  box-shadow:0 4px 16px rgba(24,79,89,0.25);
}
.coins{font-family:var(--font-display);font-size:34px;font-weight:800;color:#fff;text-align:center;margin:0;line-height:1;}
.coins-label{text-align:center;font-size:12px;color:rgba(255,255,255,0.85);margin:4px 0 0;}
.coins-label button.link{color:#fff;}
/* Tax savings / project purse sit under the main figure, never summed into it. */
.coins-sub{text-align:center;font-size:12px;color:rgba(255,255,255,0.85);margin:6px 0 0;}
.coins-sub:empty{display:none;}
.transfer-row{display:flex;gap:8px;align-items:center;}
.transfer-row select{flex:1;min-width:0;}
#logoutBtn{background:var(--ink-soft);}
#logoutBtn:hover{background:var(--ink);}
.photo-preview{width:88px;height:88px;border-radius:50%;object-fit:cover;display:block;margin:8px auto 0;border:1px solid var(--border);background:var(--bg);}
.service-row{display:flex;gap:6px;align-items:flex-start;margin-top:8px;}
.service-row select{flex:2;}
.service-row input.rate{flex:1;}
.service-row button.remove{width:auto;margin:0;padding:8px 10px;background:transparent;color:var(--ink-soft);border:1px solid var(--border);font-size:16px;line-height:1;}
.service-row button.remove:hover{color:var(--red);border-color:var(--red);}
.other-category-input{margin-top:6px;display:none;}
.service-block{border-bottom:1px dashed var(--border);padding-bottom:10px;margin-bottom:4px;}
.skill-picker{margin-top:4px;}
.skill-picker .category-grid{margin-bottom:0;}
.service-list-view .profile-row b{text-align:right;}
textarea{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:8px;font-size:14px;font-family:inherit;resize:vertical;min-height:64px;}
textarea:focus{outline:none;border-color:var(--coral);box-shadow:0 0 0 3px rgba(37,109,123,0.15);}
.target-options{display:flex;flex-direction:column;gap:8px;margin-top:8px;}
.target-option{display:flex;align-items:center;gap:8px;font-size:13px;}
.target-option.disabled{color:var(--ink-soft);}
.target-option input{width:auto;}
.banner{background:#E3F0EF;border:1px solid var(--coral);color:var(--coral-dark);font-size:13px;font-weight:600;padding:10px 12px;border-radius:8px;margin-bottom:12px;}
/* "Next up for you" hero (2026-09-13 visual redesign) -- the single
   highest-priority attention item gets its own gradient treatment,
   distinct from the flatter banners below it (see attention.js). */
.banner-hero{
  background:linear-gradient(135deg,var(--coral) 0%,var(--cyan) 55%,var(--green) 100%);
  border:none;color:#fff;padding:16px;border-radius:14px;
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  text-align:left;box-shadow:0 4px 16px rgba(24,79,89,0.22);
}
.banner-hero-label{font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;opacity:0.9;}
.banner-hero-text{font-size:15px;font-weight:700;line-height:1.35;}
.emergency-banner{background:#FBEAEA;border:1px solid var(--red);color:var(--red);font-size:12.5px;font-weight:600;padding:10px 12px;border-radius:8px;margin:14px 0;line-height:1.4;}
.toggle-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;margin-top:16px;}
.toggle-row input{width:auto;}
.disclaimer-box{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:12px 14px;margin-top:16px;font-size:12.5px;color:var(--ink-soft);line-height:1.5;max-height:180px;overflow-y:auto;}
.disclaimer-box p{margin:0 0 8px;}
.disclaimer-box p:last-child{margin-bottom:0;}
.disclaimer-box b{color:var(--ink);}
/* Same visual language as .disclaimer-box, but never clipped/scrollable --
   for framing statements (demo status, funding purpose, realistic
   timeline) that need to be fully visible without the reader having to
   notice there's more to scroll to. */
.notice-box{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:12px 14px;margin-top:16px;font-size:13px;color:var(--ink-soft);line-height:1.5;}
.notice-box p{margin:0 0 8px;}
.notice-box p:last-child{margin-bottom:0;}
.notice-box b{color:var(--ink);}
.agree-row{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;margin-top:10px;}
.agree-row input{width:auto;margin-top:2px;}
.agree-row label{margin:0;font-weight:400;color:var(--ink);}
.q-item{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin-top:10px;cursor:pointer;}
.q-item .q-meta{font-size:12px;color:var(--ink-soft);display:flex;justify-content:space-between;}
.q-item .q-snippet{font-size:15px;margin-top:4px;}
.q-item .q-badge{background:var(--coral);color:#fff;font-size:10px;font-weight:700;padding:1px 6px;border-radius:10px;}

/* Status pills (2026-08-30 visual pass, following Paul's appearance
   mockup -- coloured status tags on list rows instead of plain grey
   meta text, so state reads at a glance). Semantic colour, distinct
   from the brand accent: green=done/matched, coral=active/open,
   grey=cancelled/closed, cyan=pending/waiting (2026-09-13: was amber,
   the last "warning-adjacent" hue in the status-pill set -- moved to
   the same blue/green family as everything else). */
.status-pill{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:10px;letter-spacing:0.02em;white-space:nowrap;}
.status-pill-active, .status-pill-open{background:#E3F0EF;color:var(--coral-dark);}
.status-pill-completed, .status-pill-matched, .status-pill-approved{background:#E7F6F1;color:var(--green);}
.status-pill-cancelled, .status-pill-rejected, .status-pill-closed{background:#EEF2F1;color:var(--ink-soft);}
.status-pill-pending{background:var(--cyan-tint);color:var(--cyan);}

/* Tab-identity pill (2026-08-30, real visual pass following Paul's
   appearance-mockup reference): the mockup floats a coloured pill badge
   ("HOME", "PROFILE", "ACCOUNT") above each screen so it's always clear
   which section you're in. Oi's shared profile-header sits above every
   tab's content regardless of which tab is active, so there was no
   per-tab identity marker at all before this -- this is that marker,
   in Oi's own teal rather than the mockup's purple. */
.tab-pill{
  display:inline-block;background:var(--coral);color:#fff;
  font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:0.06em;
  text-transform:uppercase;padding:5px 14px;border-radius:999px;
  margin:0 0 16px;box-shadow:0 2px 6px rgba(37,109,123,0.25);
}

/* Activity tab's Messages/Jobs switcher (2026-08-30 nav restructure) --
   both used to be full top-level tabs with their own tab-pill; folded
   into one Activity tab, so this sub-nav replaces that distinction. */
/* 2026-09-19: the sub-nav is gone (flat messages); Jobs and Updates are
   plain links above the conversation list, each with a back link. */
.activity-header-links{display:flex;gap:16px;justify-content:flex-end;margin:0 0 12px;clear:both;}
.activity-subtab-btn{margin-top:0;width:auto;}
.link-back.activity-subtab-btn{margin-bottom:8px;}

/* Flat thread (2026-09-19): one chronological column of bubbles, with
   anything that isn't a message (jobs, cOIns, quotes, changes) as a small
   centred line between them, like a phone's messaging app. */
.thread-msg{display:flex;flex-direction:column;margin-top:6px;}
.thread-msg-mine{align-items:flex-end;}
.thread-msg-theirs{align-items:flex-start;}
.thread-msg .bubble{margin-top:0;}
.thread-msg-time{font-size:11px;color:var(--ink-soft);margin:2px 6px 0;}
.thread-msg-tools{max-width:85%;margin-top:4px;}
.thread-msg-tools button{margin-top:4px;width:auto;}
.thread-event{text-align:center;font-size:12px;color:var(--ink-soft);margin:10px auto;max-width:92%;line-height:1.45;}
.thread-event .link{margin-left:6px;font-size:12px;width:auto;}
.thread-event .q-item{text-align:left;}
.thread-event-credit span{color:var(--green, #2e7d4f);font-weight:600;}
.thread-event-debit span{color:var(--ink);font-weight:600;}
.thread-action{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;}
.thread-action button,.thread-action select{width:auto;margin-top:0;}
.thread-day{text-align:center;font-size:11px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:0.04em;margin:16px 0 4px;}
.thread-seen{text-align:right;font-size:11px;color:var(--ink-soft);margin:2px 6px 0;}
.thread-scroll{padding-bottom:12px;}
.thread-composer{flex:none;border-top:1px solid var(--border);padding:8px 0 0;background:var(--card, #fff);}
.thread-composer .empty-note{margin:0 0 4px;}
.thread-composer .empty-note:empty{display:none;}
/* 2026-09-19 (#510): the text box gets its own full-width line; camera,
   Speak and Send sit in a row underneath. On a phone the old single row
   squeezed the box to ~2 words wide. */
.thread-composer .thread-input{display:block;width:100%;box-sizing:border-box;min-height:64px;max-height:160px;margin:0 0 6px;resize:vertical;}
.thread-composer-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.thread-reply-to{display:flex;flex-direction:column;gap:4px;margin-bottom:6px;font-size:.9em;}
.thread-reply-to label{font-weight:600;}
.thread-reply-to select{width:100%;max-width:100%;}
.thread-composer-row button{width:auto;margin:0;}
#threadComposerTools{display:inline-flex;align-items:center;}
#threadComposerTools button{margin:0;}
#threadSendBtn{margin-left:auto;min-width:88px;}
.thread-photo-btn{cursor:pointer;font-size:20px;padding:6px 4px;line-height:1;margin:0;}
.q-item .q-body{margin-top:8px;font-size:15px;line-height:1.5;white-space:pre-wrap;}
.q-item .q-answer{margin-top:10px;padding-top:10px;border-top:1px dashed var(--border);font-size:15px;line-height:1.5;}
.q-item .q-answer-label{font-size:11px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:0.03em;}
.q-photo{display:block;width:100%;max-height:280px;border-radius:8px;margin-bottom:6px;object-fit:cover;}

/* SMS/Messenger-style bubbles (2026-08-28 tech-mail feedback): photo
   above text, each side of the conversation visually distinct and
   aligned like a real text-message thread instead of one flat block. */
.bubble{max-width:85%;margin-top:8px;padding:8px 10px;border-radius:14px;font-size:15px;line-height:1.5;white-space:pre-wrap;cursor:default;}
.bubble-theirs{background:var(--bg);border:1px solid var(--border);margin-right:auto;border-bottom-left-radius:4px;}
.bubble-mine{background:var(--coral);color:#fff;margin-left:auto;border-bottom-right-radius:4px;}
.bubble-mine .q-answer-label{color:rgba(255,255,255,0.85);}
.bubble-mine .q-photo{border:1px solid rgba(255,255,255,0.4);}
.bubble-text{white-space:pre-wrap;}
.q-item textarea{margin-top:8px;}
.q-item button{margin-top:8px;}
.empty-note{font-size:13px;color:var(--ink-soft);margin-top:8px;}
.attn-highlight{outline:2px solid var(--coral);outline-offset:2px;border-radius:10px;}
.folder-row:hover{background:var(--bg);}
.folder-row-unread{border-color:var(--coral);}
.folder-row-unread .folder-name{font-weight:700;color:var(--coral-dark);}

/* Messages app-shell (2026-08-30, "standard phone messaging app" decision):
   header stays put, only the folder/thread list underneath scrolls --
   scoped to the Messages sub-view specifically (now inside the Activity
   tab, alongside Jobs, since the 2026-08-30 nav restructure folded both
   out of being full top-level tabs) rather than rearchitecting every
   tab's scroll behaviour in the same pass. Height is the viewport minus
   roughly the chrome above it (profile header/banners, the Activity
   sub-nav) and the floating bottom rail below it -- approximate on
   purpose, since the exact chrome height varies by account state. */
.messages-shell{display:flex;flex-direction:column;height:calc(100vh - 226px);min-height:320px;}
.messages-shell-header{flex:none;display:flex;align-items:center;gap:10px;margin:0 0 8px;}
.messages-shell-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:70px;}

.folder-row{display:flex;gap:10px;align-items:center;}
.folder-avatar{width:44px;height:44px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--bg);color:#fff;font-weight:700;font-size:16px;}
.folder-avatar img{width:100%;height:100%;object-fit:cover;}
.folder-avatar-generic{background:var(--border);color:var(--ink-soft);}
.folder-avatar-generic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.folder-body{flex:1;min-width:0;}
.folder-toprow{display:flex;justify-content:space-between;align-items:baseline;gap:8px;}
.folder-name{font-size:15px;}
.folder-date{font-size:11px;color:var(--ink-soft);flex:none;white-space:nowrap;}
.folder-snippet{font-size:13px;color:var(--ink-soft);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* Positioned the same way as .tab-rail (fixed, centred-and-capped under
   the card's own max-width) rather than absolute within the scrolling
   folder list -- an absolute FAB anchored to the list's own height
   ended up sitting behind the fixed bottom rail, since the two heights
   don't reliably line up across different account states (banners,
   badges) -- 2026-08-30, found while verifying this build live. */
#composeFabAnchor{
  position:fixed; bottom:calc(84px + env(safe-area-inset-bottom, 0px)); left:50%; transform:translateX(-50%);
  width:calc(100% - 32px); max-width:388px; height:0; z-index:6;
}
#composeFab{
  position:absolute; right:0; bottom:0; width:52px; height:52px; margin:0; padding:0;
  border-radius:50%; font-size:28px; line-height:1; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(20,30,30,0.25);
}

#composeModal{position:fixed;inset:0;background:rgba(20,30,30,0.45);display:flex;align-items:flex-end;justify-content:center;z-index:20;}
#composeModalInner{width:100%;max-width:420px;max-height:88vh;overflow-y:auto;border-radius:16px 16px 0 0;margin:0;}
#postSomethingModal{position:fixed;inset:0;background:rgba(20,30,30,0.45);display:flex;align-items:flex-end;justify-content:center;z-index:20;}
#postSomethingModalInner{width:100%;max-width:420px;border-radius:16px 16px 0 0;margin:0;}
/* Bug fix (2026-09-14, found live-testing the job lifecycle): these
   three modals were missing the overlay positioning every other modal
   here has -- with no #id rule at all, each rendered as plain inline
   content in the normal page flow (visibly beside/below the screen
   behind it, not over it) instead of a proper bottom-sheet overlay. */
#reportModal{position:fixed;inset:0;background:rgba(20,30,30,0.45);display:flex;align-items:flex-end;justify-content:center;z-index:20;}
#reportModalInner{width:100%;max-width:420px;max-height:88vh;overflow-y:auto;border-radius:16px 16px 0 0;margin:0;}
#knowledgeDraftModal{position:fixed;inset:0;background:rgba(20,30,30,0.45);display:flex;align-items:flex-end;justify-content:center;z-index:20;}
#knowledgeDraftModalInner{width:100%;max-width:420px;max-height:88vh;overflow-y:auto;border-radius:16px 16px 0 0;margin:0;}
#safetySheetModal{position:fixed;inset:0;background:rgba(20,30,30,0.45);display:flex;align-items:flex-end;justify-content:center;z-index:20;}
#safetySheetInner{width:100%;max-width:420px;max-height:88vh;overflow-y:auto;border-radius:16px 16px 0 0;margin:0;}

/* Central feedback control (2026-08-30, Phase 6a). 2026-09-21: was a floating button bottom-left, which sat on top of page
   content (it hid the start of the third Home tile). Now a header icon beside the Account avatar on every tab. */
#feedbackModal{position:fixed;inset:0;background:rgba(20,30,30,0.45);display:flex;align-items:flex-end;justify-content:center;z-index:20;}
#feedbackModalInner{width:100%;max-width:420px;border-radius:16px 16px 0 0;margin:0;}
#feedbackBody{min-height:100px;}

/* Ecosystem map (2026-08-30, Phase 6d) -- six clickable stages, each a
   real link into the screen that demonstrates it. */
.ecosystem-map{display:flex;flex-direction:column;margin:6px 0 16px;}
.ecosystem-step{display:flex;align-items:flex-start;gap:12px;text-align:left;background:none;border:none;box-shadow:none;padding:10px 0;cursor:pointer;width:100%;margin:0;}
.ecosystem-step:not(:last-child){border-bottom:1px dashed var(--border);border-radius:0;}
.ecosystem-step-num{width:26px;height:26px;border-radius:50%;background:var(--coral);color:#fff;font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center;flex:none;}
.ecosystem-step-text{font-size:13px;line-height:1.4;padding-top:2px;color:var(--ink-soft);}
.ecosystem-step-text b{display:block;font-size:14px;margin-bottom:2px;color:var(--ink);}
.ecosystem-step:hover .ecosystem-step-text b{color:var(--coral);}

/* Guided tour step panel (2026-08-30, Phase 6b/6c). */
.tour-progress{font-size:11px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:0.04em;margin-bottom:6px;}
.tour-progress-bar{height:4px;border-radius:2px;background:var(--border);margin-bottom:16px;overflow:hidden;}
.tour-progress-fill{height:100%;background:var(--coral);border-radius:2px;}
.tour-step-body{font-size:15px;line-height:1.5;margin-bottom:16px;}
.tour-nav-row{display:flex;gap:8px;}
.tour-nav-row button{margin-top:0;}
.compose-contact-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:100px;padding:4px 10px 4px 4px;margin:4px 6px 0 0;cursor:pointer;font-size:13px;background:var(--surface);}
.compose-contact-chip .folder-avatar{width:26px;height:26px;font-size:11px;}
.compose-contact-chip:hover{border-color:var(--coral);}
.rating-new{opacity:0.45;}
.rating-badge{font-size:12px;color:var(--ink-soft);}
.rating-badge.rating-new{font-style:italic;}
.rating-form{margin-top:8px;}
.rating-field{display:flex;justify-content:space-between;align-items:center;margin-top:6px;}
.rating-field label{margin:0;}
.rating-field select{width:70px;}
.founding-badge{display:inline-block;background:var(--green);color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:10px;margin-left:6px;vertical-align:middle;position:relative;}

/* Demo/QA content separation (2026-08-30) -- marks the 48 seeded
   is_dummy=true profiles/listings wherever they render, so intentional
   absurd filler content never reads as a real member. */
.demo-label{display:inline-block;background:var(--ink-soft);color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:10px;margin-left:6px;vertical-align:middle;text-transform:uppercase;letter-spacing:0.03em;}
/* Badges sit inline with plain text as compact pills -- growing the visible
   box to 44px would look wrong next to the name/rating they sit beside. An
   invisible ::before instead expands only the tap target, leaving layout
   and appearance untouched. */
.founding-badge.clickable::before, .tier-badge::before{
  content:'';position:absolute;left:50%;top:50%;
  width:44px;height:44px;transform:translate(-50%,-50%);
}
.tier-badge{position:relative;}
.activity-badge-low{background:var(--ink-soft);}
.activity-badge-medium{background:var(--cyan);}
.activity-badge-high{background:var(--green);}
.gallery-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
.gallery-photo{position:relative;width:72px;height:72px;}
.gallery-photo img{width:100%;height:100%;object-fit:cover;border-radius:8px;border:1px solid var(--border);}
.gallery-photo .gallery-remove{position:absolute;top:-6px;right:-6px;width:20px;height:20px;margin:0;padding:0;border-radius:50%;background:var(--ink-soft);color:#fff;font-size:12px;line-height:1;}
.gallery-photo .gallery-remove:hover{background:var(--red);}
.gallery-strip{display:flex;gap:6px;margin-top:8px;}
.gallery-strip img{width:52px;height:52px;object-fit:cover;border-radius:6px;border:1px solid var(--border);}
.profile-header{margin-bottom:12px;}
/* Home header restructure (2026-08-30, per Paul's own sketch): logo top
   left, small SQUARE photo top right, instead of a big centred circle
   below a centred logo. */
.home-top-row{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:10px;}
.home-top-row .oi-logo-corner{width:auto;margin:0;padding:4px;align-items:flex-start;text-align:left;}
.photo-preview-square{width:56px;height:56px;border-radius:12px;object-fit:cover;border:1px solid var(--border);background:var(--bg);}
.listing-detail-photo{width:100%;max-height:280px;object-fit:cover;border-radius:12px;border:1px solid var(--border);background:var(--bg);margin:8px 0;}
.banner-action{width:100%;margin:0 0 12px;text-align:left;cursor:pointer;}
.banner-action:hover{background:#D5E9E6;}
/* Bottom icon rail (2026-08-29, layout option B). 2026-09-21: docked to the bottom edge. It used to float 78px up
   (with 152px of card padding under it) to clear Netlify's "Powered by Netlify" badge; that badge is switched off, so
   the rail sits flush like a normal phone tab bar and the space goes back to content. Everything that used to clear
   the floating rail (compose button, feedback button, toasts) is measured from this bar's height (about 66px). */
#profileCard{padding-bottom:calc(92px + env(safe-area-inset-bottom, 0px));}
.tab-rail{
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:420px;
  display:flex; justify-content:space-around; align-items:center;
  background:var(--surface); border:1px solid var(--border); border-bottom:none; border-radius:18px 18px 0 0;
  box-shadow:0 -4px 18px rgba(20,30,30,0.10);
  padding:6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); z-index:10;
}
.rail-btn{
  width:auto; margin:0; padding:6px 4px; flex:1;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  background:none; border:none; border-radius:12px;
  color:var(--ink-soft); font-size:10px; font-weight:600; cursor:pointer;
}
.rail-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.rail-btn:hover{background:var(--bg);color:var(--ink);}
/* 2026-09-13 visual redesign: a soft tinted pill behind the active tab,
   not just a colour change on the icon -- the mockup's nav treatment. */
.rail-btn.active{background:#E3F0EF;color:var(--coral);}
.rail-btn.active svg{stroke-width:2.2;}
.tab-panel h2:first-child{margin-top:0;}
/* Home header: "Share my Oi showcase" and "How it works" side by side (2026-09-19). */
.home-header-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;}
.home-header-actions button{width:auto;margin:0;}
/* Home feed switch (Just done / Just listed) */
.feed-toggle{display:flex;gap:8px;margin:0 0 10px;}
.feed-toggle .category-chip{margin:0;flex:1;text-align:center;padding:9px 12px;font-size:13px;}
.frozen-name{color:var(--ink-soft);text-decoration:line-through;}

/* 2-column grid-of-cards for browsable listings (tenders, storefronts,
   community projects) -- 2026-08-30 visual pass, from Paul's hand-drawn
   sketch (app layout.pdf): "Jobs To Do"/"Need Jobs"/"Community/Art" all
   drawn as a 2-column grid of boxes, distinct from the flat list rows
   used for Calls/Messages (kept as .q-item, unchanged). */
.card-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px;}
.presence-map{width:100%;height:320px;border-radius:12px;overflow:hidden;margin-top:10px;border:1px solid var(--border);}
.presence-cluster-label{background:#fff;border:1px solid var(--border);border-radius:12px;padding:2px 8px;font-size:11px;font-weight:700;color:var(--coral-dark);box-shadow:0 1px 3px rgba(0,0,0,0.15);white-space:nowrap;}
.listing-card{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:10px;cursor:pointer;display:flex;flex-direction:column;gap:6px;min-height:110px;}
.listing-card:hover{border-color:var(--coral);}
.listing-card-title{font-size:13px;font-weight:700;line-height:1.3;}
.listing-card-meta{font-size:11px;color:var(--ink-soft);margin-top:auto;}
/* Expand-in-place (2026-08-31, community-projects grid): a card with too
   much interactive content for a permanent half-width square (Paul
   confirmed the grid anyway, so this is the compromise -- compact by
   default, full width once opened) spans the whole row and reveals its
   details underneath the summary, rather than navigating to a separate
   screen. */
.listing-card.expanded{grid-column:1 / -1;cursor:default;min-height:0;}
.listing-card-details{display:none;margin-top:4px;}
.listing-card.expanded .listing-card-details{display:block;}
/* Two columns down to small phones (was 380px, which is every normal phone: one 326px-wide, 414px-tall card per row). */
@media (max-width:340px){
  .card-grid{grid-template-columns:1fr;}
}
.back-btn{position:sticky;top:0;z-index:5;width:auto;margin:-28px -28px 16px;padding:14px 28px;border-radius:16px 16px 0 0;background:var(--surface);color:var(--coral);font-weight:700;text-align:left;box-shadow:0 2px 6px rgba(0,0,0,0.05);}
.back-btn:hover{background:var(--bg);}
.category-chip{width:auto;margin:0 6px 6px 0;padding:6px 12px;border-radius:20px;background:var(--bg);color:var(--ink-soft);border:1px solid var(--border);font-size:12px;font-weight:600;}
.category-chip.active{background:var(--coral);color:#fff;border-color:var(--coral);}
.link-back{width:auto;padding:6px 0;background:transparent;color:var(--coral);font-weight:600;font-size:13px;text-align:left;box-shadow:none;border:none;margin-bottom:8px;}
.link-back:hover{text-decoration:underline;}
.category-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0 16px;}
.category-tile{width:auto;padding:14px 10px;border-radius:12px;background:var(--bg);color:var(--ink);border:1px solid var(--border);font-size:13px;font-weight:600;text-align:center;line-height:1.3;display:flex;flex-direction:column;align-items:center;gap:6px;}
.category-tile:hover{background:var(--surface);border-color:var(--coral);}
.category-tile .tile-count{display:block;font-weight:400;color:var(--ink-soft);font-size:11px;margin-top:2px;}
/* Universal listing build (2026-09-06): a category-tile used as a
   toggle/chip (fulfilment type, direction, pricing mode) marks its
   current choice this way rather than a separate radio/checkbox. */
.category-tile.selected{background:var(--coral);color:#fff;border-color:var(--coral);}
.category-tile.selected .tile-icon{background:rgba(255,255,255,0.25) !important;}
.taxonomy-suggestions{position:relative;z-index:5;margin:-6px 0 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface);overflow:hidden;}
.taxonomy-suggestion{display:block;width:100%;text-align:left;padding:9px 12px;background:transparent;border:none;border-bottom:1px solid var(--border);color:var(--ink);font-size:13px;box-shadow:none;}
.taxonomy-suggestion:last-child{border-bottom:none;}
.taxonomy-suggestion:hover{background:var(--bg);}
/* Icon chip (2026-08-30 visual pass) -- colour-coded monogram, see
   tileIconHtml() in ui.js. */
.tile-icon{
  width:34px;height:34px;border-radius:10px;color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:800;flex-shrink:0;
}
.tile-icon.avatar-icon{border-radius:50%;width:28px;height:28px;font-size:13px;margin-right:8px;vertical-align:middle;object-fit:cover;}

/* Photo-preview listing cards (2026-09-17): Gumtree/Facebook-Marketplace/
   eBay style -- the photo fills the top of the card as a real preview,
   not a small corner icon. Only listings.js's renderListingCards() uses
   this modifier; community.js's project cards keep the plain
   .listing-card layout (small inline category icon), unaffected. */
.listing-card.listing-card-photo-layout{padding:0;overflow:hidden;}
.listing-card-photo-layout .listing-card-photo{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;}
.listing-card-photo-layout .photo-card-fallback{width:100%;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;color:#fff;font-size:40px;font-weight:800;}
.listing-card-photo-layout .listing-card-body{padding:10px;display:flex;flex-direction:column;gap:6px;flex:1;}
/* Poster's face as a small badge on the category tile when a listing has no photo of its own (2026-09-21). */
.photo-card-fallback-wrap{position:relative;}
.listing-card-poster-avatar{position:absolute;left:8px;bottom:8px;width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,0.35);}

/* Same full-preview treatment for Find Someone person cards (2026-09-17
   follow-up -- Paul flagged browsing people as still inconsistent with
   the listing-card fix above). .q-item is reused all over the app
   (messages, notifications, coin history) so this is a scoped modifier,
   not a change to .q-item itself. */
.q-item.person-card-photo-layout{padding:0;overflow:hidden;}
.person-card-photo-layout .person-card-photo{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;}
.person-card-photo-layout .photo-card-fallback{width:100%;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;color:#fff;font-size:40px;font-weight:800;}
.person-card-photo-layout .person-card-body{padding:10px 12px;}
.track-record-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border);font-size:13px;}
.track-record-row:last-child{border-bottom:none;}
.profile-photo-link{cursor:pointer;}
.clickable{cursor:pointer;}
.location-row{display:flex;gap:8px;margin:8px 0;}
.location-btn{width:auto;flex:1;font-size:12px;padding:6px 8px;}

/* Oi logo + pitch (2026-08-29, item 5). The logo sits front and centre at
   the top of the profile screen and opens the full pitch on tap. */
.oi-logo{
  width:100%;margin:0 0 14px;padding:10px;background:none;border:none;
  display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;
}
.oi-logo:hover{background:var(--bg);border-radius:12px;}
.oi-logo-mark{
  font-family:var(--font-display);font-size:30px;font-weight:800;letter-spacing:-0.02em;color:var(--coral);line-height:1;
}
.oi-logo-mark-big{font-size:52px;}
.oi-logo-sub{font-size:11.5px;font-weight:600;color:var(--ink-soft);}
.pitch-hero{text-align:center;padding:6px 0 12px;}
.pitch-tagline{margin:8px 0 0;font-size:15px;font-weight:600;color:var(--ink-soft);}
.pitch-steps{margin:8px 0 0;padding-left:20px;font-size:14px;line-height:1.6;}
.pitch-steps li{margin-bottom:9px;}
.pitch-steps li::marker{color:var(--coral);font-weight:700;}

/* Shared explainer sheet (2026-08-29, item 4) -- what a tapped badge or
   icon opens. Bottom sheet on phones, centred panel on wider screens. */
.explainer-backdrop{
  position:fixed;inset:0;z-index:70;background:rgba(20,30,32,0.45);
  display:flex;align-items:flex-end;justify-content:center;
}
.explainer-sheet{
  position:relative;width:100%;max-width:420px;max-height:82vh;overflow-y:auto;
  background:var(--surface);border-radius:18px 18px 0 0;padding:22px 22px 32px;
  animation:sheet-up .25s ease-out;
}
@keyframes sheet-up{from{transform:translateY(24px);opacity:0;}to{transform:translateY(0);opacity:1;}}

/* Guided-tour chooser auto-start (2026-08-31, Phase H) -- a touch more
   pronounced than sheet-up since this appears unprompted (nobody just
   tapped something to trigger it), so it needs to visibly announce
   itself rather than blend in like a normal panel switch. */
.tour-autostart-in{animation:tour-autostart .35s ease-out;}
@keyframes tour-autostart{from{transform:translateY(16px) scale(.97);opacity:0;}to{transform:translateY(0) scale(1);opacity:1;}}
.explainer-close{
  position:absolute;top:8px;right:10px;width:34px;height:34px;margin:0;padding:0;
  border-radius:50%;background:var(--bg);color:var(--ink-soft);font-size:20px;line-height:1;
}
.explainer-close:hover{background:var(--border);color:var(--ink);}
.explainer-title{font-size:19px;font-weight:800;margin:0 26px 6px 0;}
.explainer-lede{font-size:14.5px;line-height:1.55;margin:0 0 14px;color:var(--ink);}
.explainer-sub{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;color:var(--ink-soft);margin:18px 0 6px;}
.explainer-p{font-size:14px;line-height:1.6;margin:0 0 10px;}
.explainer-list{margin:6px 0 0;padding-left:18px;font-size:14px;line-height:1.6;}
.explainer-list li{margin-bottom:8px;}
.explainer-stats{display:flex;gap:8px;margin:12px 0;}
.explainer-stat{
  flex:1;background:var(--bg);border:1px solid var(--border);border-radius:10px;
  padding:10px 8px;text-align:center;
}
.explainer-stat b{display:block;font-size:20px;font-weight:800;color:var(--coral);line-height:1.2;}
.explainer-stat span{display:block;font-size:11px;color:var(--ink-soft);line-height:1.3;margin-top:3px;}
.xp-chart{display:flex;align-items:flex-end;gap:3px;height:48px;margin:6px 0 4px;}
.xp-bar{flex:1;background:var(--coral);border-radius:2px 2px 0 0;}
@media (min-width: 560px){
  .explainer-backdrop{align-items:center;}
  .explainer-sheet{border-radius:18px;}
}

/* Five named trust tiers (2026-08-29, item 2) -- see web/js/tiers.js.
   Tier colours are set inline from the TIERS table there (they run cool
   blue to green as the tier rises), so only shape/spacing lives here. */
.tier-badge{display:inline-block;color:#fff;font-size:10px;font-weight:700;padding:2px 8px;border-radius:10px;margin-left:6px;vertical-align:middle;}
.tier-row{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin:10px 0 2px;}
.tier-progress{text-align:center;font-size:12px;color:var(--ink-soft);margin:0 0 10px;}
.tier-explainer{margin-top:8px;}
.tier-step{display:flex;align-items:flex-start;gap:8px;font-size:13px;line-height:1.45;padding:5px 0;color:var(--ink-soft);}
.tier-step-done{color:var(--ink);}
.tier-step-dot{flex:0 0 18px;width:18px;height:18px;border-radius:50%;background:var(--border);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:1px;}
.tier-next{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:10px 12px;font-size:13px;line-height:1.5;margin:10px 0 0;}

/* Coin-award celebration -- since 2026-09-19 every coin moment is the
   Accept modal below (coin-accept.js); the old auto-fading coin-pop and
   toast are gone. The balance still bumps when Accept is tapped. */
.coins-bump{animation:coins-bump .5s ease-out;}
@keyframes coins-bump{0%{transform:scale(1);}35%{transform:scale(1.18);}100%{transform:scale(1);}}
@media (prefers-reduced-motion: reduce){
  .coins-bump{animation:none;}
}

/* Job-payout acceptance (2026-09-13) -- a deliberately bigger, blocking
   moment than the profile-field coin-pop: a completed job's payout, held
   until the professional taps Accept, so it's genuinely felt and gates a
   real receipt to the customer rather than reusing the small ambient
   celebration used for routine profile-field rewards. */
.payout-modal-overlay{
  position:fixed;inset:0;z-index:70;background:rgba(20,30,30,0.55);
  display:flex;align-items:center;justify-content:center;padding:20px;
  animation:payout-overlay-in .25s ease-out;
}
@keyframes payout-overlay-in{from{opacity:0;}to{opacity:1;}}
.payout-modal{
  position:relative;overflow:hidden;width:100%;max-width:360px;
  background:linear-gradient(135deg,var(--coral) 0%,var(--cyan) 55%,var(--green) 100%);
  border-radius:22px;padding:36px 24px 28px;text-align:center;color:#fff;
  box-shadow:0 20px 60px rgba(20,30,30,0.35);
  animation:payout-modal-in .4s cubic-bezier(.2,.7,.3,1);
}
@keyframes payout-modal-in{from{opacity:0;transform:scale(.85) translateY(10px);}to{opacity:1;transform:scale(1) translateY(0);}}
.payout-coin-field{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.payout-coin{
  position:absolute;top:60%;left:50%;font-size:38px;
  animation:payout-coin-fly 2.2s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes payout-coin-fly{
  0%{opacity:0;transform:translate(-50%,0) scale(.4) rotate(0deg);}
  15%{opacity:1;transform:translate(-50%,-30px) scale(1.3) rotate(25deg);}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),-260px) scale(.7) rotate(340deg);}
}
.payout-modal-label{font-family:var(--font-display);font-size:14px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;opacity:0.9;position:relative;}
.payout-modal-amount{font-family:var(--font-display);font-size:44px;font-weight:800;margin:8px 0 2px;position:relative;}
.payout-modal-sub{font-size:14px;opacity:0.92;position:relative;margin-bottom:22px;}
.payout-accept-btn{
  position:relative;width:auto;min-width:160px;margin:0 auto;padding:13px 32px;
  background:#fff;color:var(--cyan);font-weight:800;font-size:16px;border-radius:100px;
  box-shadow:0 6px 18px rgba(0,0,0,0.2);
}
.payout-accept-btn:disabled{opacity:0.7;}
.payout-modal-note{position:relative;font-size:12px;opacity:0.85;margin:14px 0 0;line-height:1.4;}
@media (prefers-reduced-motion: reduce){
  .payout-modal-overlay,.payout-modal{animation:none;}
  .payout-coin{display:none;}
}

/* Mobile pass (2026-08-29, item 6): everything tappable meets the 44px
   minimum touch target, sized from a real audit of every interactive
   element per tab at 375px width -- buttons sat at 40-43px, the location
   buttons at 28px, checkboxes at 13px, text links at 16px. Applied at
   every width (a 44px button is fine on desktop too) rather than only
   under a breakpoint, so the fix can't silently regress on tablets. */
button{min-height:44px;}
input:not([type="checkbox"]), select{min-height:44px;}
input[type="checkbox"]{width:22px;height:22px;accent-color:var(--coral);flex-shrink:0;}
.toggle-row{min-height:44px;}
/* The whole label is the tap target for its checkbox, not just the 22px box. */
.toggle-label{flex:1;margin:0;font-size:inherit;font-weight:400;color:inherit;cursor:pointer;padding:12px 0;}
.location-btn{min-height:44px;font-size:13px;}
.link-row{margin-top:2px;}
.link-row a{display:inline-block;padding:12px 4px;}
.switch a{display:inline-block;padding:12px 4px;}
button.link{padding:12px 4px;}
.category-chip{min-height:38px;}
button.remove{min-height:44px;min-width:44px;}
.tier-row{min-height:34px;}
.tier-progress{padding:8px 0;margin:0 0 4px;}
/* Tappable badges: keep the compact pill look but pad the row they sit in
   so the touch area is honest. */
.founding-badge.clickable, .tier-badge{padding:6px 10px;}
.profile-row.clickable{min-height:44px;align-items:center;}
.q-item.clickable{min-height:52px;}
.explainer-close{width:44px;height:44px;}
.gallery-photo .gallery-remove{width:26px;height:26px;font-size:14px;}

@media (max-width: 480px){
  .bubble, .empty-note, .profile-row{font-size:15px;}
  .q-item .q-meta{font-size:12.5px;}
  input, select, textarea, button{font-size:16px;}
  /* Breathing room: the card's side padding was designed for desktop. */
  body{padding:12px 8px;}
  .card{padding:20px 16px;}
  .back-btn{margin:-20px -16px 14px;padding:14px 16px;}
}

/* Pitch-page placeholder content (2026-08-31) -- clearly marked as
   needing Paul's own words, never styled to look like finished copy.
   See PAUL-VOICE-SESSION-NOTES.md. */
.content-placeholder{border:2px dashed var(--border);border-radius:10px;padding:14px;margin:8px 0;background:var(--bg);}
.placeholder-badge{display:inline-block;background:var(--ink-soft);color:#fff;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:0.04em;padding:3px 9px;border-radius:10px;margin-bottom:8px;}
.content-placeholder p{color:var(--ink-soft);font-style:italic;}

/* Feature-status matrix + roadmap (real content, not placeholders). */
.status-matrix{width:100%;border-collapse:collapse;font-size:13px;margin:8px 0;}
.status-matrix th, .status-matrix td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--border);}
.status-matrix th{font-size:11px;text-transform:uppercase;letter-spacing:0.03em;color:var(--ink-soft);}
.status-chip{display:inline-block;font-size:10px;font-weight:700;padding:2px 8px;border-radius:10px;color:#fff;}
.status-chip.status-built{background:var(--green);}
.status-chip.status-simulated{background:var(--cyan);}
.status-chip.status-planned{background:var(--ink-soft);}
.status-chip.status-fail{background:var(--red);}
.roadmap-list{list-style:none;padding:0;margin:8px 0;}
.roadmap-list li{padding:8px 0 8px 28px;position:relative;border-bottom:1px dashed var(--border);}
.roadmap-list li:last-child{border-bottom:none;}
.roadmap-list li::before{content:"";position:absolute;left:6px;top:14px;width:8px;height:8px;border-radius:50%;background:var(--coral);}
.roadmap-list li.roadmap-done::before{background:var(--green);}

/* Notifications backbone (2026-09-04 refinement build, Phase 0). */
.rail-btn{position:relative;}
.rail-badge{
  position:absolute; top:2px; right:14%;
  background:var(--red); color:#fff; font-size:9px; font-weight:800;
  min-width:15px; height:15px; line-height:15px; text-align:center;
  border-radius:8px; padding:0 3px;
}
.notification-row.notification-unread{border-color:var(--coral);background:#F7FBFB;}
.notification-row.notification-unread .q-meta span:first-child{font-weight:700;}
.coin-amount-pos{color:var(--green);font-weight:700;}
.coin-amount-neg{color:var(--ink-soft);font-weight:700;}
.coin-history-row.clickable{cursor:pointer;}
.coin-history-row.clickable:hover{border-color:var(--coral);}

/* Rating quick-tap (2026-09-04, Phase 8 friction pass). */
.rating-form .overall-picked{background:var(--coral);color:#fff;border-color:var(--coral);}

/* Resolver accountability checklist (2026-09-19): a real click-through
   before any resolver decision locks in -- enforced server-side too. */
.accountability-checklist{margin-top:10px;padding:12px;border:1px solid var(--coral);border-radius:10px;background:var(--bg);}
.accountability-checklist .checklist-row{display:flex;gap:8px;align-items:flex-start;font-weight:400;font-size:14px;line-height:1.45;margin:8px 0;cursor:pointer;}
.accountability-checklist .checklist-row input{width:auto;margin-top:3px;flex:none;}
.matched-request label{margin-top:8px;}

/* "Everybody knows something" skill discovery (2026-09-19): a calm,
   one-question-at-a-time overlay, skippable from every screen. */
#skillDiscoveryModal{position:fixed;inset:0;background:rgba(20,30,30,0.45);display:flex;align-items:flex-end;justify-content:center;z-index:30;}
#skillDiscoveryInner{width:100%;max-width:420px;max-height:92vh;overflow-y:auto;border-radius:16px 16px 0 0;margin:0;padding:22px 20px 28px;}
.discovery-top{display:flex;justify-content:space-between;align-items:center;min-height:20px;margin-bottom:6px;}
.discovery-top .link{margin-left:auto;}
.discovery-progress{font-size:12px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:0.04em;}
.discovery-lead{font-size:16px;line-height:1.55;color:var(--ink);margin:10px 0 12px;}
.discovery-question{margin-top:8px;font-size:20px;line-height:1.3;}
.discovery-chips{display:flex;flex-wrap:wrap;margin-top:8px;}
.discovery-chips .category-chip{margin-top:0;font-size:13px;padding:8px 13px;}
.discovery-count{min-height:18px;}
.discovery-nav{display:flex;gap:8px;}
.discovery-nav button{margin-top:16px;}
.discovery-level-row{display:grid;grid-template-columns:1fr;gap:4px;padding:10px 0;border-bottom:1px solid var(--border);}
.discovery-level-row span{font-weight:600;font-size:14px;}
.discovery-level-row .link{justify-self:start;}
.discovery-summary{padding-left:18px;line-height:1.8;font-size:15px;}
.discovery-summary li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-bottom:6px;}
.discovery-summary li select{width:auto;margin:0 0 0 auto;min-height:36px;padding:4px 8px;font-size:14px;}
/* Flagged submission held for a paid review (2026-09-19, item 9). */
.held-review{margin-top:12px;padding:12px;border:1px solid var(--border);border-left:4px solid var(--coral);border-radius:10px;background:var(--bg);}

/* The Hunt card on Home (2026-09-20). */
.hunt-card{margin:14px 0 6px;padding:14px 14px 12px;border:1px solid var(--border);border-left:4px solid var(--green);border-radius:10px;background:var(--surface);}
.hunt-card p{margin:0 0 8px;font-size:14px;line-height:1.5;}
.hunt-card button{margin-top:6px;}
.hunt-title{font-family:var(--font-display);font-weight:800;font-size:16px;margin-bottom:6px;}
.hunt-title span{display:block;font-family:inherit;font-weight:600;font-size:12.5px;color:var(--ink-soft);margin-top:2px;}
.hunt-pips{display:flex;gap:6px;margin:4px 0 8px;}
.hunt-pip{flex:1;height:6px;border-radius:3px;background:var(--border);}
.hunt-pip-on{background:var(--green);}
.hunt-progress{font-size:12.5px;color:var(--ink-soft);}
.hunt-clue{margin:0 0 8px;padding:8px 10px;border-radius:8px;background:var(--bg);font-size:13.5px;line-height:1.5;}
.hunt-hint{font-size:12.5px;color:var(--ink-soft);}

/* Resolver case background (2026-09-20). */
.case-ctx{margin:10px 0;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--bg);}
.case-ctx summary{cursor:pointer;font-weight:600;font-size:13.5px;color:var(--coral-dark);}
.case-ctx-section{margin-top:10px;font-size:11px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:0.03em;}
.case-msg{margin-top:6px;padding:6px 9px;border-radius:8px;font-size:13.5px;line-height:1.45;white-space:pre-wrap;}
.case-msg-a{background:#E7F3F1;}
.case-msg-b{background:#EEF0F7;}
.case-msg-sys{background:transparent;border:1px dashed var(--border);color:var(--ink-soft);}
.case-msg-meta{font-size:11px;font-weight:600;color:var(--ink-soft);margin-bottom:2px;}

/* Buttons were rendering in the browser default (Arial) while everything else used the app font. */
button{font-family:inherit;}

/* Symmetry: the global button margin-top:20px was leaking into grid/flex layouts, so tile rows sat 28px apart
   while columns sat 8px apart. Tiles and inline button rows now use the grid's own gap. */
.category-grid .category-tile{margin:0;}
.location-row .location-btn{margin:0;}
.category-grid{gap:10px;}
.category-tile{padding:12px 10px;}

/* Several photos in one message (2026-09-20). */
.q-photos{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:6px;}
.q-photos .q-photo{margin-bottom:0;height:120px;max-height:120px;}

/* Density pass (2026-09-20): photo cards 4:3 so a screen shows more listings, header buttons on one row,
   and the smallest text lifted to a readable size. */
.listing-card-photo-layout .listing-card-photo,
.listing-card-photo-layout .photo-card-fallback{aspect-ratio:4/3;}
.listing-card-meta{font-size:12px;}
.tier-badge,.founding-badge,.demo-label{font-size:11px;}
.status-pill{font-size:11px;}
.home-header-actions{flex-wrap:nowrap;}
.home-header-actions button{flex:1 1 auto;padding:9px 8px;font-size:13px;white-space:nowrap;}
.hunt-actions{display:flex;gap:8px;margin:4px 0 2px;}
.hunt-actions button{flex:1 1 0;margin:0;padding:10px 8px;font-size:13px;}

/* Arrange-your-screens (2026-09-20). Global button rules (full width, 20px top margin) are overridden inside the controls. */
.layout-hidden{display:none !important;}
.layout-edit-btn{width:auto;margin:0 0 0 8px;padding:4px 11px;font-size:12px;font-weight:600;border-radius:999px;background:transparent;color:var(--coral);border:1px dashed var(--coral);vertical-align:middle;}
.layout-edit-btn:hover{background:var(--bg);}
.layout-topbar{margin:12px 0;padding:10px 12px;border:1px solid var(--green);border-radius:10px;background:#EAF6F1;font-size:13px;line-height:1.45;}
.layout-topbar p{margin:0 0 6px;}
.layout-actions{display:flex;gap:8px;flex-wrap:wrap;}
.layout-actions button{width:auto;margin:6px 0 0;padding:8px 14px;font-size:13px;}
.layout-chips{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 2px;}
.layout-chips .layout-chip{width:auto;margin:0;padding:5px 10px;font-size:12px;border-radius:999px;background:var(--surface);color:var(--coral-dark);border:1px solid var(--green);}
.layout-editing > .layout-section{outline:2px dashed var(--border);outline-offset:3px;border-radius:8px;margin-top:14px;margin-bottom:14px;}
.layout-bar,.layout-row{display:flex;align-items:center;gap:6px;padding:6px;margin:0 0 8px;background:var(--bg);border:1px solid var(--border);border-radius:8px;font-size:13px;font-weight:700;}
.layout-bar-label{flex:1;min-width:0;overflow-wrap:anywhere;}
.layout-empty-note{font-weight:400;color:var(--ink-soft);}
.layout-bar button,.layout-row button{width:auto;margin:0;padding:6px 10px;min-height:34px;font-size:13px;line-height:1;background:var(--surface);color:var(--coral);border:1px solid var(--border);border-radius:8px;}
.layout-bar button:hover,.layout-row button:hover{background:var(--bg);border-color:var(--coral);}
.layout-grab{cursor:grab;touch-action:none;font-size:16px !important;}
.layout-panel{margin:10px 0 16px;padding:8px;border:2px dashed var(--border);border-radius:10px;}
.layout-panel .layout-row{margin-bottom:6px;}
.layout-row-off .layout-bar-label{opacity:0.5;text-decoration:line-through;}
.layout-dragging{opacity:0.5;}
.layout-drop-before{box-shadow:0 -5px 0 0 var(--green);}
.layout-drop-after{box-shadow:0 5px 0 0 var(--green);}
.layout-sr{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* Demo notice (2026-09-21): replaces the plain browser alert for the demo visitor. */
.demo-notice{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(80px + env(safe-area-inset-bottom, 0px));z-index:2000;display:flex;align-items:flex-start;gap:10px;max-width:min(92vw,420px);padding:12px 14px;border-radius:12px;background:var(--ink);color:#fff;font-size:13.5px;line-height:1.45;box-shadow:0 6px 24px rgba(0,0,0,0.28);}
.demo-notice-close{width:auto;margin:-2px -4px 0 0;padding:2px 8px;background:transparent;color:#fff;border:none;font-size:20px;line-height:1;min-height:32px;}
/* Tap targets and keyboard focus. */
.help-strip-close{min-width:32px;min-height:32px;padding:0 8px;}
button:focus-visible,a:focus-visible,[role=button]:focus-visible,select:focus-visible{outline:2px solid var(--coral);outline-offset:2px;}
/* Desktop: the phone-width column left two thirds of a laptop screen empty. Wider card, more columns. */
@media (min-width:900px){
  .card{max-width:820px;}
  .card-grid{grid-template-columns:repeat(3,1fr);}
  .category-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));}
}

/* The Quest on Home is a small chip; the full card opens in a sheet (2026-09-21). */
#huntCard{margin:0;}
.quest-chip{display:inline-flex;align-items:center;gap:6px;width:auto;margin:10px 0 12px;padding:7px 13px 7px 10px;border-radius:999px;background:var(--surface);color:var(--coral-dark);border:1px solid var(--green);font-size:13px;font-weight:700;box-shadow:0 1px 4px rgba(0,0,0,0.08);}
.quest-chip:hover{background:var(--bg);}
.quest-chip-icon{font-size:17px;line-height:1;}
.quest-chip-status{padding:1px 8px;border-radius:999px;background:var(--bg);font-size:11.5px;font-weight:700;color:var(--ink-soft);}
.quest-chip-new{background:var(--green);color:#fff;text-transform:uppercase;letter-spacing:0.04em;font-size:10.5px;}
.quest-sheet-overlay{position:fixed;inset:0;z-index:2100;display:flex;align-items:flex-end;justify-content:center;background:rgba(15,30,33,0.5);}
.quest-sheet{position:relative;width:100%;max-width:520px;max-height:88vh;overflow-y:auto;padding:18px 18px 22px;border-radius:18px 18px 0 0;background:var(--surface);box-shadow:0 -6px 30px rgba(0,0,0,0.25);}
.quest-sheet p{margin:0 0 8px;font-size:14px;line-height:1.5;}
.quest-sheet button:not(.quest-sheet-close){margin-top:6px;}
.quest-sheet-close{position:absolute;top:8px;right:8px;width:auto;margin:0;padding:2px 12px;min-height:36px;background:transparent;color:var(--ink-soft);border:none;font-size:26px;line-height:1;}
@media (min-width:900px){ .quest-sheet-overlay{align-items:center;} .quest-sheet{border-radius:18px;} }

/* Find Someone: location controls fold away (2026-09-21). */
.location-details{margin:6px 0 10px;}
.location-details > summary{cursor:pointer;padding:8px 12px;border:1px dashed var(--border);border-radius:10px;font-size:13px;font-weight:600;color:var(--coral-dark);list-style:none;}
.location-details > summary::-webkit-details-marker{display:none;}
.location-details > summary::before{content:'📍 ';}
.location-details[open] > summary{border-style:solid;margin-bottom:8px;}

/* Compose: the "someone you have already talked to" chip is a <button>, so it inherited white text and full width. */
.compose-contact-chip{width:auto;color:var(--ink);font-weight:600;}

/* Alignment pass (2026-09-21). */
/* The Arrange sections wrap each heading, which made every wrapped <h2> a :first-child and stripped its top margin. */
.tab-panel .layout-section > h2:first-child{margin-top:30px;}
/* Name row: label, name and badges lined up, badges the same height, wrapping cleanly instead of spacing out unevenly. */
.profile-row:has(#pName){justify-content:flex-start;flex-wrap:wrap;align-items:center;gap:6px 8px;}
.profile-row:has(#pName) > span:first-child{color:var(--ink-soft);min-width:56px;}
.profile-row:has(#pName) .founding-badge{margin-left:0;align-self:center;padding:4px 10px;line-height:1.2;}
.profile-row:has(#pName) #pName{margin-right:auto;}

/* Alignment pass 2: back links had a stray 20px top margin from the global button rule; tool buttons were full width
   and pushed the primary action off screen; an odd last tile now spans the row instead of hanging left. */
.link-back{margin-top:0;}
.link-back + h2,.link-back + h1{margin-top:8px;}
.category-grid > :last-child:nth-child(odd){grid-column:1 / -1;}
.tool-btn,.read-aloud-btn,.language-tool-bar > button{width:auto;display:inline-flex;align-items:center;margin:6px 6px 0 0;padding:7px 13px;font-size:13px;border-radius:999px;}
.language-tool-select{margin-top:6px;max-width:100%;}

/* Styled confirm dialog (2026-09-21): replaces the native confirm() on hire / subscribe. */
.oi-dialog-overlay{position:fixed;inset:0;z-index:2200;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(15,30,33,0.5);}
.oi-dialog{width:100%;max-width:380px;padding:20px;border-radius:16px;background:var(--surface);box-shadow:0 10px 40px rgba(0,0,0,0.3);}
.oi-dialog p{margin:0 0 14px;font-size:15px;line-height:1.5;}
.oi-dialog-actions{display:flex;gap:10px;}
.oi-dialog-actions button{flex:1 1 0;margin:0;padding:11px;}

/* Alignment pass 3: job cards. The date row's button inherited full width and squeezed its label; the five actions were
   five identical full-width bars with the primary one buried. Primary first, the rest in pairs. */
.q-meta > button{width:auto;flex:0 0 auto;margin:0;padding:6px 14px;font-size:13px;}
.q-meta{align-items:center;gap:10px;}
#activityJobs .q-item{display:grid;grid-template-columns:1fr 1fr;gap:8px;grid-auto-flow:row dense;}
#activityJobs .q-item > :not(button){grid-column:1 / -1;}
#activityJobs .q-item > .q-meta{order:-2;}
#activityJobs .q-item > button{margin:0;padding:10px 8px;font-size:13.5px;}
#activityJobs .q-item > button:not(.secondary){grid-column:1 / -1;order:-1;}
#activityJobs .q-item > button.link{grid-column:1 / -1;}

/* Alignment pass 4: the floated 'Account →' link made the conversation (a flex container) shrink to sit beside it,
   leaving the whole thread 67px narrower than the card. */
.messages-shell{clear:both;}

/* Composer row: the camera was a bare icon, shorter and lower than Speak and Send. Same height, same outline. */
.thread-composer-row{align-items:stretch;}
.thread-photo-btn{display:inline-flex;align-items:center;justify-content:center;min-width:46px;min-height:42px;padding:0 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface);}
.thread-photo-btn:hover{border-color:var(--coral);}
.thread-composer-row button{min-height:42px;}

/* Alignment pass 5: description text on a selected tile was dark on dark teal (unreadable); sheet buttons had uneven gaps. */
.category-tile.selected .empty-note,.category-tile.selected .tile-count{color:rgba(255,255,255,0.88);}
#postSomethingModal button:not(.link-back):not(.back-btn){margin-top:10px;}

/* Alignment pass 6: card headers (notifications, jobs) let the date wrap into a squeezed column. Title and date now wrap as a pair. */
.q-meta{flex-wrap:wrap;}
.q-meta > :last-child{white-space:nowrap;margin-left:auto;}

/* Alignment pass 7: native file pickers looked like an unstyled browser control among our own buttons. */
input[type=file]{width:100%;font-size:13px;color:var(--ink-soft);}
input[type=file]::file-selector-button{margin:0 10px 0 0;padding:8px 14px;border:1px solid var(--coral);border-radius:8px;background:transparent;color:var(--coral);font:inherit;font-weight:600;cursor:pointer;}
input[type=file]::file-selector-button:hover{background:var(--bg);}

/* Alignment pass 8: the sticky Back pill was only as wide as its label, so headings scrolled half-hidden under it. Full-width bar. */
.back-btn{width:calc(100% + 56px);max-width:none;}

/* Navigation pass 1 (2026-09-21): one header row per screen, the Account avatar in the same top-right spot everywhere,
   and a compact Home header so the four "what brings you here" tiles sit above the fold. */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.tab-head{display:flex;align-items:center;gap:8px;min-height:44px;margin:0 0 12px;}
.tab-head .tab-pill{margin:0;flex:0 0 auto;}
.tab-head .layout-edit-btn{margin:0;flex:0 1 auto;white-space:nowrap;}
.tab-head .account-chip{margin-left:auto;}
.account-chip{width:44px;min-width:44px;height:44px;min-height:44px;margin:0;padding:0;flex:0 0 auto;border-radius:50%;
  border:2px solid var(--border);background:var(--coral);color:#fff;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,0.12);
  display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:18px;font-weight:800;line-height:1;cursor:pointer;}
.account-chip:hover{background:var(--coral-dark);border-color:var(--coral);}
.account-chip img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;}
.account-chip[aria-current="page"]{border-color:var(--coral);box-shadow:0 0 0 3px rgba(37,109,123,0.28);}
.home-top-row{align-items:center;margin-bottom:8px;}
.home-top-row .account-chip{margin:0;}

/* Balance: a slim strip, not a 190px card. Number left, explanation right. */
.coins-hero{display:flex;flex-wrap:wrap;align-items:center;gap:2px 14px;text-align:left;padding:12px 16px;margin:0 0 10px;}
.coins{text-align:left;font-size:32px;flex:0 0 auto;}
.coins-label{flex:1 1 150px;text-align:left;margin:0;line-height:1.35;}
.coins-label button.link{padding:6px 2px;min-height:0;}
.coins-sub{flex:1 1 100%;text-align:left;margin:2px 0 0;}

/* Name, badges and tier progress: two tight rows instead of five. */
.profile-row:has(#pName){border-bottom:none;padding:2px 0 6px;}
.profile-row:has(#pName) #pName{font-size:18px;}
.tier-line{display:flex;align-items:center;gap:8px;margin:0 0 4px;}
.tier-line .tier-row{margin:0;min-height:0;flex:0 0 auto;flex-wrap:nowrap;justify-content:flex-start;}
.tier-line .tier-progress{flex:1 1 auto;min-width:0;margin:0;padding:4px 0;text-align:left;font-size:12px;line-height:1.3;}
/* 2026-09-28 tidy: on Home the "HOME" pill had a whole 56px row to itself under the Oi header (the rail already says
   Home). The pill stays for screen readers only; "Arrange" shrinks to a small icon on a slim right-hand row. (A first
   try floated it over the top of the page, which covered a member's notices -- 29 Sep, seen live.) */
#tab-explore .tab-head{min-height:0;margin:0 0 4px;justify-content:flex-end;}
#tab-explore .tab-head .tab-pill{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;padding:0;border:0;}
#tab-explore .tab-head .layout-edit-btn{width:40px;min-width:40px;height:40px;min-height:40px;padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:14px;}
#tab-explore .tab-head .layout-edit-label{display:none;}
#tab-explore .layout-section[data-layout-key="tasks"] > h2:first-child{margin-top:14px;}

/* Notices sit above the tiles, as slim tappable rows with a chevron. */
#attentionBanners .banner,#newQuestionBanner{position:relative;padding-right:32px;margin-bottom:8px;}
#attentionBanners .banner::after,#newQuestionBanner::after{content:'›';position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:22px;font-weight:700;line-height:1;}
#attentionBanners .banner:not(.banner-hero),#newQuestionBanner{padding-top:9px;padding-bottom:9px;}
#attentionBanners .banner-hero{padding:9px 32px 9px 14px;border-radius:12px;gap:0;}
#attentionBanners .banner-hero-text{font-size:14px;line-height:1.3;}
#tab-explore .quest-chip{margin:2px 0 8px;}
.coins-hero{padding:10px 16px;}
/* On wide screens there is no bottom-edge convention, so the bar floats as a small dock again. */
@media (min-width:900px){
  .tab-rail{bottom:14px;border-bottom:1px solid var(--border);border-radius:18px;}
  #composeFabAnchor{bottom:96px;}
}

/* Header icons: feedback and Account sit together, top-right, on every screen. */
.head-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex:0 0 auto;}
.head-actions .account-chip,.tab-head .head-actions .account-chip{margin:0;}
/* "Oi, there's a bug" (2026-09-28, Paul's feedback #16): was an unlabelled bubble nobody else would recognise. Now a
   labelled pill; on a phone the label wraps to two short lines so the header still fits one row. */
.feedback-chip{width:auto;min-width:44px;height:44px;min-height:44px;margin:0;padding:0 12px 0 10px;gap:6px;flex:0 0 auto;border-radius:999px;background:var(--surface);color:var(--ink-soft);
  border:1px solid var(--border);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:none;}
.feedback-chip:hover{color:var(--coral);border-color:var(--coral);background:var(--surface);}
.feedback-chip svg{flex:0 0 auto;}
.feedback-chip-label{font-size:13px;font-weight:600;line-height:1.1;white-space:nowrap;}
@media (max-width:480px){
  .feedback-chip{padding:0 10px 0 8px;gap:4px;}
  .feedback-chip-label{white-space:normal;width:5.2em;font-size:12px;text-align:left;}
}
.layout-edit-btn{min-height:32px;}
@media (max-width:420px){
  .tab-head:has(.head-actions) .layout-edit-label{display:none;}
  .tab-head:has(.head-actions) .layout-edit-btn{min-width:44px;min-height:44px;padding:0;border-radius:50%;font-size:16px;display:inline-flex;align-items:center;justify-content:center;}
}

.account-jump{display:flex;gap:8px;overflow-x:auto;margin:0 0 14px;padding:2px 0 4px;}
.account-jump button{width:auto;flex:0 0 auto;margin:0;padding:8px 14px;min-height:40px;border-radius:999px;background:var(--surface);color:var(--coral);border:1px solid var(--border);font-size:13px;font-weight:600;white-space:nowrap;box-shadow:none;}
.account-jump button:hover{border-color:var(--coral);background:var(--bg);}
.account-jump{scrollbar-width:none;}
.account-jump::-webkit-scrollbar{display:none;}
.account-jump button{padding:8px 13px;}

/* Community pass (2026-09-21): projects first and scannable; governance, proposals, board, resolver and finances
   fold away under "How Oi is run" instead of stacking 3,000px of forms and lists. */
.fold{border:1px solid var(--border);border-radius:12px;background:var(--surface);margin:0 0 8px;}
.fold > summary,.fold-row{list-style:none;cursor:pointer;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:12px 40px 12px 14px;min-height:56px;position:relative;text-align:left;}
.fold > summary::-webkit-details-marker{display:none;}
.fold > summary::after,.fold-row::after{content:'›';position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:24px;line-height:1;color:var(--ink-soft);transition:transform .15s;}
.fold[open] > summary::after{transform:translateY(-50%) rotate(90deg);}
.fold-title{display:block;font-weight:700;font-size:15px;color:var(--ink);}
.fold-sub{display:block;font-size:12.5px;font-weight:400;color:var(--ink-soft);line-height:1.35;}
.fold-body{padding:0 14px 14px;}
.fold-body > label:first-child,.fold-body > .empty-note:first-child,.fold-body > div:first-child{margin-top:0;}
.fold-row{width:100%;margin:0 0 8px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--ink);box-shadow:none;font-weight:400;}
.fold-row:hover{background:var(--bg);border-color:var(--coral);}
.fold-primary{border-color:var(--coral);}
.fold-primary > summary .fold-title{color:var(--coral);}
.fold-inline{margin:-4px 0 12px;}
.fold-inline > summary{cursor:pointer;display:inline-block;font-size:13px;font-weight:600;color:var(--coral);padding:8px 0;min-height:36px;}
.fold-inline .empty-note{margin-top:0;}
.proj-ask{font-weight:800;font-size:15px;color:var(--ink);margin:6px 0 6px;}
.proj-bar{height:6px;border-radius:3px;background:var(--border);overflow:hidden;}
.proj-bar > span{display:block;height:100%;background:var(--green);border-radius:3px;}
.proj-status{font-size:12px;color:var(--ink-soft);margin-top:4px;}
.proj-funded{color:var(--green);font-weight:700;}
#communityProjectsList + button[data-more-for]{margin-top:10px;}
/* Project cards in one row line up: the ask and vote bar sit at the bottom whatever the title length. */
#communityProjectsList .listing-card{display:flex;flex-direction:column;}
#communityProjectsList .listing-card > div:first-child{flex:1;display:flex;flex-direction:column;}
#communityProjectsList .proj-ask{margin-top:auto;padding-top:8px;}

/* Messages switch (2026-09-21): Chats | Jobs | Updates as one segmented control with counts, replacing two tiny links. */
.activity-header-links.seg{display:flex;gap:4px;justify-content:stretch;padding:4px;margin:0 0 14px;background:var(--bg);border:1px solid var(--border);border-radius:12px;}
.seg-btn{flex:1 1 0;width:auto;margin:0;padding:8px 6px;min-height:44px;border:none;border-radius:9px;background:transparent;color:var(--ink-soft);font-size:14px;font-weight:700;box-shadow:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;}
.seg-btn:hover{background:rgba(37,109,123,0.08);color:var(--ink);}
.seg-btn.active{background:var(--surface);color:var(--coral);box-shadow:0 1px 4px rgba(0,0,0,0.14);}
.seg-badge{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--red);color:#fff;font-size:11px;font-weight:800;line-height:18px;text-align:center;}

/* Home search (2026-09-21): a real search field with a button, and a results sheet. */
.home-search{display:flex;gap:8px;align-items:stretch;margin:0 0 12px;}
.home-search input{flex:1 1 auto;min-width:0;margin:0;}
.search-go{width:48px;min-width:48px;flex:0 0 auto;margin:0;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;}
#homeSearchSheet{position:fixed;inset:0;background:rgba(20,30,30,0.45);display:flex;align-items:flex-end;justify-content:center;z-index:20;}
#homeSearchSheetInner{width:100%;max-width:420px;height:92vh;max-height:92vh;overflow-y:auto;border-radius:16px 16px 0 0;margin:0;}
#homeSearchResults h2{margin-top:20px;}
#homeSearchResults > .q-item{margin-bottom:8px;}
.search-fallback{margin-top:20px;padding-top:14px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:8px;}
.search-fallback p{margin:0;}
.search-fallback button{margin:0;}
@media (min-width:900px){#homeSearchSheetInner{max-width:640px;}}

/* Demo labels (2026-09-21): a compact corner tag on cards instead of a full badge that wrapped under every title. */
.listing-card{position:relative;}
.demo-tag{position:absolute;top:8px;right:8px;z-index:1;padding:2px 8px;border-radius:10px;background:rgba(20,30,30,0.72);color:#fff;font-size:10px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;line-height:1.4;pointer-events:none;}
/* Link to the Indiegogo campaign (2026-09-21); stays hidden until pitch.js has an address for it. */
.indiegogo-link{display:inline-block;margin:10px 0;padding:11px 18px;border-radius:10px;background:var(--coral);color:#fff;font-weight:600;text-decoration:none;}
.indiegogo-link[hidden]{display:none;}

/* ============================================================
   The two worlds (2026-09-21, see js/realm.js)
   The street is the app as it has always looked. The Village is the same layout in purple with rounder shapes, so a
   member always knows which world they are standing in without reading anything. No orange or red anywhere in it.
   Only the accent tokens change; --green and --red keep their meaning (success, error).
   ============================================================ */
/* An icon inside the main app (2026-09-22, Paul's feedback), matching the feedback/account icon buttons beside it --
   not a text label naming the current world. One glyph, always the same; a filled purple background is the only
   difference once you're inside the Village, the same way a phone's flashlight toggle changes colour, not shape. */
.realm-chip{width:44px;min-width:44px;height:44px;min-height:44px;margin:0;padding:0;flex:0 0 auto;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--ink-soft);font-size:20px;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;}
.realm-chip:hover{border-color:var(--coral);}
.realm-chip.realm-chip-in-game{background:#6A4CC0;border-color:#4B3494;}

#realmChoiceModal{position:fixed;inset:0;background:rgba(20,30,30,0.5);display:flex;align-items:center;justify-content:center;z-index:40;padding:16px;}
#realmChoiceInner{position:relative;width:100%;max-width:400px;margin:0;padding:26px 22px 22px;border-radius:22px;}
#realmChoiceInner h1{margin:0 0 16px;font-size:26px;text-align:center;}
.realm-door{display:flex;flex-direction:column;align-items:flex-start;gap:6px;width:100%;margin:0 0 12px;padding:16px 18px;border-radius:18px;text-align:left;font-weight:400;line-height:1.4;cursor:pointer;}
.realm-door b{font-size:18px;font-weight:700;}
.realm-door span{font-size:14px;}
.realm-door-real{background:#256D7B;color:#fff;border:1px solid #184F59;}
.realm-door-game{background:#6A4CC0;color:#fff;border:1px solid #4B3494;border-radius:26px;}
.realm-door:focus-visible{outline:3px solid #1C2B2E;outline-offset:2px;}

:root[data-realm="game"]{
  --coral:#6A4CC0; --coral-dark:#4B3494; --cyan:#8468D8; --cyan-tint:#ECE6FA;
  --ink:#231B36; --ink-soft:#645B7D; --border:#E0D9F1; --bg:#F5F2FB;
}
:root[data-realm="game"] .coins-hero,
:root[data-realm="game"] .banner-hero,
:root[data-realm="game"] .payout-modal{
  background:linear-gradient(135deg,#4B3494 0%,#6A4CC0 50%,#8F78E0 100%);
}
:root[data-realm="game"] .card,
:root[data-realm="game"] .listing-card,
:root[data-realm="game"] .q-item,
:root[data-realm="game"] .category-tile,
:root[data-realm="game"] .notice-box,
:root[data-realm="game"] .banner,
:root[data-realm="game"] .quest-sheet,
:root[data-realm="game"] #skillDiscoveryInner{border-radius:24px;}
:root[data-realm="game"] .coins-hero,
:root[data-realm="game"] .banner-hero{border-radius:26px;}
:root[data-realm="game"] input,
:root[data-realm="game"] textarea,
:root[data-realm="game"] select{border-radius:14px;}
:root[data-realm="game"] .rail-btn.active{background:#ECE6FA;color:var(--coral);}
:root[data-realm="game"] .listing-card-photo-layout .listing-card-photo,
:root[data-realm="game"] .listing-card-photo-layout .photo-card-fallback{border-radius:0;}

/* ============================================================
   The Trail and badges (2026-09-21, see js/quests.js)
   ============================================================ */
#tab-explore #huntCard,#tab-explore #trailCard{display:inline-block;margin-right:8px;vertical-align:top;}
.quest-badges{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 0;}
.quest-badges:empty{display:none;}
.quest-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:999px;background:var(--cyan-tint);color:var(--coral-dark);font-size:12px;font-weight:700;border:1px solid var(--border);}
.trail-sheet .trail-intro{color:var(--ink-soft);}
.trail-quest{border:1px solid var(--border);border-radius:14px;padding:12px 14px;margin:0 0 12px;background:var(--bg);}
.trail-quest h3{margin:0 0 2px;font-size:16px;}
.trail-start{display:inline-block;padding:1px 8px;margin-right:4px;border-radius:999px;background:var(--coral);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;vertical-align:2px;}
.trail-blurb{color:var(--ink-soft);font-size:13px;margin:0 0 8px;}
.trail-steps{list-style:none;margin:0 0 8px;padding:0;}
.trail-step{display:flex;gap:8px;align-items:flex-start;padding:4px 0;font-size:14px;}
.trail-step-mark{flex:0 0 18px;font-weight:700;color:var(--ink-soft);}
.trail-step-done .trail-step-mark{color:var(--green);}
.trail-step-done b{color:var(--ink-soft);font-weight:600;}
.trail-count{font-size:12px;color:var(--ink-soft);font-weight:700;}
.trail-hint{display:block;font-size:12.5px;color:var(--ink-soft);margin-top:1px;line-height:1.4;}
.trail-reward,.trail-earned{font-size:13px;margin:0;color:var(--ink-soft);}
.trail-earned{color:var(--green);font-weight:700;}

/* ============================================================
   Photo frames (2026-09-22, free since 2026-09-28, see js/cosmetics.js)
   Purely visual self-expression, free to everyone, nothing ranked. Deliberately no orange or red anywhere.
   ============================================================ */
/* A ring on a circular avatar (account-chip, a profile page's photo). "realm", "dotted" and "stitched" use the app's
   own accent colour, so they're teal on the street and repaint themselves purple in the Village. The bronze/silver/gold
   keys are the old internal names of Sandstone/Slate/Wattle, kept so nobody's saved choice changes. */
.oi-frame-bronze{box-shadow:0 0 0 2px #fff,0 0 0 4px #B08D57;}
.oi-frame-silver{box-shadow:0 0 0 2px #fff,0 0 0 4px #9AA5AD;}
.oi-frame-gold{box-shadow:0 0 0 2px #fff,0 0 0 4px #D4AF37;}
.oi-frame-realm{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--coral);}
.oi-frame-two_tone{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--coral),0 0 0 6px #D4AF37;}
.oi-frame-ocean{box-shadow:0 0 0 2px #fff,0 0 0 4px #1E6FA6;}
.oi-frame-forest{box-shadow:0 0 0 2px #fff,0 0 0 4px #1E8F72;}
.oi-frame-violet{box-shadow:0 0 0 2px #fff,0 0 0 4px #6A4CC0;}
.oi-frame-midnight{box-shadow:0 0 0 2px #fff,0 0 0 4px #2B2E63;}
.oi-frame-dotted{outline:3px dotted var(--coral);outline-offset:2px;}
.oi-frame-stitched{outline:2px dashed var(--coral);outline-offset:3px;box-shadow:0 0 0 2px #fff;}

/* The picker, in Account -- one row per frame, a small swatch previewing it, and one action button. */
.cosmetic-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);}
.cosmetic-row:last-child{border-bottom:none;}
.cosmetic-row-body{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0;}
.cosmetic-row-body .empty-note{margin:0;}
.cosmetic-row button{width:auto;flex:0 0 auto;white-space:nowrap;}
.cosmetic-swatch{flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--bg);border:1px solid var(--border);}

/* Per-visitor demo (launch, 2026-09-24): photo uploads are off for visitors
   (the database refuses them too), so the attach controls are not offered. */
html[data-visitor] .thread-photo-btn,
html[data-visitor] label[for="askPhotoInput"],
html[data-visitor] #askPhotoInput{display:none !important;}
html[data-visitor] .realm-chip{display:none !important;}

/* The first two minutes (launch, 2026-09-24; js/mission.js): a visitor's next step, pinned just above the tab rail on
   every screen. Uses the accent colour, so it is teal on the street and purple in the Village with no extra rules. */
.mission-bar{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(70px + env(safe-area-inset-bottom, 0px));
  width:calc(100% - 16px); max-width:404px; z-index:11;
  display:flex; align-items:center; gap:10px;
  padding:10px 10px 10px 14px; border-radius:14px;
  background:var(--coral); color:#fff;
  box-shadow:0 6px 22px rgba(20,30,30,0.22);
  animation:mission-in .35s ease-out;
}
@keyframes mission-in{from{opacity:0;transform:translate(-50%,12px);}to{opacity:1;transform:translate(-50%,0);}}
@media (prefers-reduced-motion:reduce){.mission-bar{animation:none;}}
.mission-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:13px;line-height:1.35;}
.mission-text b{display:flex;align-items:center;gap:6px;font-size:12px;letter-spacing:.02em;text-transform:uppercase;opacity:.92;}
.mission-bar button[data-mission-go]{
  width:auto; margin:0; flex:0 0 auto; padding:9px 14px; border-radius:10px;
  background:#fff; color:var(--coral-dark); border:none; font-weight:700; font-size:13px; cursor:pointer;
}
.mission-close{
  width:28px; height:28px; margin:0; padding:0; flex:0 0 auto; border-radius:50%;
  background:transparent; border:none; color:#fff; opacity:.75; font-size:18px; line-height:1; cursor:pointer;
}
.mission-close:hover{opacity:1;}
.mission-pips{display:inline-flex;gap:3px;}
.mission-pip{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.35);}
.mission-pip.on{background:#fff;}
body.has-mission-bar #profileCard{padding-bottom:calc(170px + env(safe-area-inset-bottom, 0px));}
body.has-mission-bar #composeFabAnchor{bottom:150px;}
@media (min-width:900px){ .mission-bar{bottom:92px;} }

/* Front door (launch, 2026-09-24): one screen that says what Oi is, with the demo village's real listings under the
   "Try it" button. The honest details sit in folds further down. */
.pitch-headline{margin:10px 0 0;font-size:26px;line-height:1.2;letter-spacing:-0.01em;color:var(--ink);}
.pitch-sub{margin:10px auto 0;max-width:34em;font-size:15px;line-height:1.55;color:var(--ink-soft);}
.pitch-landing-actions{text-align:center;margin:18px 0 6px;}
.pitch-cta{font-size:17px;padding:15px 18px;border-radius:12px;box-shadow:0 6px 18px rgba(37,109,123,0.28);}
.pitch-cta-note{margin:8px 0 0;font-size:13px;color:var(--ink-soft);}
.pitch-cta-back{display:block;margin:12px 0 0;text-align:center;}
.pitch-cta-back[hidden]{display:none;}
.pitch-landing-actions .switch{margin-top:12px;}
.pitch-landing-actions .switch a{cursor:pointer;}
.pitch-showcase{margin:18px 0 6px;}
.pitch-showcase-label{margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);}
.pitch-showcase-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.pitch-tile{
  width:100%; margin:0; padding:0; overflow:hidden; text-align:left; cursor:pointer;
  display:flex; flex-direction:column; border-radius:12px;
  background:var(--surface); color:var(--ink); border:1px solid var(--border);
  box-shadow:0 1px 6px rgba(20,30,30,0.07); transition:transform .12s, box-shadow .12s;
}
.pitch-tile:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(20,30,30,0.12);}
.pitch-tile img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--bg);}
.pitch-tile-text{display:flex;flex-direction:column;gap:2px;padding:8px 10px 10px;font-size:12.5px;line-height:1.3;}
.pitch-tile-text b{font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.pitch-tile-text span{color:var(--ink-soft);}
.pitch-honest-line{margin:14px 0 4px;font-size:12.5px;line-height:1.5;color:var(--ink-soft);text-align:center;}
.pitch-honest-line a{white-space:nowrap;}
.pitch-founder{border-left:3px solid var(--coral);padding-left:12px;}
.pitch-founder-sign{margin:-4px 0 0;font-weight:700;color:var(--coral-dark);font-size:14px;}
.pitch-founder-photo{display:block;width:100%;max-width:420px;aspect-ratio:4/3;object-fit:cover;border-radius:10px;margin:4px 0 10px;}
.budget-table td:last-child,.budget-table th:last-child{text-align:right;white-space:nowrap;}
.pitch-try-again{margin-top:6px;}
#pitchCard .fold > summary{font-weight:700;font-size:15px;color:var(--ink);}
#pitchCard .fold > :not(summary){margin-left:14px;margin-right:14px;}
#pitchCard .fold > :last-child{margin-bottom:14px;}
#pitchCard .fold .status-matrix{width:calc(100% - 28px);}
@media (prefers-reduced-motion:reduce){.pitch-tile{transition:none;}.pitch-tile:hover{transform:none;}}
@media (min-width:900px){
  .pitch-headline{font-size:34px;}
  .pitch-showcase-grid{grid-template-columns:repeat(3,1fr);}
  .pitch-landing-actions{max-width:420px;margin-left:auto;margin-right:auto;}
}
/* "Show me" lands on the button the visitor needs next; a short glow says "this one". */
.mission-pulse{animation:mission-pulse 1.2s ease-out 2;}
@keyframes mission-pulse{0%{box-shadow:0 0 0 0 rgba(106,76,192,.55);}100%{box-shadow:0 0 0 14px rgba(106,76,192,0);}}
@media (prefers-reduced-motion:reduce){.mission-pulse{animation:none;outline:3px solid var(--coral);outline-offset:3px;}}
/* Toasts sit above the mission bar while it is showing. */
body.has-mission-bar .demo-notice{bottom:calc(158px + env(safe-area-inset-bottom, 0px));}
@media (min-width:900px){ body.has-mission-bar .demo-notice{bottom:170px;} }
/* promptDialog's answer box (launch sweep 2026-09-25): replaces the browser's prompt(). */
.oi-dialog-field{width:100%;margin:4px 0 14px;padding:11px 12px;border:1px solid var(--border);border-radius:10px;font:inherit;font-size:16px;color:var(--ink);background:var(--surface);}
textarea.oi-dialog-field{min-height:96px;resize:vertical;line-height:1.45;}
.oi-dialog-field:focus{outline:2px solid var(--coral);outline-offset:1px;}
.job-title{margin:4px 0 8px;font-weight:700;font-size:14.5px;line-height:1.35;color:var(--ink);}
/* Shop rows on phones (launch sweep 2026-09-25): the button took the width and squeezed the name and description into
   a one-word-per-line column. The button now drops under the text on narrow screens. */
@media (max-width:520px){
  .cosmetic-row{flex-wrap:wrap;}
  .cosmetic-row-body{flex:1 1 calc(100% - 44px);}
  .cosmetic-row button{margin-left:38px;}
}

/* ===== Visitor clean-up (launch sweep, 2026-09-25) =====
   A per-visitor demo session (html[data-visitor]) is a two-minute look around with demo members. Everything below
   was either member machinery a visitor can't use (and could only answer "not in the demo"), or status furniture
   that pushed the first real action below the fold. Members see all of it exactly as before. */
html[data-visitor] .tier-line,
html[data-visitor] #pActivityBadge,
html[data-visitor] .layout-edit-btn,
html[data-visitor] #shareShowcaseBtn,
html[data-visitor] #pushToggleBtn,
html[data-visitor] #tab-community [data-layout-key="invite"],
html[data-visitor] #tab-myoi [data-layout-key="gallery"],
html[data-visitor] #tab-myoi [data-layout-key="appeals"],
html[data-visitor] #tab-myoi [data-layout-key="knowledge"],
html[data-visitor] #tab-myoi [data-layout-key="reveal"],
html[data-visitor] #tab-myoi [data-layout-key="skills"],
html[data-visitor] #tab-myoi [data-layout-key="freemsg"],
html[data-visitor] #tab-myoi [data-layout-key="help"]{display:none !important;}
/* "Hide test accounts" (2026-09-28, see ui.js): a small switch at the top of every street list test accounts could
   appear in. Not in the Village: everything there is practice, and test accounts never show there. */
.test-toggle{display:inline-flex;align-items:center;gap:6px;margin:2px 0 10px;font-size:13px;font-weight:600;color:var(--ink-soft);cursor:pointer;}
.test-toggle input{width:18px;height:18px;margin:0;}
html[data-realm="game"] .test-toggle-slot{display:none !important;}
.test-label,.test-tag{background:var(--ink-soft);color:#fff;}
/* Ollie, the AI helper (2026-09-29): its own colour so it never reads as a person, a test account or a demo character. */
.ai-label{background:#2B2E63;color:#fff;}
.ai-note{background:var(--bg);border:1px solid var(--border);border-left:4px solid #2B2E63;border-radius:10px;padding:8px 12px;margin:8px 0;font-size:13.5px;line-height:1.45;}
/* The sticky Back bar matched the desktop card padding (28px each side) even on phones, where the card has 16px, so it
   ran 24px past the edge (launch sweep 2026-09-25, seen on the search sheet). */
@media (max-width: 480px){ .back-btn{width:calc(100% + 32px);} }
.fold-title .seg-badge{display:inline-block;vertical-align:middle;margin-left:6px;}
.village-practice-note{display:none;margin:0 0 12px;padding:10px 12px;border-radius:12px;background:var(--surface-2, #f3efe6);font-size:.92em;font-weight:600;}
:root[data-realm="game"] .village-practice-note{display:block;}
.village-balance-line{display:none;}
:root[data-realm="game"] .village-balance-line{display:block;}
.village-balance-line[hidden]{display:none !important;}

/* Jobs list: finished history folds away under current work (2026-10-06, feedback #19) */
.finished-jobs { margin-top: 12px; }
.finished-jobs > summary { cursor: pointer; font-weight: 600; padding: 10px 0; color: var(--muted, inherit); }
.coin-amount-held{color:var(--muted,#667);font-weight:600;}