/* P051 shell, Home and authentication; only scope-related rules. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
html { font-size: 16px; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  background: var(--canvas);
  color: var(--text-1);
}
button, input { font: inherit; }

/* ─── App shell ─── */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  min-height: 100vh;
}

/* ─── Sidebar ─── */
.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.sidebar-toggle { display: none; font-size: 14px; }
.sidebar-content { display: contents; }

.sidebar-brand {
  display: flex;
  align-items: center;
  padding: 0 22px;
  height: 64px;
  border-bottom: 1px solid var(--border-soft);
  gap: 10px;
  flex-shrink: 0;
}
.brand-wordmark { height: 26px; width: auto; }

.sidebar-section {
  padding: 16px 10px 4px 22px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--text-3);
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  margin: 1px 8px;
  font-size: 14px;
  color: var(--text-2);
  border-radius: var(--r2);
  border-left: 2px solid transparent;
  cursor: pointer;
  transition: background .1s, color .1s;
  text-decoration: none;
}
.nav-link:hover { background: var(--surface-raised); color: var(--text-1); }
.nav-link.active {
  background: var(--accent-soft);
  color: var(--accent-text);
  font-weight: 500;
  border-left-color: var(--accent);
}
.nav-link svg { width: 17px; height: 17px; flex-shrink: 0; opacity: .65; }
.nav-link.active svg { opacity: 1; }
.nav-badge {
  margin-left: auto;
  min-width: 20px; height: 20px;
  padding: 0 6px;
  border-radius: 99px;
  background: var(--accent);
  color: var(--surface);
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

.tent-list { padding: 6px 10px 8px; }
.tent-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-radius: var(--r2);
  cursor: pointer;
  transition: background .1s;
}
.tent-item:hover { background: var(--surface-raised); }
.tent-item.active { background: var(--surface-raised); }
.tent-status { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--ok); }
.tent-status.warn { background: var(--warn); }
.tent-name { font-size: 14px; font-weight: 500; color: var(--text-1); }
.tent-meta { font-size: 12px; color: var(--text-3); margin-top: 1px; }

.sidebar-add {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px;
  margin: 2px 16px 10px;
  border-radius: var(--r2);
  border: 1.5px dashed var(--border);
  color: var(--text-3); font-size: 13px;
  cursor: pointer;
  transition: border-color .1s, color .1s;
}
.sidebar-add:hover { border-color: var(--accent); color: var(--accent-text); }

.sidebar-footer {
  margin-top: auto;
  border-top: 1px solid var(--border-soft);
  padding: 10px 8px;
}

/* ─── Main ─── */
.main { --main-gutter: 36px; min-width: 0; padding: 0; display: flex; flex-direction: column; }

.main-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--main-gutter);
  height: 64px;
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
  position: sticky; top: 0; z-index: 4;
  background: var(--canvas);
}
.main-header > div { min-width: 0; width: 100%; max-width: var(--vc-col); }
.main-title { font-size: 16px; font-weight: 600; color: var(--text-1); }
.main-tent-meta { font-size: 13px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.main-body { padding: 28px var(--main-gutter); overflow-x: auto; }

.page-header { margin-bottom: 24px; }
.page-status {
  font-size: 22px; font-weight: 600; line-height: 1.2;
  color: var(--warn); margin-bottom: 5px;
}
.page-status.ok { color: var(--text-1); }
.page-meta {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--text-3);
}
.meta-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--border); }
.refresh-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 99px;
  border: 1px solid var(--border);
  background: var(--surface); color: var(--text-2);
  font-size: 12px; cursor: pointer;
  transition: border-color .1s, color .1s;
}
.refresh-btn:hover { border-color: var(--accent); color: var(--accent-text); }

/* ─── Environment card ─── */
.env-card {
  display: grid; grid-template-columns: 1fr 1px 1fr;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  border-radius: var(--r3);
  overflow: hidden;
  margin-bottom: 26px;
}
.env-panel { padding: 20px 26px 22px; }
.env-panel.outside { opacity: .68; }
.env-label {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em;
  color: var(--text-3); margin-bottom: 16px;
  display: flex; align-items: center; gap: 6px;
}
.env-dot { width: 7px; height: 7px; border-radius: 50%; }
.env-divider { background: var(--border-soft); }
.env-metrics { display: flex; gap: 28px; }
.home-source { margin: 0 0 18px; padding: 0 0 18px; border-bottom: 1px solid var(--border-soft); }
.home-source-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.home-source h2 { font-size: 15px; font-weight: 500; line-height: 1.5; margin: 0; }
.home-source h2 strong { font-weight: 650; }
.home-source .rules-muted { margin: 7px 0 0; font-size: 13px; }
.home-source-badge { color: var(--warn); background: var(--surface); border: 1px solid currentColor; border-radius: 4px; padding: 3px 7px; font-size: 12px; font-weight: 600; }
.home-source-notice { color: var(--text-2); border-left: 2px solid var(--warn); padding-left: 10px; margin: 12px 0; font-size: 14px; line-height: 1.5; }
.home-source-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.home-source-controls label { width: 100%; font-size: 13px; font-weight: 600; }
.home-source-controls select { min-height: 44px; min-width: 200px; max-width: 100%; padding: 8px 34px 8px 10px; font: inherit; font-size: 14px; color: var(--text-1); background: var(--surface); border: 1px solid var(--border); border-radius: 4px; }
.home-source-controls button { min-height: 44px; }
.home-source-controls :focus-visible, .home-task-link:focus-visible, .home-tasks button:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
.home-tasks { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border-soft); }
.device-reviews, .device-results { margin: 24px 0; padding-top: 18px; border-top: 1px solid var(--border-soft); }
.device-reviews .section-title, .device-results .section-title { margin: 0; }
.device-review-item, .device-result-item { padding: 16px 0; border-bottom: 1px solid var(--border-soft); min-width: 0; }
.device-review-item h3, .device-result-item h3 { margin: 0 0 10px; font-size: 16px; }
.device-review-item p, .device-result-item p { margin: 8px 0; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.device-review-item .rules-actions { margin-top: 14px; }
.device-result-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.device-result-heading h3 { margin: 0; }
.device-command-id { color: var(--text-2); font-size: 12px !important; overflow-wrap: anywhere; }
.device-review-target { margin: 10px 0; font-size: 13px; color: var(--text-2); }
.device-review-target summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.device-review-target p { overflow-wrap: anywhere; font-size: 13px; }
.device-review-item button, .device-result-item button { min-height: 44px; }
.device-review-item button:focus-visible, .device-result-item button:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
.device-result-item [data-device-command-check][aria-disabled="true"] { cursor: wait; color: var(--text-3); background: var(--surface-raised); border-color: var(--border); }
@media (max-width: 600px) {
  .device-review-item .rules-actions { display: flex; flex-direction: column; align-items: stretch; }
  .device-result-item button { width: 100%; }
}
.home-tasks .section-title { margin: 0; }
.home-task-list { list-style: none; padding: 0; margin: 14px 0 0; }
.home-task-list li { border-top: 1px solid var(--border-soft); padding: 12px 0; }
.home-task-link { border: 0; padding: 4px 0; display: flex; gap: 12px; align-items: center; justify-content: space-between; width: 100%; background: transparent; color: var(--text-1); text-align: left; cursor: pointer; font: inherit; min-height: 44px; }
.home-task-link > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.home-task-kind, .home-task-list time { font-size: 13px; color: var(--text-2); }
.home-task-kind { white-space: nowrap; }
.home-task-subtitle { font-size: 14px; margin: 20px 0 0; }
.home-task-empty { margin-top: 14px; font-size: 14px; color: var(--text-2); }
.home-task-detail { margin-top: 16px; border: 1px solid var(--border); border-radius: 6px; padding: 16px; overflow-wrap: anywhere; }
.home-task-detail h3 { margin: 0; font-size: 16px; }
.home-task-detail p { margin-top: 10px; font-size: 14px; }
.env-metrics .metric-note, .rules-sensor-metric .metric-note { overflow-wrap: anywhere; line-height: 1.5; font-size: 12px; }
@media (max-width: 600px) {
  .home-source-controls select, .home-source-controls button { width: 100%; }
  .home-task-link { align-items: flex-start; flex-direction: column; gap: 4px; }
  .env-metrics .metric-note { max-width: 100px; }
}
.metric-label { font-size: 12px; color: var(--text-3); margin-bottom: 5px; }
.metric-value {
  font-size: 30px; font-weight: 600; font-variant-numeric: tabular-nums;
  line-height: 1; color: var(--text-1);
}
.metric-value.warn { color: var(--warn); }
.metric-unit { font-size: 15px; font-weight: 400; color: var(--text-3); }
.metric-note { font-size: 12px; margin-top: 5px; color: var(--text-3); }
.metric-note.warn { color: var(--warn); font-weight: 500; }
.metric-note.ok { color: var(--ok); }

/* ─── Section head ─── */
.section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.section-title {
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em;
  color: var(--text-3);
}
.section-link {
  font-size: 13px; font-weight: 500;
  color: var(--accent-text); cursor: pointer;
}
.section-link:hover { text-decoration: underline; }

/* ─── Device cards — 3-col VIVOSUN style ─── */
.device-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 26px;
}
.device-card {
  background: var(--surface);
  box-shadow: var(--shadow-card);
  border-radius: var(--r2);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  transition: box-shadow .12s;
}
.device-card:hover {
  box-shadow: var(--shadow-card);
}
.device-stripe {
  width: 4px;
  flex-shrink: 0;
  align-self: stretch;
}
.device-stripe.ok   { background: var(--ok); }
.device-stripe.rule { background: var(--accent); }
.device-stripe.warn { background: var(--warn); }
.device-stripe.off  { background: var(--border); }
.device-body {
  flex: 1;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}
.device-info { min-width: 0; }
.device-name {
  font-size: 14px; font-weight: 500; color: var(--text-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.device-sub { font-size: 12px; color: var(--text-3); margin-top: 3px; }
.device-controls {
  display: flex; align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.device-badge {
  padding: 3px 9px; border-radius: 99px;
  font-size: 12px; font-weight: 600;
}
.device-badge.rule { background: var(--accent-soft); color: var(--accent-text); }
.device-badge.warn { background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn-border); }
.device-badge.ok   { background: var(--ok-soft); color: var(--ok); }

.stepper { display: flex; align-items: center; gap: 5px; }
.stepper-btn {
  width: 32px; height: 32px;
  border-radius: var(--r1); border: 1.5px solid var(--border);
  background: var(--canvas); color: var(--text-1);
  font-size: 18px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .1s, background .1s, color .1s;
}
.stepper-btn:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); }
.stepper-btn:active { background: var(--accent); color: var(--surface); border-color: var(--accent); }
.stepper-val {
  font-size: 15px; font-weight: 600;
  min-width: 34px; text-align: center;
  font-variant-numeric: tabular-nums; color: var(--text-1);
}

.range-wrap { display: flex; align-items: center; gap: 8px; }
.range-wrap input[type=range] { width: 90px; accent-color: var(--accent); cursor: pointer; }
.range-val { font-size: 14px; font-weight: 600; color: var(--text-1); min-width: 40px; font-variant-numeric: tabular-nums; }
.status-off { font-size: 14px; color: var(--text-3); }


@media (max-width: 767px) {
  .app {
    --sidebar-width: 0px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 56px 1fr;
  }
  .sidebar {
    position: sticky; top: 0;
    height: 56px; overflow: visible; z-index: 10;
    border-right: 0; border-bottom: 1px solid var(--border-soft);
  }
  .sidebar-toggle {
    display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center; justify-items: center;
    width: 100%; min-height: 56px; padding: 0 8px;
    border: 0; background: var(--surface); color: var(--text-1);
    font-size: 14px; font-weight: 500; cursor: pointer;
  }
  .sidebar-toggle svg { width: 20px; height: 20px; }
  .sidebar-current-tent { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .sidebar.is-open .sidebar-chevron { transform: rotate(180deg); }
  .sidebar-content { display: none; }
  .sidebar.is-open .sidebar-content {
    display: flex; flex-direction: column;
    position: absolute; top: 100%; left: 0; right: 0;
    max-height: calc(100dvh - 56px); overflow-y: auto;
    background: var(--surface); border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-card);
  }
  .sidebar :is(button, a):focus-visible {
    outline: 2px solid var(--accent); outline-offset: -3px;
  }
  .main { --main-gutter: 8px; }
  /* Narrow: the top bar occupies the first 56px, so the page header sticks below it. */
  .main-header { top: 56px; z-index: 3; }
  .env-card { grid-template-columns: minmax(0, 1fr); }
  .env-panel { padding: 18px 16px; }
  .env-divider { height: 1px; }
  .env-metrics { justify-content: space-between; gap: 12px; }
  .device-list, .devices-grid, .ec-grid { grid-template-columns: minmax(0, 1fr); }
  .device-full-controls { flex-wrap: wrap; }
  .journal-entry { flex-direction: column; gap: 8px; padding: 16px; }
  .journal-date { min-width: 0; padding-top: 0; }
  .journal-content { width: 100%; }
  .vc-bubble { max-width: 94%; }
}

#auth-stage {
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  padding: 80px 16px; background: var(--surface-raised);
}
#auth-stage[hidden], #auth-stage [hidden] { display: none !important; }
.auth-page { width: 400px; max-width: 100%; min-width: 0; font-size: 16px; }
.auth-card {
  padding: 32px; background: var(--surface);
  border-radius: var(--r3); box-shadow: var(--shadow-card);
}
.auth-header { margin-bottom: 28px; text-align: center; }
.auth-brand { display: flex; justify-content: center; }
.auth-brand .brand-wordmark { width: 150px; height: auto; display: block; }
.auth-heading { margin-top: 24px; font-size: 24px; line-height: 1.25; font-weight: 600; letter-spacing: -.02em; }
.auth-form { display: flex; flex-direction: column; gap: 18px; }
.auth-field { min-width: 0; }
.auth-field label { display: block; margin-bottom: 6px; font-size: 15px; font-weight: 500; color: var(--text-2); }
.auth-input {
  display: block; width: 100%; min-width: 0; min-height: 48px;
  padding: 11px 12px; border: 1px solid var(--border); border-radius: var(--r1);
  background: var(--canvas); color: var(--text-1); font-size: 16px; line-height: 24px;
}
.auth-input:hover { border-color: var(--text-3); }
.auth-input[aria-invalid="true"] { border-color: var(--err); }
/* The browser's own password reveal control would sit beside ours. */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear { display: none; }
.auth-password-wrap { position: relative; }
.auth-password-wrap .auth-input { padding-right: 50px; }
.auth-eye {
  position: absolute; top: 2px; right: 2px; width: 44px; height: 44px;
  display: grid; place-items: center; border: 0; border-radius: var(--r1);
  background: none; color: var(--text-2); cursor: pointer;
}
.auth-eye svg { width: 20px; height: 20px; }
.auth-eye:hover { color: var(--accent-text); background: var(--accent-soft); }
.auth-help, .auth-error { margin-top: 8px; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.auth-help { color: var(--text-2); }
.auth-error { color: var(--err); }
.auth-submit {
  width: 100%; min-height: 48px; margin-top: 6px; padding: 11px 16px;
  border: 0; border-radius: var(--r1); background: var(--accent); color: var(--surface);
  font-size: 16px; font-weight: 500; line-height: 24px; cursor: pointer;
}
.auth-submit:hover { background: var(--accent-hover); }
.auth-submit:disabled { background: var(--accent-soft); color: var(--accent-text); cursor: wait; }
.auth-input:disabled { background: var(--surface-raised); color: var(--text-2); cursor: wait; }
.auth-eye:disabled { color: var(--text-3); background: none; cursor: wait; }
.auth-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 8px 2px;
  font-size: 15px; color: var(--accent-text); text-decoration: none;
  text-underline-offset: 3px;
}
.auth-link:hover { text-decoration: underline; }
.auth-forgot { margin-top: 8px; text-align: center; }
.auth-footer { margin-top: 16px; font-size: 15px; color: var(--text-2); text-align: center; }
.auth-footer .auth-link { margin-left: 3px; }
#auth-stage :is(input, button, a, h1):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
#auth-stage :is(button, a) { touch-action: manipulation; }
.auth-sent-icon {
  width: 48px; height: 48px; margin: 28px auto 0; display: grid; place-items: center;
  border-radius: var(--r2); background: var(--ok-soft); color: var(--ok);
}
.auth-sent-icon svg { width: 24px; height: 24px; }
.auth-confirmation { color: var(--text-2); font-size: 16px; line-height: 1.6; text-align: center; overflow-wrap: anywhere; }
.auth-confirmation strong { font-weight: 500; color: var(--text-1); }
#page-reset[data-state="sent"] .auth-header { margin-bottom: 16px; }

@media (max-width: 480px) { .auth-card { padding: 28px 24px; } }
/* P063 acceptance: narrow-screen copy >=15px; interactive areas >=44px. */
[hidden] { display: none !important; }
button, a, input { touch-action: manipulation; }
button, a, input:not([type=hidden]) { min-height: 44px; }
button, a { min-width: 44px; }
a { text-decoration: none; }
button { cursor: pointer; }
button:disabled, input:disabled { cursor: not-allowed; }
:is(button, a, input, h1):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 767px) {
  .sidebar-section, .nav-link, .tent-name, .tent-meta, .sidebar-add, .main-tent-meta,
  .env-label, .metric-label, .metric-note, .section-title, .section-link,
  .device-name, .device-sub, .device-badge, .range-val, .status-off, .sidebar-toggle { font-size: 15px; }
}
.nav-link, .tent-item { min-height: 48px; }
.tent-item { width: 100%; border: 0; background: none; text-align: left; }
.tent-item > div { min-width: 0; }
.tent-name, .tent-meta { overflow-wrap: anywhere; }
.tent-status { background: var(--border); }
.sidebar-add { background: var(--surface); }
.sidebar-brand .brand-wordmark { max-width: 100%; }
.main-body { overflow: visible; }
.env-card { grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); }
.env-panel { min-width: 0; }
.env-metrics { gap: 24px; }
.env-metrics > div { min-width: 0; }
.env-panel.outside { opacity: .68; }
.device-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.device-controls { flex-wrap: wrap; }
.device-name { white-space: normal; overflow-wrap: anywhere; }
.stepper-btn { width: 44px; height: 44px; }
.range-wrap { width: 100%; }
.range-wrap input[type=range] { min-width: 44px; width: 90px; max-width: 100%; }
.section-link { display: inline-flex; align-items: center; min-height: 44px; }
.empty-state { padding: 28px 16px; text-align: center; border: 1px solid var(--border); border-radius: var(--r3); }
.empty-state h1, .empty-state h2 { font-size: 20px; font-weight: 600; }
.empty-state p, .env-empty, .load-notice { font-size: 15px; color: var(--text-2); line-height: 1.6; }
.empty-state p { margin-top: 8px; }
.env-empty { margin-top: 16px; }
.load-notice { margin-bottom: 20px; overflow-wrap: anywhere; }
.load-notice.error { color: var(--err); }
.metric-value.unavailable { font-size: 15px; line-height: 30px; font-weight: 400; color: var(--text-2); }
.device-message { margin-top: 8px; font-size: 15px; color: var(--text-2); overflow-wrap: anywhere; }
@media (min-width: 768px) and (max-width: 1150px) {
  .main { --main-gutter: 24px; }
  .env-card { grid-template-columns: minmax(0, 1fr); }
  .env-divider { height: 1px; }
  .env-metrics { justify-content: space-between; gap: 12px; }
  .device-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .env-card, .device-list { grid-template-columns: minmax(0, 1fr); }
  .main-body { padding-top: 28px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* P065: scoped additions; existing screens keep their exact styles. */
#page-reset-confirm[data-state="expired"] .auth-sent-icon { background: var(--err-soft); color: var(--err); }
#page-reset-confirm[data-state="expired"] .auth-confirmation { color: var(--err); }
#page-reset-confirm:is([data-state="expired"], [data-state="success"]) .auth-header { margin-bottom: 16px; }

/* P069: approved P066 climate-probe detail and outdoor reference (3384e75). */
#page-devices { min-width: 0; }
#page-devices [hidden] { display: none !important; }
#page-devices .main-body { overflow: visible; }
#page-devices :is(button, input, select, a) { min-height: 44px; min-width: 44px; font: inherit; touch-action: manipulation; }
#page-devices :is(button, input, select, a):focus-visible,
.rules-topbar-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
#page-devices button { cursor: pointer; }
#page-devices button:disabled { cursor: not-allowed; color: var(--text-3); background: var(--surface-raised); border-color: var(--border); }
#page-devices h2 { font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
#page-devices h3 { font-size: 15px; font-weight: 600; }
#page-devices .devices-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
#page-devices .device-full-card {
  position: relative; display: block; width: 100%; min-width: 0; padding: 22px;
  text-align: left; color: var(--text-1); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r3);
  transition: border-color .15s, background .15s;
}
#page-devices .device-full-card:hover { border-color: var(--accent); background: var(--surface-raised); }
.rules-grid-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 20px; }
.rules-muted { color: var(--text-2); font-size: 13px; line-height: 1.6; }
.rules-card-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 18px; }
.rules-device-icon { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border: 1px solid var(--border); background: var(--surface-raised); border-radius: var(--r2); color: var(--text-2); }
.rules-device-icon svg { width: 24px; height: 24px; }
.rules-card-head > span:nth-child(2) { flex: 1; min-width: 0; }
.rules-card-name { display: block; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.rules-card-type { display: block; font-size: 13px; color: var(--text-2); margin-top: 3px; }
.rules-card-arrow { color: var(--text-2); font-size: 20px; }
.rules-card-status { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 13px; }
.rules-card-value { font-size: 24px; font-weight: 600; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.rules-card-value small { font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--text-2); }
.rules-online { font-size: 13px; color: var(--ok); }
.rules-online::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: currentColor; vertical-align: middle; }
.rules-online.offline { color: var(--text-2); }
.rules-topbar-detail { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 10px; align-items: center; }
.rules-topbar-detail .main-title { grid-column: 2; grid-row: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rules-topbar-detail .main-tent-meta { grid-column: 2; grid-row: 2; }
.rules-topbar-back { display: grid; place-items: center; grid-column: 1; grid-row: 1 / 3; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: var(--r2); color: var(--text-2); background: var(--surface); cursor: pointer; }
.rules-topbar-back[hidden] { display: none; }
.rules-topbar-back svg { width: 20px; height: 20px; }
.rules-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px; align-items: start; }
.rules-layout > * { min-width: 0; }
.rules-status-panel { border: 1px solid var(--border); border-radius: var(--r3); padding: 22px; }
.rules-status-title { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.rules-now-value { font-size: 38px; line-height: 1.2; letter-spacing: -.04em; font-weight: 500; font-variant-numeric: tabular-nums; margin: 6px 0; }
.rules-now-value small { font-size: 16px; letter-spacing: 0; color: var(--text-2); }
.rules-status-divider { border: 0; border-top: 1px solid var(--border-soft); margin: 22px 0; }
#page-devices summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.rules-workspace { min-width: 0; }
.rules-panel { padding: 26px; border: 1px solid var(--border); border-radius: var(--r3); background: var(--surface); }
.rules-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 22px; }
.rules-panel-heading .rules-muted { margin-top: 4px; }
.rules-chip { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; padding: 4px 10px; font-size: 13px; font-weight: 500; border-radius: 99px; background: var(--ok-soft); color: var(--ok); }
.rules-chip.editing { background: var(--accent-soft); color: var(--accent-text); }
.rules-chip.offline { background: var(--surface-raised); color: var(--text-2); }
.rules-current-meta { font-size: 13px; color: var(--text-2); margin-top: 6px; line-height: 1.65; }
.rules-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 24px; }
.rules-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: var(--r2); border: 1px solid var(--border); padding: 10px 18px; background: var(--surface); color: var(--text-1); font-size: 14px; font-weight: 500; text-decoration: none; line-height: 1.5; }
.rules-button.primary { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.rules-button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.rules-button.secondary:hover { background: var(--surface-raised); }

.rules-proposal-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 10px; }
.rules-sensor-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.rules-sensor-metric { padding: 18px; border-radius: var(--r2); background: var(--surface-raised); }
.rules-sensor-metric strong { display: block; font-size: 30px; letter-spacing: -.03em; font-weight: 500; font-variant-numeric: tabular-nums; margin-top: 8px; }
.rules-sensor-metric small { font-size: 16px; color: var(--text-2); }
#page-devices .rules-unavailable { font-size: 15px; letter-spacing: 0; overflow-wrap: anywhere; }
#page-devices .rules-error { color: var(--err); }
#page-devices p { overflow-wrap: anywhere; }
@media (max-width: 1100px) {
  .rules-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .rules-status-panel { padding: 20px; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; }
  .rules-status-panel .rules-status-title { margin-bottom: 0; grid-column: 1; grid-row: 1 / 4; }
  .rules-status-panel > .rules-muted { grid-column: 2; text-align: right; }
  .rules-status-panel .rules-now-value { grid-column: 2; grid-row: 2; text-align: right; margin: 0; font-size: 28px; }
  .rules-status-panel > p.rules-muted { grid-column: 1 / -1; grid-row: 4; text-align: left; margin-top: 8px; }
  .rules-status-panel > .rules-current-meta { grid-column: 1 / -1; }
  #page-devices .devices-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  #page-devices .main-body { padding: 22px 8px 32px; }
  #page-devices .device-full-card { padding: 18px; }
  .rules-panel { padding: 20px; }
  .rules-panel-heading { flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
  .rules-sensor-metrics { grid-template-columns: minmax(0, 1fr); }
  .rules-sensor-metric { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; }
  .rules-sensor-metric strong { margin: 0; font-size: 26px; }
  .rules-sensor-metric .rules-current-meta { width: 100%; }
  .rules-actions .rules-button { flex: 1 1 auto; }
  #page-devices :is(.rules-muted, .rules-current-meta, .rules-chip, .rules-button, .rules-card-type, .rules-online, .rules-card-value small) { font-size: 15px; }
}

/* P064-A: P051 Journal and Readings layout. */
/* ─── Readings page · isolated from the shared shell ─── */
#page-ec .readings-body { max-width: calc(1000px + 2 * var(--main-gutter)); overflow: visible; }
#page-ec { min-width: 0; font-size: 14px; }
#page-ec button { cursor: pointer; }
#page-ec :is(button, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.readings-tabs { display: flex; gap: 4px; max-width: 100%; overflow-x: auto; padding: 4px; border: 1px solid var(--border); border-radius: var(--r2); width: max-content; scrollbar-width: thin; }
#page-ec .mode-badge { flex: 0 0 auto; border: 0; border-radius: var(--r1); background: var(--surface); min-height: 40px; padding: 8px 15px; font-size: 14px; }
#page-ec .mode-badge:hover { background: var(--surface-raised); }
#page-ec .mode-badge.active { background: var(--accent-soft); color: var(--accent-text); }
.readings-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: 20px 0; }
.readings-ranges { display: flex; gap: 4px; }
.readings-range { min-width: 46px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r1); background: var(--surface); color: var(--text-2); font-size: 13px; }
.readings-range:hover { border-color: var(--accent); }
.readings-range.active { border-color: var(--text-1); background: var(--text-1); color: var(--surface); font-weight: 600; }
.readings-period { color: var(--text-2); font-size: 13px; font-variant-numeric: tabular-nums; }
.readings-card { padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r3); }
.readings-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
.readings-title { font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.readings-source { color: var(--text-2); font-size: 13px; margin-top: 5px; }
.readings-current { text-align: right; flex-shrink: 0; }
.readings-value { font-size: 32px; line-height: 1.15; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.readings-unit { font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--text-2); }
.readings-target { color: var(--text-2); font-size: 13px; margin-top: 6px; }
.readings-legend { display: flex; flex-wrap: wrap; gap: 10px 20px; color: var(--text-2); font-size: 13px; margin-bottom: 14px; }
.readings-legend span { display: inline-flex; align-items: center; gap: 7px; }
.readings-key { display: inline-block; width: 20px; height: 0; border-top: 2px solid var(--accent); }
.readings-key.secondary { border-color: var(--text-2); border-top-style: dashed; }
.readings-key.manual { width: 9px; height: 9px; border: 2px solid var(--accent); border-radius: 50%; background: var(--surface); }
.readings-key.target { height: 10px; border: 1px solid var(--ok); border-radius: 2px; background: var(--ok-soft); }
.readings-key.warn { border-color: var(--warn); }
.readings-chart { position: relative; width: 100%; min-width: 0; }
.readings-chart svg { display: block; width: 100%; height: 302px; overflow: visible; touch-action: pan-y; border-radius: var(--r1); }
.readings-axis { fill: var(--text-2); font-size: 12px; font-variant-numeric: tabular-nums; }
.readings-tooltip { position: absolute; z-index: 2; top: 20px; width: max-content; max-width: calc(100% - 8px); padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--r2); background: var(--surface); box-shadow: var(--shadow-card); color: var(--text-1); pointer-events: none; font-size: 13px; font-variant-numeric: tabular-nums; }
.readings-tooltip time { display: block; color: var(--text-2); margin-bottom: 5px; }
.readings-tooltip-row { display: flex; justify-content: space-between; gap: 14px; }
.readings-tooltip-row + .readings-tooltip-row { margin-top: 4px; }
.readings-tooltip-row strong { font-weight: 600; }
.readings-stats { display: flex; flex-wrap: wrap; gap: 12px 32px; border-top: 1px solid var(--border-soft); padding-top: 18px; margin-top: 10px; font-size: 13px; color: var(--text-2); }
.readings-stats strong { margin-left: 6px; color: var(--text-1); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.readings-caption { margin-top: 12px; color: var(--text-2); font-size: 13px; }
.readings-chart-help { color: var(--text-2); font-size: 13px; margin-top: 12px; }
.readings-other-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin: 28px 0 12px; }
.readings-other-head h2 { font-size: 15px; font-weight: 600; }
.readings-other-head p { font-size: 13px; color: var(--text-2); }
.readings-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.readings-mini { min-width: 0; text-align: left; padding: 16px; border: 1px solid var(--border); border-radius: var(--r2); background: var(--surface); color: var(--text-1); }
.readings-mini:hover { border-color: var(--accent); background: var(--surface-raised); }
.readings-mini-name { display: block; font-size: 13px; color: var(--text-2); }
.readings-mini-value { display: block; margin-top: 4px; font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums; }
.readings-mini-unit { font-size: 13px; font-weight: 400; color: var(--text-2); }
.readings-mini svg { display: block; width: 100%; height: 40px; margin-top: 10px; }
.readings-mini-empty { display: flex; align-items: center; gap: 7px; height: 40px; margin-top: 10px; font-size: 13px; color: var(--text-2); }
.readings-mini-empty svg { width: 16px; height: 16px; margin: 0; }
.readings-empty { min-height: 345px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 28px 8px; }
.readings-empty-icon { width: 48px; height: 48px; padding: 12px; background: var(--surface-raised); border-radius: var(--r2); color: var(--text-2); margin-bottom: 18px; }
.readings-empty h3 { font-size: 18px; font-weight: 600; }
.readings-empty p { max-width: 340px; font-size: 14px; color: var(--text-2); margin: 8px 0 20px; }
.readings-pair { min-height: 44px; padding: 10px 18px; background: var(--accent); color: var(--surface); border: 0; border-radius: var(--r1); font-size: 14px; font-weight: 500; }
.readings-pair:hover { background: var(--accent-hover); }
.readings-pair-help { margin-top: 16px; max-width: 360px; color: var(--text-2); font-size: 13px; }
#page-ec [hidden] { display: none; }
@media (max-width: 1100px) {
  .readings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #page-ec .mode-badge { padding-inline: 13px; }
  .readings-card { padding: 20px; }
}
@media (max-width: 480px) {
  .readings-card { padding: 16px 12px; }
  .readings-card-head { gap: 8px; }
  .readings-title { font-size: 18px; }
  .readings-value { font-size: 28px; }
  .readings-unit { font-size: 13px; }
  .readings-stats { column-gap: 18px; }
  .readings-other-head { align-items: flex-start; flex-direction: column; gap: 3px; }
  .readings-mini { padding: 13px 12px; }
  .readings-mini-value { font-size: 20px; }
}

/* ─── Journal page ─── */
#page-journal .journal-list { display: flex; flex-direction: column; gap: 12px; }
#page-journal .journal-entry {
  background: var(--surface); box-shadow: var(--shadow-card);
  border-radius: var(--r3); padding: 18px 22px;
  display: flex; gap: 18px; align-items: flex-start;
}
#page-journal .journal-date { font-size: 11px; color: var(--text-3); white-space: nowrap; padding-top: 2px; min-width: 70px; }
#page-journal .journal-content { flex: 1; min-width: 0; }
#page-journal .journal-title { font-size: 14px; font-weight: 500; color: var(--text-1); margin-bottom: 4px; }
#page-journal .journal-body { font-size: 13px; color: var(--text-2); line-height: 1.6; }
#page-journal .journal-tags { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
#page-journal .journal-tag {
  padding: 2px 9px; border-radius: 99px;
  font-size: 11px; font-weight: 500;
  background: var(--surface-raised); color: var(--text-3);
}


/* Real data, inline entry form and responsive chart internals. */
#page-journal .section-link { border: 0; background: none; cursor: pointer; }
#page-journal .journal-body { white-space: pre-wrap; overflow-wrap: anywhere; }
#page-journal .journal-form { padding: 22px; margin-bottom: 20px; border: 1px solid var(--border); border-radius: var(--r3); background: var(--surface); }
#page-journal label { display: block; min-width: 0; color: var(--text-2); font-size: 13px; }
#page-journal .journal-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
#page-journal :is(select, input, textarea) { display: block; width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; margin-top: 6px; border: 1px solid var(--border); border-radius: var(--r1); background: var(--canvas); color: var(--text-1); font: inherit; }
#page-journal textarea { resize: vertical; font-size: 15px; line-height: 1.6; }
#page-journal .journal-actions { display: flex; gap: 10px; margin-top: 16px; }
#page-journal :is(.journal-actions button, .journal-retry) { min-height: 44px; min-width: 44px; padding: 10px 18px; border: 1px solid var(--border); border-radius: var(--r1); background: var(--surface); color: var(--text-2); font-size: 14px; cursor: pointer; }
#page-journal button[type=submit] { background: var(--accent); border-color: var(--accent); color: var(--surface); }
#page-journal button[type=submit]:hover { background: var(--accent-hover); }
#page-journal button:disabled { opacity: .6; cursor: not-allowed; }
#page-journal :is(button, input, select, textarea):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
#page-journal .journal-error, #page-ec .readings-error { color: var(--err); font-size: 15px; margin: 12px 0; overflow-wrap: anywhere; }
#page-journal .journal-list + .empty-state { margin-top: 12px; }
#page-ec .mode-badge { min-height: 44px; min-width: 44px; color: var(--text-2); }
#page-ec .readings-source { overflow-wrap: anywhere; }
#page-ec .readings-card-head > div:first-child { min-width: 0; }
#page-ec .readings-chart { height: 240px; padding-left: 46px; }
#page-ec .readings-chart svg { height: 240px; overflow: hidden; }
#page-ec .readings-y-axis { position: absolute; inset: 0 auto 0 0; width: 40px; display: flex; flex-direction: column; justify-content: space-between; text-align: right; color: var(--text-2); font-size: 12px; font-variant-numeric: tabular-nums; }
#page-ec .readings-x-axis { display: flex; justify-content: space-between; gap: 6px; margin: 10px 0 0 46px; color: var(--text-2); font-size: 12px; font-variant-numeric: tabular-nums; }
#page-ec .readings-x-axis span { max-width: 40%; }
#page-ec .readings-x-axis span:last-child { text-align: right; }
#page-ec .readings-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
#page-ec .readings-single { fill: var(--accent); }
#page-ec .readings-gridline { fill: none; stroke: var(--border-soft); stroke-width: 1; }
#page-ec .readings-cursor { fill: none; stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 4 4; }
#page-ec .line-1 { stroke: var(--text-2); border-color: var(--text-2); }
#page-ec .line-2 { stroke: var(--warn); border-color: var(--warn); }
#page-ec .line-3 { stroke: var(--ok); border-color: var(--ok); }
#page-ec .readings-unit-group + .readings-unit-group { margin-top: 28px; }
#page-ec .readings-mini { min-height: 44px; }
#page-ec .readings-tooltip { overflow-wrap: anywhere; }
@media (max-width: 767px) {
  #page-journal .journal-entry { flex-direction: column; gap: 8px; padding: 16px; }
  #page-journal .journal-date { min-width: 0; padding-top: 0; }
  #page-journal .journal-content { width: 100%; }
  #page-journal :is(.journal-date, .journal-body, .journal-tag, label, .journal-actions button, .journal-retry) { font-size: 15px; }
  #page-journal .journal-form { padding: 16px; }
  #page-journal .journal-fields { grid-template-columns: minmax(0, 1fr); }
  #page-ec { font-size: 15px; }
  #page-ec :is(.mode-badge, .readings-range, .readings-period, .readings-source, .readings-unit, .readings-target, .readings-legend, .readings-tooltip, .readings-stats, .readings-caption, .readings-chart-help, .readings-other-head p, .readings-mini-name, .readings-mini-unit, .readings-empty p, .readings-y-axis, .readings-x-axis) { font-size: 15px; }
  #page-ec .readings-x-axis span:nth-child(2) { display: none; }
}

/* P064-B: inventory and controllable-device detail only. */
.device-detail .rules-status-divider { border: 0; border-top: 1px solid var(--border-soft); margin: 22px 0; }
.device-detail .rules-manual-section summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; cursor: pointer; font-size: 15px; font-weight: 600; list-style: none; }
.device-detail .rules-manual-section summary::-webkit-details-marker { display: none; }
.device-detail .rules-manual-section summary::after { content: '+'; color: var(--text-2); font-size: 18px; font-weight: 400; }
.device-detail .rules-manual-section[open] summary::after { content: '−'; }
.device-detail summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.device-detail .rules-manual-control { margin-top: 14px; }
.device-detail .rules-manual-control label { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-2); }
.device-detail .rules-manual-control output { font-weight: 600; color: var(--text-1); font-variant-numeric: tabular-nums; }
.device-detail input[type=range] { display: block; width: 100%; accent-color: var(--accent); margin: 2px 0 6px; }
.device-detail .rules-manual-control button { width: 100%; margin: 8px 0; }
.device-detail .rules-workspace { min-width: 0; }
.device-detail .rules-panel { padding: 26px; border: 1px solid var(--border); border-radius: var(--r3); background: var(--surface); }
.device-detail .rules-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 22px; }
.device-detail .rules-panel-heading .rules-muted { margin-top: 4px; }
.device-detail .rules-chip { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; padding: 4px 10px; font-size: 13px; font-weight: 500; border-radius: 99px; background: var(--ok-soft); color: var(--ok); }
.device-detail .rules-chip.editing { background: var(--accent-soft); color: var(--accent-text); }
.device-detail .rules-chip.offline { background: var(--surface-raised); color: var(--text-2); }
.device-detail .rules-chip.sending { background: var(--accent-soft); color: var(--accent-text); }
.device-detail .rules-summary { font-size: 20px; line-height: 1.65; letter-spacing: -.015em; margin-bottom: 14px; }
.device-detail .rules-summary strong { font-weight: 600; }
.device-detail .rules-current-meta { font-size: 13px; color: var(--text-2); margin-top: 6px; line-height: 1.65; }
.device-detail .rules-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 24px; }
.device-detail .rules-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: var(--r2); border: 1px solid var(--border); padding: 10px 18px; background: var(--surface); color: var(--text-1); font-size: 14px; font-weight: 500; text-decoration: none; line-height: 1.5; }
.device-detail .rules-button.primary { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.device-detail .rules-button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.device-detail .rules-button.secondary:hover { background: var(--surface-raised); }
.device-detail .rules-proposal { border-top: 1px solid var(--border); padding-top: 24px; margin-top: 24px; }
.device-detail .rules-proposal-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 10px; }
.device-detail .rules-proposal .rules-summary { font-size: 18px; margin: 14px 0 0; }
.device-detail .rules-proposal .rules-actions { margin-top: 16px; }
.device-detail .rules-editor-mode { margin-bottom: 22px; }
.device-detail .rules-editor-mode label { display: block; font-size: 13px; color: var(--text-2); margin-bottom: 8px; }
.device-detail .rules-mode-select { width: 100%; padding: 10px 36px 10px 12px; border: 1px solid var(--border); border-radius: var(--r2); color: var(--text-1); background: var(--surface); font-size: 15px; }
.device-detail .rules-sentence { font-size: 19px; line-height: 2.8; letter-spacing: -.015em; overflow-wrap: anywhere; }
.device-detail .rules-sentence p + p { margin-top: 8px; }
.device-detail .rules-phrase { display: inline-block; max-width: 100%; white-space: normal; }
.device-detail .rules-inline { display: inline-block; vertical-align: baseline; max-width: 100%; min-height: 44px; padding: 8px 9px; margin: 3px 2px; border: 1px solid var(--border); border-bottom-color: var(--accent); border-radius: var(--r1); background: var(--surface-raised); color: var(--accent-text); font-size: 17px; font-weight: 500; letter-spacing: 0; line-height: 1.4; font-variant-numeric: tabular-nums; }
.device-detail input.rules-inline[type=number] { width: 74px; }
.device-detail input.rules-inline[type=time] { width: 142px; }
.device-detail input.rules-inline[type=datetime-local] { width: 242px; font-size: 15px; }
.device-detail select.rules-inline { padding-right: 6px; }
.device-detail .rules-options { margin-top: 24px; border-top: 1px solid var(--border-soft); padding-top: 14px; }
.device-detail .rules-options > details + details { border-top: 1px solid var(--border-soft); margin-top: 6px; padding-top: 6px; }
.device-detail .rules-options summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--accent-text); font-size: 14px; list-style: none; }
.device-detail .rules-options summary::-webkit-details-marker { display: none; }
.device-detail .rules-options summary::before { content: '+'; display: inline-block; width: 24px; font-size: 18px; }
.device-detail .rules-options details[open] > summary::before { content: '−'; }
.device-detail .rules-options .rules-sentence { font-size: 16px; line-height: 2.8; padding-top: 8px; }
.device-detail .rules-options .rules-muted { margin: 6px 0 12px; }
.device-detail .rules-editor-footer { padding-top: 20px; margin-top: 20px; border-top: 1px solid var(--border-soft); }
.device-detail .rules-editor-footer .rules-actions { margin-top: 12px; }
.device-detail .rules-error { padding: 10px 12px; margin-top: 16px; background: var(--err-soft); border-radius: var(--r1); font-size: 14px; color: var(--err); }
.device-detail .rules-review-intro { margin-bottom: 20px; font-size: 14px; color: var(--text-2); }
.device-detail .rules-comparison { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 18px; padding: 20px 0; border-top: 1px solid var(--border-soft); }
.device-detail .rules-comparison > span { font-size: 13px; color: var(--text-2); padding-top: 4px; }
.device-detail .rules-comparison.after > span { color: var(--accent-text); font-weight: 600; }
.device-detail .rules-comparison.after { margin-inline: -14px; padding-inline: 14px; border-radius: var(--r2); background: var(--accent-soft); border: 0; }
.device-detail .rules-comparison .rules-summary { font-size: 18px; margin-bottom: 6px; }
.device-detail .rules-review-approval { margin-top: 22px; font-size: 13px; color: var(--text-2); }
.devices-inventory .rules-card-value { font-size: 24px; font-weight: 600; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.devices-inventory .rules-card-rule { display: block; font-size: 13px; color: var(--text-2); border-top: 1px solid var(--border-soft); padding-top: 12px; overflow-wrap: anywhere; }
.rules-inventory-badge { margin-top: 12px; }
.devices-inventory .rules-demo-note { margin-top: 20px; color: var(--text-2); font-size: 13px; }
.device-detail .rules-fieldset { border: 0; padding: 0; min-width: 0; }
.device-detail .rules-error { color: var(--err); font-size: 13px; line-height: 1.6; margin-top: 14px; overflow-wrap: anywhere; }
.device-detail input, .device-detail select { max-width: 100%; }
.device-detail .rules-editor-mode select { width: auto; }
.device-detail [data-device-manual] { display: block; width: 100%; accent-color: var(--accent); margin: 2px 0 6px; }
.device-detail .rules-summary { overflow-wrap: anywhere; }
@media (max-width: 1100px) {
  .device-detail .rules-status-divider, .device-detail .rules-manual-section { grid-column: 1 / -1; }
  .device-detail .rules-manual-control { max-width: 420px; }
  .device-detail .rules-status-panel > [role=status] { grid-column: 1 / -1; }
  .devices-inventory .devices-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .devices-inventory :is(.rules-muted, .rules-card-type, .rules-online, .rules-card-rule, .rules-chip, .rules-demo-note),
  .device-detail :is(.rules-muted, .rules-online, .rules-chip, .rules-current-meta, .rules-review-intro, .rules-review-approval, .rules-comparison > span, .rules-error, .rules-manual-control label, .rules-manual-control output, .rules-editor-mode label, .rules-inline, .rules-button) { font-size: 15px; }
  .device-detail .rules-panel { padding: 20px; }
  .device-detail .rules-panel-heading { flex-wrap: wrap; }
  .device-detail .rules-summary { font-size: 18px; }
  .device-detail .rules-sentence { font-size: 18px; line-height: 2.9; }
  .device-detail .rules-comparison { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .device-detail .rules-editor-footer { flex-wrap: wrap; }
  .device-detail .rules-actions .rules-button { flex: 1 1 auto; }
}
.device-detail .rules-suggestion-label { font-size: 13px; font-weight: 500; color: var(--accent-text); }
@media (max-width: 767px) {
  .device-detail .rules-options summary, .device-detail .rules-suggestion-label { font-size: 15px; }
}

/* P064-C: the accepted P071 two-column page and P072 A disclosure. */
#page-vico {
  min-width: 0; height: calc(100dvh - 64px); font-size: 16px;
  container: vico / inline-size; overflow-wrap: anywhere;
}
/* Only Vico uses this gutter; the other accepted pages keep their original shell. */
@media (min-width: 768px) {
  .main:has(#page-vico.active) { --main-gutter: 24px; }
}
#page-vico .vc-layout { display: flex; align-items: flex-start; gap: 24px; height: 100%; padding: 0 var(--main-gutter); }
#page-vico .vc-left { flex: 1 1 480px; min-width: 480px; display: flex; flex-direction: column; height: 100%; overflow: hidden; }
#page-vico .vc-right { flex: 0 1 300px; width: 300px; min-width: 280px; padding: 28px 0; }
#page-vico .vc-panel { padding: 24px 20px; border: 1px solid var(--border); border-radius: var(--r3); background: var(--surface); }
#page-vico .vc-panel + .vc-panel { margin-top: 20px; }
#page-vico .vc-panel h2 { font-size: 15px; font-weight: 600; margin-bottom: 20px; }
#page-vico .vc-panel .env-metrics { gap: 12px; justify-content: space-between; }
#page-vico .vc-panel .metric-value { font-size: 24px; white-space: nowrap; }
#page-vico .vc-panel .metric-label { margin: 8px 0 0; }
#page-vico .vc-proposal { padding-top: 16px; border-top: 1px solid var(--border); }
#page-vico .vc-proposal-heading { display: flex; align-items: flex-start; gap: 8px; }
#page-vico .vc-proposal-heading strong { font-size: 15px; font-weight: 500; }
#page-vico .vc-proposal-heading svg { width: 18px; height: 18px; margin-top: 2px; color: var(--warn); }
#page-vico .vc-proposal-time { margin-top: 6px; color: var(--text-2); font-size: 13px; }
#page-vico .vc-compact-status { display: none; }
#page-vico .vc-pending-count { color: var(--warn); font-weight: 500; }
#page-vico .vc-proposal-error { margin-top: 12px; color: var(--err); font-size: 15px; }
#page-vico button:disabled { opacity: .6; cursor: wait; }
@media (max-width: 1099px) {
  #page-vico .vc-layout { display: block; }
  #page-vico .vc-left { min-width: 0; }
  #page-vico .vc-right { display: none; }
  #page-vico .vc-compact-status { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; min-height: 52px; padding: 10px 0; border-bottom: 1px solid var(--border-soft); font-size: 15px; }
  #page-vico .vc-compact-status .vc-pending-count { margin-left: auto; white-space: nowrap; }
}
@media (max-width: 767px) {
  #page-vico { height: calc(100dvh - 120px); }
  #page-vico .vc-compact-status { flex-wrap: wrap; gap: 4px 12px; padding-block: 12px; }
  #page-vico .vc-applied { font-size: 15px; }
  .main:has(#page-vico.active) .main-tent-meta { font-size: 15px; }
  .sidebar:has(~ .main #page-vico.active) :is(.sidebar-toggle, .sidebar-section, .nav-link, .nav-badge, .tent-name, .tent-meta, .sidebar-add) { font-size: 15px; }
  .sidebar:has(~ .main #page-vico.active) :is(.nav-link, .sidebar-add) { min-height: 44px; }
}
#page-vico [hidden] { display: none !important; }

/* Actual Vico information review. Evidence remains separate from writes. */
#page-vico .vc-evidence { padding: 12px 0 28px; min-width: 0; font-size: 15px; line-height: 1.6; color: var(--text-2); overflow-wrap: anywhere; }
#page-vico .vc-evidence-intro { padding: 20px 0; border-bottom: 1px solid var(--border-soft); }
#page-vico .vc-evidence > header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
#page-vico .vc-evidence h2 { font-size: 20px; font-weight: 600; color: var(--text-1); }
#page-vico .vc-evidence h3 { margin-top: 24px; margin-bottom: 10px; font-size: 15px; font-weight: 600; color: var(--text-1); }
#page-vico .vc-evidence h4 { font-size: 15px; font-weight: 600; color: var(--text-1); }
#page-vico .vc-evidence p + p { margin-top: 10px; }
#page-vico .vc-evidence :is(ol, ul) { padding-left: 24px; }
#page-vico .vc-evidence li + li { margin-top: 8px; }
#page-vico .vc-evidence .vc-evidence-reason { margin-top: 24px; color: var(--text-1); }
#page-vico .vc-evidence .vc-evidence-note { margin-top: 14px; font-size: 13px; color: var(--text-3); }
#page-vico .vc-evidence-source, #page-vico .vc-evidence-candidate { padding: 18px 0; border-bottom: 1px solid var(--border-soft); }
#page-vico .vc-evidence-source dl { display: grid; gap: 6px; margin: 12px 0; font-size: 13px; }
#page-vico .vc-evidence-source dl > div { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 10px; }
#page-vico .vc-evidence-detail { padding: 14px; background: var(--surface-raised); border-left: 2px solid var(--accent); }
#page-vico .vc-evidence-photo { display: block; max-width: 100%; width: min(100%, 640px); height: auto; border-radius: var(--r1); margin: 12px 0; }
#page-vico .vc-evidence-warning { color: var(--warn); }
#page-vico .vc-evidence button { min-height: 44px; margin-top: 12px; scroll-margin-block: 8px; }
#page-vico .vc-evidence button[aria-disabled="true"] { cursor: wait; color: var(--text-3); }
#page-vico .vc-evidence :is(button, select):focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
#page-vico .vc-evidence select { display: block; max-width: 100%; width: 100%; min-width: 0; min-height: 44px; padding: 10px; border: 1px solid var(--border); border-radius: var(--r1); background: var(--surface); font: inherit; color: var(--text-1); }
#page-vico .vc-evidence label { display: block; margin: 16px 0 6px; }
@media (max-width: 767px) {
  #page-vico .vc-evidence > header { align-items: flex-start; }
  #page-vico .vc-evidence h2 { font-size: 18px; }
  #page-vico .vc-evidence button { max-width: 100%; white-space: normal; }
  #page-vico .vc-evidence-source dl > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
#page-vico button, #page-vico input, #page-vico summary { font-size: 15px; }
#page-vico button, #page-vico summary {
  min-width: 44px; min-height: 44px; cursor: pointer; touch-action: manipulation;
}
#page-vico :is(button, input, summary):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 4px;
}
#page-vico svg { width: 22px; height: 22px; flex-shrink: 0; }
#page-vico .vc-stream {
  flex: 1; min-height: 0; width: 100%; max-width: none;
  padding: 28px 2px 20px; margin: 0;
  overflow-y: auto; overflow-wrap: anywhere; scrollbar-width: thin;
}
#page-vico .vc-date { font-size: 15px; color: var(--text-2); text-align: center; margin: 0 0 24px; }
#page-vico .vc-message { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 16px; }
#page-vico .vc-bubble {
  max-width: 680px; padding: 15px 18px; font-size: 16px; line-height: 1.6;
  background: color-mix(in srgb, var(--border) 58%, var(--canvas));
  border-radius: 22px 22px 22px 7px; color: var(--text-1);
}
#page-vico .vc-chip {
  display: inline-flex; align-items: center; padding: 4px 10px;
  border: 1px solid var(--warn-border); border-radius: 8px;
  background: var(--warn-soft); color: var(--warn); font-size: 15px; font-weight: 500;
}
#page-vico .vc-card {
  width: 100%; padding: 20px; border-radius: 20px;
  background: var(--surface); box-shadow: var(--shadow-card);
}
#page-vico .vc-card-heading { display: flex; gap: 12px; align-items: flex-start; }
#page-vico .vc-card-heading > div { flex: 1; min-width: 0; }
#page-vico .vc-card-heading > svg { margin-top: 2px; color: var(--text-2); }
#page-vico .vc-card-title { font-size: 17px; font-weight: 600; line-height: 1.45; }
#page-vico .vc-card-body { font-size: 15px; color: var(--text-2); line-height: 1.6; margin-top: 12px; }
#page-vico .vc-card-meta { color: var(--text-2); font-size: 15px; margin-top: 3px; line-height: 1.5; }
#page-vico .vc-details { margin: 2px 0 10px; }
#page-vico .vc-details summary {
  display: flex; align-items: center; width: fit-content; color: var(--accent-text);
  text-decoration: underline; text-underline-offset: 3px; list-style: none;
}
#page-vico .vc-details summary::-webkit-details-marker { display: none; }
#page-vico .vc-details[open] summary { text-decoration: none; }
#page-vico .vc-details p {
  font-size: 15px; color: var(--text-2); line-height: 1.6; padding: 0 0 12px;
}
#page-vico .vc-primary, .vc-secondary, .vc-rule-button {
  display: flex; width: 100%; align-items: center; justify-content: center;
  min-height: 46px; border-radius: 99px; padding: 10px 16px;
  font-size: 15px; font-weight: 500; line-height: 1.5; text-align: center;
}
#page-vico .vc-actions { display: flex; gap: 8px; margin-top: 16px; }
#page-vico .vc-actions > button { flex: 1; min-width: 0; width: auto; }
#page-vico .vc-primary { border: 1px solid var(--accent); color: var(--surface); background: var(--accent); }
#page-vico .vc-secondary { border: 1px solid var(--border); color: var(--text-1); background: var(--surface); }
#page-vico .vc-applied { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; font-size: 13px; background: var(--ok-soft); color: var(--ok); border-radius: 99px; margin-top: 10px; }
#page-vico .vc-applied svg { width: 14px; height: 14px; }
#page-vico .vc-applied.vc-unapplied { background: var(--surface-raised); color: var(--text-2); }
#page-vico .vc-success-icon { color: var(--ok); }
#page-vico .vc-rule-button {
  margin-top: 18px; border: 1px solid var(--border);
  background: var(--surface-raised); color: var(--text-1);
}
#page-vico .vc-user { align-items: flex-end; }
#page-vico .vc-user .vc-bubble { max-width: 68%; background: var(--accent-soft); border-radius: 22px 22px 7px 22px; }
#page-vico .vc-readings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 18px; }
#page-vico .vc-reading { padding: 0 8px; text-align: center; }
#page-vico .vc-reading + .vc-reading { border-left: 1px solid var(--border); }
#page-vico .vc-reading strong { display: block; font-size: 28px; font-weight: 500; line-height: 1.2; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
#page-vico .vc-reading span { display: block; margin-top: 4px; color: var(--text-2); font-size: 15px; }
#page-vico .vc-history-label { margin: 28px 0 16px; color: var(--text-2); font-size: 15px; }
#page-vico .vc-footer {
  position: sticky; bottom: 0; flex: 0 0 auto; z-index: 2;
  padding: 12px 2px max(16px, env(safe-area-inset-bottom));
  background: var(--canvas); border-top: 1px solid var(--border-soft);
}
#page-vico .vc-footer-inner {
  width: 100%; margin: 0;
}
#page-vico .vc-composer {
  display: flex; align-items: center; gap: 6px; padding: 5px 6px;
  background: var(--surface); border: 0; border-radius: var(--r3); box-shadow: var(--shadow-card);
}
#page-vico .vc-composer .vc-icon-button {
  position: relative; flex: 0 0 44px;
  width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  border: 1.5px solid var(--border); border-radius: var(--r1);
  background: var(--canvas); color: var(--text-1);
  display: inline-flex; justify-content: center; align-items: center;
  transition: border-color .1s, background .1s, color .1s;
}
#page-vico .vc-composer #vc-send { border-color: var(--accent); background: var(--accent); color: var(--surface); }
#page-vico .vc-input { width: 0; flex: 1; min-width: 0; min-height: 44px; padding: 8px 4px; border: 0; background: none; color: var(--text-1); font-size: 16px; text-align: left; }
#page-vico .vc-input::placeholder { color: var(--text-2); }
#page-vico .vc-notice { margin: 0 0 10px; padding: 10px 14px; font-size: 15px; color: var(--text-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r2); }
@media (hover: hover) {
  #page-vico :is(.vc-secondary, .vc-rule-button):hover { background: var(--surface-raised); }
  #page-vico .vc-composer .vc-icon-button:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); }
  #page-vico .vc-composer #vc-send:hover { border-color: var(--accent-hover); background: var(--accent-hover); color: var(--surface); }
  #page-vico .vc-primary:hover { background: var(--accent-text); }
}
#page-vico .vc-composer .vc-icon-button:active { border-color: var(--accent); background: var(--accent); color: var(--surface); }


/* Runtime controls; page and header scoping preserves every other surface. */
.main:has(#page-vico.active) { height: 100dvh; }
.main:has(#page-vico.active) .main-header { flex: 0 0 64px; }
.main:has(#page-vico.active) .main-header > div { max-width: none; }
#page-vico .vc-right { max-height: 100%; overflow-y: auto; scrollbar-width: thin; }
#page-vico .vc-bubble { white-space: pre-wrap; }
#page-vico .vc-stream-end { height: 0; }

/* Photo operations use the real Vico/Records shell; transport states stay explicit. */
#page-vico .vc-photo-panel { max-height: min(58dvh, 540px); overflow-y: auto; padding: 0 4px 4px; scrollbar-width: thin; }
#page-vico .is-photo-mode .vc-stream { padding-top: 18px; }
#page-vico .is-photo-mode .vc-photo-panel { max-height: none; overflow: visible; padding-bottom: 24px; }
#page-vico .vc-photo-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
#page-vico .vc-photo-heading h2 { font-size: 17px; font-weight: 600; }
#page-vico .vc-photo-heading button { width: auto; }
#page-vico .vc-photo-disclosure { padding: 0 12px; border: 1px solid var(--border); border-radius: var(--r2); background: var(--surface); }
#page-vico .vc-photo-disclosure summary { color: var(--accent-text); display: flex; align-items: center; }
#page-vico .vc-photo-disclosure p { font-size: 14px; color: var(--text-2); margin-bottom: 12px; line-height: 1.5; }
#page-vico .vc-photo-informed { display: flex; align-items: center; gap: 10px; min-height: 48px; font-size: 14px; line-height: 1.5; }
#page-vico .vc-photo-informed input { width: 20px; height: 20px; flex: 0 0 20px; accent-color: var(--accent); }
#page-vico .vc-photo-notice, #page-vico .vc-photo-error { padding: 10px 12px; margin-block: 8px; border-radius: var(--r2); font-size: 14px; line-height: 1.5; background: var(--surface-raised); color: var(--text-2); }
#page-vico .vc-photo-error { color: var(--err); border: 1px solid var(--border); }
#page-vico .vc-photo-file { display: grid; gap: 8px; padding: 12px; border: 1px dashed var(--border); border-radius: var(--r2); font-size: 15px; }
#page-vico .vc-photo-file input { max-width: 100%; min-height: 44px; }
#page-vico #vc-photo-composer > label { display: block; font-size: 14px; margin-block: 10px 6px; }
#page-vico #photo-question { display: block; width: 100%; max-height: 144px; resize: vertical; margin-bottom: 10px; padding: 10px 12px; background: var(--surface); color: var(--text-1); font: inherit; border: 1px solid var(--border); border-radius: var(--r2); }
#page-vico #photo-question:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vc-photo-image { display: block; width: min(100%, 240px); max-height: 220px; object-fit: contain; border-radius: var(--r2); border: 1px solid var(--border); background: var(--surface-raised); }
#page-vico .vc-photo-attachment { display: flex; align-items: center; gap: 12px; }
#page-vico .vc-photo-attachment .vc-photo-image { width: 88px; max-height: 100px; }
#page-vico .vc-photo-attachment > div { flex: 1; min-width: 0; }
#page-vico .vc-photo-attachment button { width: auto; font-size: 14px; padding: 6px 12px; }
#page-vico .vc-photo-operation { padding-block: 12px 20px; border-bottom: 1px solid var(--border-soft); margin-bottom: 18px; }
#page-vico .vc-photo-operation > [role="status"] { font-size: 14px; color: var(--text-2); line-height: 1.5; }
.vc-photo-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 10px; }
#page-vico .vc-photo-actions button { width: auto; font-size: 14px; }
.vc-photo-times { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.vc-photo-times dt { font-weight: 500; }
.vc-photo-times dd { margin: 0; }
.vc-photo-records { margin-bottom: 32px; }
.vc-photo-records > article { display: grid; grid-template-columns: minmax(120px, 180px) minmax(0, 1fr); gap: 20px; padding-block: 20px; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.vc-photo-records > article h3 { font-size: 16px; margin-bottom: 8px; }
.vc-photo-records blockquote { margin: 12px 0; padding: 10px 14px; border-left: 3px solid var(--accent); background: var(--surface-raised); line-height: 1.6; white-space: pre-wrap; }
.vc-photo-records details { font-size: 13px; color: var(--text-2); margin-block: 12px; }
.vc-photo-records summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.vc-photo-records button { min-height: 44px; width: auto; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r2); background: var(--surface); }
@media (max-width: 767px) {
  #page-vico .vc-photo-panel { max-height: 58dvh; }
  #page-vico .vc-photo-heading { align-items: flex-start; }
  #page-vico .vc-photo-heading button { font-size: 14px; padding: 6px 12px; }
  #page-vico .vc-photo-actions button { width: 100%; }
  .vc-photo-records > article { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}
#page-vico .vc-waiting { font-size: 15px; color: var(--text-2); margin-bottom: 16px; }
#page-vico .vc-empty { padding: 48px 16px; }
#page-vico .vc-empty h2 { font-size: 22px; font-weight: 500; letter-spacing: -.02em; }
#page-vico .vc-empty > p { font-size: 15px; color: var(--text-2); margin-top: 8px; }
#page-vico .vc-suggestions { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 24px; }
#page-vico .vc-suggestions button { width: auto; text-align: left; }
#page-vico .vc-recovery { display: flex; gap: 8px; margin-bottom: 10px; }
#page-vico .vc-input { font: inherit; line-height: 1.6; resize: none; max-height: 144px; overflow-y: auto; }
#page-vico .vc-send { flex: 0 0 auto; min-height: 44px; padding: 8px 16px; border: 1px solid var(--accent); border-radius: var(--r1); background: var(--accent); color: var(--surface); font-weight: 500; }
#page-vico #vc-model { min-height: 44px; min-width: 44px; max-width: 140px; border: 0; padding: 8px; font: inherit; font-size: 15px; color: var(--text-2); background: var(--surface); }
#page-vico :is(textarea, select):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
#page-vico .vc-removed-notice { margin-top: 20px; padding: 16px; border: 1px solid var(--border); border-radius: var(--r2); font-size: 15px; }
.main:has(#page-vico.active) .vc-history-menu { position: relative; flex: 0 0 auto; margin-left: auto; }
.main:has(#page-vico.active) .vc-history-menu summary { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; font-size: 22px; list-style: none; cursor: pointer; border-radius: var(--r1); }
.main:has(#page-vico.active) .vc-history-menu summary::-webkit-details-marker { display: none; }
.main:has(#page-vico.active) .vc-history-menu :is(summary, button):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.main:has(#page-vico.active) .vc-history-list { position: absolute; z-index: 5; right: 0; top: 48px; width: min(320px, calc(100vw - 24px)); max-height: 60dvh; overflow-y: auto; padding: 16px; border: 1px solid var(--border); border-radius: var(--r2); background: var(--surface); box-shadow: var(--shadow-card); }
.main:has(#page-vico.active) .vc-history-list :is(h2, p) { font-size: 15px; margin-bottom: 10px; }
.main:has(#page-vico.active) .vc-history-list button { display: flex; flex-direction: column; justify-content: center; width: 100%; min-height: 44px; padding: 8px; border: 0; border-radius: var(--r1); font: inherit; font-size: 15px; text-align: left; background: var(--surface); color: var(--text-1); overflow-wrap: anywhere; }
.main:has(#page-vico.active) .vc-history-list button:hover { background: var(--surface-raised); }
.main:has(#page-vico.active) .vc-history-list time { display: block; font-size: 13px; color: var(--text-2); }
@media (max-width: 767px) {
  .main:has(#page-vico.active) { height: calc(100dvh - 56px); }
  .main:has(#page-vico.active) .vc-history-list time { font-size: 15px; }
  #page-vico .vc-applied { font-size: 15px; }
  #page-vico .vc-card { padding: 16px; }
  #page-vico .vc-composer { flex-wrap: wrap; }
  #page-vico .vc-composer:has(#vc-model) .vc-input { flex-basis: 100%; width: 100%; }
  #page-vico #vc-model { max-width: calc(100% - 110px); margin-left: auto; }
  #page-vico .vc-bubble { max-width: 94%; }
}

/* Spec #9 / #10: B workspace shell. Existing page components stay intact. */
.workspace-topbar { --workspace-nav-height: 72px; display: grid; grid-template-columns: 232px minmax(0, 1fr) auto; align-items: center; min-height: 72px; border-bottom: 1px solid var(--border); background: var(--surface); position: sticky; top: 0; z-index: 12; }
.workspace-brand { padding: 20px 24px; display: flex; align-items: center; gap: 10px; }
.workspace-mark { display: flex; width: 28px; height: 28px; flex: 0 0 28px; }
.workspace-mark svg { width: 100%; height: 100%; }
.workspace-brand .brand-wordmark { width: 145px; height: auto; }
.workspace-topbar nav { display: flex; align-self: stretch; align-items: stretch; gap: 8px; }
.workspace-topbar .nav-link { margin: 0; padding: 0 16px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; min-height: 44px; }
.workspace-topbar .nav-link.active { border-bottom-color: var(--accent); background: transparent; }
.workspace-account { margin: 0 24px 0 12px; padding: 10px 0; font-size: 13px; color: var(--text-2); text-decoration: none; }
.workspace-account:is(:hover, .active) { color: var(--accent-text); }
.workspace-layout { grid-template-columns: 232px minmax(0, 1fr); min-height: calc(100vh - 72px); }
.workspace-layout .sidebar { top: 72px; height: calc(100vh - 72px); background: var(--surface-raised); }
.workspace-layout .sidebar-content { display: flex; flex-direction: column; min-height: 100%; }
.workspace-layout .main { --main-gutter: 32px; }
.workspace-layout .main-header { top: 72px; background: var(--surface); min-height: 76px; height: auto; padding-top: 12px; padding-bottom: 12px; }
.workspace-layout .main-title { font-size: 22px; letter-spacing: -.025em; }
.tent-heading { padding: 24px 20px 16px; }
.tent-heading h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-2); }
.tent-heading p { margin-top: 5px; font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; }
.tent-search { display: grid; gap: 5px; padding: 0 16px; font-size: 12px; color: var(--text-2); }
.tent-search input { width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r1); background: var(--surface); color: var(--text-1); font-size: 14px; }
.workspace-layout .tent-list { padding: 0 8px 16px; }
.tent-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; border-bottom: 1px solid var(--border); padding: 5px 0; }
.tent-row[draggable=true] .tent-item { cursor: grab; user-select: none; -webkit-user-select: none; }
.tent-row[draggable=true] .tent-item:active { cursor: grabbing; }
.tent-row.is-dragging { opacity: .45; }
.tent-row[data-drop-position]::after { content: ''; position: absolute; z-index: 2; left: 8px; right: 8px; height: 2px; background: var(--accent); pointer-events: none; }
.tent-row[data-drop-position=before]::after { top: 0; }
.tent-row[data-drop-position=after]::after { bottom: 0; }
.workspace-layout .tent-item { min-width: 0; text-align: left; width: 100%; gap: 8px; border: 1px solid transparent; background: transparent; min-height: 56px; padding: 8px; }
.workspace-layout .tent-item.active { background: var(--surface); border-color: var(--border); }
.workspace-layout .tent-item > span:last-child { min-width: 0; }
.workspace-layout .tent-name, .workspace-layout .tent-meta { display: block; overflow-wrap: anywhere; }
.workspace-layout .tent-meta { font-size: 12px; color: var(--text-2); }
.tent-selection { border: 1px solid var(--border); width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; }
.active .tent-selection { background: var(--accent); border-color: var(--accent); }
[data-tent-search-clear], [data-tents-retry] { min-height: 44px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r1); background: var(--surface); color: var(--text-1); cursor: pointer; font-size: 13px; }
.tent-storage-error { font-size: 13px; color: var(--warn); padding: 0 16px 12px; overflow-wrap: anywhere; }
.tent-search-empty { padding: 10px 8px; font-size: 13px; color: var(--text-2); }
.workspace-layout .sidebar-footer { padding: 12px 0; }
.workspace-layout .sidebar-add { min-height: 44px; background: transparent; }
.workspace-layout .sidebar-add:disabled { cursor: not-allowed; }
.workspace-layout :is(button, input, summary, [tabindex]):focus-visible, .workspace-topbar a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.skip-link { position: fixed; left: 12px; top: -80px; z-index: 20; padding: 12px 16px; background: var(--surface); color: var(--accent-text); border: 2px solid var(--accent); }
.skip-link:focus { top: 8px; }
@media (max-width: 1000px) {
  .workspace-topbar { grid-template-columns: 200px minmax(0, 1fr) auto; }
  .workspace-layout { grid-template-columns: 200px minmax(0, 1fr); }
  .workspace-topbar .nav-link { padding: 0 10px; gap: 6px; }
  .workspace-account { margin-right: 16px; max-width: 110px; }
}
@media (max-width: 767px) {
  .workspace-topbar { grid-template-columns: minmax(0, 1fr) auto; min-height: 108px; position: relative; }
  .workspace-brand { padding: 16px; }
  .workspace-brand .brand-wordmark { width: 125px; }
  .workspace-account { grid-column: 2; grid-row: 1; margin: 0 16px; max-width: 140px; }
  .workspace-topbar nav { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; padding: 0 6px; }
  .workspace-topbar .nav-link { min-width: 0; justify-content: center; padding: 10px 3px; font-size: 13px; }
  .workspace-topbar .nav-link svg { display: none; }
  .workspace-layout { display: block; min-height: calc(100vh - 108px); }
  .workspace-layout .sidebar { position: relative; top: 0; height: auto; border-right: 0; border-bottom: 1px solid var(--border); }
  .workspace-layout .sidebar-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px; padding: 12px 16px; background: var(--surface-raised); border: 0; color: var(--text-1); text-align: left; }
  .workspace-layout .sidebar-toggle svg { width: 18px; height: 18px; flex: 0 0 auto; }
  .workspace-layout .sidebar-current-tent { overflow-wrap: anywhere; }
  .workspace-layout .sidebar-content { display: none; }
  .workspace-layout .sidebar.is-open .sidebar-content { display: flex; }
  .workspace-layout .main { --main-gutter: 16px; }
  .workspace-layout .main-header { top: 0; position: relative; min-height: 76px; }
  .workspace-layout .tent-heading { padding-top: 16px; }
}

/* Actual Web tent form and optional first steps, within the B workspace. */
.tent-setup { width: 100%; max-width: 720px; margin-bottom: 28px; padding: 24px; border: 1px solid var(--border); border-radius: var(--r3); background: var(--surface); }
.tent-setup h2 { margin: 0 0 8px; font-size: 22px; font-weight: 600; }
.tent-setup p { color: var(--text-2); font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.tent-setup form { display: flex; flex-direction: column; margin-top: 24px; }
.tent-setup label { margin: 18px 0 7px; color: var(--text-1); font-size: 14px; font-weight: 500; }
.tent-setup label:first-child { margin-top: 0; }
.tent-setup :is(input, textarea) { width: 100%; min-height: 44px; padding: 11px 12px; border: 1px solid var(--border); border-radius: var(--r1); background: var(--bg); color: var(--text-1); font: inherit; font-size: 16px; }
.tent-setup textarea { resize: vertical; }
.tent-setup [aria-invalid="true"] { border-color: var(--danger, #b43b35); }
.tent-setup .tent-create-error { margin-top: 7px; color: var(--danger, #b43b35); }
.tent-setup-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 24px; }
.tent-setup :is(button, a) { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; border: 1px solid var(--border); border-radius: var(--r1); background: var(--surface); color: var(--text-1); font: inherit; font-size: 14px; text-decoration: none; cursor: pointer; }
.tent-setup button[type="submit"], .tent-setup [data-tent-create-check] { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.tent-setup :is(button, input, textarea):disabled { opacity: .65; cursor: not-allowed; }
.tent-setup :is(button:enabled, a):hover { border-color: var(--accent); }
.tent-setup :is(input, textarea, button, a):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.tent-start-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.tent-start-options h3 { margin-bottom: 8px; font-size: 15px; font-weight: 600; }
.tent-start-options p { font-size: 14px; }
.tent-start-options a { padding: 8px 10px; margin: 4px 0 8px; }
@media (max-width: 767px) { .tent-setup { padding: 20px 16px; } .tent-start-options { grid-template-columns: 1fr; gap: 20px; } }
.tent-original { margin: 20px 0; display: grid; gap: 12px; }
.tent-original dt { color: var(--text-3); font-size: 13px; }
.tent-original dd { margin: 4px 0 0; font-size: 15px; overflow-wrap: anywhere; white-space: pre-wrap; }

.vc-draft-disclosure { color: var(--text-2); font-size: 12px; line-height: 1.5; margin: 8px 0; }
/* Actual Records EC flow, within the selected tent workspace. */
.ec-workspace { margin-bottom: 32px; min-width: 0; }
.ec-workspace form { padding: 24px 0; border-block: 1px solid var(--border); display: grid; gap: 16px; }
.ec-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.ec-workspace label { display: grid; gap: 8px; color: var(--text-2); font-size: 14px; }
.ec-workspace :is(input:not([type=radio]),select) { width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r1); background: var(--surface); color: var(--text-1); font: inherit; }
.ec-workspace :is(button,a),.ec-record :is(button,a) { min-height: 44px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--r1); background: var(--surface); color: var(--accent-text); font: inherit; cursor: pointer; text-decoration: none; }
.ec-workspace button[type=submit] { background: var(--accent); color: white; border-color: var(--accent); }
.ec-workspace button:disabled,.ec-record button:disabled { opacity: .5; cursor: not-allowed; }
.ec-workspace :is(input,select,button,a):focus-visible,.ec-record :is(button,a,summary):focus-visible,#ec-error:focus { outline: 2px solid var(--accent); outline-offset: 3px; }
.ec-time { border: 1px solid var(--border); border-radius: var(--r1); padding: 12px 16px 16px; display: grid; gap: 12px; }
.ec-time legend { font-size: 14px; padding-inline: 6px; color: var(--text-2); }
#ec-composer .ec-time > label:has(> input[type=radio]) { display: flex; align-items: center; justify-content: flex-start; gap: 10px; min-height: 44px; }
#ec-composer .ec-time input[type=radio] { appearance: auto; display: inline-block; width: 18px; height: 18px; min-width: 18px; min-height: 18px; max-width: 18px; max-height: 18px; flex: 0 0 18px; margin: 0; padding: 0; accent-color: var(--accent); }
.ec-time output { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ec-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ec-meta { color: var(--text-2); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.ec-summary { display: grid; grid-template-columns: minmax(100px,150px) minmax(0,1fr); gap: 10px 20px; font-size: 14px; }
.ec-summary dt { color: var(--text-2); }.ec-summary dd { overflow-wrap: anywhere; }
.ec-error { color: var(--err); padding-block: 10px; }
.ec-record { padding-block: 24px; border-bottom: 1px solid var(--border); display: grid; gap: 14px; min-width: 0; }
.ec-record header { display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline; justify-content: space-between; }
.ec-record h3 { font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; }.ec-tag { color: var(--text-2); font-size: 14px; }
.ec-record blockquote { border-left: 3px solid var(--accent); padding: 4px 16px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ec-record details { color: var(--text-2); }.ec-record summary { cursor: pointer; font-size: 13px; }.ec-record details p { margin-top: 10px; }
@media(max-width:767px) { .ec-fields { grid-template-columns: 1fr; }.ec-summary { grid-template-columns: 1fr; gap: 4px; }.ec-summary dd { margin-bottom: 8px; }.ec-record h3 { font-size: 20px; } }

/* Current-tent Plants is a secondary Records workspace, within direction B. */
.plant-workspace { width: 100%; max-width: 900px; color: var(--text-1); }
.plant-workspace h2 { font-size: 22px; margin: 20px 0 10px; font-weight: 600; }
.plant-workspace h2 small { font-size: 14px; color: var(--text-3); font-weight: 400; }
.plant-workspace h3, .plant-workspace h4 { font-size: 16px; margin: 16px 0 8px; font-weight: 600; }
.plant-workspace p, .plant-workspace dd { font-size: 15px; line-height: 1.6; color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.plant-workspace dl { display: grid; grid-template-columns: minmax(140px, .4fr) minmax(0, 1fr); gap: 10px 20px; margin: 22px 0; }
.plant-workspace dt { font-size: 14px; color: var(--text-3); }
.plant-workspace dd { margin: 0; }
.plant-workspace :is(button, a), .plant-records-entry button { min-width: 44px; min-height: 44px; padding: 10px 16px; border: 1px solid var(--border); border-radius: var(--r1); color: var(--text-1); background: var(--surface); font: inherit; font-size: 14px; cursor: pointer; }
.plant-workspace :is(button, input, select, textarea):disabled { opacity: .6; cursor: not-allowed; }
.plant-workspace :is(button, input, select, textarea):focus-visible, .plant-records-entry button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.plant-workspace button:enabled:hover, .plant-records-entry button:hover { border-color: var(--accent); }
.plant-heading, .plant-records-entry { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.plant-records-entry { padding-bottom: 20px; margin-bottom: 24px; border-bottom: 1px solid var(--border); }
.plant-records-entry h2 { font-size: 16px; font-weight: 600; }
.plant-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; }
.plant-workspace :is([data-plant-save], button[type="submit"]) { background: var(--accent); color: var(--surface); border-color: var(--accent); }
.plant-list { border-top: 1px solid var(--border); margin-top: 20px; }
.plant-list button { width: 100%; border-width: 0 0 1px; border-radius: 0; padding: 20px 4px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; background: transparent; }
.plant-list button > span:first-child { font-size: 17px; font-weight: 600; color: var(--text-1); }
.plant-list :is(small, span) { color: var(--text-2); font-size: 14px; line-height: 1.5; }
.plant-workspace fieldset { display: grid; grid-template-columns: minmax(180px, .5fr) minmax(0, 1fr); gap: 12px 24px; border: 0; border-top: 1px solid var(--border); margin-top: 28px; padding: 20px 0 0; min-width: 0; }
.plant-workspace legend { font-size: 16px; font-weight: 600; padding: 0 16px 0 0; }
.plant-workspace label { font-size: 14px; line-height: 1.6; align-self: center; grid-column: 1; }
.plant-workspace :is(input, select, textarea) { grid-column: 2; width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; font: inherit; font-size: 16px; color: var(--text-1); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r1); }
.plant-workspace textarea { margin-top: 8px; resize: vertical; }
.plant-workspace form > label { display: block; margin-top: 24px; }
.plant-workspace .plant-error { grid-column: 2; color: var(--danger, #b43b35); }
.plant-workspace [aria-invalid="true"] { border-color: var(--danger, #b43b35); }
.plant-candidates { grid-column: 1 / -1; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.plant-candidates article { border-left: 2px solid var(--border); padding: 8px 16px; margin: 16px 0; }
@media (max-width: 767px) {
  .plant-workspace fieldset { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .plant-workspace :is(label, input, select, textarea, .plant-error) { grid-column: 1; }
  .plant-workspace fieldset label { margin-top: 12px; }
  .plant-workspace dl { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .plant-workspace dd { margin-bottom: 12px; }
}

/* Actual Readings comparison and past intervals, within the B workspace. */
#page-ec .readings-compare { display: flex; flex-wrap: wrap; gap: 4px 20px; border: 0; padding: 0; margin: 20px 0 12px; }
#page-ec .readings-compare legend { color: var(--text-2); font-size: 13px; margin-bottom: 4px; }
#page-ec .readings-compare label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; color: var(--text-2); }
#page-ec .readings-compare input { width: 16px; height: 16px; flex: 0 0 16px; margin: 0; accent-color: var(--accent); }
#readings-date-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)) minmax(140px,.7fr) auto; align-items: end; gap: 12px; margin-block: 12px; }
#readings-date-form label { display: grid; gap: 7px; min-width: 0; font-size: 13px; color: var(--text-2); }
#readings-date-form :is(input,select) { width: 100%; min-width: 0; max-width: 100%; min-height: 44px; padding: 9px 10px; background: var(--surface); color: var(--text-1); border: 1px solid var(--border); border-radius: var(--r1); font: inherit; font-size: 14px; }
#page-ec .readings-card + .readings-card { margin-top: 20px; }
#page-ec .readings-card-head { flex-wrap: wrap; }
#page-ec .readings-current { max-width: 100%; }
#page-ec .readings-source { overflow-wrap: anywhere; }
#page-ec .readings-legend > span { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
#page-ec .readings-exact { margin: 12px 0 20px; color: var(--text-2); font-size: 13px; }
#page-ec .readings-sources { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 14px; color: var(--text-2); font-size: 13px; }
#page-ec :is(.readings-sources,.readings-lineage,.readings-exact) :is(p,dd) { overflow-wrap: anywhere; }
#page-ec .readings-sources dl { display: grid; grid-template-columns: 130px minmax(0,1fr); gap: 8px 16px; margin-top: 14px; }
#page-ec .readings-sources dd { margin: 0; color: var(--text-1); }
#page-ec .readings-lineage { padding-block: 22px; border-block: 1px solid var(--border); margin-top: 24px; font-size: 14px; line-height: 1.6; }
#page-ec .readings-lineage h2 { font-size: 18px; margin-bottom: 14px; }
#page-ec .readings-lineage ol { margin: 12px 0; padding-left: 22px; }
#page-ec .readings-lineage li + li { margin-top: 16px; }
#page-ec :is(.readings-sources,.readings-lineage,.readings-exact) summary { min-height: 44px; padding-block: 12px; cursor: pointer; }
#page-ec :is(input,select,button,summary,svg):focus-visible,#readings-period:focus { outline: 2px solid var(--accent); outline-offset: 3px; }
@media(max-width:767px) { #readings-date-form { grid-template-columns: minmax(0,1fr); } #readings-date-form :is(input,select) { font-size: 16px; } #page-ec .readings-sources dl { grid-template-columns: minmax(0,1fr); gap: 4px; } #page-ec .readings-sources dd { margin-bottom: 10px; } #page-ec .readings-card { padding: 20px 16px; } }

/* Private workspace conversation search keeps the existing B Vico layout. */
.vc-search-panel{flex:1;min-height:0;overflow:auto;padding:24px 28px;color:var(--text-1)}
.vc-search-heading{display:flex;gap:20px;align-items:flex-start;justify-content:space-between;margin-bottom:24px}
.vc-search-heading h2{font-size:20px;line-height:1.35;margin:0 0 6px;font-weight:600}
.vc-search-heading p,.vc-search-notice{color:var(--text-2);font-size:13px;line-height:1.6;margin:0}
.vc-search-heading h2:focus{outline:2px solid var(--accent);outline-offset:5px}
@media(max-width:600px){.vc-search-panel{padding:20px 16px}.vc-search-heading{gap:12px;flex-wrap:wrap}}

.vc-search-form{margin-bottom:24px}.vc-search-form label{display:block;font-size:13px;font-weight:600;margin-bottom:8px}.vc-search-controls{display:flex;gap:10px;margin-bottom:10px}.vc-search-controls input{min-width:0;flex:1;padding:10px 12px;border:1px solid var(--border);border-radius:var(--r1);background:var(--surface);color:var(--text-1);font:inherit;font-size:15px}.vc-search-controls input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.vc-search-controls input[aria-invalid]{border-color:var(--err)}.vc-search-status{padding:18px 0;color:var(--text-2);font-size:14px}.vc-search-error{color:var(--err);font-size:14px;line-height:1.6;margin:16px 0}.vc-search-result{border-top:1px solid var(--border);padding:18px 0}.vc-search-result h4{font-size:15px;font-weight:600;margin:0 0 8px}.vc-search-meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0 0 10px;color:var(--text-2);font-size:12px;line-height:1.6}.vc-search-snippet{font-size:14px;line-height:1.65;margin:0;white-space:pre-wrap}
.vc-search-result .vc-secondary{margin-top:14px}.vc-search-result button[aria-disabled="true"]{opacity:.65;cursor:wait}.vc-original-context{padding:12px 16px;background:var(--surface-raised);border-left:2px solid var(--accent);margin-bottom:20px}.vc-original-context h2{font-size:14px;font-weight:600;margin:0 0 6px}.vc-original-context p{font-size:12px;line-height:1.6;color:var(--text-2);margin:0}.vc-original-context h2:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

#vc-search-results-title{font-size:13px;font-weight:600;color:var(--text-2);margin:24px 0 0}#vc-search-results-title:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

#vc-search-more[aria-disabled="true"]{cursor:wait;opacity:.65}
#page-vico .vc-search-panel .vc-primary,#page-vico .vc-search-panel .vc-secondary{width:auto;flex:0 0 auto}
.vc-search-heading>div{min-width:0}.vc-search-heading .vc-secondary{margin:0}
.vc-search-controls input{width:0;flex:1 1 auto}
/* Product feedback uses the existing B workspace and native form rhythm. */
.feedback-workspace{max-width:780px;margin:0 auto;color:var(--text-1);line-height:1.6}
.feedback-workspace h2{font-size:22px;margin:0 0 12px}.feedback-workspace h3{font-size:17px;margin:26px 0 10px}.feedback-workspace h4{font-size:14px;margin:0 0 8px}
.feedback-workspace form{display:grid;gap:12px}.feedback-workspace textarea,.feedback-workspace input:not([type=checkbox]):not([type=radio]){width:100%;box-sizing:border-box;padding:11px 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text-1);font:inherit}.feedback-workspace textarea{resize:vertical;min-height:100px}
.feedback-workspace button,.feedback-error-shortcut{min-height:44px;padding:10px 16px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--accent-text);font:inherit;cursor:pointer}.feedback-workspace button:disabled{opacity:.55;cursor:not-allowed}.feedback-workspace button[data-feedback-action=submit],.feedback-workspace button[form=feedback-form]{background:var(--accent);color:var(--text-on-accent,#fff);border-color:var(--accent)}
.feedback-workspace fieldset{margin:12px 0;padding:16px;border:1px solid var(--border);border-radius:8px;min-width:0}.feedback-workspace legend{font-weight:600}.feedback-workspace .feedback-check{display:flex;align-items:center;gap:10px;min-height:44px}.feedback-check input{width:18px;height:18px;flex:none;accent-color:var(--accent)}
.feedback-summary{display:grid;gap:6px;margin:20px 0}.feedback-summary dt{color:var(--text-2);font-size:13px}.feedback-summary dd{margin:0 0 14px}.feedback-text{white-space:pre-wrap;overflow-wrap:anywhere;margin:0}.feedback-evidence-preview,.feedback-addition{border-top:1px solid var(--border);padding:16px 0}.feedback-workspace code,.feedback-workspace time{overflow-wrap:anywhere}.feedback-error{color:var(--danger-text,var(--text-1))}.feedback-error-shortcut{margin:0 24px 12px;align-self:flex-start}
.feedback-workspace :focus-visible,.feedback-error-shortcut:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
@media(max-width:767px){.feedback-workspace{width:100%;max-width:none}.feedback-workspace button{width:100%;margin-top:8px}.feedback-workspace fieldset{padding:12px}.feedback-workspace code{font-size:12px}}
.feedback-sources{display:grid;gap:12px;margin:20px 0}.feedback-workspace select{max-width:100%;width:100%;padding:11px 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text-1);font:inherit}.feedback-photo{display:block;width:100%;max-height:260px;object-fit:contain;background:var(--surface-raised);border:1px solid var(--border);border-radius:8px}.feedback-actions{display:flex;gap:12px;flex-wrap:wrap}.feedback-source-operation{display:grid;gap:10px;padding:16px 0;border-top:1px solid var(--border)}

.feedback-attachment-notice { margin-block: 16px; padding: 16px; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 8px; }
.feedback-attachment-notice h4 { margin: 0 0 8px; }
.feedback-attachment-notice p { margin: 8px 0 0; }

.fc-entry{margin-bottom:18px}.fc-facts{margin:24px 0;display:grid;grid-template-columns:160px minmax(0,1fr);gap:14px 20px;font-size:14px;line-height:1.6}.fc-facts dt{color:var(--text-2)}.fc-facts dd{margin:0;overflow-wrap:anywhere}.fc-facts small{display:block;color:var(--text-2);font-size:12px}.fc-panel p{line-height:1.6}.fc-panel button[aria-disabled=true]{opacity:.6}.fc-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}@media(max-width:600px){.fc-facts{grid-template-columns:1fr;gap:4px}.fc-facts dd{margin-bottom:14px}}

#page-vico .fc-entry{margin:12px 28px 0;flex:0 0 auto}#page-vico .fc-entry .vc-secondary{width:auto;max-width:100%;min-height:44px}@media(max-width:600px){#page-vico .fc-entry{margin:12px 16px 0}}
.boolean-review-control { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.boolean-review-control button, select[data-device-manual] { min-height: 44px; }

/* Explicit browser-local attachments remain separate from cloud originals. */
.local-draft-entry{margin:12px 0}.local-draft-panel{min-width:0;padding:20px;margin:16px 0;border:1px solid var(--border,#dce0e6);border-radius:12px;background:var(--surface,#fff);font-size:14px;line-height:1.55;overflow-wrap:anywhere}.local-draft-panel header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.local-draft-panel h2{font-size:18px;margin:0}.local-draft-panel h3,.local-draft-panel h4{margin:6px 0}.local-draft-panel p{margin:10px 0}.local-draft-scope{font-weight:600}.local-draft-panel form,.local-draft-review{display:grid;gap:12px}.local-draft-panel label{display:grid;gap:6px}.local-draft-panel label:has(input[type=checkbox]),.local-draft-panel label:has(input[type=radio]){display:flex;align-items:flex-start;gap:8px}.local-draft-panel input:not([type=checkbox]):not([type=radio]),.local-draft-panel textarea,.local-draft-panel select{width:100%;min-width:0;max-width:100%;box-sizing:border-box;padding:10px;border:1px solid var(--border,#dce0e6);border-radius:6px;font:inherit;background:#fff;color:inherit}.local-draft-panel button{font:inherit;min-height:40px;border:1px solid var(--border,#dce0e6);border-radius:6px;padding:8px 12px;background:#f8f8fc;color:inherit;cursor:pointer}.local-draft-panel button:disabled{opacity:.5;cursor:default}.local-draft-panel :focus-visible{outline:2px solid #6650c8;outline-offset:3px}.local-draft-photo img,.local-draft-replace img{max-width:100%;width:auto;max-height:180px;object-fit:contain}.local-draft-replace{border-left:3px solid #8b6ec7;padding:12px;background:#f8f6fc}.local-draft-replace>div{border-bottom:1px solid #e8e3f0;margin:8px 0}.local-draft-review{border-top:1px solid #e4e4eb;margin:14px 0;padding-top:14px}.local-draft-error{color:#a5283a}.local-draft-panel button+button{margin-left:8px}@media(max-width:600px){.local-draft-panel{padding:14px}.local-draft-panel header{gap:8px}.local-draft-panel button{max-width:100%}.local-draft-panel button+button{margin:8px 0 0}}
.batch-workspace>fieldset{display:block;border:0;padding:0;margin:16px 0;min-width:0}.batch-list{padding-left:24px}.batch-list li{padding:16px 0;border-bottom:1px solid var(--border);overflow-wrap:anywhere}.batch-workspace .plant-actions button,.batch-list button{min-height:44px}.batch-list h3{font-size:16px}.batch-workspace>p{max-width:70ch;line-height:1.6}

/* Original event facts keep the existing Vico hierarchy and wrap private IDs. */
#page-vico .fc-entry{display:flex;flex-wrap:wrap;gap:10px}
.fe-panel p{line-height:1.6}.fe-panel .fe-event{margin:20px 0;padding:20px;overflow-wrap:anywhere}.fe-panel .fe-event h3{margin:0}.fe-panel .fe-event h4{margin:20px 0 8px}.fe-answer{white-space:pre-wrap}.fe-panel button{min-height:44px;max-width:100%}
@media(max-width:600px){.fe-panel .fe-event{padding:16px}.fe-panel .fc-facts{margin:16px 0}}

.fe-scope{margin:16px 0}.fe-scope summary,.fe-source summary{cursor:pointer;min-height:44px;line-height:1.5;padding:10px 0}.fe-source{margin:12px 0}.fe-panel .vc-search-notice p,.fc-panel .vc-search-notice p{margin:10px 0}.fe-event>p{margin:12px 0}.fe-event .fc-facts{margin:14px 0;gap:8px 16px}
:is(#page-journal,#page-vico) .local-draft-panel label:has(>input:is([type=radio],[type=checkbox])){display:flex;flex-direction:row;align-items:flex-start;gap:10px;min-height:44px;padding:6px 0}
:is(#page-journal,#page-vico) .local-draft-panel input:is([type=radio],[type=checkbox]){appearance:auto;display:inline-block;width:18px;height:18px;min-width:18px;min-height:18px;max-width:18px;max-height:18px;flex:0 0 18px;margin:3px 0 0;padding:0;accent-color:var(--accent)}

.rules-source-origin{margin:0 0 20px;padding:12px 0;border-bottom:1px solid var(--border);font-size:13px;line-height:1.6;overflow-wrap:anywhere}
.rules-source-origin p{margin:4px 0}.rules-panel select[data-rule-source-target]{display:block;width:100%;max-width:100%;min-height:44px;margin:8px 0 16px}
.rules-source-refill{margin:16px 0;display:grid;gap:12px}.rules-source-refill label{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.rules-source-history{list-style:none;padding:0;margin:16px 0;display:grid;gap:8px}.rules-source-history .rules-button{max-width:100%;white-space:normal;text-align:left}.rules-source-history [aria-pressed="true"]{border-color:var(--accent);background:var(--surface-raised)}

.rules-source-panel>p{margin:10px 0}.rules-source-validity{display:flex;align-items:flex-start;gap:10px;min-height:44px;margin:16px 0 12px}#rule-source-validity{width:20px;height:20px;min-height:20px;margin:3px 0 0;flex:0 0 20px;accent-color:var(--accent)}
.association-entry { min-height:44px; margin-top:20px; padding:10px 16px; border:1px solid var(--border); border-radius:var(--r1); background:var(--surface); color:var(--text-1); font:inherit; }
.association-entry:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.association-workspace .association-proposal { border-left:2px solid var(--border); padding-left:16px; }
.association-members article { border-top:1px solid var(--border); padding:20px 0; }
.association-members label { display:flex; gap:12px; min-height:44px; align-items:center; overflow-wrap:anywhere; }
.association-members input[type="checkbox"] { width:22px; min-height:22px; flex:0 0 22px; accent-color:var(--accent); }
.association-members small { color:var(--text-3); font-size:14px; }

.association-workspace .association-candidate { display:flex; grid-column:1/-1; align-items:center; gap:12px; min-height:44px; overflow-wrap:anywhere; }
.association-workspace .association-candidate input { width:22px; min-height:22px; flex:0 0 22px; }

#page-journal .association-workspace :is(.association-members label,.association-candidate) { display:flex; align-items:center; gap:12px; min-height:44px; }
#page-journal .association-workspace input[type="checkbox"] { appearance:auto; display:inline-block; width:18px; height:18px; min-width:18px; min-height:18px; max-width:18px; max-height:18px; flex:0 0 18px; padding:0; margin:0; accent-color:var(--accent); }

/* Explicit source applicability follows the existing device detail hierarchy. */
.probe-subjects { min-width: 0; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); overflow-wrap: anywhere; font-size: 14px; line-height: 1.65; }
.probe-subjects h2 { font-size: 19px; margin: 0 0 12px; }
.probe-subjects h3 { font-size: 16px; margin: 18px 0 8px; }
.probe-subjects code { font-size: 12px; overflow-wrap: anywhere; }
.probe-subjects dl { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(0, 2fr); gap: 8px 16px; }
.probe-subjects dt { color: var(--text-2); }
.probe-subjects dd { min-width: 0; margin: 0; }
.probe-subjects form { display: grid; gap: 10px; margin: 16px 0; }
.probe-subjects :is(input:not([type="checkbox"]), select, textarea) { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; min-height: 44px; padding: 10px 12px; color: var(--text-1); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r1); font: inherit; font-size: 16px; }
.probe-subjects textarea { min-height: 96px; resize: vertical; }
.probe-subjects fieldset { min-width: 0; padding: 12px; border: 1px solid var(--border); }
.probe-subjects fieldset label { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 44px; }
#page-devices .probe-subjects input[type="checkbox"] { min-width: 20px; min-height: 20px; width: 20px; height: 20px; }
.probe-subjects .rules-button { margin: 6px 8px 6px 0; white-space: normal; }
.probe-subjects :is(button, input, select, textarea):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.probe-subject-declaration { padding-bottom: 16px; border-bottom: 1px solid var(--border); }
@media(max-width:767px) { .probe-subjects dl { grid-template-columns: minmax(0, 1fr); gap: 4px; } .probe-subjects dd { margin-bottom: 8px; } .probe-subjects .rules-button { max-width: 100%; } }
/* #26 read-only evidence: keep original inputs and later history distinct. */
.ec-history { min-width: 0; margin-block: 4px 12px; padding: 20px 0; border-block: 1px solid var(--border); font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; }
.ec-history:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.ec-history h4 { margin: 0 0 10px; color: var(--text-1); font-size: 16px; font-weight: 600; line-height: 1.4; }
.ec-history h4:not(:first-child) { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); }
.ec-history h5 { margin: 0 0 8px; color: var(--text-1); font-size: 14px; font-weight: 600; line-height: 1.5; }
.ec-history p { margin: 8px 0; color: var(--text-2); }
.ec-history article { margin: 16px 0; padding: 16px 0 4px; border-top: 1px solid var(--border-soft); }
.ec-history [data-ec-attempt] { margin-top: 16px; padding-left: 16px; border-left: 2px solid var(--border); }
.ec-history .ec-summary { margin-block: 12px; }
@media (max-width: 600px) { .ec-history { padding-block: 16px; } .ec-history [data-ec-attempt] { padding-left: 12px; } }
.shared-feed-records,.shared-feed-record,.shared-feed-plant { overflow-wrap:anywhere; }
.shared-feed-plant { border-top:1px solid var(--border); padding-block:12px; }

/* Shared multi-plant form only; retain the existing single-plant EC styles. */
#shared-feed-form { min-width:0; overflow-wrap:anywhere; }
#shared-feed-form fieldset { min-width:0; border:1px solid var(--border); border-radius:var(--r1); padding:16px; display:grid; gap:16px; }
#shared-feed-form legend { padding-inline:6px; font-size:14px; color:var(--text-2); }
#page-journal #shared-feed-form label { display:flex; align-items:flex-start; gap:12px; line-height:1.6; }
#shared-feed-form .shared-feed-target { display:grid; min-width:0; gap:4px; }
#shared-feed-form .shared-feed-target > span { color:var(--text-2); font-size:13px; }
#shared-feed-form input:is([type=checkbox],[type=radio]) { appearance:auto; width:18px; height:18px; min-width:18px; min-height:18px; max-width:18px; max-height:18px; flex:0 0 18px; margin:4px 0; padding:0; accent-color:var(--accent); }
#page-journal #shared-feed-form label:has(> input:not([type=checkbox],[type=radio])) { display:grid; }
#shared-feed-form button { white-space:normal; }

/* #38 actual care goal workspace: reuse B tokens and scope every new rule. */
.care-goals {max-width:900px;overflow-wrap:anywhere;}
.care-goals > h2 {margin-block:24px 12px;font-size:24px;}
.care-goals > h3 {margin-block:24px 16px;}
.care-goals > p {max-width:72ch;line-height:1.6;}
.care-goals form {display:grid;grid-template-columns:minmax(0,1fr);gap:10px;max-width:680px;}
.care-goals form label {display:block;margin-top:8px;font-weight:600;}
.care-goals input,.care-goals select,.care-goals textarea {width:100%;min-width:0;max-width:100%;box-sizing:border-box;font:inherit;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text-1);}
.care-goals textarea {min-height:100px;resize:vertical;}
.care-goals button {min-height:44px;max-width:100%;white-space:normal;margin:4px 8px 4px 0;}
.care-goals button:focus-visible,.care-goals input:focus-visible,.care-goals select:focus-visible,.care-goals textarea:focus-visible {outline:2px solid var(--accent);outline-offset:3px;}
.care-goals h2:focus,.care-goals h3:focus {outline:2px solid var(--accent);outline-offset:5px;}
.care-goals .journal-entry {margin-block:16px;padding:16px;border:1px solid var(--border);border-radius:8px;}
@media(max-width:600px){.care-goals button {width:100%;margin-inline:0;}.care-goals > h2 {font-size:22px;}}

.care-goals fieldset {border:0;margin:0;padding:0;min-inline-size:0;display:grid;gap:10px;}
/* #28 uses the approved B product tokens and stays local to its real surface. */
.photo-observations {max-width:960px; padding:24px 0; overflow-wrap:anywhere;}
.photo-observations h2 {font-size:24px; margin:20px 0 12px;}
.photo-observations h3 {font-size:19px; margin:24px 0 12px;}
.photo-observations p {line-height:1.6; margin:8px 0;}
.photo-observations button {margin:8px 12px 8px 0; max-width:100%; white-space:normal;}
.photo-observations label {display:flex; align-items:flex-start; gap:12px; padding:12px 0; line-height:1.6;}
.photo-observations input[type=checkbox] {width:20px; height:20px; margin-top:3px; flex:none;}
.photo-observations .po-source {padding:18px 0; border-block-end:1px solid var(--border);}
.photo-observations .po-source img {display:block; width:min(100%,420px); aspect-ratio:16/9; object-fit:contain; background:var(--surface-raised); border-radius:8px;}
.photo-observations .po-source h4 {margin:12px 0 8px; font-size:16px;}
.photo-observations [tabindex='-1']:focus {outline:2px solid var(--accent); outline-offset:5px;}
@media(max-width:600px){.photo-observations{padding:16px 0;}.photo-observations button{min-height:44px;}.photo-observations h2{font-size:21px;}}
.photo-observations button,#photo-observations-open {font:inherit; font-size:14px; font-weight:500; line-height:1.5; min-height:44px; padding:10px 16px; border:1px solid var(--border); border-radius:var(--r2); color:var(--text-1); background:var(--surface);}
.photo-observations button:hover,#photo-observations-open:hover {border-color:var(--accent);}
.photo-observations #po-confirm {background:var(--accent); border-color:var(--accent); color:#fff;}
.photo-observations button:disabled {opacity:.5; cursor:default;}
.photo-observations button:focus-visible,#photo-observations-open:focus-visible {outline:2px solid var(--accent); outline-offset:3px;}
/* Whole shared Records review follows the existing B product surface. */
.record-retention { min-width:0; padding-block:24px; border-block:1px solid var(--border); line-height:1.65; overflow-wrap:anywhere; }
.record-retention h2 { margin:0 0 12px; font-size:20px; line-height:1.4; }
.record-retention h3 { margin:0 0 8px; font-size:16px; line-height:1.5; }
.record-retention p { margin:12px 0; color:var(--text-2); }
.record-retention article { padding:24px 0; border-top:1px solid var(--border-soft); }
.record-retention dl { display:grid; grid-template-columns:minmax(120px,1fr) minmax(0,2fr); gap:8px 20px; margin:16px 0; font-size:14px; }
.record-retention dd { margin:0; }.record-retention dt,.record-retention .retention-meta { color:var(--text-3); font-size:13px; }
.record-retention details { margin:12px 0; }.record-retention summary { cursor:pointer; min-height:32px; }
.record-retention button { min-height:44px; padding:10px 16px; margin:4px 8px 4px 0; max-width:100%; white-space:normal; background:var(--surface); border:1px solid var(--border); border-radius:var(--r1); font:inherit; color:var(--text-1); }
.record-retention button:disabled { opacity:.5; cursor:not-allowed; }.record-retention :focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.record-retention #retention-confirm { color:var(--error-text,var(--text-1)); border-color:currentColor; }
.retention-entry { display:flex; align-items:center; justify-content:space-between; gap:20px; }.retention-entry h2 { font-size:16px; margin:0; }.retention-entry p { margin:4px 0; font-size:13px; }
@media(max-width:600px) { .retention-entry { display:block; }.record-retention dl { grid-template-columns:1fr; gap:4px; }.record-retention dd { margin-bottom:12px; }.retention-actions { display:grid; }.retention-actions button { margin-right:0; } }

/* Shared Records recovery: preserve the selected B navigation and native units. */
.record-search{padding-block:24px;border-block:1px solid var(--border);line-height:1.65;min-width:0;overflow-wrap:anywhere}
.record-search h2{font-size:20px;line-height:1.4;margin:0 0 12px}.record-search h3{font-size:16px;line-height:1.5}
.record-search p{margin:12px 0;color:var(--text-2)}.record-search article{padding:20px 0;border-top:1px solid var(--border-soft)}
.records-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:24px 0}.records-filters label{display:grid;gap:6px;font-size:14px;min-width:0}.records-filters input,.records-filters select{width:100%;min-width:0;min-height:44px;padding:8px;border:1px solid var(--border);border-radius:var(--r1);font:inherit;color:var(--text-1);background:var(--surface)}.records-filters input[type=checkbox]{width:20px;height:20px;min-height:20px}.records-filters label:has(input[type=checkbox]){display:flex;align-items:center;gap:10px}
.record-search button{min-height:44px;padding:10px 16px;margin:4px 8px 4px 0;max-width:100%;white-space:normal;background:var(--surface);border:1px solid var(--border);border-radius:var(--r1);font:inherit;color:var(--text-1)}.record-search button:disabled{opacity:.5;cursor:not-allowed}.record-search :focus-visible{outline:2px solid var(--accent);outline-offset:4px}.records-photo{max-width:100%;max-height:480px;object-fit:contain}
.record-table{border-block:1px solid var(--border-soft);padding:20px 0;margin:16px 0;min-width:0}.record-table-actions{display:flex;flex-wrap:wrap;gap:8px}.record-table-actions button{margin:0}.record-table-columns{margin:16px 0}.record-table-literal{white-space:pre-wrap;overflow-wrap:anywhere}.record-search .record-table-select{display:flex;align-items:center;gap:10px;min-height:44px;max-width:100%;margin-block:12px;cursor:pointer}.record-search .record-table-select input[type=checkbox]{flex:0 0 20px;width:20px;height:20px;min-height:20px;margin:0;padding:0}
@media(max-width:600px){.records-filters{grid-template-columns:1fr}}

/* Read-only rule target intervals: wrap timestamps, including on narrow screens. */
.rule-plan p { margin: 12px 0; overflow-wrap: anywhere; }
.rule-plan-intervals { width: 100%; border-collapse: collapse; table-layout: fixed; margin-top: 20px; font-size: 14px; line-height: 1.6; }
.rule-plan-intervals caption { text-align: left; font-weight: 600; padding-bottom: 8px; }
.rule-plan-intervals th, .rule-plan-intervals td { padding: 10px 8px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.rule-plan-intervals th:last-child, .rule-plan-intervals td:last-child { width: 24%; }
.rule-plan .rules-button { white-space: normal; }
@media(max-width:767px) { .rule-plan-intervals { font-size: 13px; } .rule-plan-intervals th, .rule-plan-intervals td { padding: 8px 4px; } }
/* Unsent local rules stay a separate, explicitly selected content comparison. */
.local-rule-draft { margin-top: 12px; }
.local-rule-draft p { margin-block: 8px; overflow-wrap: anywhere; }
.local-rule-comparison { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-block:16px; }
.local-rule-comparison > div { border-left:2px solid var(--line); padding-left:12px; }
.local-rule-draft dl { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px 12px; }
.local-rule-draft dd { margin:0; overflow-wrap:anywhere; }
@media (max-width:600px) { .local-rule-comparison { grid-template-columns:minmax(0,1fr); } }
.readings-diagnostics{min-width:0;overflow-wrap:anywhere}
.readings-diagnostics label{display:block;margin:var(--space-3,12px) 0}
.readings-diagnostics select{display:block;width:100%;max-width:100%;margin-top:6px}
.readings-diagnostics .readings-range{margin:4px 6px 8px 0}

/* #35 selected-curve review only; preserve exact values inside its own scroll area. */
.readings-export { min-width: 0; }
.readings-export h2 { margin-bottom: 16px; }
.readings-export p { margin: 12px 0; overflow-wrap: anywhere; }
.readings-export fieldset { min-width: 0; padding: 16px; border: 1px solid var(--border-soft); border-radius: var(--r2); }
.readings-export legend { padding: 0 6px; font-weight: 600; }
.readings-export label { display: block; min-height: 44px; padding: 8px 0; overflow-wrap: anywhere; }
.readings-export input[type=radio] { width: 20px; height: 20px; min-height: 20px; margin-right: 8px; vertical-align: middle; }
.readings-export-table-region { min-width: 0; max-width: 100%; margin: 20px 0; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; border: 1px solid var(--border-soft); border-radius: var(--r2); }
.readings-export-table-region:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.readings-export-table-region table { width: max-content; min-width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.6; font-variant-numeric: tabular-nums; }
.readings-export-table-region caption { padding: 12px 16px; text-align: left; font-weight: 600; }
.readings-export-table-region th, .readings-export-table-region td { padding: 12px 16px; border-top: 1px solid var(--border-soft); text-align: right; white-space: nowrap; }
.readings-export-table-region th { background: var(--surface-raised); color: var(--text-2); font-weight: 600; }
.readings-export-table-region :is(th,td):nth-child(-n+2) { text-align: left; }
.readings-export-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.readings-export-actions .readings-range { min-height: 44px; padding: 10px 16px; font-size: 14px; line-height: 1.5; }
.readings-export .readings-range:disabled { opacity: .6; }
@media (max-width: 767px) { .readings-export-actions .readings-range { font-size: 15px; flex: 1 1 auto; } }

/* #24 source facts stay in the existing Vico source flow. */
#page-vico .vc-probe-applicability-entry{border-top:1px solid var(--border,#e3e8e5);margin-top:1rem;padding-top:1rem}
#page-vico .vc-probe-applicability{border-top:1px solid var(--border,#e3e8e5);margin-top:1rem;padding-top:1rem;min-width:0}
#page-vico .vc-probe-applicability h5,#page-vico .vc-probe-applicability h6{font-size:1rem;line-height:1.4;margin:1rem 0 .5rem}
#page-vico .vc-probe-applicability h5:focus-visible{outline:2px solid currentColor;outline-offset:4px}
#page-vico .vc-probe-applicability dl{display:block;font-size:.875rem;margin:.75rem 0}
#page-vico .vc-probe-applicability dl>div{display:grid;grid-template-columns:minmax(150px,.85fr) minmax(0,1.8fr);gap:.75rem;margin-bottom:.65rem}
#page-vico .vc-probe-applicability dt{font-weight:600}
#page-vico .vc-probe-applicability dd{margin:0;white-space:pre-wrap}
#page-vico .vc-probe-applicability code{display:block;font-size:.82rem;overflow-wrap:anywhere;word-break:break-word}
#page-vico .vc-probe-applicability p,#page-vico .vc-probe-applicability li,#page-vico .vc-probe-applicability dd{overflow-wrap:anywhere}
#page-vico .vc-probe-plants{padding-left:1.25rem}
#page-vico .vc-probe-plants li{margin-bottom:.75rem}
#page-vico .vc-probe-status{font-weight:600}
#page-vico .vc-probe-identifiers{padding:.75rem 0}
#page-vico .vc-probe-identifiers summary{cursor:pointer;min-height:44px;box-sizing:border-box;padding:.5rem 0}
#page-vico .vc-probe-identifiers summary:focus-visible{outline:2px solid currentColor;outline-offset:4px}
#page-vico .vc-probe-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
#page-vico .vc-probe-actions .vc-secondary{width:auto;flex:1 1 14rem;max-width:100%;white-space:normal}
@media(max-width:640px){#page-vico .vc-probe-applicability dl>div{display:block}#page-vico .vc-probe-applicability dt{margin-bottom:.2rem}}

.care-workflow { max-width: 980px; padding-block: 20px; }
.care-workflow h2 { margin-block: 20px 12px; }
.care-workflow-item { border-top: 1px solid var(--border, #d9ddd7); padding-block: 18px; overflow-wrap: anywhere; }
.care-workflow-item h3, .care-workflow-item h4 { margin-block: 0 8px; }
.care-workflow-check { display: flex; align-items: center; gap: 12px; min-height: 44px; padding-block: 5px; }
.care-workflow-check input { flex: 0 0 20px; width: 20px; height: 20px; }
.care-workflow .rules-button { min-height: 44px; margin: 5px 8px 5px 0; }
.care-workflow label:not(.care-workflow-check) { display: block; margin-block: 12px 6px; }
.task-followup :is(textarea,input[type=date]) { display:block; box-sizing:border-box; width:100%; max-width:680px; min-height:44px; padding:10px 12px; border:1px solid var(--border); border-radius:var(--r1); color:var(--text-1); background:var(--surface); font:inherit; font-size:16px; }
.task-followup textarea { min-height:96px; resize:vertical; }
.task-followup input[type=date] { max-width:240px; }
.original-ec-context .ec-workspace > .section-head > [data-ec-action=open] { display:none; }
.care-workflow input[type=text], .care-workflow textarea { display: block; box-sizing: border-box; width: 100%; max-width: 680px; min-height: 44px; padding: 10px; font: inherit; }
.care-workflow :focus-visible { outline: 2px solid var(--text-1, #234b3c); outline-offset: 3px; }
.care-workflow-snapshot { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
@media (max-width: 600px) { .care-workflow-snapshot { grid-template-columns: 1fr; } }

.care-workflow-entries{display:flex;flex-wrap:wrap;gap:8px;padding:12px 28px;border-bottom:1px solid var(--border)}
.next-care-workflow select,.next-care-workflow input{box-sizing:border-box;max-width:100%;min-height:44px;font:inherit;padding:8px}.next-care-workflow select{width:100%;max-width:680px}.next-care-workflow table{width:100%;border-collapse:collapse;font-size:13px}.next-care-workflow td,.next-care-workflow th{text-align:left;padding:10px 6px;border-bottom:1px solid var(--border);overflow-wrap:anywhere}.next-care-workflow pre,.next-care-workflow blockquote{white-space:pre-wrap;overflow-wrap:anywhere}.next-care-workflow time{font-variant-numeric:tabular-nums}.next-care-workflow code{overflow-wrap:anywhere}@media(max-width:600px){.care-workflow-entries{padding:12px}.next-care-workflow table{font-size:12px}}

.reading-event-links{display:flex;flex-wrap:wrap;gap:8px;margin-block:12px}.reading-event-links p{width:100%;margin:0;font-size:12px;color:var(--text-2)}.reading-event-links button{min-height:44px;max-width:100%;white-space:normal;text-align:left;overflow-wrap:anywhere}.reading-event-links time{font-size:12px}

/* Private settings use the adopted workstation's plain section rhythm. */
.account-settings-entry{padding:20px 0 24px;border-bottom:1px solid var(--border,#ddd);margin-bottom:24px}
.account-settings{max-width:940px;min-width:0}.account-settings-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:12px}.account-settings-heading h2{margin:0 0 8px}.account-settings-heading p{color:var(--text-secondary,#666);margin:0}
.account-settings section{padding:22px 0;border-bottom:1px solid var(--border,#ddd)}.account-settings section h3{font-size:17px;margin:0 0 12px}.account-settings p{line-height:1.55;max-width:76ch;overflow-wrap:anywhere}.account-settings .rules-button{margin:4px 8px 4px 0;white-space:normal}.account-settings label{display:flex;align-items:center;gap:10px;min-height:38px;line-height:1.5}.account-settings input:not([type=checkbox]),.account-settings select{padding:9px 11px;border:1px solid var(--border,#ccc);border-radius:5px;min-width:0;max-width:100%;background:#fff;color:inherit;font:inherit}.account-settings label input[type=checkbox]{width:17px;height:17px;flex:0 0 17px;accent-color:var(--accent,#436b43)}.account-setting-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:600px;margin:14px 0}.account-setting-grid label{display:flex;flex-direction:column;align-items:stretch;gap:6px}.account-reminder-fields{border:0;padding:16px 0;margin:12px 0}.account-reminder-fields legend{font-weight:600;padding:0}.account-review{padding:16px;border-left:3px solid var(--accent,#436b43);background:var(--surface-muted,#f5f6f3);margin-top:16px}.account-review h4{margin:0 0 10px;font-size:16px}.account-scope{font-weight:600}.account-settings [role=alert]{color:var(--danger,#9d3030)}
@media(max-width:640px){.account-settings-heading{flex-direction:column;gap:10px}.account-setting-grid{grid-template-columns:1fr}.account-settings .rules-button{min-height:40px}.account-settings section{padding:18px 0}.account-settings select{width:100%}}

.account-settings .rules-button:disabled{background:var(--surface-muted,#f1f1f0);color:var(--text-secondary,#777);border-color:var(--border,#ddd);box-shadow:none;cursor:not-allowed;opacity:.65}

.account-reminder-history{margin-top:18px}.account-reminder-history h4{font-size:15px;margin:0 0 8px}.account-reminder-history h5{font-size:15px;margin:0 0 8px}.account-preview,.account-history-detail{border-left:2px solid var(--border,#ddd);padding:12px 16px;margin:12px 0}.account-history-list{list-style:none;padding:0;margin:12px 0}.account-history-list li{padding:10px 0;border-bottom:1px solid var(--border,#ddd)}

/* One personal language control in the adopted App, including signed-out forms. */
.workspace-topbar{grid-template-columns:232px minmax(0,1fr) auto auto}
.language-control{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;max-width:235px;font-size:12px;color:var(--text-2)}
.language-control label{font-weight:600}.language-control select,.language-control button{min-height:40px;border:1px solid var(--border);border-radius:var(--r1);background:var(--surface);color:var(--text-1);font:inherit;padding:6px 10px;max-width:100%}
.language-control select{min-width:112px}.language-control :is(select,button):focus-visible{outline:2px solid var(--accent);outline-offset:2px}.language-control #language-status{width:100%;line-height:1.5;overflow-wrap:anywhere}.language-control #language-status:empty{display:none}.language-control [role=alert]{color:var(--danger,var(--text-1))}
.auth-language{position:absolute;top:18px;left:24px;right:24px;display:flex;justify-content:flex-end;z-index:3}.auth-language .language-control{max-width:320px}
@media(min-width:768px) and (max-width:1100px){.workspace-topbar{grid-template-columns:200px minmax(0,1fr) auto auto}.workspace-topbar .language-control{max-width:140px}.workspace-topbar .language-control label{width:100%}}
@media(max-width:767px){.workspace-topbar{grid-template-columns:minmax(0,1fr) auto}.workspace-topbar>.language-control{grid-column:1/-1;grid-row:3;justify-content:flex-end;max-width:none;padding:4px 16px 10px}.workspace-topbar>.language-control #language-status{max-width:100%;text-align:right}.auth-language{left:16px;right:16px;top:12px}.language-control select,.language-control button{min-height:44px}}

.account-care-history{border-top:1px solid var(--border);margin-top:24px;padding-top:20px}.account-care-history-list{max-height:20rem;overflow:auto;scrollbar-gutter:stable}.account-care-history-list li[aria-current=true]{border-left:3px solid var(--accent);padding-left:12px}.account-care-history h6{font-size:14px;font-weight:600;line-height:1.5;margin:18px 0 8px}

.account-care-assessment,.account-original-observations,.account-legacy-care{margin-bottom:22px}.account-legacy-choice{display:flex;align-items:flex-start;gap:10px;padding:10px 0}.account-legacy-choice input{flex:none;margin-top:4px}.account-care-binding select,.account-original-observations textarea{width:100%;max-width:40rem}.account-original-observations textarea{min-height:96px;font:inherit;padding:10px;border:1px solid var(--border);border-radius:6px;background:var(--surface)}