/* Web only: desktop work-control surface for the regulated eye-care AI OS.
   Keep this file scoped to desktop so the future app can use a separate system. */
@media (min-width: 721px) {
  :root {
    --web-sidebar: 264px;
    --web-bg: #f7f9fc;
    --web-surface: #ffffff;
    --web-ink: #14243b;
    --web-ink-soft: #526174;
    --web-muted: #7a8798;
    --web-line: #dfe5ed;
    --web-line-soft: #edf1f5;
    --web-line-strong: #b8cce4;
    --web-brand: #006ee6;
    --web-brand-deep: #004fb8;
    --web-brand-soft: #dbe8f6;
    --web-brand-wash: #f2f7fd;
    --web-brand-wash-hover: #f7faff;
    --web-focus-line: #9fc5ef;
    --web-focus-wash: #eaf3ff;
    --web-risk: #b54d48;
    --web-warn: #a66b25;
    --web-safe: #28775c;
    --web-radius-control: 8px;
    --web-radius-panel: 12px;
    --web-radius-floating: 16px;
  }

  html,
  body {
    background: var(--web-bg) !important;
  }

  .app {
    grid-template-columns: var(--web-sidebar) minmax(0, 1fr) !important;
    background: var(--web-bg) !important;
  }

  .app .sidebar {
    width: var(--web-sidebar) !important;
    padding: 24px 18px 18px !important;
    background: var(--web-surface) !important;
    border-right: 1px solid var(--web-line) !important;
    box-shadow: none !important;
  }

  .brand-lockup,
  .side-nav-item,
  .side-history-item,
  .side-user-main,
  .side-icon-btn {
    transition: background-color .16s ease, color .16s ease, border-color .16s ease;
  }

  .brand-lockup {
    border-radius: var(--web-radius-control) !important;
  }

  .brand-text strong {
    color: var(--web-ink) !important;
    font-weight: 700 !important;
  }

  .brand-text em {
    color: var(--web-muted) !important;
  }

  .side-nav {
    gap: 3px !important;
    margin-top: 20px !important;
    padding: 12px 0 !important;
    border-top: 1px solid var(--web-line-soft) !important;
    border-bottom: 1px solid var(--web-line-soft) !important;
  }

  .side-nav-item {
    min-height: 40px !important;
    padding: 0 10px !important;
    border-radius: var(--web-radius-control) !important;
    color: var(--web-ink-soft) !important;
  }

  .side-nav-item:hover {
    background: #f5f8fc !important;
    color: var(--web-ink) !important;
  }

  .side-nav-item.is-on {
    background: #eaf3ff !important;
    color: var(--web-brand-deep) !important;
    box-shadow: inset 3px 0 0 var(--web-brand) !important;
  }

  .side-nav-copy strong {
    font-size: 13px !important;
    font-weight: 640 !important;
  }

  .side-nav-copy em {
    color: var(--web-muted) !important;
  }

  .side-history {
    margin-top: 16px !important;
  }

  .side-history-item {
    min-height: 32px !important;
    padding: 5px 8px !important;
    border-radius: 7px !important;
  }

  .side-history-item:hover,
  .side-history-item.is-on {
    background: #f5f8fc !important;
  }

  .side-user-wrap {
    padding-top: 14px !important;
    border-top: 1px solid var(--web-line-soft) !important;
  }

  .app .col-main {
    min-width: 0 !important;
    padding: 0 48px 72px !important;
    background: var(--web-bg) !important;
  }

  .app .stage,
  .app[class*="view-"] .stage {
    width: min(1320px, 100%) !important;
    max-width: 1320px !important;
    min-height: calc(100dvh - 72px) !important;
    margin: 0 auto !important;
    padding: 42px 0 72px !important;
    overflow-x: visible !important;
    background: transparent !important;
  }

  .app .stage > *:not(.management-page) {
    width: 100% !important;
    max-width: none !important;
  }

  /* The dock is a composer, not a bottom gradient mask. Reserve space instead. */
  .app .dock {
    position: static !important;
    padding: 0 !important;
    background: transparent !important;
  }

  .workspace-page {
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 0 80px !important;
    gap: 20px !important;
  }

  .workspace-page-head {
    max-width: none !important;
    gap: 7px !important;
  }

  .workspace-page-head h1 {
    color: var(--web-ink) !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    letter-spacing: -.02em !important;
  }

  .workspace-page-head p {
    max-width: 760px !important;
    color: var(--web-ink-soft) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  .workspace-ai-brief {
    max-width: none !important;
    grid-template-columns: 32px minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 16px 18px !important;
    border: 1px solid var(--web-line) !important;
    border-left: 3px solid var(--web-brand) !important;
    border-radius: var(--web-radius-panel) !important;
    background: var(--web-surface) !important;
    box-shadow: none !important;
  }

  .workspace-ai-brief::before,
  .workspace-work-row::before,
  .workspace-command::before {
    display: none !important;
  }

  .workspace-ai-mark {
    width: 32px !important;
    height: 32px !important;
    border-radius: var(--web-radius-control) !important;
    background: #eaf3ff !important;
    color: var(--web-brand-deep) !important;
  }

  .workspace-ai-brief span,
  .workspace-ai-brief strong,
  .workspace-ai-brief p {
    color: var(--web-ink) !important;
  }

  .workspace-ai-brief span {
    color: var(--web-brand-deep) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
  }

  .workspace-ai-brief strong {
    margin-top: 5px !important;
    font-size: 17px !important;
    font-weight: 680 !important;
    line-height: 1.42 !important;
  }

  .workspace-ai-brief p {
    max-width: 900px !important;
    margin-top: 5px !important;
    color: var(--web-ink-soft) !important;
    font-size: 13px !important;
  }

  .workspace-brief-meta,
  .workspace-brief-contract {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-top: 10px !important;
  }

  .workspace-brief-meta span,
  .workspace-brief-contract span {
    color: var(--web-muted) !important;
    font-size: 11.5px !important;
  }

  .workspace-brief-meta span + span::before {
    background: #b7c1ce !important;
  }

  .workspace-brief-contract {
    padding-top: 10px;
    border-top: 1px solid var(--web-line-soft);
  }

  .workspace-brief-contract span::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    margin: 0 7px 1px 0;
    border-radius: 50%;
    background: #7e8da1;
  }

  .workspace-page-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 24px;
    align-items: start;
  }

  .workspace-worklist {
    overflow: hidden !important;
    border: 1px solid var(--web-line) !important;
    border-radius: var(--web-radius-panel) !important;
    background: var(--web-surface) !important;
    box-shadow: none !important;
  }

  .workspace-worklist-head {
    min-height: 58px !important;
    padding: 0 20px !important;
    border-bottom: 1px solid var(--web-line) !important;
  }

  .workspace-worklist-head > div {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
  }

  .workspace-worklist-head span {
    color: var(--web-ink) !important;
    font-size: 14px !important;
    font-weight: 680 !important;
  }

  .workspace-worklist-head em {
    color: var(--web-muted) !important;
    font-size: 11.5px !important;
    font-style: normal !important;
  }

  .workspace-worklist-head button {
    min-height: 32px !important;
    color: var(--web-brand-deep) !important;
    font-size: 12px !important;
  }

  .workspace-worklist-rows {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  .workspace-work-row,
  .workspace-work-row.is-primary {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(240px, 1.12fr) minmax(180px, .98fr) minmax(150px, .72fr) !important;
    gap: 16px !important;
    align-items: start !important;
    min-height: 0 !important;
    padding: 20px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--web-line-soft) !important;
    border-radius: 0 !important;
    background: var(--web-surface) !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .workspace-work-row:last-child {
    border-bottom: 0 !important;
  }

  .workspace-work-row.is-primary {
    background: #fbfdff !important;
    box-shadow: inset 3px 0 0 var(--web-brand) !important;
  }

  .workspace-work-row:hover,
  .workspace-work-row.is-primary:hover {
    background: #f8fbff !important;
  }

  .workspace-work-main {
    grid-template-columns: 44px minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .workspace-event-visual {
    width: 42px !important;
    height: 42px !important;
    border: 1px solid var(--web-line) !important;
    border-radius: 10px !important;
    background: #f5f8fc !important;
    box-shadow: none !important;
  }

  .workspace-event-visual.is-photo {
    border-radius: 50% !important;
    padding: 0 !important;
  }

  .workspace-event-visual img,
  .workspace-event-visual .avatar,
  .workspace-event-visual .kid-av {
    border-radius: inherit !important;
  }

  .workspace-work-copy {
    gap: 5px !important;
  }

  .workspace-row-kicker {
    gap: 7px !important;
  }

  .workspace-row-kicker b {
    min-height: 20px !important;
    padding: 0 7px !important;
    border: 1px solid #cfe2fa !important;
    border-radius: 6px !important;
    background: #f0f6ff !important;
    color: var(--web-brand-deep) !important;
    font-size: 11px !important;
  }

  .workspace-row-kicker i {
    color: var(--web-muted) !important;
    font-size: 11.5px !important;
  }

  .workspace-work-main strong {
    color: var(--web-ink) !important;
    font-size: 16px !important;
    font-weight: 680 !important;
    line-height: 1.38 !important;
  }

  .workspace-row-signal {
    min-height: 22px !important;
    padding: 0 7px !important;
    border: 1px solid var(--web-line) !important;
    border-radius: 6px !important;
    background: #f8fafc !important;
    color: var(--web-ink-soft) !important;
    font-size: 11.5px !important;
  }

  .workspace-work-main p,
  .workspace-work-reason p,
  .workspace-work-meta p {
    color: var(--web-ink-soft) !important;
    font-size: 12.5px !important;
    line-height: 1.58 !important;
  }

  .workspace-work-copy em {
    color: var(--web-muted) !important;
    font-size: 11.5px !important;
  }

  .workspace-work-copy em::before {
    color: var(--web-muted) !important;
  }

  .workspace-work-reason,
  .workspace-work-meta {
    align-content: start !important;
    gap: 7px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .workspace-work-reason {
    padding-left: 20px !important;
    border-left: 1px solid var(--web-line-soft) !important;
  }

  .workspace-work-reason span,
  .workspace-work-meta span {
    color: var(--web-brand-deep) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
  }

  .workspace-evidence {
    display: grid !important;
    gap: 4px !important;
  }

  .workspace-evidence span {
    display: block !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--web-muted) !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
  }

  .workspace-evidence span::before,
  .workspace-evidence span + span::before {
    content: "·" !important;
    display: inline !important;
    width: auto !important;
    height: auto !important;
    margin: 0 5px 0 0 !important;
    border-radius: 0 !important;
    background: none !important;
    color: var(--web-brand) !important;
  }

  .workspace-work-meta {
    padding-left: 20px !important;
    border-left: 1px solid var(--web-line-soft) !important;
  }

  .workspace-work-meta em {
    color: var(--web-muted) !important;
    font-size: 11px !important;
    font-style: normal !important;
  }

  .workspace-row-action,
  .workspace-rail-primary {
    width: fit-content !important;
    min-height: 36px !important;
    margin-top: 7px !important;
    padding: 0 13px !important;
    border: 1px solid #b8d4f3 !important;
    border-radius: var(--web-radius-control) !important;
    background: var(--web-surface) !important;
    color: var(--web-brand-deep) !important;
    font-size: 12px !important;
    font-weight: 680 !important;
    box-shadow: none !important;
  }

  .workspace-row-action:hover,
  .workspace-rail-primary:hover {
    border-color: var(--web-brand) !important;
    background: #f0f6ff !important;
    color: var(--web-brand-deep) !important;
    transform: none !important;
  }

  .workspace-work-row.is-primary .workspace-row-action {
    border-color: var(--web-brand) !important;
    background: var(--web-brand) !important;
    color: #fff !important;
    box-shadow: none !important;
  }

  .workspace-work-row.is-primary .workspace-row-action:hover {
    background: var(--web-brand-deep) !important;
    color: #fff !important;
  }

  .workspace-detail-rail {
    position: sticky;
    top: 24px;
    display: grid;
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--web-line) !important;
    border-radius: var(--web-radius-panel) !important;
    background: var(--web-surface) !important;
    box-shadow: none !important;
  }

  .workspace-rail-head,
  .workspace-rail-section,
  .workspace-rail-action {
    padding: 18px 20px;
  }

  .workspace-rail-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--web-line-soft);
  }

  .workspace-rail-head > div,
  .workspace-rail-section,
  .workspace-rail-action {
    display: grid;
    gap: 8px;
  }

  .workspace-rail-head span,
  .workspace-rail-section > span {
    color: var(--web-brand-deep);
    font-size: 11px;
    font-weight: 700;
  }

  .workspace-rail-head strong {
    color: var(--web-ink);
    font-size: 15px;
    font-weight: 680;
    line-height: 1.4;
  }

  .workspace-rail-status {
    min-height: 22px;
    display: inline-flex;
    align-items: center;
    padding: 0 7px;
    border: 1px solid #f0d5b4;
    border-radius: 6px;
    background: #fff8ef;
    color: var(--web-warn);
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
  }

  .workspace-rail-section + .workspace-rail-section,
  .workspace-rail-action {
    border-top: 1px solid var(--web-line-soft);
  }

  .workspace-rail-section p,
  .workspace-rail-action p {
    margin: 0;
    color: var(--web-ink-soft);
    font-size: 12.5px;
    line-height: 1.62;
  }

  .workspace-rail-evidence,
  .workspace-rail-contract {
    display: grid;
    gap: 5px;
  }

  .workspace-rail-evidence span,
  .workspace-rail-contract span {
    color: var(--web-muted);
    font-size: 11px;
    line-height: 1.45;
  }

  .workspace-rail-evidence span::before,
  .workspace-rail-contract span::before {
    content: "·";
    margin-right: 5px;
    color: var(--web-brand);
  }

  .workspace-rail-primary {
    margin-top: 3px !important;
    background: var(--web-brand) !important;
    color: #fff !important;
  }

  .workspace-rail-primary:hover {
    background: var(--web-brand-deep) !important;
    color: #fff !important;
  }

  .workspace-landing,
  .workspace-landing.is-today {
    width: min(880px, 100%) !important;
    min-height: calc(100dvh - 72px) !important;
    margin: 0 auto !important;
    padding: 132px 0 88px !important;
    align-content: start !important;
    justify-items: start !important;
  }

  .workspace-visual {
    display: none !important;
  }

  .workspace-home-hero {
    display: block !important;
    width: 100% !important;
    margin: 0 0 24px !important;
    text-align: left !important;
  }

  .workspace-copy,
  .workspace-landing.is-today .workspace-copy {
    justify-items: start !important;
    text-align: left !important;
    gap: 6px !important;
  }

  .workspace-landing.is-today .workspace-copy p {
    color: var(--web-muted) !important;
    font-size: 13px !important;
  }

  .workspace-landing.is-today .workspace-copy h1 {
    color: var(--web-ink) !important;
    font-size: 36px !important;
    font-weight: 700 !important;
    letter-spacing: -.025em !important;
  }

  .workspace-command {
    width: 100% !important;
    min-height: 144px !important;
    margin-top: 0 !important;
    padding: 20px !important;
    border: 1px solid var(--web-line) !important;
    border-radius: var(--web-radius-floating) !important;
    background: var(--web-surface) !important;
    box-shadow: none !important;
  }

  .workspace-command:focus-within {
    border-color: var(--web-focus-line) !important;
    box-shadow: 0 0 0 3px var(--web-focus-wash) !important;
  }

  .workspace-command textarea {
    min-height: 64px !important;
    color: var(--web-ink) !important;
    font-size: 15px !important;
  }

  .workspace-command textarea::placeholder {
    color: var(--web-muted) !important;
  }

  .workspace-command .slm-tool-btn,
  .workspace-command .slm-mode-btn {
    min-height: 34px !important;
    border: 1px solid var(--web-line) !important;
    border-radius: var(--web-radius-control) !important;
    background: var(--web-surface) !important;
    color: var(--web-ink-soft) !important;
    box-shadow: none !important;
  }

  .workspace-command .slm-send {
    width: 40px !important;
    height: 40px !important;
    border: 0 !important;
    border-radius: var(--web-radius-control) !important;
    background: var(--web-brand) !important;
    box-shadow: none !important;
  }

  .workspace-command .slm-send:hover {
    background: var(--web-brand-deep) !important;
    transform: none !important;
  }

  .workspace-prompt-grid {
    width: 100% !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin-top: 14px !important;
  }

  .workspace-prompt-card {
    min-height: 34px !important;
    padding: 0 11px 0 9px !important;
    border: 1px solid var(--web-line) !important;
    border-radius: var(--web-radius-control) !important;
    background: var(--web-surface) !important;
    color: var(--web-ink-soft) !important;
  }

  .workspace-prompt-card:hover {
    border-color: #b8d4f3 !important;
    background: #f8fbff !important;
    color: var(--web-brand-deep) !important;
    transform: none !important;
  }

  button:focus-visible,
  textarea:focus-visible,
  input:focus-visible {
    outline: 2px solid var(--web-brand) !important;
    outline-offset: 2px !important;
  }
}

@media (min-width: 721px) and (max-width: 1340px) {
  .app .col-main {
    padding-inline: 32px !important;
  }

  .workspace-page-layout {
    grid-template-columns: 1fr !important;
  }

  .workspace-detail-rail {
    display: none !important;
  }

  .workspace-work-row,
  .workspace-work-row.is-primary {
    grid-template-columns: minmax(250px, 1.12fr) minmax(220px, .98fr) minmax(170px, .72fr) !important;
    gap: 16px !important;
  }
}

@media (min-width: 721px) and (max-width: 900px) {
  .app .col-main {
    padding-inline: 24px !important;
  }

  .workspace-work-row,
  .workspace-work-row.is-primary {
    grid-template-columns: minmax(220px, 1fr) minmax(190px, .9fr) !important;
  }

  .workspace-work-meta {
    grid-column: 1 / -1;
    padding-top: 14px !important;
    padding-left: 0 !important;
    border-top: 1px solid var(--web-line-soft) !important;
    border-left: 0 !important;
  }
}

/* The mobile product is intentionally a separate future design. Keep new web-only
   affordances out of its current shell until that product is redesigned. */
@media (max-width: 720px) {
  .workspace-detail-rail,
  .workspace-brief-contract {
    display: none !important;
  }
}