/* AASB S2 walkthrough v2.7: Sheila's docked pane, to the tenant capture (screen 01). Spec v2.7 section 3.
   Tokens from index.html :root only. Purple and the Sheila gradients appear only on Sheila's own surfaces (head, avatar,
   Sheila pill; the prompt chip until v4.5). Spacing on the 4/8/12/16/24/32 scale. */

.sheila-panel { width: 480px; box-sizing: border-box; flex-shrink: 0; display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--divider); background: var(--solar-50); }
/* v5.8 (4 Nov 2026): the product's docked chatbox, ported from universal/sheila/src/components/chatbox/ and the NDS parts it uses
   (measured on the product at 1720 x 1323: 480 px wide with the 1 px divider at its right, white, the full height under the bar).
   The spacing is theme.spacing(N) (--sp-N); the colours are the v5.6 theme block's palette steps. */
.sheila-panel[hidden] { display: none; }
.sp-root { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* 27 Oct 2026, "keep the Sheila pane": the pane stays open for the whole walk at its normal width,
   dimmed and under the click shield like the rest of the product; step 1 spotlights it (#sheila-pane). */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Head: FloatingContainer.Header (min-height 62, the divider under it, gap spacing(2), space-between) with FloatingChatBoxHeader's
   sx (bg_sheila_tint_100, padding-left spacing(5), padding-right spacing(4), nowrap); the Title row (DrovaIcon v2 medium, 20 px,
   then subtitle2 noWrap, gap spacing(2)); the Actions row (gap spacing(3)) with the close alone (v5.5): IconButton ghost_solar
   compact, 20 px, CloseOutlined at 20 px in text base, transparent, solar-600 on hover and focus, solar-700 pressed. */
.sp-head { box-sizing: border-box; min-height: 62px; flex-shrink: 0; display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: 0 var(--sp-4) 0 var(--sp-5); background: var(--bg-sheila-tint-100); border-bottom: 1px solid var(--divider); }
.sp-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; font-family: var(--ff-product-regular); font-size: 20px; line-height: 24px; font-weight: 500; letter-spacing: 0.00714em; color: var(--text-base); }
.sp-head > .sp-avatar { width: 20px; height: 20px; border-radius: 0; }
.sp-hacts { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }
.sp-hbtn { box-sizing: border-box; width: 20px; height: 20px; padding: 0; border: none; background: transparent; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--text-base); cursor: pointer; }
.sp-hbtn:hover, .sp-hbtn:focus { background: var(--solar-600); }
.sp-hbtn:active { background: var(--solar-700); }
.sp-hbtn:focus-visible { outline: 2px solid var(--earth-500); outline-offset: 2px; } /* v5.5 fixer: the header's one control, the chips' ring */
.sp-hbtn svg.ic { width: 20px; height: 20px; fill: currentColor; }
.sp-toggle { width: 30px; height: 18px; margin: 0 6px 0 4px; border-radius: 9px; border: 1px solid var(--earth-100); background: var(--solar-50); position: relative; padding: 0; }
.sp-toggle i { position: absolute; right: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--dawn-500); display: block; }
/* Sheila's mark is the product's DrovaIcon v2 (pack.sheilaPanel.avatar): 20 px in the head and beside a reply, 84 px
   (constants.ts EMPTY_STATE_DROVA_ICON_WIDTH) on the empty state. */
.sp-avatar { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.sp-avatar img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sp-avatar svg.ic { width: 16px; height: 16px; }
.sp-avatar.sm { width: 20px; height: 20px; border-radius: 0; }
.sp-avatar.xl { width: 84px; height: 84px; border-radius: 0; }

/* Progress: the credit figure, only while the offer is on */
.sp-progress { flex-shrink: 0; display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s5); border-bottom: 1px solid var(--divider); min-height: 33px; }
.sp-progress:empty { display: none; }
.sp-progress .accrue { margin-left: auto; color: var(--text-medium); white-space: nowrap; display: inline-block; }

/* Body: MessageList (gap spacing(4), padding spacing(5) spacing(5) spacing(4)). Idle: ChatBoxEmptyState (centred column, gap
   spacing(4), the icon's top spacing(7) under the head: the list's 24 px plus 40 px here), the greeting in h6. */
.sp-body { flex: 1; min-height: 0; overflow-y: auto; position: relative; padding: var(--sp-5) var(--sp-5) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-4); }
.sp-idle { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); text-align: center; padding-top: calc(var(--sp-7) - var(--sp-5)); }
.sp-greet { margin: 0; font-family: var(--ff-product-regular); font-size: 24px; line-height: 28px; font-weight: 500; letter-spacing: 0.0075em; color: var(--text-base); }
/* .sp-prompt: the base of the door chips (.sp-xchip: the soft door, the wchip) and the suggest chip, drawn as the source's
   SheilaGradientCard (CardContainer container-sheila: padding spacing(4), radius 4, the purple-400 border on white, body2; on
   hover the Sheila gradient washes in at 30%, bg_sheila_30). */
.sp-prompt { box-sizing: border-box; width: 100%; text-align: left; border: 1px solid var(--purple-400); border-radius: var(--radius); background-color: var(--solar-50); background-image: none; padding: var(--sp-4); font-family: var(--ff-product-regular); font-size: 16px; line-height: 20px; letter-spacing: 0.01071em; color: var(--text-base); cursor: pointer; transition: background .15s ease, border-color .15s ease, box-shadow .15s ease; }
.sp-prompt:hover { background-image: var(--bg-sheila-30); }
.sp-prompt:focus-visible { outline: 2px solid var(--earth-500); outline-offset: 2px; }
/* The visitor's turn: UserMessageWrapper (fit-content, at the right, grey-100 with the divider border, radius 4, padding spacing(3),
   margin-block spacing(2)); the text is the shared markdown's body2. */
.sheila-panel .msg { display: flex; flex-direction: column; gap: var(--sp-2); }
.sheila-panel .msg.user { align-items: flex-end; }
.sheila-panel .msg.user p { box-sizing: border-box; width: fit-content; max-width: 100%; margin: var(--sp-2) 0 var(--sp-2) auto; background: var(--grey-100); border: 1px solid var(--divider); border-radius: 4px; padding: var(--sp-3); color: var(--text-base); font-family: var(--ff-product-regular); font-size: 16px; line-height: 20px; letter-spacing: 0.01071em; overflow-wrap: anywhere; }
/* v4.4, the review of 30 Oct 2026: a typed message can be one long unbroken string (a pasted link); it wraps inside the bubble. */
.sheila-panel .msg.user.sp-in p { animation: sp-slide .3s ease both; }
@keyframes sp-slide { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
/* Sheila's turn: AssistantMessageWrapper (margin-block spacing(1)) and the shared markdown (p and li in body2, text base; 12 px
   between blocks, lists indented 20 px with 12 px above and 4 px between items; bold in the SemiBold face). The "Sheila" label
   with the small mark (.who) is the replica's own, kept: the walk's entries carry it. */
.sheila-panel .msg.sheila { margin: var(--sp-1) 0; }
.sheila-panel .msg .who { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--text-light); }
.sheila-panel .msg .ans { color: var(--text-base); font-family: var(--ff-product-regular); font-size: 16px; line-height: 20px; letter-spacing: 0.01071em; }
.sheila-panel .msg .ans :is(b, strong) { font-family: var(--ff-product-semibold); font-weight: unset; }
.sheila-panel .msg .ans p { margin: 0; }
.sheila-panel .msg .ans * + p { margin-top: var(--sp-3); }
.sheila-panel .msg .ans ul, .sheila-panel .msg .ans ol { margin: 0; padding-left: 20px; padding-top: var(--sp-3); }
.sheila-panel .msg .ans li + li { margin-top: var(--sp-1); }
.sheila-panel .msg[data-after] .ans { border-left: 2px solid var(--purple-400); padding-left: var(--s3); }
.sp-dots { display: inline-flex; gap: 4px; padding: var(--s2) 0; }
.sp-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--purple-400); display: block; animation: spdot 1s ease-in-out infinite; }
.sp-dots i:nth-child(2) { animation-delay: .15s; }
.sp-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes spdot { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
/* v3.5: the same dots row (#sp-thinking) before every prepared answer and soft reply, for copy.sheilaPanel.thinkMs. */

/* Foot: PlatformWideMessageInput. The container (white, padding spacing(2) spacing(5) spacing(5), gap spacing(2)); the field, an
   NDS TextField multiline (white, radius 4, the notched outline 1 px solar-800, solar-900 on hover and focus; the textarea in the
   regular face 16/23, padding 12px 44px 12px 12px, the placeholder in text light in the wide-descent face) with the source's soft
   shadow (0 4px 16px common.black at 6%: earth-500); the send button pinned at right 12 px, bottom 8 px: IconButton
   sheila_primary at 28 px with ArrowUpwardOutlined at 20 px (resting: the dawn-100 to purple-100 gradient, a 1 px white ring,
   earth-500 arrow; hover purple-50; pressed a purple-400 ring; disabled, as while the field is empty: white, an earth-100 ring,
   the text-disabled arrow); then the disclaimer as a caption in text light. The composer is never disabled in the product while
   Sheila answers, so the replica's busy state (both disabled) is drawn as the resting field. */
.sheila-panel .sp-foot { flex-shrink: 0; display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-2) var(--sp-5) var(--sp-5); background: var(--solar-50); position: relative; z-index: 1; }
.sheila-panel .sp-input { position: relative; display: flex; align-items: flex-start; width: 100%; box-sizing: border-box; border-radius: 4px; background: var(--white); box-shadow: 0px 4px 16px color-mix(in srgb, var(--earth-500) 6%, transparent); }
.sheila-panel .sp-input::before { content: ''; position: absolute; inset: 0; border: 1px solid var(--solar-800); border-radius: 4px; pointer-events: none; transition: border-color .15s ease; }
.sheila-panel .sp-input:hover::before, .sheila-panel .sp-input:focus-within::before { border-color: var(--solar-900); }
.sheila-panel .sp-input textarea { flex: 1 1 auto; display: block; width: 100%; min-width: 0; box-sizing: border-box; margin: 0; border: none; outline: none; background: transparent; resize: none; overflow-y: auto; field-sizing: content; min-height: 47px; max-height: calc(5 * 23px + 24px); padding: 12px 44px 12px 12px; font-family: var(--ff-product-regular); font-size: 16px; line-height: 23px; font-weight: 400; letter-spacing: 0.00938em; color: var(--text-base); }
.sheila-panel .sp-input textarea::placeholder { font-family: var(--ff-product-wide-descent); color: var(--text-light); opacity: 1; }
.sheila-panel .sp-input .send { position: absolute; right: 12px; bottom: 8px; box-sizing: border-box; width: 28px; height: 28px; padding: 0; border: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-sheila-tint-100); box-shadow: 0 0 0 1px var(--white); color: var(--earth-500); cursor: pointer; }
.sheila-panel .sp-input .send svg.ic { width: 20px; height: 20px; fill: currentColor; }
.sheila-panel .sp-input .send:hover { background: var(--purple-50); }
.sheila-panel .sp-input .send:active { background: var(--bg-sheila-tint-100); box-shadow: 0 0 0 1px var(--purple-400); }
.sheila-panel .sp-input .send:disabled, .sheila-panel .sp-input textarea:placeholder-shown ~ .send { background: var(--white); box-shadow: 0 0 0 1px var(--earth-100); color: var(--text-disabled); cursor: default; }
.sheila-panel .sp-input .send:focus-visible { outline: 2px solid var(--earth-500); outline-offset: 2px; }
/* Busy (Sheila thinks, the walk's exchange plays): both disabled; the field keeps its resting look and the placeholder words stay. */
.sheila-panel .sp-input textarea:disabled { opacity: 1; cursor: default; color: var(--text-base); -webkit-text-fill-color: var(--text-base); }
.sheila-panel .sp-disclaimer { margin: 0; font-family: var(--ff-product-regular); font-size: 12px; line-height: 16px; font-weight: 400; letter-spacing: 0.03333em; color: var(--text-light); }
/* At walk step 1 the shield dims the spotlit pane's buttons to .8 (walk.css); the send circle stays as production draws it. */
.locked [data-spotlit] .sp-input .send:not(:disabled) { opacity: 1; }

/* v4.5: the walk's step 1 -> 2 types "Plan my AASB S2 year" into the box under the shield (sheila.js typePrompt). The field is never
   focused, so the product's focus look (the outline in solar-900) is drawn for it: app.js's lightTarget lights the field
   (#sp-composer.tour-lit) when the pointer presses it, and the box (#sp-input) takes it through :has(); while the prompt is typed
   the box carries .sp-typing-in (the same look, kept as its own rule so a browser without :has still draws it), the field hugs its
   text (field-sizing) and a 1 px earth-500 caret sits after the text (solid while typing, then blinking). With words in the field the
   send button is drawn as the product draws it then (enabled); when the pointer presses it, it is lit: the pressed ring. The composer
   is busy (disabled) throughout; the typed words keep full strength. */
.sheila-panel .sp-input:has(#sp-composer.tour-lit)::before, .sheila-panel .sp-input.sp-typing-in::before { border-color: var(--solar-900); }
.sheila-panel .sp-input.sp-typing-in textarea { flex: 0 1 auto; width: auto; min-width: 1px; padding-right: 0; }
.sheila-panel .sp-input.sp-typing-in textarea::placeholder { color: transparent; }
.sheila-panel .sp-input.sp-typing-in .send, .sheila-panel .sp-input.sp-typing-in .send:disabled { background: var(--bg-sheila-tint-100); box-shadow: 0 0 0 1px var(--white); color: var(--earth-500); opacity: 1; } /* the review of 30 Oct 2026: the circle keeps full strength while the words land */
.sheila-panel .sp-input.sp-typing-in::after { content: ''; flex-shrink: 0; width: 1px; height: 23px; margin-top: 12px; background: var(--earth-500); animation: sp-caret 1s step-end 1s infinite; } /* solid while the letters land (900 ms), blinking after */
@keyframes sp-caret { 50% { opacity: 0; } }
.sheila-panel .sp-input .send.tour-lit, .sheila-panel .sp-input .send.tour-lit:disabled { background: var(--bg-sheila-tint-100); box-shadow: 0 0 0 1px var(--purple-400); color: var(--earth-500); opacity: 1; }

/* v4.4: the question chips in the thread (.sp-qchips) and the product's chips on the greeting (.sp-pchip), drawn as the source's
   suggested questions (SuggestedQuestionsContainer: a full-width column, gap spacing(3); each a SheilaGradientCard with body2 text,
   padding spacing(4), the purple-400 border on white, the bg_sheila_30 wash on hover and while pressed); the "more" strip's lead
   line and the door chip (.sp-q-door: the replica's orange Start free, still #sp-ask-sheila, the ask-sheila door). */
.sheila-panel .sp-qchips { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
.sheila-panel .sp-qlead { margin: 0 0 var(--sp-1); font-family: var(--ff-product-regular); font-size: 16px; line-height: 20px; letter-spacing: 0.01071em; color: var(--text-base); }
.sheila-panel .sp-q { box-sizing: border-box; display: block; width: 100%; flex-shrink: 0; text-align: left; border: 1px solid var(--purple-400); border-radius: var(--radius); background-color: var(--solar-50); background-image: none; padding: var(--sp-4); font-family: var(--ff-product-regular); font-size: 16px; line-height: 20px; letter-spacing: 0.01071em; color: var(--text-base); cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.sheila-panel .sp-q:hover, .sheila-panel .sp-q:active { background-image: var(--bg-sheila-30); }
.sheila-panel .sp-q:focus-visible { outline: 2px solid var(--earth-500); outline-offset: 2px; }
.sheila-panel .sp-q:disabled { opacity: .55; cursor: default; }
.sheila-panel .sp-q:disabled:hover { background-image: none; }
.sheila-panel .sp-q-door { height: 32px; margin-top: var(--s2); padding: 0 var(--s3); border: 1px solid transparent; border-radius: var(--radius); background: var(--dawn-500); color: var(--white); font: inherit; font-size: 14px; line-height: 20px; white-space: nowrap; cursor: pointer; }
.sheila-panel .sp-q-door:hover { background: var(--dawn-600); }
.sheila-panel .sp-q-door:focus-visible { outline: 2px solid var(--earth-500); outline-offset: 2px; }
/* The review of 30 Oct 2026: the first reply's Start free is a link at the end of Sheila's sentence, not a button. */
.sheila-panel .sp-link { display: inline; margin: 0; padding: 0; border: none; background: transparent; font: inherit; color: var(--purple-700); text-decoration: underline; cursor: pointer; }
.sheila-panel .sp-link:hover { text-decoration-thickness: 2px; }
.sheila-panel .sp-link:focus-visible { outline: 2px solid var(--earth-500); outline-offset: 2px; border-radius: 2px; }
.sheila-panel .sp-link:disabled { opacity: .55; cursor: default; }

/* During the walk, at 1101px and wider, the composer is drawn as production draws it, inert under the shield (outside explore
   sending does nothing). Under 1100px the walking band hides the footer (below). The review of 29 Oct 2026. */

/* While Sheila asks (body.asking, app.js): the product sits behind a plain scrim with nothing rendered; it lifts at the reveal. */
.tour .spot.none { transition: box-shadow .5s ease; }
body.asking .tour .spot.none { box-shadow: 0 0 0 9999px rgba(0,28,39,.86); }

/* Under 1100px the docked pane folds away outside the walk. While walking it sits above the product as a short band (the
   work area stacks), still under the shield, so it never covers a callout and the spotlit anchor scrolls in below it.
   The footer (the composer) steps aside; the idle greeting or the one exchange shows (v4.5: the walk types into the composer only
   at 1101px and wider; under it the box has no layout, so app.js's hop skips the pointer and the typing and the exchange plays in
   the band at once; the review of 30 Oct 2026). */
@media (max-width: 1100px) {
  .sheila-panel { display: none !important; }
  body.walking .work { flex-direction: column; }
  body.walking .sheila-panel { display: flex !important; width: auto; max-height: 34vh; border-right: none; border-bottom: 1px solid var(--divider); }
  body.walking .sheila-panel .sp-foot, body.walking .sheila-panel .sp-progress { display: none; }
  body.walking .sheila-panel .sp-head { height: 44px; min-height: 44px; padding-left: var(--s4); }
  body.walking .sheila-panel .sp-title { font-size: 16px; }
  body.walking .sheila-panel .sp-hacts { display: none; }
  body.walking .sheila-panel .sp-body { padding: var(--s3) var(--s4); }
  body.walking .sheila-panel .sp-idle { padding-top: 0; gap: var(--s3); }
  body.walking .sheila-panel .sp-avatar.xl { width: 40px; height: 40px; }
  body.walking .sheila-panel .sp-greet { font-size: 18px; line-height: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .sp-dots i { animation: none; opacity: 1; }
  .tour .spot.none, .sp-prompt, .sheila-panel .sp-q, .sheila-panel .sp-input { transition: none; }
  .sheila-panel .sp-input.sp-typing-in::after { animation: none; }
  .sheila-panel .msg.user.sp-in p { animation: none; }
}

/* ---------- v3 slice 1: explore (spec v3/spec/v3-explore.md section 3) ---------- */
/* v3.4 to v4.3 the prepared questions lived in the footer; v4.4 draws them as .sp-qchips in the thread. .sp-xchips holds the door chips (the
   first typed reply's Start free, the soft doors) and the product's suggest chip. */
.sp-xchips { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s3); }
.sp-xchip { font-size: 14px; line-height: 20px; padding: var(--s2) var(--s3); }
.sp-wchip { border-style: dashed; color: var(--purple-700); }
.sp-idle + .sp-xchips { margin-top: var(--s5); }
/* v3.3: the product's one chip on a risk's page, "Suggest controls for this risk" (pink, sparkle; capture v33-26). */
.sp-suggest { display: inline-flex; align-items: center; gap: var(--s2); background: var(--pink-50); border-color: var(--purple-400); }
.sp-xchip.sp-suggest { font-size: 16px; line-height: 20px; padding: var(--sp-4); } /* v5.8: the product's chip keeps the card's size (SheilaGradientCard) */
.sp-suggest svg.ic { width: 16px; height: 16px; color: var(--purple-400); flex-shrink: 0; }
/* Under 1100px the pane sits above the product as a band in explore too, when it is open (the pill toggles it). */
@media (max-width: 1100px) {
  body.explore .work { flex-direction: column; }
  body.explore .sheila-panel:not([hidden]) { display: flex !important; width: auto; max-height: 42vh; border-right: none; border-bottom: 1px solid var(--divider); }
  body.explore .sheila-panel .sp-progress { display: none; }
  body.explore .sheila-panel .sp-head { height: 44px; min-height: 44px; padding-left: var(--s4); }
  body.explore .sheila-panel .sp-title { font-size: 16px; }
  body.explore .sheila-panel .sp-body { padding: var(--s3) var(--s4); gap: var(--s4); }
  body.explore .sheila-panel .sp-idle { padding-top: 0; gap: var(--s3); }
  body.explore .sheila-panel .sp-avatar.xl { width: 40px; height: 40px; }
  body.explore .sheila-panel .sp-greet { font-size: 18px; line-height: 24px; }
  body.explore .sheila-panel .sp-foot { padding: var(--s2) var(--s4); }
  body.explore .sheila-panel .sp-disclaimer { display: none; } /* v5.8: the source drops the caption in its compact bar mode */
  /* v4.4: the band is the v4.1 one (42vh above); the thread (with its question chips) is the band's one scroller. */
}
@media (prefers-reduced-motion: reduce) { body.explore .sheila-panel .msg.user.sp-in p { animation: none; } }

/* ---------- v5.0 (spec v4/spec/v5.0-four-stops.md sections 4.4, 4.5 and 8) ---------- */
/* The product's greeting with its two chips (stop 3, REQ224), the pressed chip, the suggestions card, the locked entry in explore. */
.sheila-panel .sp-greet-b { width: 100%; }
.sheila-panel .sp-pchips { display: flex; flex-direction: column; gap: var(--sp-3); width: 100%; margin-top: var(--sp-2); text-align: left; } /* v5.8: SuggestedQuestionsContainer */
.sheila-panel .sp-pchip.sp-pressed, .sheila-panel .sp-pchip.sp-pressed:disabled { opacity: 1; background-image: var(--bg-sheila-30); border-color: var(--purple-400); } /* v5.8: the card pinned to its animated state (active) */
.sheila-panel .sp-card { display: flex; align-items: center; gap: var(--s2); padding: var(--s3); border: 1px solid var(--purple-400); border-radius: var(--radius); background: var(--bg-sheila-tint-50); font-size: 14px; line-height: 18px; color: var(--text-base); }
.sheila-panel .sp-card .ic { width: 18px; height: 18px; fill: var(--purple-700); }
.sheila-panel .sp-card-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheila-panel .sp-card-v { border: 0; background: transparent; padding: 0 var(--s1); font: inherit; font-size: 14px; color: var(--text-base); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sheila-panel .sp-card-v:focus-visible { outline: 2px solid var(--earth-500); outline-offset: 2px; }
.sheila-panel .sp-q-lock { display: flex; align-items: center; gap: var(--s2); border-color: var(--dawn-500); }
.sheila-panel .sp-q-lock .ic { fill: var(--dawn-500); }
.sheila-panel .sp-suggest { display: flex; align-items: center; gap: var(--s2); }
.sheila-panel .sp-suggest .ic { fill: var(--purple-700); }
@media (max-width: 1100px) { body.walking .sheila-panel .sp-greet-b .sp-pchips { gap: var(--s1); } }