/* ============================================================
   Magic Helpers Operations Platform
   App shell v1.0. Session 24.

   The chrome every signed in screen shares: sidebar, page
   layout, toolbar, form controls. Screen specific styling
   stays in the screen. Design values come from tokens.css and
   are never redefined here.
   ============================================================ */

.app{ min-height:100vh }

/* ---------- sidebar ----------
   Session 106: ported verbatim from docs/mh-ops-retro-mockup-v7.html
   (its .side, .side .brand, .brand-mark, .brand-name, .brand-sub,
   .snav, .slbl, .sitem, .sitem:hover, .sitem.on, .sitem .ico,
   .sitem .cnt, .side .me, .avatar), class names renamed to match so
   the mockup's own declarations apply unchanged. .side is now
   position:fixed as the mockup has it, so .main below carries the
   margin-left the mockup's own .main rule uses -- that follows
   directly from porting .side, not a separate decision.

   Part 5 correction: the brief's own "Out of scope" list still said
   "the sliding sidebar marker: cosmetic, later" while its Part 5
   demanded the opposite ("Not a static bar") -- a real contradiction
   inside the brief, resolved in favour of the more specific, more
   recently added instruction (and the brief's own governing rule:
   "never ask whether a mockup decision is worth building"). .cnt is
   still ported and unused: no nav item has a real count to show
   yet, and this session does not invent one. */
.side{
  position:fixed; left:0; top:0; bottom:0; width:var(--side-w);
  background:var(--teal-deep); color:var(--cream); z-index:10;
  display:flex; flex-direction:column; overflow:hidden;
}
.brand{ display:flex; align-items:center; gap:var(--s3); height:var(--hdrH); box-sizing:border-box; padding:0 20px }
.brand-mark{
  width:46px; height:46px; border-radius:50%; overflow:hidden; flex:none;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
}
.brand-name{ font-family:var(--serif); font-style:italic; font-size:22px; line-height:1; display:block }
.brand-sub{ font-size:11.5px; color:var(--teal-light); display:block; margin-top:3px }

.snav{ flex:1; overflow-y:auto; padding:10px 12px 20px; position:relative }
.snav::-webkit-scrollbar{ width:0 }
.slbl{ font-size:11.5px; color:rgba(255,255,255,.5); padding:14px 10px 4px; font-weight:500 }
.sitem{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:none; border:0; color:rgba(255,255,255,.86); padding:8px 10px;
  border-radius:8px; font-size:14.5px; cursor:pointer; position:relative;
  text-decoration:none; transition:background .2s, color .2s;
}
.sitem:hover{ background:rgba(255,255,255,.08); color:var(--white) }
.sitem.on{ background:rgba(255,255,255,.17); color:var(--white); font-weight:550 }
.sitem .ico{ width:18px; text-align:center; font-size:13px; opacity:.85 }
/* .snav-mark: ported verbatim, now the real sliding version (Part 5),
   riding the Spring in shell.js rather than a static ::before. */
.snav-mark{
  position:absolute; left:4px; width:4px; height:0; border-radius:2px;
  background:var(--yellow); box-shadow:0 0 8px rgba(255,209,58,.6);
}
.sitem .cnt{ margin-left:auto; font-size:11px; background:var(--yellow); color:var(--teal-night); border-radius:999px; padding:1px 7px; font-weight:600 }

.side .me{ padding:14px 20px; border-top:1px solid rgba(255,255,255,.12); display:flex; align-items:center; gap:10px; font-size:13px }
.avatar{ width:32px; height:32px; border-radius:50%; background:var(--yellow); color:var(--teal-night); display:grid; place-items:center; font-weight:600; font-size:12px }
.me .role{ font-size:11.5px; color:rgba(255,255,255,.62); margin-top:1px }
.me .grow{ flex:1; min-width:0 }
.me .nm{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.signout{
  background:none; border:1px solid var(--sidebar-line); color:rgba(255,255,255,.85);
  border-radius:6px; padding:5px 9px; font-size:12px; cursor:pointer; flex:none;
}
.signout:hover{ background:rgba(255,255,255,.12); color:var(--white) }

/* ---------- page ---------- */

.main{ margin-left:var(--side-w); min-width:0 }
/* position:relative;z-index:2 ported from the mockup's .page,
   session 106 Part 5: this is what makes every .card paint over
   the fixed .sky-fix/.valley (z-index:0) regardless of scroll
   position, the same way the mockup's own content sits above its
   background. */
/* Session 112a, Part 1: .top and .topband are both position:fixed
   now (index.html), removed from normal flow, so content needs its
   own top padding to start below their combined height (--hdrH +
   the band's own 10px) rather than underneath them. Checked on
   every screen this session touches; every screen shares this one
   .wrap rule, so the fix is global by construction, not per-screen. */
.wrap{ padding:calc(var(--hdrH) + 10px + var(--s6)) var(--s7) 72px; max-width:var(--wrap-max); margin:0 auto; position:relative; z-index:2 }
/* .head and .sub ported verbatim from the mockup, session 106. */
.head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--s5); flex-wrap:wrap; margin-top:var(--s2);
}
/* Session 157: was var(--page-text), the scene's own day/night text
   swap -- with the sky gradient gone (tokens.css, flat --page-bg
   now), a scene-driven swap had nothing left to react to and risked
   landing light text on the now-flat light page at night. Fixed to
   --text, the same token every other secondary line in the app uses. */
.sub{ color:var(--text); font-size:14.5px; margin:6px 0 0 }
.actions{ display:flex; gap:var(--s2) }

/* ---------- shared controls ---------- */

/* Session 157: retargeted to the mockup's own .warn treatment (brief
   Part 2: "the why box and warn box treatments for explanatory
   lines") -- a left-border accent with the corner rounded only on the
   right, not a flat fill. Was already .errbox's own shape (below);
   .warn (69 uses across the app, a plain filled box until now) is
   brought in line with it rather than left as a second, inconsistent
   pattern for the same idea. */
.warn{
  background:var(--amber-bg); color:var(--amber-text);
  border-left:4px solid var(--amber-text); border-radius:0 7px 7px 0;
  padding:9px 13px; font-size:12.5px; margin:0 0 var(--s5) 10px; max-width:760px;
}
.warn b{ color:var(--amber-text) }
.errbox{
  margin:0 0 var(--s5) 10px; background:var(--warn-soft-bg); border:1px solid var(--warn-soft-line);
  border-left:3px solid var(--amber-dot); border-radius:0 var(--radius) var(--radius) 0;
  padding:14px 16px; font-size:13.5px; color:var(--amber-text); max-width:760px;
}
.errbox b{ display:block; font-weight:550; margin-bottom:4px; color:var(--ink) }
/* The mockup's own .why: an informational counterpart to .warn, teal
   rather than amber. Session 157, brief Part 2: brought across
   available for use, the same call already made for .neon/.toggle/.dl
   in tokens.css (ported, ready, nothing wired to it yet). */
.why{
  background:var(--teal-pale); color:var(--teal-dark);
  border-left:4px solid var(--teal-light); border-radius:0 7px 7px 0;
  padding:9px 13px; font-size:12.5px; margin:0 0 var(--s5) 10px; max-width:760px;
}
.why b{ color:var(--teal-dark) }

.msg{ padding:10px 14px; border-radius:var(--radius); font-size:13.5px; margin-top:var(--s4) }
.msg-ok{ background:var(--green-bg); color:var(--green-text) }
.msg-err{ background:var(--danger-bg); color:var(--danger-text) }

/* Session 148: the base input/textarea/select rule and its focus
   treatment that used to live here moved to tokens.css (D-105
   onward), so every value genuinely lives in the one file every
   screen imports, per the design system's own rule 1. Nothing here
   restyles a control; shell.css keeps only what is not a design
   token. */
.btn:disabled{ opacity:.45; cursor:default }
.btn:disabled:hover{ background:var(--white) }
.btn-p:disabled:hover{ background:var(--orange) }

.loading{ padding:56px 32px; text-align:center; color:var(--muted); font-size:13.5px }

/* ---------- chips ----------
   Session 106: ported verbatim from the mockup, replacing four
   near-identical private per-screen copies (opaque white,
   border-radius:20px) that Part 0 found. --page-chip/--page-line
   in the mockup map to session 105's --chip-bg/--content-line,
   already the same values -- not introducing a second pair of
   tokens for one idea. */
.chips{ display:flex; gap:var(--s2); flex-wrap:wrap; margin-top:var(--s5) }
.chip{
  background:var(--white); border:1px solid var(--content-line); color:var(--ink);
  border-radius:999px; padding:6px 13px; font-size:12.5px; cursor:pointer;
  transition:background .2s, border-color .2s;
}
.chip:hover{ border-color:var(--teal-dark) }
.chip.on{ background:var(--teal-dark); color:var(--white); border-color:var(--teal-dark) }

/* ---------- property Overview (session 154) ----------
   Ported from docs/mh-property-page-full-mockup.html's own .cols/.col,
   .hp and .mini. Not reusing generic names (.cols/.col) since nothing
   else on this platform uses that two-column pattern yet and a generic
   name risks a future screen colliding with it. */
.pd-ov-cols{ display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap; margin-top:var(--s4) }
.pd-ov-col{ flex:1 1 380px; min-width:300px; display:flex; flex-direction:column; gap:12px }
/* Session 155, Part 1. Daniel: "Buttons do not fit in the page" --
   .fr is plain nowrap flex everywhere else on the platform (unchanged
   there); scoped to the property detail screen only, a row whose label
   and control together are wider than the card now wraps the control
   onto its own line under the label instead of squeezing the label's
   text (and its hint-inline) into whatever space is left. Fixes the
   Refrigerator row (long label + hint next to a 3-button seg) and any
   future row shaped the same way, not just that one instance. */
.s-detail-property .fr{ flex-wrap:wrap; row-gap:6px }
.s-detail-property .fr .k{ flex:1 1 240px }
.s-detail-property .fr .v{ flex:0 0 auto; margin-left:auto }

/* ---------- Getting in tab (session 155) ----------
   Repeating-row lists: entry methods, house rules, storage, laundry
   rules, videos (GETTING_IN_LISTS, server.js). Every row saves on its
   own; add/edit share one inline form (.gi-rowform), never a modal. */
.gi-section{ margin-top:14px }
.gi-section:first-child{ margin-top:0 }
.gi-h4{ font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--muted); text-transform:uppercase; margin:0 0 8px }
.gi-row{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--line-soft) }
.gi-row:last-of-type{ border-bottom:none }
.gi-main{ font-size:13.5px; color:var(--ink); flex:1 1 auto; line-height:1.5 }
.gi-actions{ display:flex; gap:4px; flex:0 0 auto }
.gi-mini{ background:none; border:1px solid var(--content-line); border-radius:6px; padding:3px 8px; font-size:12px; color:var(--muted); cursor:pointer }
.gi-mini:hover{ color:var(--ink); border-color:var(--teal-dark) }
.gi-add-link{ background:none; border:none; color:var(--teal-dark); font-size:13px; cursor:pointer; padding:8px 0 0; font-weight:550 }
.gi-empty{ padding:10px 0; font-size:13px }
.gi-rowform{ background:var(--gray-bg); border-radius:var(--radius); padding:12px; margin-top:8px }
.gi-field{ margin-bottom:8px }
.gi-field label{ display:block; font-size:11.5px; color:var(--muted); margin-bottom:3px }
.gi-field input[type=text], .gi-field select{ width:100%; padding:6px 8px; border:1px solid var(--content-line); border-radius:6px; font-size:13px; box-sizing:border-box }
.gi-field input[type=checkbox]{ margin-right:6px }
.gi-rowform-actions{ display:flex; gap:8px; align-items:center; margin-top:4px; flex-wrap:wrap }
.pd-code{ display:inline-block; background:var(--chip-bg); border:1px solid var(--content-line); border-radius:5px; padding:1px 7px; font-size:12px; font-weight:600; color:var(--teal-dark); margin-left:4px }
.gi-vid{ display:inline-block; background:var(--white); border:1px solid var(--content-line); border-radius:8px; padding:8px 12px; font-size:13px; color:var(--ink); text-decoration:none; margin:0 8px 8px 0 }
.gi-vid:hover{ border-color:var(--teal-dark); color:var(--teal-dark) }

/* Session 156. The service catalog's own colour swatch and its retired
   rows -- a swatch is a plain <span> with only a background colour set
   inline, so it needs real dimensions here or it renders as nothing. */
.svc-swatch{ display:inline-block; width:14px; height:14px; border-radius:3px; border:1px solid var(--content-line); vertical-align:middle; margin-right:6px }
tr.row-inactive td{ color:var(--muted) }
.pd-hp{
  display:inline-block; background:var(--chip-bg); border:1px solid var(--content-line);
  color:var(--teal-dark); border-radius:12px; padding:2px 10px; font-size:12px; font-weight:600;
  margin:0 5px 5px 0;
}
.pd-mini{
  display:inline-block; border-radius:12px; padding:3px 10px; font-size:12px;
  border:1px solid var(--content-line); background:var(--white); color:var(--muted); cursor:pointer; margin:0 5px 5px 0;
}
.pd-mini.on{ background:var(--chip-bg); border-color:var(--teal-dark); color:var(--teal-dark); font-weight:600 }
/* The mockup's own .v.m: "Missing looks missing... never an empty box
   that looks like an answer" (brief, Part 3). */
.pd-missing{
  display:inline-block; background:var(--amber-bg); color:var(--amber-text);
  border-radius:4px; padding:1px 8px; font-size:12.5px; font-weight:600; cursor:pointer;
}
.pd-missing::before{ content:"add "; }
/* Session 158, Part 2. Read mode's own "not answered" marker: the same
   amber "missing information" language pd-missing already carries, but
   never a click target -- pd-missing's own cursor:pointer and "add "
   prefix read as an edit affordance, exactly what read mode must not
   suggest ("nothing on the page can be changed" outside Edit). */
.pd-ro-missing{
  display:inline-block; background:var(--amber-bg); color:var(--amber-text);
  border-radius:4px; padding:1px 8px; font-size:12.5px; font-weight:600;
}
/* Session 154. The seg's own "not answered" state, distinct from a
   pressed No (see pdBoolSegHtml's own comment in shell.js). */
.seg.unanswered{ border-color:var(--amber-dot) }
.seg-missing{
  padding:4px 10px; font-size:12.5px; color:var(--amber-text); background:var(--amber-bg);
  border-right:1px solid var(--amber-dot);
}

/* ---------- pill switch ----------
   Session 137, Part 1. The segmented pill control Daniel pointed at
   (docs/daniel-prospects-1-pills.png: Auto/Day/Night, Austin/Houston on
   the Team Map). That exact visual (.tm-mbtn, index.html) is scoped
   under .s-teammap only and was built before this file's own rule 1
   ("the value goes into the file first, then gets used"); rather than
   re-scope a screen already carrying a 29-item acceptance checklist,
   the same values are given one shared, unscoped name here so Prospects
   (and any later screen) can use the real thing instead of a private
   copy. Team Map's own markup is untouched. */
.pillswitch{ display:inline-flex; gap:2px; padding:3px; border-radius:999px; background:var(--gray-bg); border:1px solid var(--line) }
.pillswitch button{ background:none; border:0; padding:7px 16px; border-radius:999px; font-size:13px; font-weight:550; color:var(--muted); cursor:pointer }
.pillswitch button.on{ background:var(--teal-dark); color:var(--white) }

/* ---------- segmented control ----------
   Session 105/106 shipped a second, pill-shaped .seg here as an
   "available and unused" component, riding a JS physics slider
   (segControl()/pillIndicator()) that this session confirmed (grepped
   shell.js) is still never called anywhere in the app -- genuinely
   dead code, not just unused-for-now. Its rules loaded after
   tokens.css's own real, IN-USE .seg (D-117, session 148: the actual
   Yes/No segmented control on the property page and elsewhere), so
   the cascade let this dead block's padding/radius/background bleed
   into the live control's rendering even though nothing ever
   instantiated the slider itself. Removed outright, per rule 1 (fix
   the rule, not the instance) and this session's own Part 2 ("map the
   mockup's values onto the live app's existing classes"): tokens.css's
   D-117 .seg is now the one definition, already matching the mockup's
   own flat, 8px-radius, bordered segmented control. */

/* ---------- the rail ----------
   Session 109, Part 1. One component, two screens (shell.js's
   railHtml()). A row of small flex segments: teal for done, a
   muted fill with a hairline border for not-started (contrast
   checked: --gray-bg alone measures 1.10:1 against --paper, too
   faint to read as a shape with no text riding on it, so
   not-started gets a real border rather than relying on fill alone
   -- unlike a pill, which has its own text for definition, a rail
   segment has none). The current segment is not just a colour
   swap: taller, with a soft glow ring, stolen directly from
   Daniel's legacy console (mh-onboarding v1.3.1's railHTML) so the
   eye finds "the one that matters" before it even reads colour --
   the same reason this also happens to help a colour-blind reader
   (rule 4: state is never colour alone; every segment's real title
   attribute, in words, is the actual accessibility guarantee,
   this is a bonus, not the guarantee itself).
   ============================================================ */
.rail{ display:flex; align-items:center; gap:3px; min-width:64px }
.rail-seg{
  flex:1; min-width:6px; height:7px; border-radius:3px;
  background:var(--gray-bg); border:1px solid var(--line);
  transition:transform .2s var(--spring);
}
.rail-seg.rail-done{ background:var(--teal-dark); border-color:var(--teal-dark) }
.rail-seg.rail-current{ height:11px; border-color:transparent }
/* Session 111a, Part 3. Reverted to exactly what session 109 shipped
   (commit 93135f6, read directly, not re-derived): solid --orange for
   office, solid --yellow for the candidate. Daniel, 9 September 2026:
   "I really like the yellow and the orange that lives on the Stage icon
   for Candidates. I didn't like it in the Waiting On. So edit that color
   back." Session 110 Part 6 softened both the rail and the pills; only
   the pills should have. The pills (below) stay exactly as session 110
   made them -- Daniel liked that change.

   Colour-blind position, now that the rail is back to orange/yellow:
   session 110's own simulation found light teal/yellow measurably better
   than orange/yellow for both common forms of colour blindness (Part 3,
   session 111a report). Daniel has chosen the look anyway. The
   mitigation, confirmed still true: state is never colour alone (rule
   4, session 109) -- every segment's real state is in its title
   attribute, in words, unaffected by which two colours the current
   segment uses. */
.rail-seg.rail-actor-office{
  background:var(--orange);
  box-shadow:0 0 0 3px rgba(255,138,51,.22);
}
.rail-seg.rail-actor-person{
  background:var(--yellow);
  box-shadow:0 0 0 3px rgba(255,209,58,.30);
}
/* Session 146, Part 4. Daniel: "Lost shows in a way that cannot be
   mistaken for progress." Additive: every existing rail state (done,
   current, not-started, both actor colours) is untouched; this is the
   one new state an opportunity's own rail can reach that a candidate's
   rail never used, var(--danger-text), the platform's own established
   "danger" colour already used in roughly a dozen other spots, not a
   new colour invented for this. */
.rail-seg.rail-lost{ background:var(--danger-text); border-color:var(--danger-text) }
/* No motion beyond what the spring layer already provides on
   hover elsewhere (Part 1's own limit): this is a plain hover, not
   a Spring-driven one. */
.rail-seg[onclick]{ cursor:pointer }
.rail-seg[onclick]:hover{ transform:scaleY(1.35) }

/* The waiting-on label, coloured to match the rail's current segment
   exactly. Session 110 Part 6: tinted background, darker text, the
   mockup's own .pill family (.pill.teal/.pill.warn), no solid fills --
   same softening as the rail, same two colours. Contrast: teal-dark on
   teal-pale 5.13:1; yellow-ink on the flattened .55 yellow (both actual
   colours a browser renders, computed, not the raw token) 9.31-9.39:1,
   comfortably up from the already-good 7.97:1 solid pairing, since a
   paler background gives dark text more room. */
.actor-pill{
  display:inline-block; padding:2px 9px; border-radius:20px; font-size:12.5px; font-weight:550;
}
.actor-pill.actor-office{ background:var(--teal-pale); color:var(--teal-dark) }
.actor-pill.actor-person{ background:rgba(255,209,58,.55); color:var(--yellow-ink) }

/* The day-waiting colours, session 109 Part 2. Same rule 3: no new
   colour. Four tiers, Daniel's own thresholds: neutral, amber (4-7),
   orange (8-14), red (15+). --orange-deep, not --orange itself, since
   --orange as text measures 2.31:1 on paper (too faint to read); --orange-
   deep still only reaches 3.43:1, short of the 4.5:1 body-text bar --
   the palette has no member built for orange-as-small-text (rule 3: say
   so rather than invent one), so this is the closest existing token,
   bold-weighted to help it read. */
.age-neutral{ color:var(--text) }
.age-amber{ color:var(--amber-text); font-weight:600 }
.age-orange{ color:var(--orange-deep); font-weight:600 }
.age-red{ color:var(--danger-text); font-weight:700 }
.row-stuck{ box-shadow:inset 3px 0 0 var(--danger-text) }

/* Session 113 Part 4. Coaching board row state, encoded (not decorated):
   overdue reuses .row-stuck's own left-edge pattern; due-this-week gets
   the same treatment in amber. coach-row-open marks the row whose detail
   is expanded in place directly below it (Part 4: never a panel at the
   bottom of the page). Existing tokens only, no new colour (rule 5). */
.coach-row-overdue{ box-shadow:inset 3px 0 0 var(--danger-text) }
.coach-row-soon{ box-shadow:inset 3px 0 0 var(--amber-text) }
.coach-row-open{ background:var(--amber-bg) }
.coach-row-detail td{ padding:var(--s4); background:var(--paper) }
.pill-danger{ background:var(--danger-bg); color:var(--danger-text) }

/* The Training screen's gate rail (session 109 Part 3) runs a little
   wider than the Candidates one, since it now carries the row's own
   visual weight (rule: "the visual and the point of this screen IS each
   gate"). The drill-in box below a clicked gate: same border/radius
   language as the app's other inline expand panels (session 82's own
   .tg-form), just given its own name and scope since .tg-form lives
   under .s-detail only and would carry no styling here. */
.rail-gates{ min-width:120px }
.tb-drill{
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--row-glow); padding:12px 14px; margin:0 20px;
  font-size:13.5px;
}

/* ---------- the coached interview, session 110 Parts 1-2 ----------
   The mockup has no say-this/tip block of its own (checked directly,
   Part 0: not inventing one); the STRUCTURE is phone-script-app.php's
   own step card, the COLOUR is the mockup's own .pill.teal/.pill.warn
   palette, per the brief. A step kicker, a bold heading, then a
   guidance paragraph, then per-question say-this (teal) and tip
   (amber) blocks. */
.iv-step{ margin-bottom:var(--s6) }
.iv-kicker{
  font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--teal-dark); margin-bottom:var(--s1);
}
.iv-heading{ font-size:17px; font-weight:600; color:var(--ink); margin:0 0 var(--s2) }
.iv-guidance{ font-size:13.5px; color:var(--text); margin-bottom:var(--s4) }
.iv-question{ border-top:1px dashed var(--line); padding:var(--s4) 0 }
.iv-question:first-of-type{ border-top:none }
.iv-say, .iv-tip, .iv-reframe{
  border-radius:var(--radius); padding:10px 13px; font-size:13.5px; margin-bottom:var(--s2);
}
.iv-say, .iv-reframe{ background:var(--teal-pale); color:var(--teal-dark) }
.iv-tip{ background:var(--amber-bg); color:var(--amber-text) }
.iv-say b, .iv-tip b, .iv-reframe b{ font-weight:600 }
.iv-truth-row{ display:flex; gap:var(--s3); align-items:stretch; margin-bottom:var(--s3) }
.iv-truth-row .iv-say, .iv-truth-row .iv-reframe{ flex:1; margin-bottom:0 }

/* ---------- Checklist tab, session 159 Part 3 ----------
   Ported from docs/mh-property-page-full-mockup.html's own Checklist
   pane CSS, onto this app's real tokens (--teal-dark for the mockup's
   --teal, --teal-light for --tealLt, --line-soft for --bg). */
.r{ display:flex; gap:10px; padding:6px 0; border-bottom:1px solid var(--line-soft); align-items:center }
.r .k{ flex:1; font-size:13.5px }
.r .k s{ display:block; text-decoration:none; font-size:11.5px; color:var(--muted) }
.grp{ font-size:10.5px; letter-spacing:.7px; color:var(--teal-dark); font-weight:700; margin:12px 0 3px; text-transform:uppercase }
.kind{ display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:6px; vertical-align:middle }
.k-inv{ background:var(--teal-light) }
.k-task{ background:var(--teal-dark) }
.k-lin{ background:var(--orange) }
.k-spot{ background:var(--yellow) }
.sw{ display:flex; gap:5px; margin:6px 0 4px; flex-wrap:wrap }
.sw span{ background:var(--line-soft); border-radius:8px; padding:5px 12px; font-size:12.5px; color:var(--teal-dark); cursor:pointer }
.sw span.on{ background:var(--teal-dark); color:#fff; font-weight:600 }
.callegend{ display:flex; gap:12px; flex-wrap:wrap; font-size:11.5px; margin-top:8px; align-items:center }
.callegend i{ display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:5px; vertical-align:middle }
.p{ display:inline-block; border-radius:11px; padding:2px 10px; font-size:11.5px; font-weight:700 }
.p-gray{ background:var(--line-soft); color:var(--muted) }
.p-teal{ background:var(--teal-pale); color:var(--teal-dark) }
.p-own{ background:var(--yellow); color:var(--teal-dark) }