/* =============================================================================
   SIS-OS WORKSPACE — Working Card / Attention / Decision
   =============================================================================
   Three regions, and the separation between them is a rule, not a layout:

     DECISIONS  the only region that may carry Approve / Modify / Decline
     WORKING    the workspace. One context at a time. Advisor lives at its foot
     ATTENTION  informational entry points. Clicking one changes the Working
                Card's context and does nothing else

   The visual language keeps them apart deliberately. Attention Cards have no
   button styling anywhere in this file, so a card that grew an action button
   would look wrong before it behaved wrong.
   ========================================================================== */

:root {
  --ink: #1a1a1a;
  --ink-soft: #666;
  --ink-faint: #8c8c8c;
  --ground: #f5f5f0;
  --card: #ffffff;
  --line: #e3e3dd;
  --accent: #2f6f4f;
  --accent-soft: #eaf3ee;
  --warn: #8a5a00;
  --warn-soft: #fdf4e3;
  --stop: #8a2f2f;
  --stop-soft: #fbeeee;
  --radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---- header ------------------------------------------------------------- */
.topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 26px; background: var(--ground);
  border-bottom: 1px solid var(--line);
}
.brand { font-size: 22px; font-weight: 700; letter-spacing: .5px; }
.vertical-name { color: var(--ink-soft); font-size: 15px; }
.topbar-spacer { flex: 1; }

.business-menu { position: relative; }
.business-button {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; padding: 9px 18px; font-size: 15px;
  cursor: pointer; color: var(--ink);
}
.business-panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40;
  min-width: 300px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 12px 34px rgba(0,0,0,.12); padding: 14px 0;
}
.business-panel h4 {
  margin: 0 0 6px; padding: 0 20px; font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint); font-weight: 600;
}
.business-item {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: 10px 20px; font-size: 15px; color: var(--ink); cursor: pointer;
}
.business-item:hover { background: var(--ground); }
.business-item[disabled] { color: var(--ink-faint); cursor: default; }
.business-item[disabled]:hover { background: none; }
.business-sep { height: 1px; background: var(--line); margin: 10px 0; }

/* ---- layout ------------------------------------------------------------- */
.layout {
  display: grid; grid-template-columns: minmax(0,1fr) 340px;
  gap: 26px; padding: 22px 26px 40px; align-items: start;
}
@media (max-width: 900px) { .layout { grid-template-columns: minmax(0,1fr); } }

.rail-title {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600; margin: 0 0 12px;
}
.empty-note { color: var(--ink-soft); margin: 0 0 22px; }

/* ---- decision cards ----------------------------------------------------- */
.decision-card {
  background: var(--card); border: 1px solid var(--line);
  border-left: 3px solid var(--warn);
  border-radius: var(--radius); padding: 16px 18px; margin-bottom: 12px;
}
.decision-card h3 { margin: 0 0 4px; font-size: 16px; }
.decision-card p { margin: 0 0 14px; color: var(--ink-soft); font-size: 14px; }
.decision-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.decision-actions button {
  border-radius: 7px; padding: 8px 16px; font-size: 14px; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
}
.act-approve { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.act-decline { background: var(--stop-soft); border-color: var(--stop); color: var(--stop); }
.decision-outcome { margin-top: 12px; font-size: 14px; color: var(--accent); }

/* ---- working card ------------------------------------------------------- */
.working-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); display: flex; flex-direction: column;
  min-height: 460px; overflow: hidden;
}
.working-head { padding: 20px 22px 0; }
.working-head h2 { margin: 0 0 4px; font-size: 21px; }
.working-sub { color: var(--ink-soft); font-size: 14px; }

.context-strip {
  display: flex; gap: 8px; flex-wrap: wrap; padding: 16px 22px 0;
}
.context-chip {
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: 999px; padding: 7px 15px; font-size: 14px; cursor: pointer;
}
.context-chip[aria-selected="true"] {
  background: var(--ink); color: #fff; border-color: var(--ink);
}

.working-body { flex: 1; padding: 20px 22px; }

/* ---- the isolated surface ------------------------------------------------
 * A Core surface runs in its own document (see shell/surface-frame.html). The
 * Business Owner must not be able to tell: no frame border, no inset panel, no
 * second scrollbar around one that already scrolls. The surface fills the
 * Working Card's body and the card's own padding is dropped for it, so the
 * application's own layout starts where the card starts.
 */
.working-body:has(.surface-host) { padding: 0; }
.surface-host { display: block; height: 100%; }
/* THE OUTER HALF OF THE NESTED SCROLLBAR WAS HERE.
 *
 * `height: 72vh` is a fixed box for a document of unknown length, so any
 * surface taller than 72% of the viewport scrolled INSIDE the Working Card
 * while the shell page scrolled around it - two scrollbars for one page, and
 * no amount of care inside the surface could have fixed it, because the
 * surface does not choose this height.
 *
 * The height is now the surface's own, measured in its document and applied
 * here by the shell (see workspace.js). `min-height` stays as the floor so an
 * empty or still-loading surface is not a sliver, and the declaration below is
 * only the value used before the first measurement arrives. */
.surface-frame {
  display: block; width: 100%; border: 0; margin: 0;
  height: 460px; min-height: 460px; background: var(--card);
}
/* `:has()` is recent. Where it is unavailable the frame still fills the card;
 * only the card's padding remains, which is a margin, not a defect. */
.surface-host + * { margin-top: 0; }
.surface-failed { margin: 20px 22px; }
.surface-error-code { display: block; margin-top: 6px; color: var(--ink-soft); font-size: 13px; }
.panel-note {
  background: var(--accent-soft); border-radius: 8px;
  padding: 16px 18px; color: #24503b;
}
.panel-note strong { display: block; margin-bottom: 4px; }
.working-list { list-style: none; margin: 0; padding: 0; }
.working-list li {
  border-bottom: 1px solid var(--line); padding: 11px 0; font-size: 14px;
}
.working-list li:last-child { border-bottom: 0; }

/* ---- advisor ------------------------------------------------------------ */
.advisor {
  display: flex; align-items: center; gap: 12px;
  border-top: 1px solid var(--line); padding: 14px 22px; background: var(--card);
}
.advisor-mic {
  width: 38px; height: 38px; border-radius: 50%; flex: 0 0 38px;
  border: 1px solid var(--line); background: var(--ground); cursor: pointer;
}
.advisor input {
  flex: 1; border: 1px solid var(--line); border-radius: 999px;
  padding: 11px 18px; font-size: 15px; font-family: inherit;
}
.advisor-state { color: var(--ink-faint); font-size: 13px; white-space: nowrap; }
.advisor button.send {
  border: 0; border-radius: 999px; padding: 11px 24px; font-size: 15px;
  background: #b58a5e; color: #fff; cursor: pointer;
}
.advisor-log { padding: 0 22px 14px; }
.advisor-line { font-size: 14px; color: var(--ink-soft); margin-top: 8px; }
.advisor-line b { color: var(--ink); }

/* ---- attention cards ---------------------------------------------------- */
.attention-card {
  display: block; width: 100%; text-align: left;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 10px;
  cursor: pointer; font: inherit; color: inherit;
}
.attention-card:hover { border-color: var(--ink-faint); }
.attention-card h4 { margin: 0 0 3px; font-size: 15px; }
.attention-card p { margin: 0; font-size: 13px; color: var(--ink-soft); }
/* THE EARLIER NOTICES ABOUT THE SAME PIECE OF WORK, on the card that groups
 * them. Plain text inside the one button: grouping must not hide what it
 * grouped, and it must not add a second control or a second destination. */
.attention-card .attention-earlier {
  display: block; margin-top: 6px; padding-top: 5px;
  border-top: 1px dashed var(--line); font-size: 12px; color: var(--ink-faint);
}
.attention-card .attention-earlier b { display: block; font-weight: 600; }
.attention-card .attention-earlier-line { display: block; margin-top: 2px; }

.attention-card .opens-in {
  display: block; margin-top: 8px; font-size: 12px; color: var(--ink-faint);
}

/* ---- fail closed -------------------------------------------------------- */
.fail-closed {
  margin: 40px auto; max-width: 640px; background: var(--card);
  border: 1px solid var(--stop); border-left: 4px solid var(--stop);
  border-radius: var(--radius); padding: 26px 28px;
}
.fail-closed h2 { margin: 0 0 10px; font-size: 20px; color: var(--stop); }
.fail-closed p { margin: 0 0 10px; color: var(--ink-soft); }
.fail-closed code {
  background: var(--stop-soft); border-radius: 5px; padding: 2px 7px;
  font-size: 13px; color: var(--stop);
}

/* ---------------------------------------------------------------------------
 * MOUNTED-SURFACE UTILITIES
 *
 * A page written to stand alone may inherit basic utility classes from a
 * stylesheet the shell deliberately does not load. bo_desk.html is the case in
 * point: nothing in the six same-origin stylesheets it lists defines a generic
 * `.hidden`, so it was getting that class from the legacy notification engine's
 * stylesheet on :8200 - an estate that is retired, off-namespace, and would drag
 * a second notification UI into the page.
 *
 * The consequence was not cosmetic. #bookingReadModal carries class="hidden",
 * so with no rule it stayed laid over the page and swallowed clicks meant for
 * the Attention rail - measured as a Playwright click timing out with
 * "<div class="hidden" id="bookingReadModal"> intercepts pointer events".
 *
 * It is NOT scoped to [data-surface]: measured in the browser, the modal reports
 * `inSurfaceHost=false` because bo_desk.js relocates its layers out of the
 * mounted host at boot, so a descendant selector can never reach them. The rule
 * is therefore global, which is what a utility class is anyway.
 *
 * Safe to make global: the shell's own markup used `.hidden` in zero places
 * before this was added (verified), so nothing of SIS-OS's own can be affected,
 * and `.hidden` has exactly one possible meaning. The owner's page is not
 * modified.
 * ------------------------------------------------------------------------- */
.hidden {
  display: none !important;
}

/* --- business logo, header slot -------------------------------------------
 * The logo is identity, not decoration, so it sits beside the vertical name in
 * the topbar and nowhere else. The fallback is a plain initial: a business with
 * no logo has no logo, and a stock image would be a claim the database never
 * made. Sized so a set logo and a fallback occupy the same space and the header
 * does not reflow when identity resolves.
 * ------------------------------------------------------------------------- */
.business-logo { display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin-right: 6px; vertical-align: middle; }
.business-logo-img { width: 24px; height: 24px; object-fit: contain; border-radius: 4px; }
.business-logo-fallback { display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 4px; font-size: 12px; font-weight: 600;
  background: rgba(255,255,255,.14); color: inherit; }