* { box-sizing: border-box; }

    :root {
      --page-bg: #fdfdfd;
      --surface: #ffffff;
      --sidebar-bg: #ffffff;
      --reference-bg: #f5f6f8;
      --text: #263445;
      --text-strong: #17324d;
      --text-sub: #667085;
      --line: #d7dce3;
      --line-soft: #e8ebef;

      --blue: #2f80ed;
      --blue-dark: #1769aa;
      --blue-soft: #b8d8f8;
      --blue-soft-hover: #a8cff5;
      --blue-pale: #eef6ff;

      /* 現在選択中：淡いミントグリーン */
      --active-bg: #e7f4ea;
      --active-border: #9cc9a8;
      --active-text: #2f6f43;

      --report-heading-bg: #c2e4ff;
      --section-heading-bg: #edf1f5;
      --label-bg: #f6f7f9;

      --danger-bg: #ffe4e4;
      --danger-text: #a61b1b;
      --warning-bg: #fff1cf;
      --warning-text: #8a5600;
      --success-bg: #e3f5ea;
      --success-text: #176d45;
      --neutral-bg: #edf1f5;
      --neutral-text: #475467;

      --sidebar-w: 270px;
      --reports-rail-w: 310px;
      --gap: 18px;
      --work-nav-h: 64px;
      --mobile-nav-h: 64px;
      --card-radius: 10px;
      --control-radius: 7px;
      --modal-radius: 16px;

      --report-body-font: 14px;
      --major-heading-size: 22px;
      --section-heading-size: 15px;
    }

    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      overflow: hidden;
    }

    body {
      background: var(--page-bg);
      color: var(--text);
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      font-size: 15px;
    }

    button,
    input,
    select,
    textarea {
      font: inherit;
    }

    button {
      -webkit-tap-highlight-color: transparent;
    }

    .hidden { display: none !important; }

    /* =========================================================
       アプリ全体
       ========================================================= */

    .app {
      width: 100%;
      height: 100dvh;
      display: grid;
      grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
      overflow: hidden;
      background: var(--page-bg);
    }

    /* =========================================================
       PC 左レール（一覧・案件共通）
       ========================================================= */

    .sidebar {
      position: relative;
      z-index: 20;
      min-width: 0;
      height: 100%;
      overflow: hidden;
      padding: 18px 14px;
      display: flex;
      flex-direction: column;
      background: var(--sidebar-bg);
      border-right: 3px solid var(--line);
      text-align: center;
    }

    .sidebar-brand {
      flex: 0 0 auto;
      padding-bottom: 15px;
    }

    .sidebar-app-title {
      color: var(--text-strong);
      font-size: 18px;
      font-weight: 850;
      line-height: 1.3;
    }

    .sidebar-user {
      margin-top: 4px;
      color: var(--text-sub);
      font-size: 13px;
    }

    .prototype-role {
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      color: #667085;
      font-size: 12px;
    }

    .prototype-role select {
      min-width: 110px;
      height: 34px;
      border: 1px solid #cbd3dd;
      border-radius: 6px;
      background: #fff;
      color: #344054;
      font-weight: 700;
    }

    .sidebar-case {
      flex: 0 0 auto;
      padding: 25px 0 14px;
      border-top: 3px solid #dde2e8;
    }

    .case-type-large {
      min-width: 90px;
      min-height: 34px;
      padding: 0 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      font-size: 14px;
      font-weight: 850;
    }

    .case-type-large.accident {
      background: var(--danger-bg);
      color: var(--danger-text);
    }

    .case-type-large.hiyari {
      background: #e3efff;
      color: #175ea8;
    }

    .sidebar-client {
      margin-top: 14px;
      color: var(--text-strong);
      font-size: 21px;
      font-weight: 850;
      line-height: 1.35;
    }

    .sidebar-category {
      margin-top: 7px;
      color: #556273;
      font-size: 20px;
      line-height: 1.35;
    }

    .sidebar-state {
      margin-top: 12px;
    }

    .sidebar-case-actions {
      margin-top: 14px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .sidebar-divider {
      flex: 0 0 auto;
      margin: 2px 0 25px;
      border-top: 3px solid #d5dbe3;
    }

    .sidebar-global {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .side-button {
      width: 100%;
      min-height: 42px;
      padding: 0 13px;
      border: 1px solid #090908;
      border-radius: 7px;
      background: #fcf499;
      color: #2a2a2a;
      text-align: center;
      cursor: pointer;
      font-weight: 850;
    }

    .side-button:hover:not(:disabled) {
      background: #f8ed7f;
      border-color: #090908;
      color: #2a2a2a;
    }

    .side-button.active {
      background: #f5e96f;
      border-color: #090908;
      color: #2a2a2a;
    }

    .side-button.primary {
      border-color: var(--blue);
      background: var(--blue);
      color: #fff;
    }

    .side-button.primary:hover:not(:disabled) {
      background: #2676df;
      border-color: #2676df;
    }

    .side-button:disabled {
      border-color: #d6dce3;
      background: #eceff2;
      color: #9ba4af;
      cursor: not-allowed;
    }

    /* =========================================================
       右側アプリ領域
       ========================================================= */

    .app-main {
      min-width: 0;
      height: 100%;
      overflow: hidden;
      background: #fff;
    }

    /* =========================================================
       一覧ページ
       ========================================================= */

    .list-page {
      width: 100%;
      height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 24px 28px 34px;
      scrollbar-width: thin;
      scrollbar-color: #aeb6bf transparent;
    }

    .list-page::-webkit-scrollbar,
    .scroll-pane::-webkit-scrollbar,
    .reports-rail-list::-webkit-scrollbar,
    .reference-body::-webkit-scrollbar,
    .modal-body::-webkit-scrollbar {
      width: 9px;
    }

    .list-page::-webkit-scrollbar-thumb,
    .scroll-pane::-webkit-scrollbar-thumb,
    .reports-rail-list::-webkit-scrollbar-thumb,
    .reference-body::-webkit-scrollbar-thumb,
    .modal-body::-webkit-scrollbar-thumb {
      background: #aeb6bf;
      border: 2px solid transparent;
      background-clip: padding-box;
      border-radius: 999px;
    }

    .list-page::-webkit-scrollbar-button,
    .scroll-pane::-webkit-scrollbar-button,
    .reports-rail-list::-webkit-scrollbar-button,
    .reference-body::-webkit-scrollbar-button,
    .modal-body::-webkit-scrollbar-button {
      width: 0;
      height: 0;
      display: none;
    }

    .list-main {
      width: min(880px, 100%);
      margin: 0;
    }

    .list-toolbar {
      margin-bottom: 14px;
      display: flex;
      align-items: flex-end;
      justify-content: flex-start;
      gap: 14px;
    }

    .list-title {
      margin: 0;
      color: var(--text-strong);
      font-size: 16px;
      font-weight: 850;
    }

    .list-sub {
      margin-top: 4px;
      color: var(--text-sub);
      font-size: 13px;
    }

    .filter-button {
      min-height: 40px;
      padding: 0 14px;
      border: 1px solid #91bce8;
      border-radius: 7px;
      background: #fff;
      color: #245e98;
      cursor: pointer;
      font-weight: 850;
    }

    .filter-button.active {
      border-color: var(--blue);
      background: #dcecff;
    }

    .mobile-filter-button {
      display: none;
    }

    .report-list {
      display: flex;
      flex-direction: column;
      gap: 11px;
    }

    .report-card {
      width: min(760px, 100%);
      padding: 16px 17px;
      border: 1px solid var(--line);
      border-radius: 11px;
      background: #fff;
      cursor: pointer;
      transition: border-color .13s ease, background .13s ease;
    }

    .report-card:hover {
      border-color: #91bce8;
      background: #fcfdff;
    }

    .report-card.accident-card {
      background: #fff9f9;
    }

    .report-card.hiyari-card {
      background: #f9fbff;
    }

    .report-card.accident-card:hover {
      background: #fff4f4;
    }

    .report-card.hiyari-card:hover {
      background: #f4f8ff;
    }

    .card-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 9px;
    }

    .card-title {
      margin: 0 0 9px;
      color: var(--text-strong);
      font-size: 18px;
      font-weight: 850;
      line-height: 1.4;
    }

    .card-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 5px 16px;
      color: var(--text-sub);
      font-size: 13px;
    }

    /* =========================================================
       バッジ
       ========================================================= */

    .badge,
    .mini-status {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      font-weight: 850;
    }

    .badge {
      min-height: 27px;
      padding: 0 9px;
      font-size: 12px;
    }

    .badge-accident { background: var(--danger-bg); color: var(--danger-text); }
    .badge-hiyari { background: #e3efff; color: #175ea8; }
    .badge-neutral { background: var(--neutral-bg); color: var(--neutral-text); }
    .badge-warning { background: var(--warning-bg); color: var(--warning-text); }
    .badge-success { background: var(--success-bg); color: var(--success-text); }

    /* =========================================================
       案件ページ：上部5ボタン
       ========================================================= */

    .case-page {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      background: #fff;
    }

    .work-nav {
      flex: 0 0 var(--work-nav-h);
      min-height: var(--work-nav-h);
      padding: 10px 18px;
      display: flex;
      align-items: center;
      gap: 8px;
      border-bottom: 1px solid var(--line);
      background: #fff;
    }

    .work-button {
      min-width: 125px;
      min-height: 43px;
      padding: 0 16px;
      border: 1px solid #86b8e9;
      border-radius: 6px;
      background: var(--blue-soft);
      color: #24435f;
      cursor: pointer;
      font-weight: 850;
      font-size: 15px;
    }

    .work-button:hover:not(.active):not(:disabled) {
      background: var(--blue-soft-hover);
    }

    .work-button.active {
      border-color: var(--blue);
      background: var(--blue);
      color: #fff;
    }

    .work-button:disabled {
      border-color: #c9cfd6;
      background: #e3e7eb;
      color: #9aa4b2;
      cursor: not-allowed;
    }

    /* =========================================================
       案件ページ：コンテンツグリッド
       ========================================================= */

    .case-content {
      flex: 1 1 auto;
      min-height: 0;
      overflow: hidden;
      padding: 18px;
      background: #fff;
    }

    .case-grid {
      width: 100%;
      height: 100%;
      min-height: 0;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: var(--gap);
      overflow: hidden;
    }

    .case-grid.with-rail {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .scroll-pane {
      min-width: 0;
      min-height: 0;
      height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      padding-right: 4px;
      scrollbar-width: thin;
      scrollbar-color: #aeb6bf transparent;
      overscroll-behavior: contain;
    }

    /* =========================================================
       報告書の見出し・BOX
       ========================================================= */

    .stack {
      display: flex;
      flex-direction: column;
      gap: 11px;
    }

    .major-heading {
      min-height: 60px;
      padding: 12px 17px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      border: 1px solid #b7d7ef;
      border-radius: 4px;
      background: var(--report-heading-bg);
      color: var(--text-strong);
      font-size: var(--major-heading-size);
      font-weight: 550;
    }

    /* 報告書の大見出し内に、ご利用者名を高さを増やさず表示 */
    .major-heading-client {
      flex: 0 0 auto;
      color: #536171;
      font-size: 14px;
      font-weight: 700;
      line-height: 1.2;
      white-space: nowrap;
    }

    .detail-box {
      width: 100%;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--card-radius);
      background: #fff;
    }

    .detail-title {
      padding: 9px 12px;
      border-bottom: 1px solid #d8dee6;
      background: var(--section-heading-bg);
      color: var(--text-strong);
      font-size: var(--section-heading-size);
      font-weight: 500;
    }

    .detail-body {
      padding: 12px 13px;
      background: #fff;
      color: #344054;
      font-size: var(--report-body-font);
      line-height: 1.75;
      overflow-wrap: anywhere;
    }

    .basic-row {
      min-height: 43px;
      display: grid;
      grid-template-columns: 112px minmax(0, 1fr);
      border-bottom: 1px solid var(--line-soft);
    }

    .basic-row:last-child { border-bottom: 0; }

    .basic-label,
    .basic-value {
      padding: 9px 11px;
      display: flex;
      align-items: center;
      font-size: var(--report-body-font);
      line-height: 1.6;
    }

    .basic-label {
      background: var(--label-bg);
      color: #596675;
      font-weight: 800;
    }

    .basic-value {
      min-width: 0;
      background: #fff;
      color: #344054;
      overflow-wrap: anywhere;
    }

    /* 職員事故・交通事故・労災の報告書は、項目名も本文と同じ通常の太さで表示 */
    .restricted-accident-detail-box .basic-label {
      font-weight: 400;
    }

    .history-toggle {
      width: 100%;
      min-height: 42px;
      padding: 0 13px;
      border: 1px solid var(--line);
      border-radius: 9px;
      background: var(--section-heading-bg);
      color: var(--text-strong);
      text-align: left;
      cursor: pointer;
      font-weight: 500;
    }

    .history-panel {
      display: none;
      margin-top: -2px;
      padding: 12px 13px;
      border: 1px solid var(--line);
      border-top: 0;
      border-radius: 0 0 9px 9px;
      background: #fff;
      color: #5d6978;
      font-size: 14px;
      line-height: 1.7;
    }

    .history-block.open .history-panel { display: block; }

    /* =========================================================
       右分析カラム
       ========================================================= */

    .analysis-stack .detail-box + .detail-box {
      margin-top: 0;
    }

    /* =========================================================
       最右：提出された報告書
       ========================================================= */

    .desktop-reports-rail {
      min-width: 0;
      min-height: 0;
      height: 100%;
      display: none;
      flex-direction: column;
      overflow: hidden;
      padding: 18px 14px;
      background: #fff;
      border-left: 3px solid var(--line);
    }

    .reports-rail-title {
      flex: 0 0 auto;
      padding: 0 2px 13px;
      color: var(--text-strong);
      font-size: 17px;
      font-weight: 850;
      line-height: 1.35;
    }

    .reports-rail-list {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      overflow-x: hidden;
      padding-right: 4px;
      scrollbar-width: thin;
      scrollbar-color: #aeb6bf transparent;
    }

    .rail-card {
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 9px;
      background: #fff;
      cursor: pointer;
    }

    .rail-card + .rail-card { margin-top: 15px; }
    .rail-card:hover { border-color: #91bce8; background: #f9fcff; }

    .rail-card.accident-card { background: #fff9f9; }
    .rail-card.hiyari-card { background: #f9fbff; }
    .rail-card.accident-card:hover { background: #fff4f4; }
    .rail-card.hiyari-card:hover { background: #f4f8ff; }

    .rail-card-title {
      margin-top: 6px;
      color: var(--text-strong);
      font-size: 14px;
      font-weight: 850;
      line-height: 1.45;
    }

    .rail-card-meta {
      margin-top: 5px;
      display: flex;
      flex-wrap: wrap;
      gap: 4px 10px;
      color: var(--text-sub);
      font-size: 12px;
      line-height: 1.5;
    }

    /* =========================================================
       編集タブ
       ========================================================= */

    .edit-view {
      width: min(900px, 100%);
      height: 100%;
      margin: 0;
      overflow-y: auto;
      padding-right: 4px;
    }

    .edit-heading {
      margin-bottom: 15px;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
    }

    .edit-title {
      margin: 0;
      color: var(--text-strong);
      font-size: 22px;
      font-weight: 850;
    }

    .edit-title-row {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px 10px;
    }

    .edit-client-chip {
      display: inline-flex;
      align-items: center;
      min-height: 27px;
      padding: 0 9px;
      border-radius: 999px;
      background: #f1f4f7;
      color: #536171;
      font-size: 14px;
      font-weight: 700;
      line-height: 1.2;
      white-space: nowrap;
    }

    .edit-sub {
      margin-top: 4px;
      color: var(--text-sub);
      font-size: 13px;
    }

    .reference-button {
      min-height: 39px;
      padding: 0 14px;
      border: 1px solid #91bce8;
      border-radius: 7px;
      background: #fff;
      color: #245e98;
      cursor: pointer;
      font-weight: 850;
    }

    .form-card {
      padding: 15px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #fff;
    }

    .form-card + .form-card { margin-top: 11px; }

    .form-title {
      margin-bottom: 12px;
      color: var(--text-strong);
      font-size: 16px;
      font-weight: 850;
    }

    .field + .field { margin-top: 12px; }

    .field-label {
      display: block;
      margin-bottom: 5px;
      color: #344054;
      font-size: 14px;
      font-weight: 800;
      line-height: 1.55;
    }

    .control,
    .textarea {
      width: 100%;
      border: 1px solid #cdd4dd;
      border-radius: 7px;
      background: #fff;
      color: #263445;
      outline: none;
      font-size: 14px;
    }

    .control { height: 40px; padding: 0 10px; }
    .textarea { min-height: 110px; padding: 10px; resize: vertical; line-height: 1.7; }

    .form-actions {
      margin-top: 14px;
      display: flex;
      justify-content: flex-end;
      gap: 8px;
    }

    .action-button {
      min-height: 40px;
      padding: 0 16px;
      border: 0;
      border-radius: 7px;
      cursor: pointer;
      font-weight: 850;
    }

    .action-button.secondary { background: #e9edf2; color: #475467; }
    .action-button.primary { background: var(--blue); color: #fff; }
    .action-button.warning { background: #fff1cf; color: #8a5600; border: 1px solid #e6c97d; }

    /* =========================================================
       参照パネル（サ責・管理者編集時）
       ========================================================= */

    .edit-layout {
      width: 100%;
      height: 100%;
      min-height: 0;
      display: flex;
      overflow: hidden;
      gap: 0;
    }

    .edit-layout.reference-open {
      gap: 16px;
    }

    .reference-pane {
      flex: 0 0 0;
      width: 0;
      min-width: 0;
      height: 100%;
      overflow: hidden;
      background: var(--reference-bg);
      border-right: 0 solid var(--line);
      transition: flex-basis .15s ease, width .15s ease, border-width .15s ease;
    }

    .edit-layout.reference-open .reference-pane {
      flex-basis: 42%;
      width: 42%;
      border-right-width: 1px;
    }

    .edit-main {
      flex: 1 1 auto;
      min-width: 0;
      height: 100%;
      overflow-y: auto;
      padding: 0 0 0 0;
    }

    .reference-shell {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      background: var(--reference-bg);
    }

    .reference-header {
      flex: 0 0 auto;
      min-height: 56px;
      padding: 10px 13px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #d4dae1;
      background: #f1f3f5;
    }

    .reference-heading {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .reference-title {
      color: var(--text-strong);
      font-size: 17px;
      font-weight: 850;
    }

    .readonly-badge {
      min-height: 23px;
      padding: 0 8px;
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      background: #e3e7eb;
      color: #596675;
      font-size: 11px;
      font-weight: 850;
    }

    .reference-close {
      width: 34px;
      height: 34px;
      border: 0;
      border-radius: 7px;
      background: transparent;
      color: #667085;
      cursor: pointer;
      font-size: 22px;
    }

    .reference-tabs {
      flex: 0 0 auto;
      padding: 9px 12px 0;
      display: flex;
      gap: 4px;
      border-bottom: 1px solid #bac8d6;
      background: var(--reference-bg);
    }

    .reference-tab {
      min-width: 86px;
      height: 35px;
      padding: 0 10px;
      border: 1px solid #b6c5d3;
      border-bottom: 0;
      border-radius: 4px 4px 0 0;
      background: #e1e6eb;
      color: #536273;
      cursor: pointer;
      font-size: 13px;
      font-weight: 800;
    }

    .reference-tab.active {
      margin-bottom: -1px;
      background: var(--reference-bg);
      color: #263b50;
    }

    .reference-body {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      padding: 12px;
      scrollbar-width: thin;
      scrollbar-color: #aeb6bf transparent;
    }

    .reference-card {
      overflow: hidden;
      border: 1px solid #d6dbe1;
      border-radius: 9px;
      background: #f9fafb;
    }

    .reference-card + .reference-card { margin-top: 8px; }

    .reference-card-title {
      padding: 8px 10px;
      border-bottom: 1px solid #dfe3e7;
      background: #eef0f2;
      color: #53606e;
      font-size: 12px;
      font-weight: 850;
    }

    .reference-card-body {
      padding: 10px;
      color: #344054;
      font-size: 13px;
      line-height: 1.7;
      user-select: text;
    }

    /* =========================================================
       モーダル
       ========================================================= */

    .modal-overlay {
      position: fixed;
      inset: 0;
      z-index: 500;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 18px;
      background: rgba(15,23,42,.50);
    }

    .modal-overlay.open { display: flex; }

    .modal {
      width: min(620px, 100%);
      max-height: 84dvh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border: 1px solid #d5dbe3;
      border-radius: var(--modal-radius);
      background: #fff;
    }

    .modal.small { width: min(500px, 100%); }

    .modal-header {
      flex: 0 0 auto;
      min-height: 56px;
      padding: 12px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid var(--line);
      background: #fff;
    }

    .modal-title {
      color: var(--text-strong);
      font-size: 18px;
      font-weight: 850;
    }

    .modal-close {
      width: 34px;
      height: 34px;
      border: 0;
      border-radius: 7px;
      background: transparent;
      color: #667085;
      cursor: pointer;
      font-size: 22px;
    }

    .modal-body {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 15px 18px 18px 15px;
      scrollbar-width: thin;
      scrollbar-color: #aeb6bf transparent;
    }

    .modal-actions {
      flex: 0 0 auto;
      padding: 11px 16px 16px;
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      border-top: 1px solid var(--line-soft);
      background: #fff;
    }

    /* 共有状態 */
    .share-section {
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 11px;
      background: #fff;
    }

    .share-section + .share-section { margin-top: 11px; }

    .share-section-title {
      padding: 9px 12px;
      border-bottom: 1px solid var(--line-soft);
      background: #f8f9fa;
      color: #344054;
      font-weight: 850;
    }

    .share-report-row {
      min-height: 43px;
      padding: 8px 12px;
      display: grid;
      grid-template-columns: minmax(0, 210px) max-content;
      align-items: center;
      gap: 10px;
      border-bottom: 1px solid var(--line-soft);
    }

    .share-report-row:last-child { border-bottom: 0; }

    .share-report-row > div:first-child {
      min-width: 0;
      overflow-wrap: anywhere;
    }

    .share-report-row .mini-status {
      justify-self: start;
      max-width: none;
    }

    .staff-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .staff-item {
      min-height: 43px;
      padding: 8px 12px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) max-content;
      align-items: center;
      gap: 10px;
      border-bottom: 1px solid var(--line-soft);
    }

    .staff-item:nth-child(even) { border-left: 0; }
    .staff-item:nth-child(odd) { border-right: 1px solid var(--line-soft); }
    .staff-item:nth-child(odd):nth-last-child(-n + 2),
    .staff-item:last-child:nth-child(even) { border-bottom: 0; }

    .mini-status {
      min-width: 46px;
      min-height: 23px;
      padding: 0 7px;
      font-size: 11px;
      white-space: nowrap;
      word-break: keep-all;
      flex-shrink: 0;
    }

    .status-done,
    .status-confirm { background: #e3f5ea; color: #176d45; }
    .status-unfinished { background: #fff1cf; color: #8a5600; }
    .status-notneeded,
    .status-unread { background: #f1f2f4; color: #697586; }
    .status-read { background: #e8f1fb; color: #28649b; }

    .unconfirmed-item {
      width: 100%;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 9px;
      background: #fff;
      text-align: left;
      cursor: pointer;
    }

    .unconfirmed-item + .unconfirmed-item { margin-top: 8px; }

    .unconfirmed-title {
      margin-top: 6px;
      color: var(--text-strong);
      font-weight: 850;
    }

    .unconfirmed-date {
      margin-top: 3px;
      color: var(--text-sub);
      font-size: 12px;
    }

    .create-choice {
      width: 100%;
      min-height: 50px;
      border: 1px solid #9fc7ef;
      border-radius: 9px;
      background: #f7fbff;
      color: #245e98;
      cursor: pointer;
      font-weight: 850;
    }

    /* 事故：薄い赤系で視覚的に区別 */
    .create-choice.accident {
      border-color: #e8b9b9;
      background: #fff1f1;
      color: #9f2f2f;
    }

    .create-choice.accident:hover {
      background: #ffe9e9;
      border-color: #dda6a6;
    }

    .create-choice + .create-choice { margin-top: 9px; }

    /* =========================================================
       Full HD相当の広いPC：4カラム
       左レール + 等幅中央2カラム + 最右一覧
       ========================================================= */

    @media (min-width: 1500px) {
      /*
       * 報告書タブを開いている時だけ、
       * 左レール / メイン / 最右レール の3列構造にする。
       *
       * 最右レールは app の直下に置くため、
       * 左レールと同じく画面上端から下端まで独立して見える。
       */
      .app.show-reports-rail {
        grid-template-columns:
          var(--sidebar-w)
          minmax(0, 1fr)
          var(--reports-rail-w);
      }

      .app.show-reports-rail .desktop-reports-rail {
        display: flex;
      }
    }

    /* =========================================================
       1400〜1499px：3カラム（左レール + 等幅2カラム）
       ========================================================= */

    @media (min-width: 1400px) and (max-width: 1499px) {
      .desktop-reports-rail { display: none !important; }
      .case-grid.with-rail { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    }

    /* =========================================================
       狭いPC / タブレット横：左レール + 1メイン
       報告書は縦積み
       ========================================================= */

    @media (min-width: 1100px) and (max-width: 1399px) {
      :root { --sidebar-w: 245px; }

      .case-grid,
      .case-grid.with-rail {
        display: block;
        overflow-y: auto;
        padding-right: 4px;
      }

      .scroll-pane {
        height: auto;
        overflow: visible;
      }

      .desktop-reports-rail { display: none !important; }
      .case-content { overflow-y: auto; }
    }

    /* =========================================================
       スマホ・狭いタブレット・狭いPC
       ========================================================= */

    .mobile-header,
    .mobile-nav { display: none; }

    @media (max-width: 1099px) {
      html,
      body { overflow: hidden; }

      .app {
        display: flex;
        flex-direction: column;
      }

      .sidebar { display: none; }

      .app-main {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
      }

      .mobile-header {
        flex: 0 0 66px;
        min-height: 66px;
        padding: 10px 12px 10px 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        border-bottom: 1px solid var(--line);
        background: #f0f0f0;
      }

      /* 題名側は自然に伸ばし、左端には16pxの余白を確保 */
      .mobile-header > div:first-child {
        flex: 1 1 auto;
        min-width: 0;
      }

      .mobile-brand-title {
        color: var(--text-strong);
        font-size: 17px;
        font-weight: 850;
        line-height: 1.25;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .mobile-user {
        margin-top: 2px;
        color: var(--text-sub);
        font-size: 11px;
      }

      .mobile-share {
        flex: 0 0 auto;
        min-height: 32px;
        padding: 0 7px;
        border: 1px solid #9fc7ef;
        border-radius: 7px;
        background: #f8fbff;
        color: #245e98;
        font-size: 11px;
        font-weight: 850;
        white-space: nowrap;
      }

      .list-page {
        flex: 1 1 auto;
        height: auto;
        padding: 13px 10px calc(var(--mobile-nav-h) + 14px);
      }

      .list-main { width: 100%; }
      .list-toolbar {
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
      }
      .list-title { font-size: 16px; line-height: 1.25; }
      .list-sub { display: none; }
      .mobile-filter-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 31px;
        padding: 0 9px;
        font-size: 12px;
        line-height: 1;
        white-space: nowrap;
      }
      .report-card { width: 100%; }

      .case-page {
        flex: 1 1 auto;
        min-height: 0;
      }

      .work-nav {
        flex: 0 0 51px;
        min-height: 51px;
        padding: 5px;
        gap: 3px;
      }

      .work-button {
        flex: 1 1 20%;
        min-width: 0;
        min-height: 41px;
        padding: 0 3px;
        font-size: 11px;
      }

      .case-content {
        padding: 10px;
        padding-bottom: calc(var(--mobile-nav-h) + 12px);
        overflow-y: auto;
      }

      /*
       * 編集画面だけ左右を少し広げる。
       * case-content 10px の余白を4px分だけ相殺し、
       * 画面端との安全な6pxは残す。
       */
      .case-content > .edit-layout {
        width: calc(100% + 8px);
        margin-left: -4px;
        margin-right: -4px;
      }

      .case-grid,
      .case-grid.with-rail {
        display: block;
        height: auto;
        overflow: visible;
      }

      .scroll-pane {
        height: auto;
        overflow: visible;
      }

      /* 6) 対応履歴の次に続くサ責分析との間隔 */
      .case-grid > .scroll-pane + .scroll-pane,
      .case-grid.with-rail > .scroll-pane + .scroll-pane {
        margin-top: 11px;
      }

      .desktop-reports-rail { display: none !important; }

      .major-heading {
        min-height: 50px;
        padding: 10px 12px;
        font-size: 19px;
      }

      .major-heading-client {
        font-size: 12px;
      }

      .edit-client-chip {
        min-height: 24px;
        padding: 0 8px;
        font-size: 12px;
      }

      .detail-title { font-size: 14px; }
      .detail-body,
      .basic-label,
      .basic-value { font-size: 14px; }

      .basic-row { grid-template-columns: 92px minmax(0, 1fr); }

      .edit-layout {
        display: block;
        height: auto;
        overflow: visible;
      }

      .reference-pane {
        display: none !important;
      }

      .edit-main {
        width: 100%;
        height: auto;
        overflow: visible;
      }

      .edit-view {
        width: 100%;
        max-width: none;
        height: auto;
        overflow: visible;
        padding-right: 0;
      }

      .reference-button {
        display: none;
      }

      /*
       * スマホ編集画面は「カードの中に入力欄」ではなく、
       * 入力欄そのものを主役にする。
       * 外側のカード枠と15px paddingを外して横幅を確保。
       */
      .edit-layout .form-card {
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
      }

      .edit-layout .form-card + .form-card {
        margin-top: 24px;
      }

      .edit-layout .form-title {
        margin: 0 2px 8px;
        padding: 0;
        font-size: 17px;
        line-height: 1.45;
        font-weight: 850;
      }

      .edit-layout .textarea {
        min-height: 150px;
        padding: 12px;
        border-radius: 8px;
        background: #ffffff;
      }

      .edit-layout .control {
        height: 46px;
        padding: 0 12px;
        border-radius: 8px;
        background: #ffffff;
      }

      .edit-layout .form-actions {
        margin-top: 20px;
        padding: 0 2px;
      }

      .edit-layout .action-button {
        min-height: 44px;
      }

      .staff-grid { grid-template-columns: 1fr; }
      .staff-item:nth-child(even) { border-left: 0; }
      .staff-item:nth-child(odd) { border-right: 0; }
      .staff-item:nth-last-child(2) { border-bottom: 1px solid var(--line-soft); }
      .staff-item:last-child { border-bottom: 0; }

      .mobile-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 400;
        height: var(--mobile-nav-h);
        display: grid;
        grid-template-columns: repeat(5, 1fr);

        /* 4) borderは元の1pxへ戻す */
        border-top: 1px solid #b8c0ca;

        /* 半透明は使わず、白い固定メニューとして表示 */
        background: #ffffff;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;

        /* スクロール方向で、少しゆっくり・ヌルっと表示／非表示 */
        transform: translateY(0);
        opacity: 1;
        transition:
          transform 0.46s cubic-bezier(0.22, 1, 0.36, 1),
          opacity 0.34s ease;
        will-change: transform, opacity;
      }

      .mobile-nav.nav-hidden {
        transform: translateY(calc(100% + env(safe-area-inset-bottom, 0px)));
        opacity: 0;
        pointer-events: none;
      }

      .mobile-nav-button {
        min-width: 0;
        border: 0;
        border-right: 1px solid rgba(184, 192, 202, 0.82);

        background: #ffffff;

        color: #4c6175;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        font-size: 12px;
        line-height: 1.1;
        white-space: nowrap;
        font-weight: 850;
      }

      .mobile-nav-button:last-child { border-right: 0; }
      .mobile-nav-button .icon { font-size: 18px; line-height: 1; }
      .mobile-nav-button.active {
        background: #edf6ff;
        color: #175ea8;
      }
      .mobile-nav-button:disabled {
        background: #f1f3f5;
        color: #a5adb7;
        cursor: not-allowed;
      }

      /* 9) 共有状態：項目名＋結果を可変2列にしてBOX内へ収める */
      .share-report-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        padding: 8px 10px;
      }

      .share-report-row .mini-status {
        min-width: 46px;
        max-width: 64px;
      }
    }
.official-author-root{
  --bg:#fff;
  --surface:#fff;
  --line:#d8dee6;
  --text:#173653;
  --sub:#69778a;
  --blue:#2f80ed;
  --blue-soft:#eaf4ff;
  --danger-soft:#fff0f0;
  --danger:#a94343;
  --heading:#c2e4ff;
}
.official-author-root, .official-author-root *{box-sizing:border-box}
.official-author-root{
  margin:0;
  background:#fff;
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.official-author-root{padding:22px}
.official-author-root .wrap{
  width:min(920px,100%);
  margin:0;
}
.official-author-root .top{
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin-bottom:14px;
}
.official-author-root .title-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap
}
.official-author-root h1{margin:0;font-size:25px;font-weight:650}
.official-author-root .badges{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.official-author-root .badge{
  display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:750
}
.official-author-root .badge.accident{background:var(--danger-soft);color:var(--danger);border:1px solid #edc6c6}
.official-author-root .badge.hiyari{background:#e8f2ff;color:#175ea8;border:1px solid #b9d3ee}
.official-author-root .badge.state{background:#f1f3f5;color:#596675;border:1px solid #d7dce2}
.official-author-root .reporter{margin-top:8px;color:var(--sub);font-size:14px}
.official-author-root .section{
  background:#fff;border:1px solid var(--line);border-radius:11px;overflow:hidden;margin-top:14px
}
.official-author-root .section-title{
  padding:11px 14px;
  background:var(--heading);
  font-size:18px;
  font-weight:550;
  border-bottom:1px solid #b7d7ef;
}
.official-author-root .section-body{padding:15px}
.official-author-root .help{
  margin:0 0 12px;color:#5e6e80;font-size:13px;line-height:1.75
}
.official-author-root .ordinary-guide{
  margin:0 0 12px;
  padding:10px 12px;
  border:1px solid #dbe3ec;
  border-radius:8px;
  background:#fff5f5;
  color:#526476;
  font-size:13px;
  line-height:1.65;
}
.official-author-root .ordinary-guide strong{
  color:#31475d;
  font-weight:650;
}
.official-author-root .option-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.official-author-root .check-card{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:42px;
  padding:9px 10px;
  border:1px solid #d2d9e2;
  border-radius:8px;
  background:#fff;
  color:#34475b;
  font-size:14px;
  text-align:center;
  cursor:pointer;
}
.official-author-root .check-card input{width:18px;height:18px;margin:0}
.official-author-root .field{margin-top:15px}
.official-author-root .field:first-child{margin-top:0}
.official-author-root .two{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  align-items:start;
}
/* 2列内の項目は両方とも同じ開始位置に固定 */
.official-author-root .two > .field{
  margin-top:0;
}
.official-author-root .field-stack{
  display:flex;flex-direction:column;align-items:stretch
}
.official-author-root .label-row{
  display:flex;align-items:center;gap:7px;margin-bottom:7px;min-height:24px
}
.official-author-root label, .official-author-root .label{font-size:14px;font-weight:700;color:#31475d}
.official-author-root .req{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  min-width:34px;
  min-height:20px;
  padding:0 6px;
  border:1px solid #efcdcd;
  border-radius:999px;
  background:#fff0f0;
  color:#a33d3d;
  font-size:10px;
  font-weight:550;
  line-height:1;
  white-space:nowrap;
}
.official-author-root input[type="date"], .official-author-root input[type="time"], .official-author-root select, .official-author-root input[type="text"]{
  width:100%;height:44px;border:1px solid #cbd4df;border-radius:8px;background:#fff;color:#26394b;
  padding:0 11px;font-size:15px
}
.official-author-root .inline-check{
  display:flex;align-items:center;gap:8px;margin-top:8px;font-size:13px;color:#485b6d;min-height:22px
}
.official-author-root .inline-check input, .official-author-root .self-row input{width:18px;height:18px}
.official-author-root .time-label-row{
  justify-content:flex-start;
  gap:0;
}
.official-author-root .time-unknown{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-left:1em;
  font-size:13px;
  font-weight:700;
  color:#485b6d;
  white-space:nowrap;
  cursor:pointer;
}
.official-author-root .time-unknown input{
  width:18px;
  height:18px;
  margin:0;
}
.official-author-root .accident-date-label-row{
  justify-content:flex-start;
  gap:7px;
  flex-wrap:wrap;
}
.official-author-root .late-discovery-inline{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-left:0.35em;
  color:#485b6d;
  font-size:12px;
  font-weight:700;
  line-height:1.45;
  cursor:pointer;
}
.official-author-root .late-discovery-inline input{
  flex:0 0 auto;
  width:18px;
  height:18px;
  margin:0;
}
.official-author-root .late-discovery-fields{
  display:none;
  margin-top:16px;
  padding:16px 0 0;
  border:0;
  border-top:1px solid #e5e9ee;
  border-radius:0;
  background:transparent;
}
.official-author-root .late-discovery-fields.show{display:block}
.official-author-root .late-discovery-note{
  margin:0 0 12px;
  color:#667586;
  font-size:12px;
  line-height:1.65;
}
.official-author-root .late-discovery-fields .textarea{
  min-height:105px;
}
.global-calendar-day:disabled{
  color:#c2c9d0;
  background:#f7f8fa;
  cursor:not-allowed;
  opacity:.7;
}
.official-author-root .client-label-row{
  justify-content:flex-start;
  gap:7px;
}
.official-author-root .client-self-inline{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-left:1em;
  font-size:13px;
  font-weight:700;
  color:#485b6d;
  white-space:nowrap;
  cursor:pointer;
}
.official-author-root .client-self-inline input{
  width:18px;
  height:18px;
  margin:0;
}
.official-author-root .self-row{
  display:flex;align-items:center;gap:8px;margin-top:9px;font-size:13px;color:#485b6d
}
.official-author-root .conditional{
  display:none;margin-top:10px;padding:12px;border:1px solid #d9e3ee;border-radius:8px;background:#f8fbff
}
.official-author-root .conditional.show{display:block}
.official-author-root .preview-name{
  display:none;margin-top:10px;padding:9px 11px;border-radius:8px;background:#f3f6f9;color:#44596d;font-size:13px
}
.official-author-root .preview-name.show{display:block}
.official-author-root .next-note{
  margin:16px 2px 0;color:#6d7988;font-size:13px;line-height:1.7
}
@media (max-width:620px){.official-author-root{padding:12px}
.official-author-root .top{padding:15px 14px}
.official-author-root h1{font-size:21px}
.official-author-root .section-title{font-size:17px}
.official-author-root .section-body{padding:13px}
.official-author-root .option-grid{grid-template-columns:1fr 1fr}
.official-author-root .two{grid-template-columns:1fr}
.official-author-root .time-label-row{
    flex-wrap:wrap;
  }
.official-author-root .accident-date-label-row{
    align-items:flex-start;
  }
.official-author-root .late-discovery-inline{
    margin-left:0;
    width:100%;
  }
.official-author-root .client-label-row{
    flex-wrap:wrap;
  }
.official-author-root .client-self-inline{
    margin-left:0.6em;
  }}
.official-author-root .support-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.official-author-root .support-step{
  display:flex;
  flex-direction:column;
  gap:7px;
}
.official-author-root .support-step .step-label{
  color:#536579;
  font-size:12px;
  font-weight:650;
}
.official-author-root .support-step select:disabled{
  background:#f1f3f5;
  color:#9aa4af;
  cursor:not-allowed;
}
.official-author-root .mini-note{
  margin-top:10px;
  color:#667586;
  font-size:12px;
  line-height:1.6;
}
.official-author-root .textarea{
  width:100%;
  min-height:118px;
  padding:12px;
  border:1px solid #cbd4df;
  border-radius:8px;
  background:#fff;
  color:#26394b;
  font:inherit;
  font-size:15px;
  line-height:1.7;
  resize:vertical;
}
.official-author-root .textarea::placeholder{
  color:#9aa5b1;
}
.official-author-root .conditional-soft{
  display:none;
  margin-top:10px;
  padding:12px;
  border:1px solid #e0d7d7;
  border-radius:8px;
  background:#fff8f8;
}
.official-author-root .conditional-soft.show{display:block}
.official-author-root .visit-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.official-author-root .what-separator{
  height:1px;
  margin:16px 0;
  background:#e5e9ee;
}
@media (max-width:620px){.official-author-root .support-grid{grid-template-columns:1fr}
.official-author-root .visit-grid{grid-template-columns:1fr}}
/* ===== 補足確認 ===== */
.official-author-root .optional-note{
  margin:0 0 12px;
  color:#738091;
  font-size:12px;
  line-height:1.65;
}
.official-author-root .supplement-item{
  padding:14px 0;
  border-bottom:1px solid #e6e9ed;
}
.official-author-root .supplement-item:first-child{padding-top:0}
.official-author-root .supplement-item:last-child{
  padding-bottom:0;
  border-bottom:0;
}
.official-author-root .question-text{
  margin:0 0 9px;
  color:#31475d;
  font-size:14px;
  font-weight:700;
  line-height:1.55;
}
.official-author-root .choice-row{
  display:flex;
  align-items:stretch;
  gap:8px;
  flex-wrap:wrap;
}
.official-author-root .choice-pill{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:0 13px;
  border:1px solid #ccd5df;
  border-radius:8px;
  background:#fff;
  color:#495d70;
  font-size:13px;
  font-weight:650;
  line-height:1.25;
  cursor:pointer;
}
.official-author-root .choice-pill input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.official-author-root .choice-pill:has(input:checked){
  border-color:#8bbbe7;
  background:#eef7ff;
  color:#245f99;
}
.official-author-root .follow-box{
  display:none;
  margin-top:10px;
}
.official-author-root .follow-box.show{display:block}
.official-author-root .follow-box input[type="text"], .official-author-root .follow-box textarea{
  margin-top:0;
}
/* ===== 利用者の状態 ===== */
.official-author-root .state-list{
  border-top:1px solid #e6e9ed;
}
.official-author-root .state-item{
  padding:14px 0;
  border-bottom:1px solid #e6e9ed;
}
.official-author-root .state-head{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  margin-bottom:9px;
}
.official-author-root .state-name{
  color:#31475d;
  font-size:14px;
  font-weight:700;
}
.official-author-root .state-choice-row{
  display:flex;
  align-items:stretch;
  justify-content:flex-start;
  gap:8px;
  flex-wrap:wrap;
}
.official-author-root .state-choice-row.four{
  display:flex;
  justify-content:flex-start;
  flex-wrap:wrap;
}
.official-author-root .state-choice{
  position:relative;
  width:auto;
  min-width:110px;
  min-height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:7px 14px;
  border:1px solid #ccd5df;
  border-radius:8px;
  background:#fff;
  color:#4b5e70;
  font-size:13px;
  font-weight:650;
  text-align:center;
  line-height:1.35;
  cursor:pointer;
}
.official-author-root .state-choice input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.official-author-root .state-choice:has(input:checked){
  border-color:#8bbbe7;
  background:#eef7ff;
  color:#245f99;
}
.official-author-root .state-detail{
  display:none;
  margin-top:10px;
}
.official-author-root .state-detail.show{display:block}
.official-author-root .medical-box{
  display:none;
  margin-top:15px;
  padding:13px;
  border:1px solid #cfe0ef;
  border-radius:9px;
  background:#f7fbff;
}
.official-author-root .medical-box.show{display:block}
.official-author-root .medical-title{
  margin:0 0 10px;
  color:#31475d;
  font-size:14px;
  font-weight:700;
}
.official-author-root .medical-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.official-author-root .check-option{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:40px;
  padding:8px 10px;
  border:1px solid #d3dce5;
  border-radius:8px;
  background:#fff;
  color:#4b5e70;
  font-size:13px;
  cursor:pointer;
}
.official-author-root .check-option input{
  width:18px;
  height:18px;
  margin:0;
}
.official-author-root .state-skip{
  display:none;
  margin:0;
  padding:12px 13px;
  border:1px solid #dde3e9;
  border-radius:8px;
  background:#f7f8fa;
  color:#5d6d7d;
  font-size:13px;
  line-height:1.65;
}
.official-author-root .state-skip.show{display:block}
@media (max-width:620px){.official-author-root .choice-row{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
.official-author-root .choice-pill{
    width:100%;
    padding:0 6px;
    font-size:12px;
  }
.official-author-root .state-choice-row, .official-author-root .state-choice-row.four{
    display:flex;
    justify-content:flex-start;
    flex-wrap:wrap;
  }
.official-author-root .state-choice{
    min-width:100px;
    min-height:42px;
    padding:6px 12px;
    font-size:12px;
  }
.official-author-root .medical-grid{
    grid-template-columns:1fr;
  }}
/* ===== 添付ファイル ===== */
.official-author-root .attachment-note{
  margin:0 0 12px;
  padding:10px 12px;
  border:1px solid #dbe3ec;
  border-radius:8px;
  background:#f8fafc;
  color:#586a7c;
  font-size:12px;
  line-height:1.7;
}
.official-author-root .attachment-note strong{
  color:#31475d;
  font-weight:650;
}
.official-author-root .attachment-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:12px;
  align-items:start;
}
.official-author-root .attachment-control{
  min-width:0;
}
.official-author-root .step-label{
  display:flex;
  align-items:center;
  gap:7px;
  min-height:24px;
  margin-bottom:7px;
  color:#31475d;
  font-size:14px;
  font-weight:700;
}
.official-author-root .step-number{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  border-radius:999px;
  background:#eef3f7;
  color:#526679;
  font-size:11px;
  font-weight:700;
}
.official-author-root .access-hint{
  display:none;
  align-items:center;
  min-height:24px;
  margin-top:7px;
  padding:0 8px;
  width:max-content;
  max-width:100%;
  border-radius:999px;
  font-size:11px;
  font-weight:650;
}
.official-author-root .access-hint.show{display:inline-flex}
.official-author-root .access-hint.normal{
  border:1px solid #d2dbe4;
  background:#f3f6f9;
  color:#526679;
}
.official-author-root .access-hint.restricted{
  border:1px solid #ecc8c8;
  background:#fff3f3;
  color:#925050;
}
.official-author-root .file-select-shell{
  height:44px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:5px 9px;
  border:1px solid #cbd4df;
  border-radius:8px;
  background:#fff;
}
.official-author-root .file-select-button{
  flex:0 0 auto;
  min-height:30px;
  padding:0 10px;
  border:1px solid #bfcbd7;
  border-radius:7px;
  background:#f7f9fb;
  color:#334b61;
  font-size:12px;
  font-weight:650;
  cursor:pointer;
}
.official-author-root .file-select-button:disabled{
  border-color:#d8dde3;
  background:#f3f4f6;
  color:#a0a8b1;
  cursor:not-allowed;
}
.official-author-root .file-select-status{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#6a7888;
  font-size:12px;
}
.official-author-root .file-input-hidden{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
}
.official-author-root .auto-note{
  margin:10px 0 0;
  color:#6d7b8a;
  font-size:12px;
  line-height:1.65;
}
.official-author-root .queue{
  display:none;
  margin-top:14px;
  border:1px solid #d8dee6;
  border-radius:9px;
  overflow:hidden;
}
.official-author-root .queue.show{display:block}
.official-author-root .queue-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:9px 11px;
  background:#f3f6f9;
  border-bottom:1px solid #d8dee6;
}
.official-author-root .queue-title{
  color:#31475d;
  font-size:13px;
  font-weight:700;
}
.official-author-root .queue-count{
  color:#6a7888;
  font-size:12px;
}
.official-author-root .queue-list{
  display:flex;
  flex-direction:column;
}
.official-author-root .queue-row{
  display:grid;
  grid-template-columns:minmax(0,170px) minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  padding:10px 11px;
  border-bottom:1px solid #e5e9ee;
}
.official-author-root .queue-row:last-child{border-bottom:0}
.official-author-root .file-kind{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  min-width:0;
}
.official-author-root .file-kind-name{
  color:#3f566b;
  font-size:12px;
  font-weight:650;
}
.official-author-root .file-access{
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:0 6px;
  border-radius:999px;
  font-size:10px;
  font-weight:650;
}
.official-author-root .file-access.normal{
  border:1px solid #d2dbe4;
  background:#f3f6f9;
  color:#526679;
}
.official-author-root .file-access.restricted{
  border:1px solid #ecc8c8;
  background:#fff3f3;
  color:#925050;
}
.official-author-root .file-meta{
  min-width:0;
}
.official-author-root .file-name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#33475b;
  font-size:13px;
}
.official-author-root .file-size{
  margin-top:2px;
  color:#7a8794;
  font-size:11px;
}
.official-author-root .remove-file{
  min-height:30px;
  padding:0 9px;
  border:1px solid #d8caca;
  border-radius:7px;
  background:#fff;
  color:#9b4d4d;
  font-size:12px;
  cursor:pointer;
}
.official-author-root .queue-foot{
  padding:9px 11px;
  border-top:1px solid #e5e9ee;
  background:#fafbfc;
  color:#6d7a89;
  font-size:11px;
  line-height:1.6;
}
@media (max-width:620px){.official-author-root .attachment-layout{
    grid-template-columns:1fr;
  }
.official-author-root .queue-row{
    grid-template-columns:1fr auto;
  }
.official-author-root .file-kind{
    grid-column:1 / -1;
  }}
/* ===== How ===== */
.official-author-root .how-help{
  margin:0 0 8px;
  color:#637386;
  font-size:13px;
  line-height:1.65;
}
.official-author-root .how-note{
  margin-top:8px;
  color:#7a8794;
  font-size:12px;
  line-height:1.6;
}
@media (max-width:620px){.official-author-root .attachment-layout{
    grid-template-columns:1fr;
  }
.official-author-root .queue-row{
    grid-template-columns:1fr auto;
  }
.official-author-root .file-kind{
    grid-column:1 / -1;
  }}
/* ===== Why ===== */

/* =========================================================
   STEP5-A：ヒヤリハット新規作成
   ========================================================= */
.official-hiyari-root .hiyari-choice-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.official-hiyari-root .hiyari-choice-card{
  position:relative;
  min-height:46px;
  padding:9px 12px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  border:1px solid #ccd5df;
  border-radius:8px;
  background:#fff;
  color:#455a6f;
  cursor:pointer;
  font-size:13px;
  font-weight:700;
  line-height:1.5;
}
.official-hiyari-root .hiyari-choice-card input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.official-hiyari-root .hiyari-choice-card:has(input:checked){
  border-color:#7fb6e9;
  background:#edf6ff;
  color:#1e609d;
}
.official-hiyari-root .hiyari-subquestion{
  margin:0 0 9px;
  color:#31475d;
  font-size:14px;
  font-weight:800;
  line-height:1.6;
}
.official-hiyari-root .hiyari-light-note{
  margin:0 0 12px;
  color:#6f7e8e;
  font-size:12px;
  line-height:1.7;
}
.official-hiyari-root .hiyari-submit-state{
  margin:0 0 11px;
  color:#6b7887;
  font-size:12px;
  line-height:1.65;
}
.official-hiyari-root .hiyari-submit-state.ready{
  color:#2c7042;
  font-weight:750;
}
.official-hiyari-root .hiyari-validation-summary{
  display:none;
  margin:0 0 12px;
  padding:11px 12px;
  border:1px solid #e2baba;
  border-radius:8px;
  background:#fff4f4;
  color:#8c4141;
  font-size:12px;
  line-height:1.7;
}
.official-hiyari-root .hiyari-validation-summary.show{display:block}
.official-hiyari-root .hiyari-validation-summary strong{font-weight:850}
.official-hiyari-root .hiyari-validation-summary ul{margin:6px 0 0;padding-left:20px}
.official-hiyari-root .hiyari-invalid{
  outline:2px solid #d96b6b!important;
  outline-offset:2px;
}
.official-hiyari-root .hiyari-invalid-group{
  padding:8px;
  border:1px solid #df8c8c!important;
  border-radius:8px;
  background:#fffafa;
}
@media (max-width:620px){
  .official-hiyari-root .hiyari-choice-grid{grid-template-columns:1fr}
  .official-hiyari-root .hiyari-choice-card{min-height:44px}
}

.official-author-root .why-guide{
  margin:0 0 12px;
  padding:10px 12px;
  border:1px solid #dbe3ec;
  border-radius:8px;
  background:#f8fafc;
  color:#586a7c;
  font-size:12px;
  line-height:1.7;
}
.official-author-root .why-options{
  display:flex;
  justify-content:flex-start;
  gap:8px;
  flex-wrap:wrap;
}
.official-author-root .why-choice{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:7px 13px;
  border:1px solid #ccd5df;
  border-radius:8px;
  background:#fff;
  color:#4b5e70;
  font-size:13px;
  font-weight:650;
  line-height:1.35;
  text-align:center;
  cursor:pointer;
}
.official-author-root .why-choice input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.official-author-root .why-choice:has(input:checked){
  border-color:#8bbbe7;
  background:#eef7ff;
  color:#245f99;
}
.official-author-root .why-choice.unknown:has(input:checked){
  border-color:#c7cfd8;
  background:#f1f3f5;
  color:#536171;
}
.official-author-root .optional-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:20px;
  padding:0 6px;
  border:1px solid #d8dee5;
  border-radius:999px;
  background:#f5f6f8;
  color:#6d7884;
  font-size:10px;
  font-weight:550;
  line-height:1;
}
/* ===== 第一報・情報共有 ===== */
.official-author-root .subsection{
  padding:14px 0;
  border-bottom:1px solid #e6e9ed;
}
.official-author-root .subsection:first-child{padding-top:0}
.official-author-root .subsection:last-child{
  padding-bottom:0;
  border-bottom:0;
}
.official-author-root .subsection-title{
  margin:0 0 6px;
  color:#31475d;
  font-size:15px;
  font-weight:700;
}
.official-author-root .subsection-help{
  margin:0 0 10px;
  color:#6a7888;
  font-size:12px;
  line-height:1.65;
}
.official-author-root .first-report-options{
  display:flex;
  justify-content:flex-start;
  gap:8px;
  flex-wrap:wrap;
}
.official-author-root .first-report-choice{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:105px;
  min-height:40px;
  padding:7px 13px;
  border:1px solid #ccd5df;
  border-radius:8px;
  background:#fff;
  color:#4b5e70;
  font-size:13px;
  font-weight:650;
  cursor:pointer;
}
.official-author-root .first-report-choice input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.official-author-root .first-report-choice:has(input:checked){
  border-color:#8bbbe7;
  background:#eef7ff;
  color:#245f99;
}
.official-author-root .known-people{
  display:flex;
  justify-content:flex-start;
  gap:8px;
  flex-wrap:wrap;
}
.official-author-root .known-person{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:38px;
  padding:7px 11px;
  border:1px solid #d1d9e2;
  border-radius:8px;
  background:#fff;
  color:#4b5e70;
  font-size:13px;
  cursor:pointer;
}
.official-author-root .known-person input{
  width:18px;
  height:18px;
  margin:0;
}
/* ===== 提出 ===== */
.official-author-root .submit-area{
  margin-top:18px;
  padding:18px;
  border:1px solid #d8dee6;
  border-radius:10px;
  background:#fff;
}
.official-author-root .submit-help{
  margin:0 0 12px;
  color:#667587;
  font-size:12px;
  line-height:1.65;
}
.official-author-root .report-submit{
  width:100%;
  min-height:46px;
  padding:0 18px;
  border:1px solid #0e5eaa;
  border-radius:8px;
  background:#1767b0;
  color:#fff;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
}
.official-author-root .report-submit:hover{
  background:#0f5a9d;
}
.official-author-root .report-submit:disabled{
  border-color:#b8c5d1;
  background:#cbd6df;
  color:#f7f9fb;
  cursor:not-allowed;
}
.official-author-root .author-validation-summary{
  display:none;
  margin:0 0 12px;
  padding:11px 12px;
  border:1px solid #e2baba;
  border-radius:8px;
  background:#fff4f4;
  color:#8c4141;
  font-size:12px;
  line-height:1.7;
}
.official-author-root .author-validation-summary.show{display:block}
.official-author-root .author-validation-summary strong{font-weight:850}
.official-author-root .author-validation-summary ul{margin:6px 0 0;padding-left:20px}
.official-author-root .author-invalid{
  outline:2px solid #d96b6b!important;
  outline-offset:2px;
}
.official-author-root .author-invalid-group{
  padding:8px;
  border:1px solid #df8c8c!important;
  border-radius:8px;
  background:#fffafa;
}
/* ===== 提出確認モーダル ===== */
.official-author-root .submit-modal-backdrop{
  position:fixed;
  inset:0;
  z-index:2000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(32,40,49,.34);
}
.official-author-root .submit-modal-backdrop.open{
  display:flex;
}
.official-author-root .submit-modal{
  width:min(520px,100%);
  max-height:calc(100dvh - 40px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid #cfd6df;
  border-radius:14px;
  background:#fff;
}
.official-author-root .submit-modal-header{
  flex:0 0 auto;
  min-height:58px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 18px;
  border-bottom:1px solid #d8dee6;
  background:#f5f6f8;
}
.official-author-root .submit-modal-title{
  margin:0;
  color:#173653;
  font-size:18px;
  font-weight:650;
  line-height:1.35;
}
.official-author-root .submit-modal-close{
  position:relative;
  flex:0 0 34px;
  width:34px;
  height:34px;
  padding:0;
  border:1px solid #cfd6df;
  border-radius:8px;
  background:#fff;
  cursor:pointer;
}
.official-author-root .submit-modal-close::before, .official-author-root .submit-modal-close::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:14px;
  height:2px;
  border-radius:2px;
  background:#586574;
  transform-origin:center;
}
.official-author-root .submit-modal-close::before{
  transform:translate(-50%,-50%) rotate(45deg);
}
.official-author-root .submit-modal-close::after{
  transform:translate(-50%,-50%) rotate(-45deg);
}
.official-author-root .submit-modal-body{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  padding:20px 18px 8px;
}
.official-author-root .submit-modal-message{
  margin:0;
  color:#354252;
  font-size:14px;
  line-height:1.85;
}
.official-author-root .submit-modal-note{
  margin-top:14px;
  padding:10px 12px;
  border:1px solid #efcece;
  border-radius:8px;
  background:#fff1f1;
  color:#7c3a3a;
  font-size:13px;
  line-height:1.65;
}
.official-author-root .submit-modal-actions{
  flex:0 0 auto;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding:18px;
  background:#fff;
}
.official-author-root .submit-modal-back, .official-author-root .submit-modal-confirm{
  min-height:42px;
  padding:0 16px;
  border-radius:8px;
  font-size:14px;
  font-weight:650;
  cursor:pointer;
}
.official-author-root .submit-modal-back{
  border:1px solid #c7ced7;
  background:#fff;
  color:#43505f;
}
.official-author-root .submit-modal-confirm{
  border:1px solid #0e5eaa;
  background:#1767b0;
  color:#fff;
}
.official-author-root .submit-demo-success{
  display:none;
  margin-top:12px;
  padding:11px 13px;
  border:1px solid #b9d7bd;
  border-radius:8px;
  background:#f3faf4;
  color:#35683c;
  font-size:13px;
  line-height:1.6;
}
.official-author-root .submit-demo-success.show{display:block}
@media (max-width:620px){.official-author-root .why-choice{
    min-height:42px;
    padding:6px 11px;
    font-size:12px;
  }
.official-author-root .first-report-choice{
    min-width:98px;
    min-height:42px;
    font-size:12px;
  }
.official-author-root .known-person{
    min-height:40px;
    font-size:12px;
  }
.official-author-root .submit-modal-backdrop{
    padding:
      max(12px, env(safe-area-inset-top))
      12px
      max(12px, env(safe-area-inset-bottom));
  }
.official-author-root .submit-modal{
    max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    border-radius:16px;
  }
.official-author-root .submit-modal-header{
    padding:13px 14px;
  }
.official-author-root .submit-modal-body{
    padding:18px 14px 6px;
  }
.official-author-root .submit-modal-actions{
    display:grid;
    grid-template-columns:1fr 1.45fr;
    padding:14px;
    padding-bottom:max(14px, env(safe-area-inset-bottom));
  }
.official-author-root .submit-modal-back, .official-author-root .submit-modal-confirm{
    width:100%;
  }}
/* ===== 職員のけが 詳細確認 ===== */
.official-author-root .staff-injury-section{
  display:none;
}
.official-author-root .staff-injury-section.show{
  display:block;
}
.official-author-root .injury-intro{
  margin:0 0 14px;
  padding:10px 12px;
  border:1px solid #e6d2d2;
  border-radius:8px;
  background:#fff5f5;
  color:#5e6065;
  font-size:12px;
  line-height:1.7;
}
.official-author-root .injury-intro strong{
  color:#425466;
  font-weight:650;
}
.official-author-root .injury-block{
  padding:14px 0;
  border-bottom:1px solid #e6e9ed;
}
.official-author-root .injury-block:first-child{padding-top:0}
.official-author-root .injury-block:last-child{
  padding-bottom:0;
  border-bottom:0;
}
.official-author-root .injury-block-title{
  margin:0 0 8px;
  color:#31475d;
  font-size:14px;
  font-weight:700;
}
.official-author-root .injury-block-help{
  margin:0 0 10px;
  color:#6b7989;
  font-size:12px;
  line-height:1.65;
}
.official-author-root .injury-choice-wrap{
  display:flex;
  justify-content:flex-start;
  gap:8px;
  flex-wrap:wrap;
}
.official-author-root .injury-choice{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:7px 13px;
  border:1px solid #ccd5df;
  border-radius:8px;
  background:#fff;
  color:#4b5e70;
  font-size:13px;
  font-weight:650;
  line-height:1.35;
  text-align:center;
  cursor:pointer;
}
.official-author-root .injury-choice input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.official-author-root .injury-choice:has(input:checked){
  border-color:#8bbbe7;
  background:#eef7ff;
  color:#245f99;
}
.official-author-root .injury-detail-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:10px;
}
.official-author-root .injury-field{
  min-width:0;
}
.official-author-root .mini-helper{
  margin-top:6px;
  color:#7a8794;
  font-size:11px;
  line-height:1.55;
}
.official-author-root .medical-detail-panel{
  display:none;
  margin-top:12px;
  padding:13px;
  border:1px solid #d7e1ea;
  border-radius:9px;
  background:#fafcfe;
}
.official-author-root .medical-detail-panel.show{display:block}
.official-author-root .panel-title{
  margin:0 0 10px;
  color:#31475d;
  font-size:13px;
  font-weight:700;
}
.official-author-root .soft-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:20px;
  padding:0 6px;
  border:1px solid #d8dee5;
  border-radius:999px;
  background:#f5f6f8;
  color:#6d7884;
  font-size:10px;
  font-weight:550;
  line-height:1;
}
.official-author-root .staff-subdetail{
  display:none;
  margin-top:10px;
}
.official-author-root .staff-subdetail.show{display:block}
.official-author-root .two-compact{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.official-author-root .staff-select{
  width:100%;
  height:44px;
  border:1px solid #cbd4df;
  border-radius:8px;
  background:#fff;
  color:#26394b;
  padding:0 11px;
  font-size:14px;
}
.official-author-root .self-auto-note{
  display:none;
  margin-top:9px;
  padding:9px 11px;
  border:1px solid #dbe3ec;
  border-radius:8px;
  background:#f7f9fb;
  color:#586a7c;
  font-size:12px;
  line-height:1.6;
}
.official-author-root .self-auto-note.show{display:block}
@media (max-width:620px){.official-author-root .injury-choice{
    min-height:42px;
    padding:6px 11px;
    font-size:12px;
  }
.official-author-root .injury-detail-grid, .official-author-root .two-compact{
    grid-template-columns:1fr;
  }}
/* ===== 交通事故 詳細確認 ===== */
.official-author-root .traffic-section{
  display:none;
}
.official-author-root .traffic-section.show{
  display:block;
}
.official-author-root .traffic-intro{
  margin:0 0 14px;
  padding:10px 12px;
  border:1px solid #d7e1ea;
  border-radius:8px;
  background:#f8fbfe;
  color:#5b6c7d;
  font-size:12px;
  line-height:1.7;
}
.official-author-root .traffic-lock-note{
  display:inline-flex;
  align-items:center;
  margin-top:7px;
  min-height:24px;
  padding:0 8px;
  border:1px solid #ecc8c8;
  border-radius:999px;
  background:#fff3f3;
  color:#925050;
  font-size:11px;
  font-weight:650;
}
.official-author-root .traffic-block{
  padding:14px 0;
  border-bottom:1px solid #e6e9ed;
}
.official-author-root .traffic-block:first-child{padding-top:0}
.official-author-root .traffic-block:last-child{
  padding-bottom:0;
  border-bottom:0;
}
.official-author-root .traffic-block-title{
  margin:0 0 8px;
  color:#31475d;
  font-size:14px;
  font-weight:700;
}
.official-author-root .traffic-help{
  margin:0 0 10px;
  color:#6b7989;
  font-size:12px;
  line-height:1.65;
}
.official-author-root .traffic-choice-wrap{
  display:flex;
  justify-content:flex-start;
  gap:8px;
  flex-wrap:wrap;
}
.official-author-root .traffic-choice{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:105px;
  min-height:40px;
  padding:7px 13px;
  border:1px solid #ccd5df;
  border-radius:8px;
  background:#fff;
  color:#4b5e70;
  font-size:13px;
  font-weight:650;
  line-height:1.35;
  text-align:center;
  cursor:pointer;
}
.official-author-root .traffic-choice input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.official-author-root .traffic-choice:has(input:checked){
  border-color:#8bbbe7;
  background:#eef7ff;
  color:#245f99;
}
.official-author-root .traffic-subdetail{
  display:none;
  margin-top:12px;
  padding:13px;
  border:1px solid #d7e1ea;
  border-radius:9px;
  background:#fafcfe;
}
.official-author-root .traffic-subdetail.show{
  display:block;
}
.official-author-root .traffic-detail-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.official-author-root .traffic-inline-check{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:40px;
  margin-top:10px;
  padding:8px 10px;
  width:max-content;
  max-width:100%;
  border:1px solid #d3dce5;
  border-radius:8px;
  background:#fff;
  color:#4b5e70;
  font-size:13px;
  cursor:pointer;
}
.official-author-root .traffic-inline-check input{
  width:18px;
  height:18px;
  margin:0;
}
.official-author-root .traffic-sync-note{
  display:none;
  margin-top:8px;
  color:#6c7a89;
  font-size:11px;
  line-height:1.6;
}
.official-author-root .traffic-sync-note.show{
  display:block;
}
@media (max-width:620px){.official-author-root .traffic-choice{
    min-width:98px;
    min-height:42px;
    padding:6px 11px;
    font-size:12px;
  }
.official-author-root .traffic-detail-grid{
    grid-template-columns:1fr;
  }}
/* ===== 労災手続きのための詳細確認 ===== */
.official-author-root .workers-comp-section{
  display:none;
}
.official-author-root .workers-comp-section.show{
  display:block;
}
.official-author-root .workers-comp-intro{
  margin:0 0 14px;
  padding:10px 12px;
  border:1px solid #e2d7bf;
  border-radius:8px;
  background:#fffaf0;
  color:#5f625f;
  font-size:12px;
  line-height:1.75;
}
.official-author-root .workers-comp-intro strong{
  color:#425466;
  font-weight:650;
}
.official-author-root .workers-comp-meta{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  margin-top:8px;
}
.workers-comp-chip{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:650;
  line-height:1;
}
.workers-comp-chip.lock{
  border:1px solid #ecc8c8;
  background:#fff3f3;
  color:#925050;
}
.workers-comp-chip.later{
  border:1px solid #d4dce4;
  background:#f3f6f9;
  color:#5f6f80;
}
.official-author-root .workers-comp-item{
  padding:14px 0;
  border-bottom:1px solid #e6e9ed;
}
.official-author-root .workers-comp-item:first-of-type{
  padding-top:0;
}
.official-author-root .workers-comp-item:last-of-type{
  padding-bottom:0;
  border-bottom:0;
}
.official-author-root .workers-comp-label{
  margin:0 0 7px;
  color:#31475d;
  font-size:14px;
  font-weight:700;
  line-height:1.55;
}
.official-author-root .workers-comp-help{
  margin:0 0 9px;
  color:#728091;
  font-size:11px;
  line-height:1.6;
}
.official-author-root .workers-comp-textarea{
  width:100%;
  min-height:94px;
  padding:12px;
  border:1px solid #cbd4df;
  border-radius:8px;
  background:#fff;
  color:#26394b;
  font:inherit;
  font-size:14px;
  line-height:1.7;
  resize:vertical;
}
.official-author-root .workers-comp-textarea::placeholder{
  color:#9aa5b1;
}
.official-author-root .workers-comp-disclaimer{
  margin-top:14px;
  padding:11px 12px;
  border:1px solid #d9e2ea;
  border-radius:8px;
  background:#f7f9fb;
  color:#536577;
  font-size:12px;
  line-height:1.75;
}
@media (max-width:620px){.official-author-root .workers-comp-textarea{
    min-height:100px;
    font-size:13px;
  }}

/* STEP2: 報告者正式版だけ、単体HTMLと同じ横幅を使えるようにする。 */
.edit-view.official-author-view{
  width:100%;
  max-width:none;
}

.official-workflow-scope{
  --bg:#fdfdfd;
  --surface:#fff;
  --line:#d8dee6;
  --line-soft:#e8ecf0;
  --text:#263445;
  --text-strong:#17324d;
  --text-sub:#697789;
  --blue:#2f80ed;
  --blue-dark:#1767b0;
  --tab:#b8d8f8;
  --tab-border:#86b8e9;
  --yellow:#fcf499;
  --section:#edf1f5;
  --report-heading:#c2e4ff;
  --danger-bg:#fff0f0;
  --danger-text:#9f3838;
  --success-bg:#edf8f0;
  --success-text:#2f7042;
  --warning-bg:#fff8e8;
  --warning-text:#765c24;
  --sidebar-w:274px;
  --mobile-nav-h:64px;
}
.official-workflow-scope, .official-workflow-scope *{box-sizing:border-box}
.official-workflow-scope{width:100%;height:100%;margin:0}
.official-workflow-scope{
  overflow:hidden;
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:15px;
}
.official-workflow-scope button, .official-workflow-scope input, .official-workflow-scope select, .official-workflow-scope textarea{font:inherit}
.official-workflow-scope button{-webkit-tap-highlight-color:transparent}
.official-workflow-scope .hidden{display:none!important}
/* =========================
   全体
========================= */
.official-workflow-scope .app{
  width:100%;
  height:100dvh;
  display:grid;
  grid-template-columns:var(--sidebar-w) minmax(0,1fr);
  overflow:hidden;
  background:#fff;
}
.official-workflow-scope .sidebar{
  min-width:0;
  height:100%;
  padding:18px 16px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-right:3px solid var(--line);
  background:#fff;
  text-align:center;
}
.official-workflow-scope .sidebar-title{
  color:var(--text-strong);
  font-size:20px;
  font-weight:850;
  line-height:1.35;
}
.official-workflow-scope .sidebar-user{
  margin-top:6px;
  color:var(--text-sub);
  font-size:12px;
}
.official-workflow-scope .sidebar-divider{
  flex:0 0 auto;
  margin:18px 0;
  border-top:3px solid #d5dbe3;
}
.official-workflow-scope .sidebar-case{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.official-workflow-scope .side-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:29px;
  padding:0 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:850;
}
.official-workflow-scope .side-badge.accident{background:#ffe8e8;color:#a12828}
.official-workflow-scope .side-badge.status{background:#eaf4ff;color:#2568a7}
.official-workflow-scope .sidebar-person{
  color:var(--text-strong);
  font-size:18px;
  font-weight:850;
}
.official-workflow-scope .sidebar-subject{
  color:#3f5367;
  font-size:20px;
  font-weight:800;
}
.official-workflow-scope .side-button{
  width:100%;
  min-height:42px;
  padding:0 12px;
  border:1px solid #090908;
  border-radius:7px;
  background:var(--yellow);
  color:#2a2a2a;
  cursor:pointer;
  font-weight:850;
}
.official-workflow-scope .side-button + .side-button{margin-top:9px}
.official-workflow-scope .side-button.primary{
  border-color:#1767b0;
  background:#2f80ed;
  color:#fff;
}
.official-workflow-scope .sidebar-spacer{flex:1 1 auto;min-height:10px}
.official-workflow-scope .main{
  min-width:0;
  min-height:0;
  height:100%;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.official-workflow-scope .mobile-header{display:none}
/* =========================
   上部5ボタン
========================= */
.official-workflow-scope .work-nav{
  flex:0 0 64px;
  min-height:64px;
  padding:10px 18px;
  display:flex;
  align-items:center;
  gap:8px;
  border-bottom:1px solid var(--line);
  background:#fff;
}
.official-workflow-scope .work-button{
  min-width:126px;
  min-height:43px;
  padding:0 16px;
  border:1px solid var(--tab-border);
  border-radius:6px;
  background:var(--tab);
  color:#24435f;
  cursor:pointer;
  font-size:15px;
  font-weight:850;
}
.official-workflow-scope .work-button.active{
  border-color:var(--blue);
  background:var(--blue);
  color:#fff;
}
.official-workflow-scope .work-button:disabled, .official-workflow-scope .work-button.dim{
  border-color:#c9cfd6;
  background:#e2e6ea;
  color:#919ba6;
  cursor:not-allowed;
}
.official-workflow-scope .case-strip{
  flex:0 0 auto;
  min-height:48px;
  padding:8px 18px;
  display:flex;
  align-items:center;
  gap:9px;
  border-bottom:1px solid var(--line-soft);
  background:#fafbfc;
}
.official-workflow-scope .case-name{
  color:var(--text-strong);
  font-size:15px;
  font-weight:850;
}
.official-workflow-scope .case-badge{
  min-height:24px;
  padding:0 8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  font-size:11px;
  font-weight:850;
}
.official-workflow-scope .case-badge.accident{background:#ffe7e7;color:#a22626}
.official-workflow-scope .case-badge.status{background:#e9f3ff;color:#2567a8}
/* =========================
   編集領域
========================= */
.official-workflow-scope .workspace{
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
  padding:18px;
  background:#fff;
}
.official-workflow-scope .edit-layout{
  width:100%;
  height:100%;
  min-height:0;
  display:flex;
  gap:0;
  overflow:hidden;
}
.official-workflow-scope .edit-layout.reference-open{gap:16px}
.official-workflow-scope .reference-pane{
  flex:0 0 0;
  width:0;
  min-width:0;
  height:100%;
  overflow:hidden;
  border-right:0 solid var(--line);
  background:#f4f5f7;
  transition:flex-basis .18s ease,width .18s ease,border-width .18s ease;
}
.official-workflow-scope .edit-layout.reference-open .reference-pane{
  flex-basis:42%;
  width:42%;
  border-right-width:1px;
}
.official-workflow-scope .edit-main{
  flex:1 1 auto;
  min-width:0;
  height:100%;
  overflow-y:auto;
  padding-right:4px;
  scrollbar-width:thin;
  scrollbar-color:#aeb6bf transparent;
}
.official-workflow-scope .edit-view{
  width:min(920px,100%);
  margin:0;
  padding-bottom:28px;
}
.official-workflow-scope .edit-heading{
  margin-bottom:14px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
.official-workflow-scope .edit-title-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px 10px;
}
.official-workflow-scope .edit-title{
  margin:0;
  color:var(--text-strong);
  font-size:22px;
  font-weight:850;
}
.official-workflow-scope .edit-client{
  display:inline-flex;
  align-items:center;
  min-height:27px;
  padding:0 9px;
  border-radius:999px;
  background:#f1f4f7;
  color:#536171;
  font-size:14px;
  font-weight:700;
  white-space:nowrap;
}
.official-workflow-scope .edit-sub{
  margin-top:4px;
  color:var(--text-sub);
  font-size:13px;
}
.official-workflow-scope .reference-button{
  min-height:39px;
  padding:0 14px;
  border:1px solid #91bce8;
  border-radius:7px;
  background:#fff;
  color:#245e98;
  cursor:pointer;
  font-weight:850;
}
/* 試作確認スイッチ */
.official-workflow-scope .prototype-switch{
  margin-bottom:12px;
  padding:10px 12px;
  border:1px dashed #d2bd75;
  border-radius:9px;
  background:#fffaf0;
}
.official-workflow-scope .prototype-title{
  margin-bottom:7px;
  color:#725b1d;
  font-size:12px;
  font-weight:800;
}
.official-workflow-scope .switch-row{display:flex;gap:7px;flex-wrap:wrap}
.official-workflow-scope .switch-button{
  min-height:34px;
  padding:0 11px;
  border:1px solid #d7c27f;
  border-radius:7px;
  background:#fff;
  color:#66551d;
  cursor:pointer;
  font-size:12px;
  font-weight:800;
}
.official-workflow-scope .switch-button.active{
  border-color:#d6ad3e;
  background:#fff1cf;
  color:#7a5400;
}
/* =========================
   フォーム
========================= */
.official-workflow-scope .form-card{
  padding:0;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:11px;
  background:#fff;
}
.official-workflow-scope .form-card + .form-card{margin-top:14px}
.official-workflow-scope .form-title{
  margin:0;
  padding:14px 16px;
  border-bottom:1px solid #b9d7ef;
  background:var(--report-heading);
  color:var(--text-strong);
  font-size:18px;
  font-weight:550;
  line-height:1.45;
}
.official-workflow-scope .form-body{
  padding:15px 16px 16px;
}
.official-workflow-scope .form-help{
  margin:0 0 14px;
  color:#6e7d8d;
  font-size:12px;
  line-height:1.65;
}
.official-workflow-scope .info-row{
  display:grid;
  grid-template-columns:160px minmax(0,1fr);
  gap:10px;
  padding:7px 0;
  border-bottom:1px solid var(--line-soft);
}
.official-workflow-scope .info-row:last-child{border-bottom:0}
.official-workflow-scope .info-label{color:#617080;font-size:13px;font-weight:700}
.official-workflow-scope .info-value{color:#263445;font-size:14px;font-weight:750}
.official-workflow-scope .field + .field{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--line-soft);
}
.official-workflow-scope .field-label-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:7px;
}
.official-workflow-scope .field-label{
  color:#344054;
  font-size:14px;
  font-weight:800;
  line-height:1.55;
}
.official-workflow-scope .req, .official-workflow-scope .opt{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:20px;
  padding:0 6px;
  border-radius:999px;
  font-size:10px;
  font-weight:550;
  line-height:1;
}
.official-workflow-scope .req{
  border:1px solid #efcdcd;
  background:#fff0f0;
  color:#a33d3d;
}
.official-workflow-scope .opt{
  border:1px solid #d9dfe6;
  background:#f5f7f9;
  color:#6b7580;
}
.official-workflow-scope .choice-wrap{
  display:flex;
  justify-content:flex-start;
  gap:8px;
  flex-wrap:wrap;
}
.official-workflow-scope .choice{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:96px;
  min-height:40px;
  padding:7px 13px;
  border:1px solid #ccd5df;
  border-radius:8px;
  background:#fff;
  color:#4b5e70;
  font-size:13px;
  font-weight:700;
  text-align:center;
  cursor:pointer;
}
.official-workflow-scope .choice input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.official-workflow-scope .choice:has(input:checked){
  border-color:#7fb6e9;
  background:#edf6ff;
  color:#1e609d;
}
.official-workflow-scope .control, .official-workflow-scope .textarea{
  width:100%;
  border:1px solid #cdd4dd;
  border-radius:7px;
  background:#fff;
  color:#263445;
  outline:none;
  font-size:14px;
}
.official-workflow-scope .control{height:42px;padding:0 10px}
.official-workflow-scope .textarea{min-height:104px;padding:10px;resize:vertical;line-height:1.7}
.official-workflow-scope .textarea.short{min-height:82px}
.official-workflow-scope .conditional{
  display:none;
  margin-top:10px;
  padding:12px;
  border:1px solid #dbe1e8;
  border-radius:8px;
  background:#fafbfc;
}
.official-workflow-scope .conditional.show{display:block}
.official-workflow-scope .inline-note{
  margin-top:7px;
  color:#778493;
  font-size:11px;
  line-height:1.55;
}
.official-workflow-scope .next-flow-box{
  margin-bottom:10px;
  padding:12px 13px;
  border:1px solid #cfddea;
  border-radius:9px;
  background:#f8fbfe;
}
.official-workflow-scope .next-flow-box.mt{
  border-color:#ded7bf;
  background:#fffaf0;
}
.official-workflow-scope .next-flow-title{
  margin-bottom:8px;
  color:#334b61;
  font-size:13px;
  font-weight:850;
}
.official-workflow-scope .next-flow-steps{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  color:#53677a;
  font-size:12px;
  line-height:1.7;
}
.official-workflow-scope .next-flow-arrow{
  color:#91a0af;
  font-weight:850;
}
.official-workflow-scope .next-flow-list{
  color:#5f604e;
  font-size:12px;
  line-height:1.9;
}
/* 提出エリア */
.official-workflow-scope .status-line{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.official-workflow-scope .status-pill{
  min-height:24px;
  padding:0 8px;
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  font-size:11px;
  font-weight:850;
}
.official-workflow-scope .status-pill.incomplete{background:#fff1cf;color:#8a5600}
.official-workflow-scope .status-pill.complete{background:#e3f5ea;color:#176d45}
.official-workflow-scope .submit-info{
  padding:11px 12px;
  border:1px solid #d7e3ef;
  border-radius:8px;
  background:#f7fbff;
  color:#53677a;
  font-size:12px;
  line-height:1.7;
}
.official-workflow-scope .submit-info.mt{
  border-color:#ded7bf;
  background:#fffaf0;
  color:#6b6041;
}
.official-workflow-scope .return-info{
  display:none;
  padding:11px 12px;
  border:1px solid #e6c2c2;
  border-radius:8px;
  background:#fff4f4;
  color:#805050;
  font-size:12px;
  line-height:1.7;
}
.official-workflow-scope .return-info.show{display:block}
.official-workflow-scope .form-actions{
  margin-top:14px;
  display:flex;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}
.official-workflow-scope .action{
  min-height:42px;
  padding:0 16px;
  border-radius:7px;
  cursor:pointer;
  font-weight:850;
}
.official-workflow-scope .action.secondary{
  border:1px solid #cbd3dd;
  background:#eef1f4;
  color:#475467;
}
.official-workflow-scope .action.primary{
  border:1px solid var(--blue);
  background:var(--blue);
  color:#fff;
}
.official-workflow-scope .action.danger{
  border:1px solid #d98d8d;
  background:#fff0f0;
  color:#9a3636;
}
.official-workflow-scope .action:disabled{
  border-color:#cbd3dc;
  background:#d9e1e8;
  color:#f5f7fa;
  cursor:not-allowed;
}
.official-workflow-scope .saved-banner, .official-workflow-scope .locked-banner{
  display:none;
  margin-bottom:12px;
  padding:11px 13px;
  border-radius:8px;
  font-size:13px;
  line-height:1.65;
}
.official-workflow-scope .saved-banner.show{
  display:block;
  border:1px solid #b9d7bd;
  background:#f3faf4;
  color:#35683c;
}
.official-workflow-scope .locked-banner.show{
  display:block;
  border:1px solid #d7dce2;
  background:#f5f6f8;
  color:#596675;
}
/* =========================
   参照パネル
========================= */
.official-workflow-scope .reference-shell{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  background:#f4f5f7;
}
.official-workflow-scope .reference-header{
  flex:0 0 auto;
  min-height:56px;
  padding:10px 13px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #d4dae1;
  background:#f1f3f5;
}
.official-workflow-scope .reference-heading{
  display:flex;
  align-items:center;
  gap:8px;
}
.official-workflow-scope .reference-title{
  color:var(--text-strong);
  font-size:17px;
  font-weight:850;
}
.official-workflow-scope .readonly{
  min-height:23px;
  padding:0 8px;
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  background:#e3e7eb;
  color:#596675;
  font-size:11px;
  font-weight:850;
}
.official-workflow-scope .reference-close{
  position:relative;
  width:34px;
  height:34px;
  padding:0;
  border:1px solid #cfd6df;
  border-radius:8px;
  background:#fff;
  cursor:pointer;
}
.official-workflow-scope .reference-close::before, .official-workflow-scope .reference-close::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:14px;
  height:2px;
  border-radius:2px;
  background:#586574;
  transform-origin:center;
}
.official-workflow-scope .reference-close::before{transform:translate(-50%,-50%) rotate(45deg)}
.official-workflow-scope .reference-close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.official-workflow-scope .reference-body{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  padding:12px;
  scrollbar-width:thin;
  scrollbar-color:#aeb6bf transparent;
}
.official-workflow-scope .ref-major{
  margin-bottom:9px;
  min-height:54px;
  padding:10px 13px;
  display:flex;
  align-items:center;
  border:1px solid #b7d7ef;
  border-radius:4px;
  background:var(--report-heading);
  color:var(--text-strong);
  font-size:18px;
  font-weight:550;
}
.official-workflow-scope .ref-card{
  overflow:hidden;
  border:1px solid #d6dbe1;
  border-radius:9px;
  background:#f9fafb;
}
.official-workflow-scope .ref-card + .ref-card{margin-top:8px}
.official-workflow-scope .ref-card-title{
  padding:8px 10px;
  border-bottom:1px solid #dfe3e7;
  background:#eef0f2;
  color:#53606e;
  font-size:12px;
  font-weight:850;
}
.official-workflow-scope .ref-card-body{
  padding:10px;
  color:#384a5d;
  font-size:13px;
  line-height:1.7;
  white-space:pre-wrap;
}
/* =========================
   モーダル
========================= */
.official-workflow-scope .modal-backdrop{
  position:fixed;
  inset:0;
  z-index:100;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(25,34,43,.42);
}
.official-workflow-scope .modal-backdrop.show{display:flex}
.official-workflow-scope .modal{
  width:min(520px,100%);
  max-height:calc(100dvh - 36px);
  overflow-y:auto;
  border:1px solid #d4dbe3;
  border-radius:14px;
  background:#fff;
}
.official-workflow-scope .modal-head{
  padding:16px 18px 10px;
  color:#17324d;
  font-size:18px;
  font-weight:850;
}
.official-workflow-scope .modal-body{
  padding:0 18px 16px;
  color:#536171;
  font-size:13px;
  line-height:1.75;
}
.official-workflow-scope .modal-note{
  margin-top:12px;
  padding:10px 11px;
  border:1px solid #e3d3b3;
  border-radius:8px;
  background:#fffaf0;
  color:#6e603e;
}
.official-workflow-scope .modal-actions{
  padding:12px 18px 16px;
  display:flex;
  justify-content:flex-end;
  gap:8px;
  border-top:1px solid #e4e8ed;
}
/* モバイル下部 */
.official-workflow-scope .mobile-nav{display:none}
@media (max-width:1099px){.official-workflow-scope .app{display:flex;flex-direction:column}
.official-workflow-scope .sidebar{display:none}
.official-workflow-scope .mobile-header{
    flex:0 0 66px;
    min-height:66px;
    padding:10px 12px 10px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    border-bottom:1px solid var(--line);
    background:#f0f0f0;
  }
.official-workflow-scope .mobile-brand{min-width:0}
.official-workflow-scope .mobile-brand-title{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--text-strong);
    font-size:17px;
    font-weight:850;
  }
.official-workflow-scope .mobile-brand-user{
    margin-top:3px;
    color:#687687;
    font-size:11px;
  }
.official-workflow-scope .mobile-share{
    min-height:32px;
    padding:0 7px;
    border:1px solid #9fc7ef;
    border-radius:7px;
    background:#f8fbff;
    color:#245e98;
    font-size:11px;
    font-weight:850;
  }
.official-workflow-scope .work-nav{
    flex:0 0 58px;
    min-height:58px;
    padding:8px 8px;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:5px;
  }
.official-workflow-scope .work-button{
    min-width:0;
    min-height:40px;
    padding:0 2px;
    font-size:11px;
  }
.official-workflow-scope .case-strip{
    min-height:44px;
    padding:7px 12px;
  }
.official-workflow-scope .workspace{
    padding:12px 10px calc(var(--mobile-nav-h) + 14px);
  }
.official-workflow-scope .reference-pane{display:none!important}
.official-workflow-scope .edit-layout.reference-open{gap:0}
.official-workflow-scope .reference-button{display:none}
.official-workflow-scope .edit-view{width:100%;padding-right:0}
.official-workflow-scope .edit-heading{margin-bottom:12px}
.official-workflow-scope .edit-title{font-size:20px}
.official-workflow-scope .edit-client{font-size:12px;min-height:24px}
/* スマホも報告者フォームと同じ外側BOXを維持。
     条件入力欄はBOXを入れ子にせず、区切り線だけで見せる。 */
.official-workflow-scope .form-card{
    padding:0;
    border:1px solid var(--line);
    border-radius:10px;
    background:#fff;
  }
.official-workflow-scope .form-card + .form-card{
    margin-top:14px;
  }
.official-workflow-scope .form-title{
    margin:0;
    padding:12px 13px;
    border-bottom:1px solid #b9d7ef;
    background:var(--report-heading);
    font-size:17px;
    font-weight:550;
  }
.official-workflow-scope .form-body{
    padding:13px;
  }
.official-workflow-scope .conditional{
    margin-top:11px;
    padding:11px 0 0;
    border:0;
    border-top:1px solid var(--line-soft);
    border-radius:0;
    background:transparent;
  }
.official-workflow-scope .choice{
    min-width:96px;
    min-height:42px;
    padding:7px 11px;
    font-size:12px;
  }
.official-workflow-scope .next-flow-steps{
    display:grid;
    grid-template-columns:1fr;
    gap:3px;
  }
.official-workflow-scope .next-flow-arrow{display:none}
.official-workflow-scope .info-row{
    grid-template-columns:1fr;
    gap:3px;
  }
.official-workflow-scope .form-actions{
    flex-direction:column-reverse;
  }
.official-workflow-scope .action{width:100%}
.official-workflow-scope .mobile-nav{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:80;
    height:var(--mobile-nav-h);
    display:grid;
    grid-template-columns:repeat(5,1fr);
    border-top:1px solid #b8c0ca;
    background:#fff;
    transform:translateY(0);
    opacity:1;
    transition:
      transform .46s cubic-bezier(.22,1,.36,1),
      opacity .34s ease;
  }
.official-workflow-scope .mobile-nav.hidden-by-scroll{
    transform:translateY(100%);
    opacity:0;
    pointer-events:none;
  }
.official-workflow-scope .mobile-nav button{
    min-width:0;
    border:0;
    border-right:1px solid #d5dbe2;
    background:#fff;
    color:#4c6175;
    font-size:12px;
    font-weight:850;
  }
.official-workflow-scope .mobile-nav button:last-child{border-right:0}
.official-workflow-scope .mobile-nav button.active{
    background:#edf6ff;
    color:#175ea8;
  }
.official-workflow-scope .mobile-nav button:disabled{
    background:#f1f3f5;
    color:#a5adb7;
  }
.official-workflow-scope .modal-backdrop{
    align-items:center;
    padding:
      max(12px,env(safe-area-inset-top))
      12px
      max(12px,env(safe-area-inset-bottom));
  }
.official-workflow-scope .modal{
    max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    border-radius:16px;
  }
.official-workflow-scope .modal-actions{
    display:grid;
    grid-template-columns:1fr 1.45fr;
  }}
.official-workflow-scope .inline-next-action{
  min-height:40px;
  margin-top:11px;
  padding:0 16px;
  border:1px solid var(--blue);
  border-radius:7px;
  background:var(--blue);
  color:#fff;
  cursor:pointer;
  font-size:13px;
  font-weight:850;
}
.official-workflow-scope .inline-next-action:hover{
  background:var(--blue-dark);
}
.official-workflow-scope .recurrence-reference-button{
  display:block;
}
@media (max-width:1099px){.official-workflow-scope .inline-next-action{
    width:100%;
    min-height:44px;
  }
.official-workflow-scope .recurrence-reference-button{
    display:none;
  }}
/* ===== 再発防止MT：参加者選択 ===== */
.official-workflow-scope .participant-multi{
  position:relative;
  width:100%;
}
.official-workflow-scope .participant-trigger{
  width:100%;
  min-height:44px;
  padding:0 42px 0 12px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  position:relative;
  border:1px solid #cbd4df;
  border-radius:8px;
  background:#fff;
  color:#26394b;
  cursor:pointer;
  text-align:left;
  font-size:14px;
}
.official-workflow-scope .participant-trigger:hover{border-color:#9db9d4}
.official-workflow-scope .participant-trigger:focus-visible{
  outline:2px solid #8bbbe7;
  outline-offset:1px;
}
.official-workflow-scope .participant-trigger-arrow{
  position:absolute;
  right:14px;
  top:50%;
  width:9px;
  height:9px;
  border-right:2px solid #718096;
  border-bottom:2px solid #718096;
  transform:translateY(-70%) rotate(45deg);
  transition:transform .16s ease;
}
.official-workflow-scope .participant-trigger[aria-expanded="true"] .participant-trigger-arrow{
  transform:translateY(-25%) rotate(225deg);
}
.official-workflow-scope .participant-dropdown{
  position:fixed;
  z-index:160;
  display:none;
  min-width:260px;
  max-width:520px;
  overflow:hidden;
  border:1px solid #bfcbd7;
  border-radius:10px;
  background:#fff;
  box-shadow:0 8px 26px rgba(35,55,75,.18);
}
.official-workflow-scope .participant-dropdown.show{display:block}
.official-workflow-scope .participant-dropdown-head{
  padding:10px 12px;
  border-bottom:1px solid #e2e7ec;
  background:#f8fafc;
  color:#536577;
  font-size:12px;
  font-weight:800;
}
.official-workflow-scope .participant-check-list{
  max-height:280px;
  overflow-y:auto;
  padding:6px;
  scrollbar-width:thin;
}
.official-workflow-scope .participant-check-row{
  width:100%;
  min-height:42px;
  padding:7px 9px;
  display:flex;
  align-items:center;
  gap:9px;
  border-radius:7px;
  color:#31475d;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
}
.official-workflow-scope .participant-check-row:hover{background:#f3f7fb}
.official-workflow-scope .participant-check-row input{
  flex:0 0 auto;
  width:18px;
  height:18px;
  margin:0;
  accent-color:var(--blue);
}
.official-workflow-scope .participant-dropdown-actions{
  padding:9px 10px;
  display:grid;
  grid-template-columns:1fr 1.35fr;
  gap:8px;
  border-top:1px solid #e2e7ec;
  background:#fff;
}
.official-workflow-scope .participant-dropdown-action{
  min-height:38px;
  padding:0 10px;
  border-radius:7px;
  cursor:pointer;
  font-size:12px;
  font-weight:850;
}
.official-workflow-scope .participant-dropdown-action.cancel{
  border:1px solid #cbd3dd;
  background:#f3f5f7;
  color:#536171;
}
.official-workflow-scope .participant-dropdown-action.apply{
  border:1px solid var(--blue);
  background:var(--blue);
  color:#fff;
}
.official-workflow-scope .participant-selected-area{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--line-soft);
}
.official-workflow-scope .participant-empty{
  color:#8793a0;
  font-size:12px;
  line-height:1.6;
}
.official-workflow-scope .participant-selected-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.official-workflow-scope .participant-chip{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:6px 8px 6px 11px;
  border:1px solid #b9cee1;
  border-radius:8px;
  background:#edf6ff;
  color:#1e609d;
  font-size:13px;
  font-weight:750;
}
.official-workflow-scope .participant-chip-remove{
  position:relative;
  width:26px;
  height:26px;
  margin-left:5px;
  padding:0;
  border:0;
  border-radius:6px;
  background:transparent;
  cursor:pointer;
}
.official-workflow-scope .participant-chip-remove::before, .official-workflow-scope .participant-chip-remove::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:11px;
  height:1.5px;
  background:#637b92;
  border-radius:2px;
  transform-origin:center;
}
.official-workflow-scope .participant-chip-remove::before{transform:translate(-50%,-50%) rotate(45deg)}
.official-workflow-scope .participant-chip-remove::after{transform:translate(-50%,-50%) rotate(-45deg)}
.official-workflow-scope .participant-chip-remove:hover{background:#dfeefe}
@media (max-width:1099px){.official-workflow-scope .participant-dropdown{
    min-width:0;
    max-width:none;
  }
.official-workflow-scope .participant-check-list{max-height:min(42dvh,320px)}
.official-workflow-scope .participant-dropdown-actions{grid-template-columns:1fr 1.4fr}}
/* ===== 日付入力：BOX全体から独自カレンダーを開く ===== */
.official-workflow-scope input[type="date"].date-picker-full{
  cursor:pointer;
  background-color:#fff;
}
.official-workflow-scope input[type="date"].date-picker-full::-webkit-calendar-picker-indicator{
  opacity:0;
  width:0;
  margin:0;
  padding:0;
}
.official-workflow-scope .calendar-backdrop{
  position:fixed;
  inset:0;
  z-index:220;
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:rgba(25,34,43,.42);
}
.official-workflow-scope .calendar-backdrop.show{display:flex}
.official-workflow-scope .calendar-modal{
  width:min(390px,100%);
  overflow:hidden;
  border:1px solid #ccd5df;
  border-radius:14px;
  background:#fff;
}
.official-workflow-scope .calendar-head{
  padding:12px 12px 10px;
  display:grid;
  grid-template-columns:40px 1fr 40px;
  align-items:center;
  gap:6px;
  border-bottom:1px solid #e4e8ed;
}
.official-workflow-scope .calendar-month{
  text-align:center;
  color:#26394b;
  font-size:16px;
  font-weight:850;
}
.official-workflow-scope .calendar-nav{
  width:38px;
  height:38px;
  border:1px solid #d4dbe3;
  border-radius:8px;
  background:#fff;
  color:#526579;
  cursor:pointer;
  font-size:20px;
}
.official-workflow-scope .calendar-weekdays, .official-workflow-scope .calendar-days{
  display:grid;
  grid-template-columns:repeat(7,1fr);
}
.official-workflow-scope .calendar-weekdays{
  padding:8px 10px 3px;
  color:#778493;
  font-size:11px;
  font-weight:750;
  text-align:center;
}
.official-workflow-scope .calendar-days{
  gap:3px;
  padding:5px 10px 10px;
}
.official-workflow-scope .calendar-day{
  min-height:42px;
  border:1px solid transparent;
  border-radius:8px;
  background:#fff;
  color:#34495e;
  cursor:pointer;
  font-size:13px;
  font-weight:700;
}
.official-workflow-scope .calendar-day:hover{
  border-color:#b8d4ee;
  background:#f2f8fe;
}
.official-workflow-scope .calendar-day.outside{color:#b1bac4}
.official-workflow-scope .calendar-day.today{border-color:#9fc5ea}
.official-workflow-scope .calendar-day.selected{
  border-color:var(--blue);
  background:var(--blue);
  color:#fff;
}
.official-workflow-scope .calendar-foot{
  padding:10px 12px 12px;
  display:flex;
  justify-content:space-between;
  gap:8px;
  border-top:1px solid #e4e8ed;
}
.official-workflow-scope .calendar-foot button{
  min-height:38px;
  padding:0 13px;
  border-radius:7px;
  cursor:pointer;
  font-size:12px;
  font-weight:850;
}
.official-workflow-scope .calendar-cancel{
  border:1px solid #cbd3dd;
  background:#f3f5f7;
  color:#536171;
}
.official-workflow-scope .calendar-today{
  border:1px solid #8ab9e6;
  background:#edf6ff;
  color:#225f99;
}
@media (max-width:1099px){.official-workflow-scope .calendar-day{min-height:44px}}
/* ===== 管理者編集 ===== */
.official-workflow-scope .kyoto-link-area{
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--line-soft);
}
.official-workflow-scope .kyoto-link-area.hidden{
  display:none;
}
.official-workflow-scope .subsection-title{
  margin-bottom:9px;
  color:#344054;
  font-size:14px;
  font-weight:850;
}
.official-workflow-scope .kyoto-link-grid{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.official-workflow-scope .kyoto-link-button{
  width:auto;
  max-width:100%;
  min-height:42px;
  padding:8px 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid #8ab9e6;
  border-radius:8px;
  background:#edf6ff;
  color:#225f99;
  cursor:pointer;
  text-align:center;
  white-space:normal;
  line-height:1.45;
  font-size:13px;
  font-weight:850;
}
.official-workflow-scope .kyoto-link-button:hover{
  background:#e2f1ff;
}
.official-workflow-scope .final-status-list{
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
}
.official-workflow-scope .final-status-row{
  min-height:48px;
  padding:8px 2px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid var(--line-soft);
  color:#405367;
  font-size:13px;
  font-weight:750;
}
.official-workflow-scope .final-status-row:last-child{border-bottom:0}
.official-workflow-scope .final-status-badge{
  flex:0 0 auto;
  min-width:68px;
  min-height:25px;
  padding:0 8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  font-size:11px;
  font-weight:850;
}
.official-workflow-scope .final-status-badge.ok{
  background:#e3f5ea;
  color:#176d45;
}
.official-workflow-scope .final-status-badge.wait{
  background:#fff1cf;
  color:#8a5600;
}
.official-workflow-scope .final-guide{
  margin-top:12px;
}
.official-workflow-scope .manager-return-info{
  display:none;
  margin-top:12px;
  padding:11px 12px;
  border:1px solid #e6c2c2;
  border-radius:8px;
  background:#fff4f4;
  color:#805050;
  font-size:12px;
  line-height:1.7;
}
.official-workflow-scope .manager-return-info.show{display:block}
.official-workflow-scope .manager-reference-button{display:block}
@media (max-width:1099px){.official-workflow-scope .kyoto-link-grid{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    gap:8px;
  }
.official-workflow-scope .kyoto-link-button{
    width:auto;
    max-width:100%;
  }
.official-workflow-scope .manager-reference-button{display:none}}

/* =========================================================
   本日確定した3タブの見た目をそのまま保持するための統合補正
   ========================================================= */
.official-workflow-scope .edit-view.official-workflow-view{
  height:auto;
  overflow:visible;
  padding-right:0;
}
.official-workflow-scope .kyoto-link-button{
  font-weight:500;
}
.official-workflow-scope .official-workflow-root{
  width:100%;
  min-width:0;
}

/* 全時刻欄：BOXのどこを押しても共通時刻ピッカーを開く */
input[type="time"].global-time-field{
  cursor:pointer;
  background:#fff;
}
input[type="time"].global-time-field::-webkit-calendar-picker-indicator{
  opacity:0;
  width:0;
  margin:0;
  padding:0;
  pointer-events:none;
}
.global-time-backdrop{
  position:fixed;
  inset:0;
  z-index:960;
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:rgba(25,34,43,.42);
}
.global-time-backdrop.show{display:flex}
.global-time-modal{
  width:min(360px,100%);
  overflow:hidden;
  border:1px solid #ccd5df;
  border-radius:14px;
  background:#fff;
}
.global-time-head{
  min-height:54px;
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #e4e8ed;
}
.global-time-title{
  color:#26394b;
  font-size:16px;
  font-weight:850;
}
.global-time-body{
  padding:18px 14px;
}
.global-time-select-row{
  display:grid;
  grid-template-columns:1fr 22px 1fr;
  align-items:center;
  gap:8px;
}
.global-time-select{
  width:100%;
  height:48px;
  border:1px solid #cbd4df;
  border-radius:8px;
  background:#fff;
  color:#26394b;
  padding:0 10px;
  font-size:16px;
  text-align:center;
}
.global-time-colon{
  color:#526579;
  font-size:20px;
  font-weight:850;
  text-align:center;
}
.global-time-now-label{
  margin-top:10px;
  color:#768394;
  font-size:11px;
  line-height:1.6;
}
.global-time-foot{
  padding:10px 12px 12px;
  display:flex;
  justify-content:space-between;
  gap:8px;
  border-top:1px solid #e4e8ed;
}
.global-time-foot button{
  min-height:38px;
  padding:0 13px;
  border-radius:7px;
  cursor:pointer;
  font-size:12px;
  font-weight:850;
}
.global-time-cancel{
  border:1px solid #cbd3dd;
  background:#f3f5f7;
  color:#536171;
}
.global-time-now{
  border:1px solid #8ab9e6;
  background:#edf6ff;
  color:#225f99;
}
.global-time-apply{
  border:1px solid var(--blue);
  background:var(--blue);
  color:#fff;
}
@media (max-width:1099px){
  .global-time-modal{width:min(340px,100%)}
  .global-time-select{height:52px}
}

/* 全日付欄：BOXのどこを押しても共通カレンダーを開く */
input[type="date"].global-date-field{
  cursor:pointer;
  background:#fff;
}
input[type="date"].global-date-field::-webkit-calendar-picker-indicator{
  opacity:0;
  width:0;
  margin:0;
  padding:0;
  pointer-events:none;
}
.global-calendar-backdrop{
  position:fixed;
  inset:0;
  z-index:950;
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:rgba(25,34,43,.42);
}
.global-calendar-backdrop.show{display:flex}
.global-calendar-modal{
  width:min(390px,100%);
  overflow:hidden;
  border:1px solid #ccd5df;
  border-radius:14px;
  background:#fff;
}
.global-calendar-head{
  padding:12px 12px 10px;
  display:grid;
  grid-template-columns:40px 1fr 40px;
  align-items:center;
  gap:6px;
  border-bottom:1px solid #e4e8ed;
}
.global-calendar-month{
  text-align:center;
  color:#26394b;
  font-size:16px;
  font-weight:850;
}
.global-calendar-nav{
  width:38px;
  height:38px;
  border:1px solid #d4dbe3;
  border-radius:8px;
  background:#fff;
  color:#526579;
  cursor:pointer;
  font-size:20px;
}
.global-calendar-weekdays,.global-calendar-days{
  display:grid;
  grid-template-columns:repeat(7,1fr);
}
.global-calendar-weekdays{
  padding:8px 10px 3px;
  color:#778493;
  font-size:11px;
  font-weight:750;
  text-align:center;
}
.global-calendar-days{gap:3px;padding:5px 10px 10px}
.global-calendar-day{
  min-height:42px;
  border:1px solid transparent;
  border-radius:8px;
  background:#fff;
  color:#34495e;
  cursor:pointer;
  font-size:13px;
  font-weight:700;
}
.global-calendar-day:hover{border-color:#b8d4ee;background:#f2f8fe}
.global-calendar-day.outside{color:#b1bac4}
.global-calendar-day.today{border-color:#9fc5ea}
.global-calendar-day.selected{border-color:#2f80ed;background:#2f80ed;color:#fff}
.global-calendar-foot{
  padding:10px 12px 12px;
  display:flex;
  justify-content:space-between;
  gap:8px;
  border-top:1px solid #e4e8ed;
}
.global-calendar-foot button{
  min-height:38px;
  padding:0 13px;
  border-radius:7px;
  cursor:pointer;
  font-size:12px;
  font-weight:850;
}
.global-calendar-cancel{border:1px solid #cbd3dd;background:#f3f5f7;color:#536171}
.global-calendar-today{border:1px solid #8ab9e6;background:#edf6ff;color:#225f99}
@media(max-width:1099px){
  .global-calendar-day{min-height:44px}
}


    /* =========================================================
       STEP4正式統合：最終確定後の職員確認
       昨日の凍結版の報告書BOXと、本日作成した操作ボタンを融合
       ========================================================= */

    .step4-confirm-box {
      border-color: #b7d7ef;
    }

    .step4-confirm-title {
      border-bottom-color: #b7d7ef;
      background: #eaf5ff;
      font-size: var(--section-heading-size);
      font-weight: 500;
    }

    .step4-confirm-body {
      padding: 13px;
    }

    .step4-state-row {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 9px;
      padding-bottom: 11px;
      border-bottom: 1px solid var(--line-soft);
    }

    .step4-state-label {
      color: #536273;
      font-size: var(--report-body-font);
      font-weight: 750;
    }

    .step4-confirm-description {
      margin: 11px 0 12px;
      color: #607083;
      font-size: var(--report-body-font);
      line-height: 1.75;
    }

    .step4-confirm-button {
      width: 100%;
      min-height: 44px;
      padding: 0 14px;
      border: 1px solid var(--blue);
      border-radius: 8px;
      background: var(--blue);
      color: #fff;
      cursor: pointer;
      font-weight: 850;
    }

    .step4-confirm-button:hover {
      border-color: var(--blue-dark);
      background: var(--blue-dark);
    }

    .step4-confirmed-panel {
      margin-top: 12px;
      padding: 11px 12px;
      border: 1px solid #b9d8c1;
      border-radius: 8px;
      background: #f2faf4;
      color: #2e7040;
      font-size: var(--report-body-font);
      font-weight: 750;
      line-height: 1.65;
    }

    .step4-confirm-time {
      margin-top: 3px;
      color: #6c8173;
      font-size: 11px;
      font-weight: 600;
    }

    .step4-final-row {
      min-height: 43px;
      display: grid;
      grid-template-columns: 128px minmax(0, 1fr);
      border-bottom: 1px solid var(--line-soft);
    }

    .step4-final-row:last-child { border-bottom: 0; }

    .step4-final-label,
    .step4-final-value {
      padding: 9px 11px;
      display: flex;
      align-items: center;
      font-size: var(--report-body-font);
      line-height: 1.6;
    }

    .step4-final-label {
      background: var(--label-bg);
      color: #596675;
      font-weight: 800;
    }

    .step4-final-value {
      color: #344054;
      overflow-wrap: anywhere;
    }

    .step4-modal-message {
      color: #405368;
      font-size: 14px;
      line-height: 1.8;
    }

    .step4-modal-note {
      margin-top: 12px;
      padding: 10px 11px;
      border: 1px solid #d4e1ec;
      border-radius: 8px;
      background: #f7fbff;
      color: #587086;
      font-size: 12px;
      line-height: 1.7;
    }

    .step4-toast {
      position: fixed;
      left: 50%;
      top: 16px;
      z-index: 700;
      max-width: calc(100% - 28px);
      padding: 10px 14px;
      display: none;
      border: 1px solid #bfd2e4;
      border-radius: 8px;
      background: #f8fbfe;
      color: #405a72;
      transform: translateX(-50%);
      font-size: 12px;
      font-weight: 750;
    }

    .step4-toast.show { display: block; }

    @media (max-width: 1099px) {
      .step4-confirm-button { min-height: 48px; }
      .step4-final-row { grid-template-columns: 105px minmax(0, 1fr); }
    }

  
/* =========================================================
   STEP4 v4
   スマホ編集画面：入れ子BOXをなくし、入力欄を広く使う
   ========================================================= */

/* サ責「事前リスク」2問目：PCでも1問目と同じ平坦な見た目 */
.official-workflow-scope .risk-followup-flat{
  display:none;
  margin-top:16px;
  padding:16px 0 0;
  border:0;
  border-top:1px solid var(--line-soft);
  border-radius:0;
  background:transparent;
}
.official-workflow-scope .risk-followup-flat.show{
  display:block;
}

@media (max-width:1099px){

  /* 報告者：長い質問文は折り返し、必須バッジは常に横1行で保持 */
  .official-author-root .label-row{
    align-items:flex-start;
  }
  .official-author-root .label-row > label,
  .official-author-root .label-row > .label{
    min-width:0;
    overflow-wrap:anywhere;
  }
  .official-author-root .req{
    flex:0 0 auto;
    min-width:34px;
    white-space:nowrap;
  }

  /* -----------------------------------------
     報告者（新規作成・編集）
     ----------------------------------------- */
  .edit-view.official-author-view{
    width:100%;
    max-width:none;
    padding-right:0;
  }

  .official-author-root{
    width:100%;
    padding:0;
    background:#fff;
  }

  .official-author-root .wrap{
    width:100%;
    max-width:none;
    margin:0;
  }

  /*
   * 青い見出しは残すが、
   * 「青見出し＋外側カード＋内側余白」という入れ子を廃止する。
   */
  .official-author-root .section{
    overflow:visible;
    border:0;
    border-radius:0;
    background:transparent;
  }

  .official-author-root .section-title{
    border:1px solid #b7d7ef;
    border-radius:10px;
    background:var(--heading);
  }

  .official-author-root .section-body{
    padding:13px 0 0;
  }

  /*
   * 条件表示の中に入力欄がある場合も、
   * 左右のBOX・背景・余白を外し、横幅を確保する。
   */
  .official-author-root .conditional,
  .official-author-root .conditional-soft,
  .official-author-root .follow-box,
  .official-author-root .state-detail,
  .official-author-root .medical-detail-panel,
  .official-author-root .staff-subdetail,
  .official-author-root .traffic-subdetail{
    padding-left:0;
    padding-right:0;
    border-left:0;
    border-right:0;
    border-radius:0;
    background:transparent;
  }

  .official-author-root input[type="date"],
  .official-author-root input[type="time"],
  .official-author-root input[type="text"],
  .official-author-root select,
  .official-author-root textarea{
    width:100%;
    max-width:none;
  }

  /* -----------------------------------------
     再発・サ責・管理者
     ----------------------------------------- */
  .official-workflow-scope .edit-view.official-workflow-view{
    width:100%;
    max-width:none;
    padding-right:0;
  }

  .official-workflow-scope .official-workflow-root{
    width:100%;
    min-width:0;
  }

  /*
   * 凍結HTMLのスマホ編集画面と同じ考え方：
   * 外側カードの枠と左右paddingを外し、
   * 見出しだけを独立した青いBOXとして残す。
   */
  .official-workflow-scope .form-card{
    overflow:visible;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
  }

  .official-workflow-scope .form-card + .form-card{
    margin-top:18px;
  }

  .official-workflow-scope .form-title{
    margin:0;
    padding:12px 13px;
    border:1px solid #b9d7ef;
    border-radius:10px;
    background:var(--report-heading);
  }

  .official-workflow-scope .form-body{
    padding:13px 0 0;
  }

  .official-workflow-scope .conditional,
  .official-workflow-scope .risk-followup-flat{
    margin-top:13px;
    padding:13px 0 0;
    border:0;
    border-top:1px solid var(--line-soft);
    border-radius:0;
    background:transparent;
  }

  .official-workflow-scope .control,
  .official-workflow-scope .textarea{
    width:100%;
    max-width:none;
  }
}


/* =========================================================
   STEP5-B：ヒヤリハットのサ責確認・差し戻し・完了
   ========================================================= */
.official-workflow-scope .hiyari-saseki-summary{
  margin-top:12px;
}
.official-workflow-scope .hiyari-saseki-return-notice{
  margin-bottom:14px;
  padding:11px 12px;
  border:1px solid #e2baba;
  border-radius:8px;
  background:#fff4f4;
  color:#804545;
  font-size:12px;
  line-height:1.75;
}
.official-workflow-scope .hiyari-saseki-complete-note{
  margin-bottom:14px;
  padding:11px 12px;
  border:1px solid #bad7c1;
  border-radius:8px;
  background:#f2faf4;
  color:#356b42;
  font-size:12px;
  line-height:1.75;
}
.official-workflow-scope .hiyari-saseki-modal-field{
  margin-top:12px;
}
.official-workflow-scope .hiyari-saseki-modal-field .textarea{
  min-height:120px;
}
.official-hiyari-root .hiyari-return-notice{
  margin:0 0 14px;
  padding:11px 12px;
  border:1px solid #e2baba;
  border-radius:8px;
  background:#fff4f4;
  color:#804545;
  font-size:12px;
  line-height:1.75;
}
@media (max-width:1099px){
  .official-workflow-scope .hiyari-saseki-modal-field .textarea{
    min-height:150px;
  }
}


/* =========================================================
   STEP5.2：デザイン・情報配置統合
   ========================================================= */

/* 現在選択中＝淡いミント。実行ボタンの青は変更しない */
.work-button.active,
.official-workflow-scope .work-button.active,
.reference-tab.active,
.mobile-nav-button.active,
.official-workflow-scope .mobile-nav button.active{
  border-color:var(--active-border)!important;
  background:var(--active-bg)!important;
  color:var(--active-text)!important;
}

.official-author-root .choice-pill:has(input:checked),
.official-author-root .state-choice:has(input:checked),
.official-author-root .why-choice:has(input:checked),
.official-author-root .why-choice.unknown:has(input:checked),
.official-author-root .first-report-choice:has(input:checked),
.official-author-root .injury-choice:has(input:checked),
.official-author-root .traffic-choice:has(input:checked),
.official-hiyari-root .hiyari-choice-card:has(input:checked),
.official-workflow-scope .choice:has(input:checked),
.official-workflow-scope .participant-chip{
  border-color:var(--active-border)!important;
  background:var(--active-bg)!important;
  color:var(--active-text)!important;
}

/* 事故区分は等幅のまま、チェックと文字を左寄せ */
.official-author-root .check-card{
  justify-content:flex-start;
  text-align:left;
  padding-left:18px;
}

/* 「時刻は分からない」を後日判明チェックと同じ文字階層へ */
.official-author-root .time-unknown{
  font-size:12px;
  font-weight:700;
  line-height:1.45;
  color:#485b6d;
}

/* 選択済み添付ファイルBOXの見出し */
.official-author-root .queue-head{
  border-bottom-color:var(--active-border);
  background:var(--active-bg);
}
.official-author-root .queue-title{
  color:var(--active-text);
}

/* 報告書の工程間を明確に区切る */
.report-section-divider{
  flex:0 0 auto;
  margin:5px 0 3px;
  border-top:3px solid #d5dbe3;
}

/* 共有状態：未読職員は氏名だけ表示 */
.staff-item.is-unread{
  grid-template-columns:minmax(0,1fr);
}
.staff-item.is-unread .mini-status{
  display:none!important;
}

/* 参照を閉じるXは疑似要素1個だけに統一 */
.official-workflow-scope .reference-close{
  font-size:0;
}

/* ヒヤリハットの発生日・時刻を完全に同じ上端・高さへ */
.official-hiyari-root .hiyari-when-grid{
  align-items:start;
}
.official-hiyari-root .hiyari-when-grid > .field{
  margin-top:0;
}
.official-hiyari-root .hiyari-when-label{
  min-height:28px;
  margin-bottom:7px;
  align-items:center;
}
.official-hiyari-root .hiyari-when-grid input[type="date"],
.official-hiyari-root .hiyari-when-grid input[type="time"]{
  height:44px;
}



/* =========================================================
   STEP5.3：スマホ入力UX・余白調整
   ========================================================= */
.report-section-divider{
  flex:0 0 auto;
  height:0;
  margin:15px 0 13px;
  border-top:0!important;
}
@media (min-width:1100px) and (max-width:1399px){
  .case-grid > .scroll-pane + .scroll-pane,
  .case-grid.with-rail > .scroll-pane + .scroll-pane{
    margin-top:28px;
  }
}
@media (max-width:1099px){
  .official-author-root .support-grid{
    grid-template-columns:1fr;
    gap:12px;
  }
  .official-author-root .support-step{
    display:grid;
    grid-template-columns:24px minmax(0,1fr);
    align-items:center;
    gap:10px;
  }
  .official-author-root .support-step .step-label{
    min-height:0;
    margin:0;
    align-self:center;
    justify-self:start;
    color:#536579;
    font-size:13px;
    font-weight:650;
    line-height:1;
  }
  .official-author-root .support-step select{
    width:100%;
    min-width:0;
  }
  .mobile-nav-button{
    gap:6px;
    font-weight:600;
  }
  .mobile-nav-button .icon{margin:0;}
  input[type="date"],
  input[type="time"]{touch-action:pan-y;}
  input[type="date"].global-date-field::-webkit-calendar-picker-indicator,
  input[type="time"].global-time-field::-webkit-calendar-picker-indicator{
    opacity:1;
    width:auto;
    margin:0;
    padding:0;
    pointer-events:none;
  }
  .case-grid > .scroll-pane + .scroll-pane,
  .case-grid.with-rail > .scroll-pane + .scroll-pane{
    margin-top:28px;
  }
  textarea.mobile-autogrow{
    overflow-y:hidden!important;
    resize:none!important;
  }
}

/* 管理者の最終確定案内と保存結果を、独立したBOXとして表示 */
.official-workflow-scope .manager-save-status{
  margin-top:12px;
}

/* 提出・確認・最終確定の完了を明確に伝える共通モーダル */
body.current-ui-global-modal-open{
  overflow:hidden;
}

/* =========================================================
   採用デザイン：報告書のPCレイアウト／配色
   - 最右の報告書一覧レールを廃止
   - 本文2カラムは従来の読みやすい最大幅を維持
   - 報告本文と分析欄は同じ白背景
   - 見出しは背景色を使わず、太さ・余白・区切り線で表現
   ========================================================= */

:root{
  --sidebar-w:220px;
  --naru-pro-page:#e9eef3;
  --naru-pro-sidebar:#f1f3f5;
  --naru-pro-surface:#ffffff;
  --naru-pro-line:#d8e1e9;
  --naru-pro-text:#17324d;
  --naru-pro-sub:#607387;
  --naru-pro-active:#dbeafe;
  --naru-pro-active-text:#287fe5;
  --naru-report-readable-column-w:640px;
}

body,
.app,
.app-main,
.case-page,
.case-content{
  background:var(--naru-pro-page);
}

.sidebar{
  padding:16px 14px;
  background:var(--naru-pro-sidebar);
  border-right:1px solid var(--naru-pro-line);
  color:var(--naru-pro-text);
  text-align:left;
}

.sidebar-brand{
  padding:0 4px 15px;
}

.sidebar-app-title{
  color:var(--naru-pro-text);
  font-size:16px;
  font-weight:600;
  line-height:1.4;
}

.sidebar-user{
  color:var(--naru-pro-sub);
  font-size:12px;
  font-weight:400;
}

.prototype-role{
  justify-content:flex-start;
  color:var(--naru-pro-sub);
}

.prototype-role select{
  min-width:104px;
  height:32px;
  border-color:var(--naru-pro-line);
  background:var(--naru-pro-surface);
  color:var(--naru-pro-text);
  font-size:13px;
  font-weight:500;
}

.sidebar-case{
  padding:16px 4px 13px;
  border-top:1px solid var(--naru-pro-line);
}

.sidebar-client{
  color:var(--naru-pro-text);
  font-size:16px;
  font-weight:600;
}

.sidebar-category{
  color:var(--naru-pro-sub);
  font-size:13px;
  font-weight:400;
}

.sidebar-divider{
  margin:4px 4px 14px;
  border-top:1px solid var(--naru-pro-line);
}

.sidebar-global,
.sidebar-case-actions{
  gap:2px;
}

.sidebar .side-button{
  min-height:40px;
  padding:0 10px;
  border:1px solid transparent;
  border-radius:9px;
  background:transparent;
  color:var(--naru-pro-text);
  text-align:left;
  font-size:14px;
  font-weight:500;
}

.sidebar .side-button:hover:not(:disabled){
  border-color:transparent;
  background:#e5eaef;
  color:var(--naru-pro-text);
}

.sidebar .side-button.active{
  border-color:transparent;
  background:var(--naru-pro-active);
  color:var(--naru-pro-active-text);
  font-weight:600;
}

.sidebar .side-button.primary{
  min-height:44px;
  border-color:var(--blue);
  background:var(--blue);
  color:#fff;
  text-align:center;
  font-weight:600;
}

.sidebar .side-button.primary:hover:not(:disabled){
  border-color:var(--blue-dark);
  background:var(--blue-dark);
  color:#fff;
}

.work-nav{
  padding:10px 18px;
  background:var(--naru-pro-surface);
  border-bottom:1px solid var(--naru-pro-line);
}

.work-button,
.official-workflow-scope .work-button{
  border-color:#b9c7d4;
  background:#fff;
  color:var(--naru-pro-text);
  font-size:14px;
  font-weight:600;
}

.work-button:hover:not(.active):not(:disabled),
.official-workflow-scope .work-button:hover:not(.active):not(:disabled){
  border-color:#8eabc5;
  background:#eef2f6;
  color:var(--naru-pro-text);
}

.work-button.active,
.official-workflow-scope .work-button.active{
  border-color:var(--active-border);
  background:var(--naru-pro-active);
  color:var(--naru-pro-active-text);
  font-weight:700;
}

.work-button:disabled,
.official-workflow-scope .work-button:disabled,
.official-workflow-scope .work-button.dim{
  border-color:#c9d1da;
  background:#e3e7eb;
  color:#96a2b0;
  font-weight:600;
}

.desktop-reports-rail{
  display:none!important;
}

.report-overview-layout{
  padding:18px;
  background:var(--naru-pro-page);
}

.report-overview-grid{
  align-items:stretch;
}

.report-overview-grid > .scroll-pane{
  padding:0 16px 16px;
  border:1px solid var(--naru-pro-line);
  border-radius:12px;
  background:var(--naru-pro-surface);
  scrollbar-gutter:stable;
}

.report-overview-grid .stack{
  gap:0;
}

.report-overview-grid .major-heading{
  min-height:56px;
  margin:0 -16px;
  padding:11px 16px;
  border:0;
  border-bottom:1px solid var(--naru-pro-line);
  border-radius:0;
  background:var(--naru-pro-surface);
  color:var(--naru-pro-text);
  font-size:17px;
  font-weight:600;
}

.report-overview-grid .major-heading-client{
  color:var(--naru-pro-sub);
  font-weight:500;
}

.report-overview-grid .detail-box{
  padding:16px 0;
  overflow:visible;
  border:0;
  border-radius:0;
  background:var(--naru-pro-surface);
}

.report-overview-grid .detail-box + .detail-box{
  border-top:1px solid var(--naru-pro-line);
}

.report-overview-grid .detail-title{
  padding:0 0 9px;
  border:0;
  background:transparent;
  color:var(--naru-pro-text);
  font-size:14px;
  font-weight:600;
}

.report-overview-grid .detail-body{
  padding:0;
  background:var(--naru-pro-surface);
  color:var(--naru-pro-text);
  font-size:14px;
  font-weight:400;
  line-height:1.75;
}

.report-overview-grid .history-block + .history-block{
  margin-top:9px;
}

.report-overview-grid .history-toggle{
  border-color:var(--naru-pro-line);
  background:#f1f4f7;
  font-size:14px;
  font-weight:500;
}

.list-title{
  font-size:18px;
  font-weight:600;
}

.card-title{
  font-size:16px;
  font-weight:600;
}

.badge,
.mini-status{
  font-weight:700;
}

.report-overview-grid .report-section-divider{
  margin:8px 0;
  border-top:1px solid var(--naru-pro-line)!important;
}

@media (min-width:1400px){
  .app.show-reports-rail{
    grid-template-columns:var(--sidebar-w) minmax(0,1fr);
  }

  .report-overview-grid{
    width:min(100%, calc((var(--naru-report-readable-column-w) * 2) + var(--gap)));
    grid-template-columns:
      minmax(0,var(--naru-report-readable-column-w))
      minmax(0,var(--naru-report-readable-column-w));
    margin-right:auto;
  }
}

@media (max-width:1099px){
  .report-overview-grid > .scroll-pane{
    height:auto;
  }
}
.workflow-success-overlay{
  position:fixed;
  inset:0;
  z-index:3200;
  display:none;
  place-items:center;
  padding:16px;
  background:rgba(16,35,55,.58);
}
.workflow-success-overlay.open{
  display:grid;
}
.workflow-success-dialog{
  width:min(620px,calc(100vw - 32px));
  padding:34px 34px 28px;
  border:1px solid #cbd8e5;
  border-radius:20px;
  background:#fff;
  box-shadow:0 22px 70px rgba(10,35,60,.28);
  color:#102d49;
  text-align:center;
}
.workflow-success-icon{
  display:grid;
  place-items:center;
  width:68px;
  height:68px;
  margin:0 auto 18px;
  border-radius:50%;
  background:#e2f5e9;
  color:#187248;
  font-size:38px;
  font-weight:800;
}
.workflow-success-dialog h2{
  margin:0;
  font-size:26px;
  line-height:1.4;
}
.workflow-success-dialog p{
  margin:14px 0 26px;
  color:#52677c;
  font-size:17px;
  line-height:1.8;
}
.workflow-success-ok{
  min-width:150px;
  min-height:52px;
  padding:11px 28px;
  border:0;
  border-radius:10px;
  background:#287ee9;
  color:#fff;
  font:inherit;
  font-size:17px;
  font-weight:800;
  cursor:pointer;
}
.workflow-success-ok:hover{
  background:#176cd6;
}
.workflow-success-ok:focus-visible{
  outline:3px solid rgba(40,126,233,.35);
  outline-offset:3px;
}

/* 認証済み添付ファイルの画面内プレビュー */
.attachment-preview-link{
  appearance:none;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  color:#0645d9;
  font:inherit;
  text-align:left;
  text-decoration:underline;
  cursor:pointer;
}
.attachment-preview-link:hover{
  color:#0035aa;
}
.attachment-preview-link:focus-visible{
  border-radius:3px;
  outline:3px solid rgba(40,126,233,.28);
  outline-offset:3px;
}
.attachment-preview-overlay{
  position:fixed;
  inset:0;
  z-index:3300;
  display:none;
  place-items:center;
  padding:16px;
  background:rgba(16,35,55,.62);
}
.attachment-preview-overlay.open{
  display:grid;
}
.attachment-preview-dialog{
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr) auto;
  width:min(820px,calc(100vw - 32px));
  height:min(760px,calc(100dvh - 32px));
  max-height:calc(100dvh - 32px);
  overflow:hidden;
  border:1px solid #cbd8e5;
  border-radius:18px;
  background:#fff;
  box-shadow:0 22px 70px rgba(10,35,60,.32);
  color:#102d49;
}
.attachment-preview-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 22px;
  border-bottom:1px solid #d8e1ea;
}
.attachment-preview-head h2{
  min-width:0;
  margin:0;
  overflow:hidden;
  font-size:20px;
  line-height:1.45;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.attachment-preview-close{
  position:relative;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:42px;
  height:42px;
  padding:0;
  border:1px solid #c8d4df;
  border-radius:9px;
  background:#fff;
  color:#53677b;
  font-size:0;
  line-height:0;
  cursor:pointer;
}
.attachment-preview-close::before,
.attachment-preview-close::after{
  content:"";
  grid-area:1 / 1;
  width:20px;
  height:2px;
  border-radius:999px;
  background:currentColor;
}
.attachment-preview-close::before{
  transform:rotate(45deg);
}
.attachment-preview-close::after{
  transform:rotate(-45deg);
}
.attachment-preview-close:focus-visible{
  outline:3px solid rgba(40,126,233,.35);
  outline-offset:3px;
}
.attachment-preview-toolbar{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  padding:10px 16px;
  border-bottom:1px solid #d8e1ea;
  background:#f5f8fb;
}
.attachment-preview-toolbar.hidden,
.attachment-preview-download.hidden{
  display:none!important;
}
.attachment-preview-toolbar button{
  min-height:38px;
  padding:6px 13px;
  border:1px solid #bdcbd8;
  border-radius:8px;
  background:#fff;
  color:#193b5c;
  font:inherit;
  font-weight:700;
  cursor:pointer;
}
.attachment-preview-toolbar button:disabled{
  opacity:.45;
  cursor:not-allowed;
}
.attachment-preview-toolbar.pdf-mode .attachment-preview-image-only{
  display:none;
}
.attachment-preview-toolbar .attachment-preview-download{
  margin-left:auto;
  white-space:nowrap;
}
#attachmentPreviewZoom{
  min-width:58px;
  text-align:center;
  font-weight:800;
}
.attachment-preview-stage{
  position:relative;
  min-width:0;
  min-height:0;
  max-height:none;
  overflow:auto;
  scrollbar-gutter:stable;
  background:#e9eef3;
}
.attachment-preview-loading,
.attachment-preview-error{
  display:grid;
  min-height:300px;
  place-items:center;
  padding:28px;
  color:#506579;
  font-size:16px;
  line-height:1.7;
  text-align:center;
}
.attachment-preview-error{
  color:#8a3535;
}
.attachment-preview-image-canvas{
  position:relative;
  box-sizing:border-box;
  min-width:100%;
  min-height:360px;
  margin:0 auto;
}
.attachment-preview-image{
  position:absolute;
  top:50%;
  left:50%;
  display:block;
  max-width:none;
  max-height:none;
  transform-origin:center center;
  transition:transform .16s ease;
  box-shadow:0 4px 20px rgba(17,43,68,.18);
}
.attachment-preview-pdf-pages{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:18px;
  box-sizing:border-box;
  width:max-content;
  min-width:100%;
  min-height:100%;
  padding:24px;
}
.attachment-preview-pdf-page{
  display:block;
  flex:0 0 auto;
  max-width:none;
  margin:0 auto;
  background:#fff;
  box-shadow:0 4px 20px rgba(17,43,68,.18);
}
.attachment-preview-foot{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  padding:14px 20px;
  border-top:1px solid #d8e1ea;
  background:#fff;
}
.attachment-preview-download,
.attachment-preview-done{
  min-height:44px;
  padding:9px 18px;
  border-radius:9px;
  font:inherit;
  font-weight:800;
  line-height:24px;
  text-decoration:none;
}
.attachment-preview-download{
  border:1px solid #b9c8d6;
  background:#fff;
  color:#234968;
}
.attachment-preview-done{
  min-width:104px;
  border:1px solid #287ee9;
  background:#287ee9;
  color:#fff;
  cursor:pointer;
}

@media (max-width:640px){
  .workflow-success-dialog{
    padding:28px 20px 22px;
  }
  .workflow-success-dialog h2{
    font-size:22px;
  }
  .attachment-preview-overlay{
    padding:8px;
  }
  .attachment-preview-dialog{
    width:calc(100vw - 16px);
    height:calc(100dvh - 16px);
    max-height:calc(100dvh - 16px);
    border-radius:14px;
  }
  .attachment-preview-head{
    padding:12px 14px;
  }
  .attachment-preview-toolbar{
    flex-wrap:wrap;
    padding:8px;
  }
  .attachment-preview-toolbar button{
    min-height:40px;
    padding:6px 10px;
  }
  .attachment-preview-toolbar .attachment-preview-download{
    min-height:40px;
    margin-left:0;
    padding:7px 12px;
  }
  .attachment-preview-image-canvas{
    min-height:280px;
    padding:18px;
  }
  .attachment-preview-pdf-pages{
    gap:10px;
    padding:12px;
  }
  .attachment-preview-foot{
    padding:10px 12px;
  }
}

/* =========================================================
   閲覧報告書の最終整理：文書配色／共有状況／作成・確認ナビ
   ========================================================= */

/* 共有状況は報告書本文へ常時表示するため、旧ボタンは使用しない */
#shareButton,
#mobileShareButton{
  display:none!important;
}

/* 左グランドメニュー：一覧と新規作成を同じ軽いボタン体系へ統一 */
.unified-sidebar-panel #backListButton,
.unified-sidebar-panel #createButton{
  min-height:42px;
  border:1px solid #c8d8e6;
  background:#fff;
  box-shadow:none;
  color:#294761;
  font-size:14px;
  font-weight:500;
  text-align:center;
}

.unified-sidebar-panel #backListButton:hover:not(:disabled),
.unified-sidebar-panel #createButton:hover:not(:disabled){
  border-color:#abc4da;
  background:#f8fbfd;
  color:#245e98;
}

.unified-sidebar-panel #backListButton.active{
  border-color:#bfd6ea;
  background:#fff;
  box-shadow:inset 3px 0 #2f80ed;
  color:#287fe5;
  font-weight:500;
}

/* 報告書は閲覧、残り4工程は「作成・確認」として意味を分ける */
.workflow-edit-group{
  min-width:0;
  display:flex;
  align-items:center;
}

.workflow-edit-label{
  flex:0 0 auto;
  color:#6b7d90;
  font-size:11px;
  font-weight:500;
  white-space:nowrap;
}

.workflow-edit-buttons{
  min-width:0;
  display:flex;
  align-items:center;
}

/* 閲覧報告書だけ：回答文は白、見出しをごく薄いグレーにする */
.app.report-reading-mode .report-overview-grid .major-heading{
  background:#eef2f5;
}

.app.report-reading-mode .report-overview-grid .detail-title{
  margin:0 0 8px;
  padding:7px 10px;
  border:0;
  border-radius:6px;
  background:#f5f7f9;
  color:#172f47;
  font-weight:600;
}

.app.report-reading-mode .report-overview-grid .report-basic-box > .detail-title{
  margin-bottom:2px;
  padding:7px 10px;
  background:#f5f7f9;
}

.app.report-reading-mode .report-overview-grid .detail-body{
  padding:3px 10px 2px;
  border-radius:0;
  background:#fff;
}

/* 本文内へ移した共有状況 */
.app.report-reading-mode .report-sharing-inline{
  display:block;
}

.app.report-reading-mode .report-sharing-content{
  padding:2px 10px 0;
}

.app.report-reading-mode .report-sharing-section + .report-sharing-section{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid #dce4eb;
}

.app.report-reading-mode .report-sharing-subtitle{
  color:#294761;
  font-size:13px;
  font-weight:500;
  line-height:1.45;
}

.app.report-reading-mode .report-sharing-summary{
  margin-bottom:8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:#6b7d90;
  font-size:12px;
  font-weight:400;
}

.app.report-reading-mode .report-sharing-report-grid,
.app.report-reading-mode .report-sharing-staff-grid{
  margin-top:8px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px 10px;
}

.app.report-reading-mode .report-sharing-report-row,
.app.report-reading-mode .report-sharing-staff-item{
  min-width:0;
  min-height:38px;
  padding:7px 9px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:9px;
  border:1px solid #e1e7ed;
  border-radius:7px;
  background:#fff;
  color:#435a70;
  font-size:12px;
  font-weight:400;
}

.app.report-reading-mode .report-sharing-staff-name{
  min-width:0;
  overflow-wrap:anywhere;
}

.app.report-reading-mode .report-sharing-inline .mini-status{
  flex:0 0 auto;
  min-height:23px;
  padding:0 8px;
  font-size:11px;
  font-weight:600;
  white-space:nowrap;
}

.app.report-reading-mode .report-sharing-empty{
  margin:8px 0 0;
  color:#6b7d90;
  font-size:12px;
  line-height:1.6;
}

@media (min-width:1100px){
  /* 案件上部をページ背景へ溶け込ませ、白い帯をなくす */
  .app.report-reading-mode .case-page:not(.hidden){
    background:var(--naru-pro-page);
  }

  .app.report-reading-mode .case-page:not(.hidden) > .report-reading-casebar,
  .app.report-reading-mode .case-page:not(.hidden) > .work-nav{
    border-bottom:0;
    background:var(--naru-pro-page);
  }

  .case-page:not(.hidden) > .report-reading-casebar{
    flex:0 0 52px;
    min-height:52px;
    padding:7px 18px;
    gap:10px;
  }

  .case-page:not(.hidden) > .report-reading-casebar .report-reading-case-title{
    max-width:430px;
  }

  .case-page:not(.hidden) > .work-nav{
    flex:0 0 54px;
    min-height:54px;
    padding:5px 18px;
    gap:10px;
  }

  .case-page:not(.hidden) > .work-nav > .work-button[data-work="report"]{
    flex:0 0 94px;
    min-width:94px;
    max-width:94px;
    min-height:38px;
    padding:0 10px;
  }

  .case-page:not(.hidden) > .work-nav > .workflow-edit-group{
    gap:7px;
    padding:4px 5px 4px 9px;
    border:1px solid #c9d5df;
    border-radius:10px;
    background:rgba(255,255,255,.58);
  }

  .case-page:not(.hidden) > .work-nav .workflow-edit-buttons{
    gap:5px;
  }

  .case-page:not(.hidden) > .work-nav .workflow-edit-buttons .work-button{
    flex:0 1 auto;
    min-width:88px;
    max-width:none;
    min-height:34px;
    padding:0 9px;
    border-radius:7px;
    white-space:nowrap;
  }

  .case-page:not(.hidden) > .work-nav .workflow-edit-buttons .work-button[data-work="recurrence"]{
    min-width:104px;
  }

  /* 2カラム目も、白いカードの外側をスクロール領域にする */
  .app.report-reading-mode .report-overview-grid > .report-document-pane{
    padding:0 4px 18px 0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }

  .app.report-reading-mode .report-document-pane > .stack{
    padding:0 16px 18px;
    overflow:hidden;
    border:1px solid #d5e0e8;
    border-radius:12px;
    background:#fff;
    box-shadow:0 1px 2px rgba(18,50,77,.03);
  }

  .app.report-reading-mode .report-document-pane > .stack > .major-heading{
    margin:0 -16px;
  }

  .app.report-reading-mode .report-document-pane,
  .app.report-reading-mode .report-analysis-pane{
    scrollbar-gutter:stable;
  }
}

@media (min-width:1500px){
  .case-page:not(.hidden){
    grid-template-columns:minmax(330px,480px) minmax(0,1fr);
    grid-template-rows:56px minmax(0,1fr);
  }

  .app.report-reading-mode .case-page:not(.hidden) > .report-reading-casebar{
    width:auto;
    max-width:none;
    height:56px;
    padding:7px 0 7px 18px;
    background:var(--naru-pro-page);
  }

  .app.report-reading-mode .case-page:not(.hidden) > .work-nav{
    height:56px;
    min-height:56px;
    padding:5px 18px 5px 10px;
    border-left:0;
    background:var(--naru-pro-page);
  }
}

@media (max-width:1099px){
  /* スマホは既存の5分割とタッチ領域を維持する */
  .workflow-edit-group,
  .workflow-edit-buttons{
    display:contents;
  }

  .workflow-edit-label{
    display:none;
  }

  .app.report-reading-mode .report-sharing-report-grid,
  .app.report-reading-mode .report-sharing-staff-grid{
    grid-template-columns:minmax(0,1fr);
  }

  .app.report-reading-mode .report-sharing-summary{
    align-items:flex-start;
    flex-direction:column;
    gap:3px;
  }
}

/* =========================================================
   PRO refinement：報告書閲覧専用レイアウト
   サンプルと同じ情報階層を、報告書タブ表示時だけ適用する。
   ========================================================= */

.report-reading-header,
.report-reading-menu,
.report-reading-casebar{
  display:none;
}

@media (min-width:1100px){
  .app.report-reading-mode{
    --report-reading-menu-w:180px;
    grid-template-columns:var(--report-reading-menu-w) minmax(0,1fr)!important;
    grid-template-rows:72px minmax(0,1fr);
    grid-template-areas:
      "report-reading-header report-reading-header"
      "report-reading-menu report-reading-main";
    background:#e9eef3;
    color:#17324d;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  }

  .app.report-reading-mode > .report-reading-header{
    grid-area:report-reading-header;
    z-index:25;
    min-width:0;
    padding:0 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    border-bottom:1px solid #d8e1e9;
    background:#fff;
  }

  .report-reading-brand,
  .report-reading-user{
    min-width:0;
    display:flex;
    align-items:center;
  }

  .report-reading-brand{
    gap:12px;
  }

  .report-reading-brand-mark,
  .report-reading-user-mark{
    flex:0 0 auto;
    display:grid;
    place-items:center;
    color:#fff;
    background:#2f80ed;
  }

  .report-reading-brand-mark{
    width:38px;
    height:38px;
    border-radius:10px;
    font-size:18px;
    font-weight:600;
  }

  .report-reading-brand-title{
    color:#17324d;
    font-size:16px;
    font-weight:600;
    line-height:1.35;
  }

  .report-reading-brand-sub{
    margin-top:2px;
    color:#718196;
    font-size:12px;
    font-weight:400;
    line-height:1.3;
  }

  .report-reading-user{
    gap:9px;
    color:#607387;
    font-size:13px;
    font-weight:400;
  }

  .report-reading-user-mark{
    width:32px;
    height:32px;
    border-radius:50%;
    background:#eef6ff;
    color:#287fe5;
    font-size:13px;
    font-weight:600;
  }

  .app.report-reading-mode > .sidebar{
    grid-area:report-reading-menu;
    z-index:20;
    width:auto;
    height:100%;
    min-height:0;
    padding:14px 12px;
    overflow:hidden;
    border-right:0;
    background:#e9eef3;
  }

  .app.report-reading-mode > .sidebar > .sidebar-brand,
  .app.report-reading-mode > .sidebar > .sidebar-case,
  .app.report-reading-mode > .sidebar > .sidebar-divider,
  .app.report-reading-mode > .sidebar > .sidebar-global{
    display:none!important;
  }

  .app.report-reading-mode .report-reading-menu{
    min-height:0;
    height:100%;
    padding:14px 9px 10px;
    display:flex;
    flex-direction:column;
    gap:3px;
    border:1px solid #d6e0e8;
    border-radius:12px;
    background:#f2f4f6;
  }

  .report-reading-menu-title{
    padding:2px 11px 11px;
    color:#607387;
    font-size:13px;
    font-weight:600;
    line-height:1.4;
  }

  .report-reading-menu-item,
  .report-reading-menu-action{
    width:100%;
    min-height:40px;
    padding:0 11px;
    border:1px solid transparent;
    border-radius:9px;
    background:transparent;
    color:#17324d;
    text-align:left;
    cursor:pointer;
    font-size:14px;
    font-weight:400;
    line-height:1.35;
  }

  .report-reading-menu-item:hover:not(:disabled),
  .report-reading-menu-action:hover{
    background:#e6ebf0;
  }

  .report-reading-menu-item.active{
    border-color:#d5e7ff;
    background:#dbeafe;
    color:#287fe5;
    font-weight:600;
  }

  .report-reading-menu-item:disabled{
    color:#9aa7b5;
    cursor:not-allowed;
    opacity:.62;
  }

  .report-reading-menu-spacer{
    flex:1 1 auto;
    min-height:14px;
  }

  .report-reading-menu-action{
    min-height:38px;
    border-radius:7px;
    color:#52677b;
    font-size:13px;
    font-weight:500;
  }

  .report-reading-menu-action[data-report-menu-action="share"]{
    padding-top:4px;
    border-top:1px solid #d8e1e9;
    border-radius:0 0 7px 7px;
  }

  .app.report-reading-mode > .app-main{
    grid-area:report-reading-main;
    min-width:0;
    min-height:0;
    height:100%;
    background:#e9eef3;
  }

  .app.report-reading-mode .case-page{
    min-height:0;
    background:#e9eef3;
  }

  .app.report-reading-mode .report-reading-casebar{
    flex:0 0 64px;
    min-height:64px;
    padding:10px 18px;
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:18px;
    border-bottom:1px solid #d8e1e9;
    background:#fff;
  }

  .report-reading-back{
    min-width:132px;
    min-height:40px;
    padding:0 14px;
    border:1px solid #c8d5e0;
    border-radius:9px;
    background:#fff;
    color:#294761;
    cursor:pointer;
    font-size:13px;
    font-weight:500;
  }

  .report-reading-back:hover{
    border-color:#9eb5c9;
    background:#f7f9fb;
  }

  .report-reading-case-title{
    min-width:0;
    display:flex;
    align-items:baseline;
    gap:18px;
    overflow:hidden;
    white-space:nowrap;
  }

  .report-reading-case-title strong{
    flex:0 0 auto;
    color:#17324d;
    font-size:18px;
    font-weight:600;
  }

  .report-reading-case-title span{
    min-width:0;
    overflow:hidden;
    color:#435a70;
    text-overflow:ellipsis;
    font-size:14px;
    font-weight:400;
  }

  .report-reading-case-status{
    min-height:30px;
    padding:0 13px;
    display:inline-flex;
    align-items:center;
    border-radius:999px;
    background:#e5f5ec;
    color:#2d7a59;
    font-size:13px;
    font-weight:500;
    white-space:nowrap;
  }

  .app.report-reading-mode .work-nav{
    flex:0 0 60px;
    min-height:60px;
    padding:9px 18px;
    gap:10px;
    border-bottom:1px solid #d8e1e9;
    background:#f4f7fa;
  }

  .app.report-reading-mode .work-button,
  .app.report-reading-mode .official-workflow-scope .work-button{
    min-width:136px;
    min-height:42px;
    border:1px solid #bdcad6;
    border-radius:8px;
    background:#fff;
    box-shadow:0 1px 2px rgba(18,50,77,.04);
    color:#294761;
    font-size:14px;
    font-weight:500;
  }

  .app.report-reading-mode .work-button:hover:not(.active):not(:disabled){
    border-color:#8fa9bf;
    background:#fff;
  }

  .app.report-reading-mode .work-button.active{
    border-color:#bfdcff!important;
    background:#dbeafe!important;
    box-shadow:none;
    color:#287fe5!important;
    font-weight:600;
  }

  .app.report-reading-mode .work-button:disabled{
    border-color:#cbd3dc;
    background:#e2e7ec;
    box-shadow:none;
    color:#96a2af;
    font-weight:500;
  }

  .app.report-reading-mode .report-overview-layout{
    padding:18px;
    background:#e9eef3;
  }

  .app.report-reading-mode .report-overview-grid > .scroll-pane{
    padding:0 16px 18px;
    border:1px solid #d5e0e8;
    border-radius:12px;
    background:#fff;
    box-shadow:0 1px 2px rgba(18,50,77,.03);
  }

  .app.report-reading-mode .report-overview-grid .major-heading{
    min-height:56px;
    color:#172f47;
    font-size:16px;
    font-weight:600;
    line-height:1.4;
  }

  .app.report-reading-mode .report-overview-grid .major-heading-client{
    color:#6b7d90;
    font-size:13px;
    font-weight:400;
  }

  .app.report-reading-mode .report-overview-grid .detail-box{
    padding:16px 0;
  }

  .app.report-reading-mode .report-overview-grid .detail-title{
    padding:0 0 9px;
    color:#172f47;
    font-size:14px;
    font-weight:600;
    line-height:1.5;
  }

  .app.report-reading-mode .report-overview-grid .detail-body{
    padding:11px 12px;
    border-radius:8px;
    background:#f7f9fb;
    color:#294761;
    font-size:14px;
    font-weight:400;
    line-height:1.75;
  }

  .app.report-reading-mode .report-overview-grid .report-basic-box{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:24px;
    row-gap:14px;
  }

  .app.report-reading-mode .report-basic-box > .detail-title{
    grid-column:1 / -1;
    padding-bottom:0;
  }

  .app.report-reading-mode .report-basic-box > .basic-row{
    min-height:0;
    display:block;
    border:0;
  }

  .app.report-reading-mode .report-basic-box .basic-label,
  .app.report-reading-mode .report-basic-box .basic-value{
    min-height:0;
    padding:0;
    display:block;
    background:transparent;
  }

  .app.report-reading-mode .report-basic-box .basic-label{
    margin-bottom:4px;
    color:#73859a;
    font-size:13px;
    font-weight:400;
    line-height:1.45;
  }

  .app.report-reading-mode .report-basic-box .basic-value{
    color:#294761;
    font-size:14px;
    font-weight:400;
    line-height:1.55;
  }

  .app.report-reading-mode .report-overview-grid .history-block + .history-block{
    margin-top:9px;
  }

  .app.report-reading-mode .report-overview-grid .history-toggle{
    min-height:42px;
    padding:0 12px;
    border:1px solid #d4dee7;
    border-radius:8px;
    background:#f1f4f7;
    color:#294761;
    font-size:14px;
    font-weight:500;
  }

  .app.report-reading-mode .history-block.open .history-toggle{
    border-radius:8px 8px 0 0;
  }

  .app.report-reading-mode .history-panel{
    margin-top:0;
    border-color:#d4dee7;
    border-radius:0 0 8px 8px;
    color:#52677b;
    font-size:13px;
    font-weight:400;
  }
}

@media (min-width:1100px) and (max-width:1260px){
  .app.report-reading-mode{
    --report-reading-menu-w:166px;
  }

  .app.report-reading-mode .work-button{
    min-width:112px;
    padding:0 10px;
  }

  .report-reading-case-title{
    gap:12px;
  }
}

@media (max-width:1099px){
  .app.report-reading-mode .report-reading-header,
  .app.report-reading-mode .report-reading-menu,
  .app.report-reading-mode .report-reading-casebar{
    display:none!important;
  }
}

/* =========================================================
   最終採用：全画面共通グランドメニュー／白い一覧カード
   ========================================================= */

:root{
  --sidebar-w:210px;
  --naru-grand-bg:#f2f4f6;
  --naru-grand-line:#d6e0e8;
  --naru-card-hover:#fbfdff;
}

.app{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

#reportReadingHeader,
#reportReadingMenu{
  display:none!important;
}

.sidebar.unified-sidebar{
  padding:12px 10px;
  overflow:hidden;
  border-right:0;
  background:var(--naru-pro-page);
  color:var(--naru-pro-text);
  text-align:left;
}

.unified-sidebar-panel{
  width:100%;
  height:100%;
  min-height:0;
  padding:12px 8px 9px;
  display:flex;
  flex-direction:column;
  border:1px solid var(--naru-grand-line);
  border-radius:12px;
  background:var(--naru-grand-bg);
}

.unified-sidebar-panel .sidebar-brand{
  flex:0 0 auto;
  padding:2px 5px 13px;
}

.unified-sidebar-panel .sidebar-app-title{
  color:#17324d;
  font-size:14px;
  font-weight:600;
  line-height:1.45;
  white-space:nowrap;
}

.unified-sidebar-panel .sidebar-user{
  margin-top:3px;
  color:#6b7d90;
  font-size:12px;
  font-weight:400;
  line-height:1.4;
}

.unified-sidebar-panel .prototype-role{
  margin-top:9px;
  justify-content:flex-start;
  color:#6b7d90;
  font-size:12px;
  font-weight:400;
}

.unified-sidebar-panel .prototype-role select{
  min-width:100px;
  height:32px;
  border:1px solid #cbd6e0;
  border-radius:7px;
  background:#fff;
  color:#294761;
  font-size:12px;
  font-weight:500;
}

.unified-sidebar-panel .sidebar-divider{
  flex:0 0 auto;
  margin:0 5px 10px;
  border-top:1px solid var(--naru-grand-line);
}

.unified-sidebar-panel .sidebar-global{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.unified-sidebar-panel .side-button{
  min-height:40px;
  padding:0 11px;
  border:1px solid transparent;
  border-radius:9px;
  background:transparent;
  color:#17324d;
  text-align:left;
  font-size:14px;
  font-weight:500;
  line-height:1.35;
}

.unified-sidebar-panel .side-button:hover:not(:disabled){
  border-color:transparent;
  background:#e6ebf0;
  color:#17324d;
}

.unified-sidebar-panel .side-button.active{
  border-color:#d5e7ff;
  background:#dbeafe;
  color:#287fe5;
  font-weight:600;
}

.unified-sidebar-panel .side-button.primary{
  min-height:40px;
  margin:3px 0 5px;
  border-color:#2f80ed;
  background:#2f80ed;
  color:#fff;
  text-align:center;
  font-weight:600;
}

.unified-sidebar-panel .side-button.primary:hover:not(:disabled){
  border-color:#1769aa;
  background:#1769aa;
  color:#fff;
}

.unified-sidebar-panel #logoutButton{
  margin-top:auto;
  color:#52677b;
}

.sidebar.unified-sidebar > .sidebar-case{
  display:none!important;
}

.list-toolbar{
  width:min(760px,100%);
  align-items:center;
  justify-content:space-between;
}

.unified-list-filter{
  min-height:38px;
  padding:0 13px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid #bdcad6;
  border-radius:8px;
  background:#fff;
  color:#294761;
  font-size:13px;
  font-weight:500;
}

.unified-list-filter:hover{
  border-color:#8fa9bf;
  background:#f8fafc;
}

.unified-list-filter.active{
  border-color:#bfdcff;
  background:#dbeafe;
  color:#287fe5;
  font-weight:600;
}

.report-list{
  gap:12px;
}

.report-card,
.report-card.accident-card,
.report-card.hiyari-card{
  padding:16px 18px;
  border:1px solid #d6dee7;
  border-radius:10px;
  background:#fff;
  box-shadow:none;
  transition:border-color .14s ease, background .14s ease, box-shadow .14s ease;
}

.report-card:hover,
.report-card.accident-card:hover,
.report-card.hiyari-card:hover{
  border-color:#9eb5c9;
  background:var(--naru-card-hover);
  box-shadow:0 2px 8px rgba(23,50,77,.06);
}

.report-card:focus-visible{
  outline:3px solid rgba(47,128,237,.28);
  outline-offset:2px;
}

.report-card .card-badges{
  gap:6px;
  margin-bottom:8px;
}

.report-card .card-title{
  margin:0 0 7px;
  color:#17324d;
  font-size:16px;
  font-weight:600;
  line-height:1.45;
}

.report-card .card-meta{
  color:#6b7d90;
  font-size:13px;
  font-weight:400;
  line-height:1.45;
}

.report-card .badge{
  min-height:24px;
  padding:0 8px;
  font-size:12px;
  font-weight:600;
}

.badge-accident{
  background:#fdecec;
  color:#b42318;
}

.badge-hiyari{
  background:#eaf3ff;
  color:#2369a8;
}

.badge-neutral{
  background:#eef2f6;
  color:#526579;
}

.badge-pending{
  background:#fff3d8;
  color:#7a5312;
}

.badge-attention{
  border:1px solid #f1c5c5;
  background:#fff0f0;
  color:#b42318;
}

.badge-success{
  background:#e7f6ed;
  color:#247a4b;
}

@media (min-width:1100px){
  .app.report-reading-mode{
    grid-template-columns:var(--sidebar-w) minmax(0,1fr)!important;
    grid-template-rows:minmax(0,1fr)!important;
    grid-template-areas:none!important;
  }

  .app.report-reading-mode > .sidebar,
  .app.report-reading-mode > .app-main{
    grid-area:auto!important;
    min-height:0;
    height:100%;
  }

  .app.report-reading-mode > .sidebar{
    padding:12px 10px;
    background:var(--naru-pro-page);
  }

  .case-page:not(.hidden) > .report-reading-casebar{
    flex:0 0 64px;
    min-height:64px;
    padding:10px 18px;
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:18px;
    border-bottom:1px solid #d8e1e9;
    background:#fff;
  }

  .report-reading-case-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:9px;
  }

  .report-reading-share{
    min-height:36px;
    padding:0 12px;
    border:1px solid #bdcad6;
    border-radius:8px;
    background:#fff;
    color:#294761;
    cursor:pointer;
    font-size:13px;
    font-weight:500;
  }

  .report-reading-share:hover{
    border-color:#8fa9bf;
    background:#f8fafc;
  }

  .report-reading-case-status{
    background:#eef2f6;
    color:#526579;
    font-weight:500;
  }

  .report-reading-case-status.is-success{
    background:#e7f6ed;
    color:#247a4b;
  }

  .report-reading-case-status.is-pending{
    background:#fff3d8;
    color:#7a5312;
  }

  .report-reading-case-status.is-attention{
    border:1px solid #f1c5c5;
    background:#fff0f0;
    color:#b42318;
  }

  .report-reading-case-status.is-neutral{
    background:#eef2f6;
    color:#526579;
  }
}

@media (max-width:1099px){
  .unified-list-filter{
    display:none!important;
  }

  .report-reading-casebar{
    display:none!important;
  }

  .report-card,
  .report-card.accident-card,
  .report-card.hiyari-card{
    padding:14px;
  }
}

/* =========================================================
   最終調整：軽量タイポグラフィ／上部ナビ／分析工程の独立BOX
   ========================================================= */

/* 添付プレビュー：本文より操作UIが強く見えない文字階層 */
.attachment-preview-dialog{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-weight:400;
}

.attachment-preview-head{
  padding:14px 18px;
}

.attachment-preview-head h2{
  font-size:18px;
  font-weight:500;
  line-height:1.4;
}

.attachment-preview-close{
  width:38px;
  height:38px;
}

.attachment-preview-toolbar{
  gap:7px;
  padding:8px 12px;
}

.attachment-preview-toolbar button,
.attachment-preview-toolbar .attachment-preview-download{
  min-height:38px;
  padding:6px 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  font-size:14px;
  font-weight:500;
  line-height:1.2;
  text-align:center;
}

#attachmentPreviewZoom{
  min-width:54px;
  font-size:14px;
  font-weight:500;
}

.attachment-preview-foot{
  padding:10px 16px;
}

.attachment-preview-done{
  min-width:96px;
  min-height:40px;
  padding:7px 16px;
  font-size:15px;
  font-weight:500;
  line-height:1.2;
  text-align:center;
}

/* 左グランドメニュー：最初のサンプルと同じ軽い視覚ルール */
.unified-sidebar-panel{
  padding:14px 10px 10px;
  background:#f3f5f7;
}

.unified-sidebar-panel .sidebar-brand{
  padding:1px 4px 12px;
}

.unified-sidebar-panel .sidebar-app-title{
  font-size:14px;
  font-weight:500;
}

.unified-sidebar-panel .sidebar-user{
  font-size:12px;
  font-weight:400;
}

.unified-sidebar-panel .prototype-role,
.unified-sidebar-panel .prototype-role select{
  font-weight:400;
}

.unified-sidebar-panel .sidebar-divider{
  margin:0 4px 11px;
}

.unified-sidebar-panel .sidebar-global{
  gap:6px;
}

.unified-sidebar-panel .side-button{
  min-height:42px;
  padding:0 10px;
  text-align:center;
  font-size:14px;
  font-weight:400;
}

.unified-sidebar-panel .side-button.active{
  border-color:transparent;
  background:#dbeafe;
  color:#287fe5;
  font-weight:500;
}

.unified-sidebar-panel .side-button.primary{
  min-height:42px;
  margin:1px 0 3px;
  border-color:#bfd6ee;
  background:#fff;
  color:#287fe5;
  text-align:center;
  font-weight:500;
}

.unified-sidebar-panel .side-button.primary:hover:not(:disabled){
  border-color:#a9c9ea;
  background:#edf5ff;
  color:#287fe5;
}

.unified-sidebar-panel #logoutButton{
  text-align:center;
  font-size:13px;
  font-weight:400;
}

/* 3カラム目：工程ごとに独立した白いカードとして表示 */
.app.report-reading-mode .report-overview-grid > .report-analysis-pane{
  padding:0 4px 18px 0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.app.report-reading-mode .report-analysis-pane .analysis-stack{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.app.report-reading-mode .report-analysis-pane .analysis-stage-card{
  flex:0 0 auto;
  padding:0 16px 16px;
  overflow:hidden;
  border:1px solid #d5e0e8;
  border-radius:12px;
  background:#fff;
  box-shadow:0 1px 2px rgba(18,50,77,.03);
}

.app.report-reading-mode .report-analysis-pane .analysis-stage-card > .major-heading{
  margin:0 -16px;
}

/* PC共通：案件状態と共有を対象者名の直後にまとめる */
@media (min-width:1100px){
  .case-page:not(.hidden) > .report-reading-casebar{
    flex:0 0 56px;
    min-height:56px;
    padding:8px 18px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:12px;
  }

  .case-page:not(.hidden) > .report-reading-casebar .report-reading-back{
    min-width:112px;
    min-height:36px;
    padding:0 11px;
    font-size:13px;
    font-weight:500;
    text-align:center;
  }

  .case-page:not(.hidden) > .report-reading-casebar .report-reading-case-title{
    flex:0 1 auto;
    max-width:440px;
    gap:10px;
  }

  .case-page:not(.hidden) > .report-reading-casebar .report-reading-case-title strong{
    font-size:16px;
    font-weight:600;
  }

  .case-page:not(.hidden) > .report-reading-casebar .report-reading-case-title span{
    font-size:13px;
    font-weight:400;
  }

  .case-page:not(.hidden) > .report-reading-casebar .report-reading-case-actions{
    flex:0 0 auto;
    justify-content:flex-start;
    gap:7px;
  }

  .case-page:not(.hidden) > .report-reading-casebar .report-reading-case-status{
    min-height:28px;
    padding:0 10px;
    font-size:12px;
    font-weight:500;
  }

  .case-page:not(.hidden) > .report-reading-casebar .report-reading-share{
    min-height:34px;
    padding:0 10px;
    font-size:13px;
    font-weight:500;
    text-align:center;
  }

  .case-page:not(.hidden) > .work-nav{
    flex:0 0 52px;
    min-height:52px;
    padding:6px 18px;
    gap:8px;
  }

  .case-page:not(.hidden) > .work-nav .work-button{
    flex:0 1 108px;
    min-width:92px;
    min-height:38px;
    padding:0 10px;
    font-size:13px;
    font-weight:500;
    text-align:center;
  }

  .case-page:not(.hidden) > .work-nav .work-button.active,
  .case-page:not(.hidden) > .work-nav .work-button:disabled{
    font-weight:500;
  }
}

/* ワイドPC：案件情報と工程タブを1段へ統合 */
@media (min-width:1500px){
  .case-page:not(.hidden){
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    grid-template-rows:56px minmax(0,1fr);
  }

  .case-page:not(.hidden) > .report-reading-casebar{
    grid-column:1;
    grid-row:1;
    width:auto;
    max-width:620px;
    height:56px;
    padding:8px 0 8px 18px;
    border-bottom:1px solid #d8e1e9;
    background:#fff;
  }

  .case-page:not(.hidden) > .report-reading-casebar .report-reading-case-title{
    max-width:240px;
  }

  .case-page:not(.hidden) > .work-nav{
    grid-column:2;
    grid-row:1;
    height:56px;
    min-width:0;
    min-height:56px;
    padding:8px 18px 8px 14px;
    border-bottom:1px solid #d8e1e9;
    border-left:1px solid #e2e8ee;
    background:#fff;
  }

  .case-page:not(.hidden) > .work-nav .work-button{
    flex:0 1 104px;
    min-width:82px;
    max-width:104px;
    min-height:36px;
  }

  .case-page:not(.hidden) > .case-content{
    grid-column:1 / -1;
    grid-row:2;
    min-height:0;
    height:auto;
  }
}

@media (max-width:1099px){
  .app.report-reading-mode .report-analysis-pane .analysis-stack{
    gap:12px;
  }

  .app.report-reading-mode .report-analysis-pane .analysis-stage-card{
    padding:0 12px 12px;
    border-radius:10px;
  }

  .app.report-reading-mode .report-analysis-pane .analysis-stage-card > .major-heading{
    margin:0 -12px;
  }
}

@media (max-width:640px){
  .attachment-preview-head h2{
    font-size:16px;
  }

  .attachment-preview-toolbar button,
  .attachment-preview-toolbar .attachment-preview-download{
    min-height:40px;
    padding:6px 10px;
    font-size:13px;
    font-weight:500;
  }

  #attachmentPreviewZoom{
    font-size:13px;
    font-weight:500;
  }

  .attachment-preview-done{
    min-height:40px;
    font-size:14px;
    font-weight:500;
  }
}

/* このブロックは最終上書きとして末尾を維持する */
.unified-sidebar-panel #backListButton.active,
.unified-sidebar-panel #createButton{
  border-color:#bfd6ea;
  background:#fff;
  color:#287fe5;
}

.app.report-reading-mode .report-overview-grid .major-heading{
  background:#eef2f5;
}

.app.report-reading-mode .report-overview-grid .detail-title,
.app.report-reading-mode .report-overview-grid .report-basic-box > .detail-title{
  margin:0 0 8px;
  padding:7px 10px;
  border:0;
  border-radius:6px;
  background:#f5f7f9;
  color:#172f47;
  font-weight:600;
}

.app.report-reading-mode .report-overview-grid .report-basic-box > .detail-title{
  margin-bottom:2px;
}

.app.report-reading-mode .report-overview-grid .detail-body{
  padding:3px 10px 2px;
  border-radius:0;
  background:#fff;
}

@media (min-width:1100px){
  .app.report-reading-mode .case-page:not(.hidden),
  .app.report-reading-mode .case-page:not(.hidden) > .report-reading-casebar,
  .app.report-reading-mode .case-page:not(.hidden) > .work-nav{
    background:var(--naru-pro-page);
  }

  .app.report-reading-mode .case-page:not(.hidden) > .report-reading-casebar,
  .app.report-reading-mode .case-page:not(.hidden) > .work-nav{
    border-bottom:0;
  }

  .case-page:not(.hidden) > .report-reading-casebar{
    flex:0 0 52px;
    min-height:52px;
    padding:7px 18px;
    gap:10px;
  }

  .case-page:not(.hidden) > .work-nav{
    flex:0 0 54px;
    min-height:54px;
    padding:5px 18px;
    gap:10px;
  }

  .app.report-reading-mode .report-overview-grid > .report-document-pane{
    padding:0 4px 18px 0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }
}

@media (min-width:1500px){
  .case-page:not(.hidden){
    grid-template-columns:minmax(330px,480px) minmax(0,1fr);
    grid-template-rows:56px minmax(0,1fr);
  }

  .app.report-reading-mode .case-page:not(.hidden) > .report-reading-casebar{
    width:auto;
    max-width:none;
    height:56px;
    padding:7px 0 7px 18px;
    background:var(--naru-pro-page);
  }

  .app.report-reading-mode .case-page:not(.hidden) > .report-reading-casebar .report-reading-case-title{
    max-width:380px;
  }

  .app.report-reading-mode .case-page:not(.hidden) > .work-nav{
    height:56px;
    min-height:56px;
    padding:5px 18px 5px 10px;
    border-left:0;
    background:var(--naru-pro-page);
  }
}

@media (max-width:1099px){
  /* 共有ボタン廃止後も、下部4メニューを余白なく均等配置する */
  .mobile-nav{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

/* Zen Kaku Gothic New font license
Copyright 2022 The Zen Kaku Gothic Project Authors (https://github.com/googlefonts/zen-kakugothic)

This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL


-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------

PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.

The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded, 
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.

DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.

"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).

"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).

"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.

"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.

PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:

1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.

2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.

3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.

4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.

5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.

TERMINATION
This license becomes null and void if any of the above conditions are
not met.

DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.
*/
/* Google Fonts: Zen Kaku Gothic New, distributed with SIL OFL 1.1. */
@font-face { font-family:"Zen Kaku Gothic New"; font-style:normal; font-weight:400; font-display:swap; src:url("zen-kaku-gothic-new-regular.woff2") format("woff2"); }
@font-face { font-family:"Zen Kaku Gothic New"; font-style:normal; font-weight:500 900; font-display:swap; src:url("zen-kaku-gothic-new-medium.woff2") format("woff2"); }
/* NARU: the accepted reading typography with compact Care-wing-style navigation. */
.sample-ui {
  --sample-bg:#fff; --sample-menu:#eff6f9; --sample-ink:#17324d;
  --sample-muted:#71859a; --sample-line:#d3dfe9; --sample-heading:#eaf3fb;
  --sample-tab:#579ed0; --sample-tab-line:#5597c4;
  margin:0; height:100dvh; overflow:hidden; background:var(--sample-bg); color:var(--sample-ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:14.5px; font-weight:400; line-height:1.75;
}
.sample-ui * { box-sizing:border-box; }
.sample-ui [hidden] { display:none!important; }
.sample-ui button,.sample-ui input,.sample-ui select,.sample-ui textarea { font-family:inherit; }
.sample-ui button { cursor:pointer; }
.sample-ui button:disabled { cursor:default; }
.sample-ui :focus-visible { outline:2px solid #287eb7; outline-offset:2px; }
.sample-app { display:grid; grid-template-columns:176px minmax(0,1fr); height:100dvh; overflow:hidden; }
.global-menu { display:flex; flex-direction:column; min-height:0; padding:22px 12px 16px; background:var(--sample-menu); border-right:1px solid var(--sample-line); }
.brand { padding:0 8px 17px; border-bottom:1px solid #dae5ec; line-height:1.55; }
.brand strong { display:block; font-size:13px; font-weight:600; white-space:nowrap; }
.brand span { display:block; margin-top:5px; color:var(--sample-muted); font-size:12px; }
.grand-nav { display:flex; flex-direction:column; gap:4px; margin-top:14px; }
.grand-nav button { min-height:33px; padding:6px 10px; border:1px solid transparent; border-radius:4px; background:transparent; color:var(--sample-ink); text-align:left; font-size:13px; font-weight:400; line-height:1.5; }
.grand-nav button:hover { background:#e4eef5; }
.grand-nav button.selected { background:#fff; border-color:#d4e0e9; }
.grand-nav button[data-nav=create] { color:#247daf; }
#unconfirmedCount { margin-left:3px; font-size:12px; color:#32739b; }
.sample-tools { margin-top:auto; padding:14px 8px 0; border-top:1px solid #dae5ec; color:var(--sample-muted); font-size:12px; line-height:1.6; }
.sample-tag { color:#58798f; font-weight:500; }
.sample-tools p { margin:4px 0 12px; }
.sample-tools label { display:block; margin-bottom:4px; }
.sample-tools select { width:100%; max-width:100%; border:1px solid #cddde8; border-radius:4px; padding:6px 4px; background:#fff; color:#49647c; font-size:12px; }
.text-link { padding:7px 0!important; border:0!important; background:transparent!important; color:#347aa7!important; font-size:12px!important; font-weight:400!important; }
.main-surface { min-width:0; min-height:0; padding:12px 22px 18px; overflow:hidden; }
.workspace { display:grid; grid-template-columns:repeat(2,minmax(0,560px)); max-width:1140px; gap:20px; height:100%; justify-content:start; }
.report-column,.work-column { width:100%; max-width:560px; display:flex; flex-direction:column; min-width:0; min-height:0; }
.column-context { display:flex; align-content:center; align-items:center; flex-wrap:wrap; gap:4px 12px; min-height:76px; padding:0 2px 10px; flex-shrink:0; }
.column-context h1 { margin:0; font-size:17px; font-weight:600; line-height:1.5; }
.column-context .person { font-size:14px; color:#49647c; }
.status-label { display:flex; align-items:center; gap:5px; color:#60788e; font-size:12px; white-space:nowrap; }
.state-pill { display:inline-block; padding:2px 8px; border-radius:12px; background:#edf1f5; color:#4f6478; font-size:12px; font-weight:500; line-height:1.55; white-space:nowrap; }
.state-pill.final { background:#e5f4ec; color:#287b58; }
.state-pill.pending { background:#fff3db; color:#8a662b; }
.column-scroll { min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#b2c0cc transparent; scrollbar-gutter:stable; padding-right:5px; }
.report-column>.column-scroll { flex:1; }
.read-document,.read-card { font-size:12px; font-weight:400; padding:18px; border:1px solid var(--sample-line); border-radius:8px; background:#fff; overflow-wrap:anywhere; }
.read-document .stack,.read-card .stack { display:block!important; padding:0!important; border:0!important; background:transparent!important; box-shadow:none!important; }
.read-document .detail-box,.read-card .detail-box { margin:0!important; padding:0 0 15px!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; }
.read-document .detail-box+.detail-box,.read-card .detail-box+.detail-box { padding-top:15px!important; border-top:1px solid #dce5ed!important; }
.read-document .detail-box:last-child,.read-card .detail-box:last-child { padding-bottom:0!important; }
.read-document .detail-title,.read-card .detail-title {
  margin:0 0 10px!important; padding:7px 10px!important; border:0!important; border-radius:4px!important;
  background:var(--sample-heading)!important; color:#193651!important; font-size:14px!important; font-weight:500!important; line-height:1.4!important;
}
.read-document .detail-body,.read-card .detail-body {
  margin:0!important; padding:0 8px!important; border:0!important; border-radius:0!important; background:#fff!important; box-shadow:none!important;
  color:#2b4862!important; font-size:12px!important; font-weight:400!important; line-height:1.75!important; white-space:pre-line;
}
.read-document .report-basic-box { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 24px!important; padding-bottom:18px!important; }
.read-document .report-basic-box>.detail-title { grid-column:1/-1; margin-bottom:0!important; }
.read-document .basic-row { display:block!important; min-width:0!important; padding:0 8px!important; border:0!important; background:transparent!important; }
.read-document .basic-label { margin:0 0 4px!important; padding:0!important; background:transparent!important; color:var(--sample-muted)!important; font-size:12px!important; font-weight:400!important; line-height:1.45!important; }
.read-document .basic-value { padding:0!important; background:transparent!important; color:#2b4862!important; font-size:12px!important; font-weight:400!important; line-height:1.7!important; }
.read-document a,.read-card a { color:#267ead; }
.read-card .major-heading { min-height:0!important; display:block!important; margin:0 0 16px!important; padding:0 0 13px!important; border:0!important; border-bottom:1px solid #dce5ed!important; border-radius:0!important; background:transparent!important; font-size:16px!important; font-weight:600!important; line-height:1.5!important; }
.read-card .step4-final-row { display:grid; grid-template-columns:110px minmax(0,1fr); border-bottom:1px solid #e4ebf1; font-size:12px; }
.read-card .step4-final-label { background:#f5f7fa; padding:9px 10px; font-weight:500; }
.read-card .step4-final-value { padding:9px 10px; }
.read-document .report-section-divider { display:none!important; }
/* Compact connected tabs. Active tabs meet the white reading surface. */
.work-navigation { flex-shrink:0; min-height:76px; padding-top:2px; padding-bottom:10px; }
.parent-tabs,.child-tabs { display:flex; align-items:flex-end; min-width:0; gap:0; overflow-x:auto; scrollbar-width:none; border-bottom:1px solid var(--sample-tab-line); }
.parent-tabs::-webkit-scrollbar,.child-tabs::-webkit-scrollbar { display:none; }
.parent-tabs button,.child-tabs button {
  flex:0 0 auto; min-height:28px; margin:0; padding:4px 13px; border:1px solid var(--sample-tab-line); border-bottom:0; border-radius:0;
  background:var(--sample-tab); color:white; font-size:13px; font-weight:400; line-height:1.4; white-space:nowrap; box-shadow:none;
}
.parent-tabs button:first-child,.child-tabs button:first-child { border-top-left-radius:4px; }
.parent-tabs button:last-child,.child-tabs button:last-child { border-top-right-radius:4px; }
.parent-tabs button+button,.child-tabs button+button { border-left-color:#ffffff55; }
.parent-tabs button:hover,.child-tabs button:hover { background:#438dbe; }
.parent-tabs button[aria-selected=true],.child-tabs button[aria-selected=true] { background:#fff; color:#234661; font-weight:500; border-left-color:var(--sample-tab-line); }
/* Rounded segmented control distinguishes children from the main tab strip. */
.child-tabs { display:flex; width:max-content; max-width:100%; align-items:stretch; margin-top:6px; border:1px solid var(--sample-tab-line); border-radius:999px; background:var(--sample-tab); overflow-x:auto; }
.child-tabs button { border:0; border-radius:0!important; }
.child-tabs button+button { border-left:1px solid #ffffff55; }
.child-tabs button[aria-selected=true] { box-shadow:inset 0 0 0 1px #c9dfef; }
.child-tabs button:first-child { border-radius:999px 0 0 999px!important; }
.child-tabs button:last-child { border-radius:0 999px 999px 0!important; }
.child-tabs button { min-height:26px; padding:3px 11px; font-size:12.5px; }
.work-panel { display:flex; flex-direction:column; flex:1; min-height:0; }
.work-panel>.column-scroll { flex:1; }
.sample-ui #caseContent { display:block; min-height:0; height:auto; padding:0; margin:0; border:0; overflow:visible; background:transparent; flex:initial; }
.record-heading { margin:0 0 16px; padding-bottom:13px; border-bottom:1px solid #dce5ed; font-size:16px; font-weight:600; line-height:1.5; }
.empty-record { padding:8px 0; color:#6b8194; line-height:1.75; }
.record-metadata { display:flex; justify-content:space-between; gap:8px; margin-bottom:6px; font-size:12px; color:var(--sample-muted); }
.history-entry { padding:13px 0; border-bottom:1px solid #e1e9ef; }
.history-entry:first-of-type { padding-top:0; }
.history-entry:last-child { padding-bottom:0; border-bottom:0; }
.history-entry p { margin:0; font-size:12px; line-height:1.75; }
.record-count { margin-left:8px; font-size:12px; font-weight:400; color:var(--sample-muted); }
.report-sharing-report-grid,.report-sharing-staff-grid { display:block!important; }
.report-sharing-report-row,.report-sharing-staff-item { display:flex!important; align-items:center; justify-content:space-between; gap:12px; padding:10px 4px!important; border:0!important; border-bottom:1px solid #e4ebf1!important; }
.report-sharing-content { padding:0!important; }
.report-sharing-section { padding:10px 0!important; }
.report-sharing-summary { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.report-sharing-subtitle { font-size:13px!important; font-weight:500!important; }
.report-sharing-staff-name { font-size:12px!important; }
.sample-ui .mini-status { font-size:12px!important; font-weight:500!important; }
.sample-ui #confirmationBar { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-shrink:0; padding:8px 2px 0; margin:8px 5px 0 0; border:0; border-top:1px solid #cbdbe6; border-radius:0; background:transparent; font-size:12px; line-height:1.5; }
.confirm-button { min-height:32px; padding:6px 10px; border:1px solid #428fc2; border-radius:4px; background:#579ed0; color:white; font-size:12px; font-weight:500; line-height:1.5; }
.confirmation-done { color:#287b58; font-weight:500; }
.confirmation-time { font-size:12px; color:var(--sample-muted); }
.sample-ui .edit-main,.sample-ui .edit-view{min-width:0;width:100%;margin:0;padding:0;background:transparent;overflow:visible;max-height:none;height:auto}.sample-ui .official-author-root,.sample-ui .official-workflow-root,.sample-ui .official-hiyari-root{min-width:0;width:100%;font-size:15px}.sample-ui .official-author-root .wrap,.sample-ui .official-workflow-root .wrap,.sample-ui .official-hiyari-root .wrap{max-width:none;min-width:0;width:100%;padding:0!important;margin:0}.sample-ui .official-author-root .section,.sample-ui .official-workflow-root .section{margin-bottom:16px}.sample-ui .official-author-root .top,.sample-ui .official-workflow-root .top{padding:15px 18px;margin-bottom:16px}.sample-ui .official-author-root h1,.sample-ui .official-workflow-root h1{font-size:19px}.editor-notice{padding:10px 14px;background:#f8fafc;border:1px solid var(--sample-line);border-radius:6px;font-size:13px;color:#506e83;margin:0 0 12px;line-height:1.75}.edit-session-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:12px}.edit-session-bar button{background:#fff;border:1px solid #bfd2e0;border-radius:5px;padding:7px 12px;font-size:14px;font-weight:400;color:#285474}.edit-session-bar span{color:var(--sample-muted);font-size:13px}.sample-ui .attachment-preview-title,.sample-ui .attachment-preview-toolbar button,.sample-ui .attachment-preview-download,.sample-ui .attachment-preview-close-button,.sample-ui .attachment-preview-zoom-label{font-weight:400!important}.sample-ui .attachment-preview-dialog{max-width:1000px}.sample-ui .attachment-preview-header{padding:16px 20px}.sample-ui .attachment-preview-title{font-size:18px}.sample-ui .attachment-preview-toolbar{gap:8px}.sample-ui .attachment-preview-toolbar button{font-size:14px}.sample-ui .attachment-preview-footer{padding:12px 20px}

/* List and secondary dialogs retain the same restrained typography. */
#listPage { height:100%; overflow:auto; max-width:1100px; padding-right:8px; }
.list-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:12px 0 22px; }
.list-heading h1 { margin:0; font-size:19px; font-weight:600; }
.list-heading select { padding:7px 10px; border:1px solid #c6d7e4; border-radius:5px; background:#fff; color:#49647c; font-size:13px; }
.sample-report-card { display:block; width:100%; margin:0 0 12px; padding:17px 20px; border:1px solid var(--sample-line); border-radius:8px; background:#fff; color:var(--sample-ink); font-weight:400; text-align:left; }
.sample-report-card:hover { border-color:#9bbdd6; background:#fcfdff; }
.sample-report-card h2 { margin:8px 0 4px; font-size:16px; font-weight:500; line-height:1.65; }
.sample-report-card p { margin:0; color:var(--sample-muted); font-size:13px; }
.sample-report-card .sample-case-hint { margin-top:7px; color:#527b97; font-size:12px; }
.sample-report-card .type-label { margin-right:10px; font-size:12px; color:#935e5e; }
.sample-dialog { width:min(620px,calc(100vw - 28px)); max-height:85dvh; padding:0; border:1px solid var(--sample-line); border-radius:10px; background:#fff; color:var(--sample-ink); box-shadow:0 20px 80px #16334d26; }
.sample-dialog::backdrop { background:#243b5055; }
.sample-dialog>header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--sample-line); }
.sample-dialog h2 { margin:0; font-size:17px; font-weight:500; }
.sample-dialog header button { min-width:34px; height:34px; border:1px solid #cbdbe6; border-radius:4px; background:#fff; color:#456276; font-size:22px; font-weight:400; }
.sample-dialog #sampleDialogBody { padding:18px 20px; overflow-wrap:anywhere; }
.sample-dialog p { margin:0 0 13px; }
.sample-dialog li { margin:8px 0; }
.sample-dialog button.choice { display:block; width:100%; margin:8px 0; padding:10px 12px; border:1px solid var(--sample-line); border-radius:5px; background:#fff; color:var(--sample-ink); text-align:left; font-size:14px; font-weight:400; }
.dialog-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }
.dialog-actions button { padding:8px 12px; border:1px solid #bfd2e0; border-radius:4px; background:#fff; color:#285474; font-size:14px; }
#toast { display:none; position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:30000; max-width:90vw; padding:10px 18px; border-radius:6px; background:#214b68; color:#fff; font-size:14px; }
#toast.visible { display:block; }
.sample-mobile-nav,#mobileCaseLabel,#mobileGuideButton { display:none!important; }
@media(max-width:1200px) {
  .sample-app { grid-template-columns:154px minmax(0,1fr); }
  .global-menu { padding:18px 9px 14px; }
  .brand { padding-left:4px; padding-right:0; }
  .brand strong { font-size:12px; }
  .main-surface { padding:10px 14px 14px; }
  .workspace { gap:14px; }
  .read-document,.read-card { padding:15px; }
  .column-context { gap:3px 8px; }
  .column-context h1 { font-size:16px; }
  .column-context .person { font-size:13px; }
  .read-document .report-basic-box { gap:12px 14px!important; }
  .parent-tabs button { padding-inline:11px; }
  .child-tabs button { padding-inline:9px; }
  .sample-tools { padding-inline:4px; }
  .sample-ui #confirmationBar { flex-wrap:wrap; }
}
/* Phones change panes. A normal split PC window keeps the three columns. */
@media(max-width:760px) {
  .sample-app { display:block; padding-bottom:55px; }
  .global-menu { display:none; }
  .main-surface { height:100%; padding:8px 10px 12px; }
  .workspace { display:block; height:100%; }
  .report-column,.work-column { height:100%; }
  .sample-app[data-mobile-pane=report] .work-column { display:none; }
  .sample-app[data-mobile-pane=work] .report-column { display:none; }
  .column-context { min-height:54px; padding-bottom:8px; }
  .work-navigation { min-height:0; padding:0 0 8px; }
  #mobileCaseLabel { display:block!important; padding:0 0 6px; color:#647c91; font-size:12px; }
  #mobileGuideButton { display:block!important; }
  .parent-tabs button { min-height:40px; padding:8px 15px; font-size:13px; }
  .child-tabs button { min-height:38px; padding:8px 12px; font-size:12.5px; }
  .sample-mobile-nav { display:flex!important; position:fixed!important; bottom:0!important; left:0; right:0; width:100%; height:55px; transform:none!important; visibility:visible!important; opacity:1!important; z-index:1100; justify-content:space-around; align-items:stretch; padding:0 4px; border-top:1px solid var(--sample-line); border-radius:0!important; gap:0!important; background:#fff; box-shadow:none!important; }
  .sample-mobile-nav button { flex:1; max-width:230px; min-height:44px; padding:8px; border:0; background:#fff; color:#60798e; font-size:13px; font-weight:400; }
  .sample-mobile-nav button[aria-current=page] { color:#2679ac; background:#f1f7fc; border-top:2px solid #579ed0; }
  .column-scroll { padding-right:3px; }
  .read-document,.read-card { padding:15px; }
  .read-document .detail-body,.read-card .detail-body { padding-inline:4px!important; }
  .sample-ui #confirmationBar { padding:8px 1px 0; margin-right:3px; }
  .confirm-button { min-height:40px; }
  .sample-ui .official-workflow-root .actions { flex-wrap:wrap; }
  .list-heading { display:block; margin:8px 0 16px; }
  .list-heading select { max-width:100%; margin-top:10px; }
  .sample-report-card { padding:15px; }
  .sample-ui .official-author-root input,.sample-ui .official-author-root select,.sample-ui .official-author-root textarea,.sample-ui .official-workflow-root input,.sample-ui .official-workflow-root select,.sample-ui .official-workflow-root textarea { max-width:100%; }
  #toast { bottom:65px; }
  .sample-dialog { max-height:80dvh; }
  .read-card .step4-final-row { grid-template-columns:100px minmax(0,1fr); }
}
@media(pointer:coarse) {
  .parent-tabs button,.child-tabs button,.grand-nav button,.confirm-button { min-height:44px; }
  .work-navigation { min-height:104px; }
  .column-context { min-height:104px; }
}
@media(max-width:760px) and (pointer:coarse) {
  .column-context { min-height:60px; }
  .work-navigation { min-height:0; }
}
@media(prefers-reduced-motion:reduce) { .sample-ui * { scroll-behavior:auto!important; animation:none!important; transition:none!important; } }

/* Fixed labels are visually secondary to their answers. Only read-only renderers use these. */
.read-document .question-answer-list,.read-card .question-answer-list { white-space:normal; }
.question-answer { display:flex; align-items:baseline; gap:7px; margin:0 0 6px; }
.question-answer:last-child { margin-bottom:0; }
.question-label { flex:0 1 auto; max-width:70%; padding:1px 6px; border-radius:4px; background:#eef3f7; color:#536b7e; font-size:12px; font-weight:400; line-height:1.75; }
.question-answer-text { flex:1; min-width:0; white-space:pre-wrap; color:#2b4862; }
.read-card .report-sharing-section { padding:0!important; }
.read-card .report-sharing-section+.report-sharing-section { margin-top:22px; }
.read-card .sharing-section-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:5px 10px; margin:0 0 9px; padding:7px 10px; border-radius:4px; background:var(--sample-heading); }
.read-card .sharing-section-heading h3 { margin:0; font-size:14px; font-weight:500; line-height:1.4; }
.sharing-section-heading .sharing-count { font-size:12px; font-weight:400; color:#536b7e; }
.staff-status-table { width:100%; table-layout:fixed; border-collapse:collapse; font-size:12px; }
.staff-status-table col.status-column { width:80px; }
.staff-status-table th,.staff-status-table td { padding:10px 4px; border:0; border-bottom:1px solid #e4ebf1; background:transparent; }
.staff-status-table thead th { padding-block:6px; color:#61788c; font-weight:400; }
.staff-status-table th:first-child { text-align:left; font-weight:400; overflow-wrap:anywhere; }
.staff-status-table th:not(:first-child),.staff-status-table td { text-align:center; }
.staff-status-table .mini-status { display:inline-block; min-width:42px; font-weight:400!important; }
.staff-status-table .status-empty { color:#748797; }
.sample-ui .attachment-preview-dialog,.sample-ui .attachment-preview-dialog * { font-weight:400!important; }
/* Keep the established editing forms' typeface and input styling. */
.sample-ui .edit-main { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
@media(max-width:760px) {
  .workspace { max-width:560px; }
  .staff-status-table col.status-column { width:70px; }
}

.read-document .detail-body button,.read-card .detail-body button { font-size:12px!important; font-weight:400!important; }

.main-surface:has(>#listPage:not([hidden])) { background:#edf2f6; }

/* Align the report identity with the main tabs, and context with the subtabs. */
.sample-ui { --header-main-height:30px; --header-sub-height:28px; --header-row-gap:16px; }
.column-context,.work-navigation {
  display:grid; grid-template-rows:var(--header-main-height) var(--header-sub-height);
  align-content:start; align-items:stretch; gap:var(--header-row-gap) 0;
  min-height:0; padding:2px 0 6px; flex-shrink:0;
}
.report-title-line {
  display:flex; align-items:center; gap:12px; min-width:0;
  border-bottom:1px solid var(--sample-tab-line); padding:0 2px 2px;
}
.report-title-line h1 { flex-shrink:0; }
.report-title-line .person { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.column-context>.status-label { align-self:center; justify-self:start; padding-left:2px; }
.work-navigation .parent-tabs { align-self:stretch; }
.work-navigation .child-tabs { align-self:end; margin-top:0; }
@media(max-width:760px) {
  .sample-ui { --header-main-height:41px; --header-sub-height:40px; --header-row-gap:14px; }
  .work-navigation { grid-template-rows:auto var(--header-main-height) var(--header-sub-height); row-gap:14px; }
  .work-navigation #mobileCaseLabel { padding:0; margin-bottom:-8px; }
  .report-title-line { gap:8px; }
}
@media(pointer:coarse) {
  .sample-ui { --header-main-height:45px; --header-sub-height:46px; }
}

/* Prototype-only visual adjustment controls, isolated from report typography. */
.sample-ui .design-launcher {position:fixed;right:12px;bottom:10px;z-index:1150;border:1px solid #5597c4;border-radius:6px;background:#fff;color:#234661;padding:8px 12px;font:400 13px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;box-shadow:0 2px 8px #17324d22;}
.sample-ui .design-panel {position:fixed;right:12px;top:12px;bottom:58px;width:320px;max-width:calc(100vw - 24px);z-index:1200;overflow:auto;padding:16px;background:#fff;color:#17324d;border:1px solid #a9bfd0;border-radius:8px;box-shadow:0 8px 30px #17324d33;font:400 13px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;}
.design-panel header {display:flex;align-items:center;justify-content:space-between;}
.design-panel header button {border:0;background:white;font-size:24px;color:#17324d;}
.design-panel p {margin:10px 0;color:#536b7e;font-size:12px;}
.design-fields label {display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0;padding:8px 0;border-bottom:1px solid #e5ebf0;font-size:12px;}
.design-fields input {width:76px;min-width:0;height:30px;padding:3px;border:1px solid #b5c8d6;border-radius:4px;background:white;color:#17324d;font-size:13px;}
.design-note {display:block;margin-top:12px;}
.design-note textarea {display:block;width:100%;min-height:64px;margin-top:4px;border:1px solid #b5c8d6;font-size:13px;}
.design-panel footer {display:flex;flex-wrap:wrap;gap:8px;}
.design-panel footer button {padding:8px;border:1px solid #5597c4;border-radius:4px;background:#fff;color:#234661;font-size:12px;}
.design-panel footer button:first-child {width:100%;background:#2879ad;color:#fff;}
@media(max-width:760px){.sample-ui .design-launcher{bottom:60px;}.sample-ui .design-panel{bottom:108px;}}

/* Keep confirmation actions clear of prototype controls. */
.sample-ui #confirmationBar {justify-content:flex-start;}
.sample-ui #confirmationBar .confirm-button {order:-1;margin-left:0;text-align:center;}
@media(min-width:761px){.sample-ui .design-launcher {left:12px;right:auto;bottom:10px;max-width:140px;}.sample-ui .global-menu {padding-bottom:60px;}}
@media(max-width:760px){.sample-ui .design-launcher {bottom:auto;top:2px;right:8px;padding:4px 8px;font-size:11px;}.sample-ui .main-surface {padding-top:34px;}}

/* The reporter must see the current correction request before the input fields. */
.sample-ui .official-author-root .reporter-return-notice {
  min-width:0; margin:0 0 20px; padding:18px 20px;
  border:1px solid #d4a343; border-left:5px solid #bb7b13;
  border-radius:12px; background:#fff8e8; color:#604016;
}
.sample-ui .reporter-return-notice .reporter-return-heading {
  display:flex; align-items:flex-start; gap:12px;
}
.sample-ui .reporter-return-notice .reporter-return-heading>div { min-width:0; }
.sample-ui .reporter-return-notice .reporter-return-icon {
  display:flex; flex:0 0 32px; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%; background:#bb7b13; color:#fff;
  font-size:21px; font-weight:700; line-height:1;
}
.sample-ui .reporter-return-notice .reporter-return-title {
  margin:0; padding:0; border:0; background:transparent;
  color:#604016; font-size:19px; font-weight:700; line-height:1.4;
}
.sample-ui .reporter-return-notice .reporter-return-source {
  margin:4px 0 0; color:#604016; font-size:14px; line-height:1.6;
}
.sample-ui .reporter-return-notice .reporter-return-reason {
  margin:14px 0 0; padding:12px 14px; border:1px solid #eed9a8;
  border-radius:8px; background:#fff; color:#3f331e;
  font-size:15px; line-height:1.8; white-space:pre-wrap; overflow-wrap:anywhere;
}
.sample-ui .reporter-return-notice .reporter-return-help {
  margin:12px 0 0; color:#604016; font-size:14px; line-height:1.7;
}
@media(max-width:760px) {
  .sample-ui .official-author-root .reporter-return-notice { padding:14px; }
}

/* Save feedback belongs beside the form actions, rather than above the fields. */
.sample-ui .edit-session-bar { position:static; padding:0; background:transparent; border:0; }
.sample-ui .draft-save-status { margin-left:9px; color:#365f77; font-size:11px; font-weight:400; }
.sample-ui #mobileSaveStatus { margin-left:7px; }
.sample-ui .compact-header,.sample-ui .menu-backdrop { display:none; }
/* Split PC windows give the two reading/work columns the whole width. */
@media(max-width:1200px) {
  .sample-ui .sample-app { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); }
  .sample-ui .compact-header { display:flex; align-items:center; gap:12px; min-height:44px; padding:5px 12px; border-bottom:1px solid var(--sample-line); background:var(--sample-menu); font-size:12px; }
  .sample-ui .compact-header button { flex-shrink:0; min-height:32px; padding:4px 10px; border:1px solid var(--sample-tab-line); border-radius:4px; background:#fff; color:var(--sample-ink); font-size:12px; font-weight:400; }
  .sample-ui .global-menu { display:none; }
  .sample-ui .main-surface { min-height:0; height:auto; padding-top:8px; }
  .sample-ui .sample-app[data-menu-open=true] .global-menu { display:flex; position:fixed; top:44px; left:0; bottom:0; width:min(260px,85vw); z-index:1600; padding:16px 12px; box-shadow:6px 0 20px #17324d22; overflow:auto; }
  .sample-ui .menu-backdrop:not([hidden]) { display:block; position:fixed; inset:44px 0 0; z-index:1500; width:100%; height:calc(100dvh - 44px); padding:0; border:0; border-radius:0; background:#17324d44; }
  .sample-ui .global-menu .grand-nav button { min-height:40px; }
}
@media(max-width:760px) {
  .sample-ui .compact-header button { min-height:40px; }
  .sample-ui .compact-header { min-height:50px; }
  .sample-ui .sample-app[data-menu-open=true] .global-menu { top:50px; bottom:55px; }
  .sample-ui .menu-backdrop:not([hidden]) { inset:50px 0 55px; height:calc(100dvh - 105px); }
  .sample-ui .edit-session-bar { gap:6px; }
  .sample-ui .edit-session-bar button { padding:6px 8px; font-size:12px; }
  .sample-ui .edit-session-bar #draftIndicator { font-size:11px; }
}

/* Training status is visible independently of the workflow status. */
.naru-connected-ui .training-banner{padding:12px 16px;margin:0 0 14px;border:1px solid #ddad42;border-left:6px solid #b87d12;border-radius:8px;background:#fff7e5;color:#674400;font-size:14px;line-height:1.7}
.naru-connected-ui .training-pill{display:inline-block;border:1px solid #b77b12;background:#fff3ce;color:#725000;border-radius:6px;padding:2px 9px;margin:0 7px;font-weight:700;font-size:13px}
.naru-connected-ui .training-report-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:#725000;font-size:12px;margin-top:8px}
.naru-connected-ui .training-delete{background:#fff8f5;border:1px solid #b75b46;color:#973f2b;border-radius:5px;padding:8px 12px;cursor:pointer}
.naru-connected-ui .training-ack{display:flex;align-items:center;gap:8px;line-height:1.7;margin:16px 0}
.naru-connected-ui .training-ack input{width:22px;height:22px;flex:0 0 auto}
.naru-connected-ui #trainingModeBanner[hidden]{display:none}


body.sample-ui {--sample-bg:#ffffff;--sample-heading:#dde5ee;--sample-menu:#edf7f8;--sample-tab:#579ed0;--sample-tab-line:#5597c4;--header-row-gap:7px;}
.sample-ui .workspace {grid-template-columns:repeat(2,minmax(0,560px));max-width:1144px;gap:24px;}
.sample-ui .report-column,.sample-ui .work-column {max-width:560px;}
.sample-ui .read-document,.sample-ui .read-card {padding:12px;font-size:12px;font-weight:400;}
.sample-ui .read-document .detail-body,.sample-ui .read-card .detail-body,.sample-ui .read-document .basic-value {font-size:12px!important;font-weight:400!important;line-height:1.5!important;}
.sample-ui .staff-status-table,.sample-ui .question-label,.sample-ui .history-entry p,.sample-ui .read-card .step4-final-row {font-size:12px;}
.sample-ui .read-document .detail-title,.sample-ui .read-card .detail-title,.sample-ui .sharing-section-heading h3 {font-size:14px!important;}
.sample-ui .question-label,.sample-ui .read-document .basic-label {background:#ebebeb!important;color:#363636!important;font-size:10px!important;font-weight:500!important;}
.sample-ui .read-document .basic-label {display:inline-block!important;width:fit-content;max-width:100%;padding:1px 6px!important;border-radius:4px;line-height:1.75!important;}
.sample-ui .read-document .detail-body,.sample-ui .read-card .detail-body,.sample-ui .read-document .basic-value,.sample-ui .question-answer-text {color:#1c1c1d!important;}
.sample-ui .read-document .detail-box,.sample-ui .read-card .detail-box {padding-bottom:15px!important;}
.sample-ui .read-document .detail-box+.detail-box,.sample-ui .read-card .detail-box+.detail-box {padding-top:15px!important;}
.sample-ui .parent-tabs button {font-size:11.5px;font-weight:500;}
.sample-ui .parent-tabs button[aria-selected=true],.sample-ui .child-tabs button[aria-selected=true] {color:#3e3e42;}
.sample-ui .read-document .report-basic-box {row-gap:6px!important;padding-bottom:6px!important;}
.sample-ui .read-document .basic-label {margin-bottom:2px!important;}
@media(min-width:761px) and (pointer:fine){.sample-ui {--header-main-height:25px;}.sample-ui .parent-tabs button {min-height:24px;padding:3px 13px;}}

.sample-ui .child-tabs button {font-size:10.5px;}
@media(min-width:761px) and (pointer:fine){.sample-ui .child-tabs button {min-height:10px;padding:3px 11px;}.sample-ui .child-tabs {min-height:0;}}
.sample-ui .read-card .step4-final-label,.sample-ui .read-card .step4-final-value {font-size:12px!important;line-height:1.5!important;}
.sample-ui .read-card .step4-final-label {font-weight:500!important;color:#363636!important;}
.sample-ui .read-card .step4-final-value {font-weight:400!important;color:#1c1c1d!important;}
.sample-ui .read-card .step4-final-row {min-height:0;}

.sample-ui .column-context,.sample-ui .work-navigation {row-gap:7px;padding-bottom:9px;}
@media(max-width:760px){.sample-ui .workspace {display:block;max-width:560px;}}

.naru-connected-ui .list-filters{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px;font-size:12px}
.naru-connected-ui .list-filters label{display:flex;align-items:center;gap:5px}
.naru-connected-ui .list-filters select{max-width:180px;padding:5px;border:1px solid #d3dfe9;border-radius:4px;background:#fff}
.naru-connected-ui #sidebarUser{display:block}.naru-connected-ui .sample-tools{padding-bottom:0}
.naru-connected-ui #listStatus{font-size:12px;color:#536b7b}
@media(max-width:760px){.naru-connected-ui .list-filters select{min-height:44px}.naru-connected-ui .list-heading{flex-wrap:wrap}}

/* UI-01: draw the editing focus ring inside the control. The zero-padding
   editor and scrolling columns clip outlines painted outside the border. */
.sample-ui :is(.official-author-root,.official-hiyari-root,.official-workflow-root) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),textarea,select):focus-visible,
.sample-ui .official-workflow-scope .participant-trigger:focus-visible {
  outline:2px solid #287eb7;
  outline-offset:-2px;
}

/* UI-02: native placeholders are quieter than entered text. Existing pale
   reporter-textarea examples retain their deliberately lighter color. */
.sample-ui :is(.official-author-root,.official-hiyari-root,.official-workflow-root) input::placeholder,
.sample-ui :is(.official-hiyari-root,.official-workflow-root) textarea::placeholder {
  color:#6b7785;
  opacity:1;
}

/* 2026-09-10: retain the approved appearance; restore the five mobile actions
   and let the current scroll handler hide/reveal the bottom menu. */
.sample-ui .mobile-reading-switch { display:none; }
@media(max-width:760px) {
  .sample-ui #mobileCreateButton { display:none!important; }
  .sample-ui .mobile-reading-switch {
    display:block;
    flex-shrink:0;
    min-height:44px;
    padding:7px 11px;
    margin:0 0 8px;
    border:1px solid var(--sample-tab-line);
    border-radius:5px;
    background:#fff;
    color:var(--sample-ink);
    font:inherit;
    font-size:13px;
    text-align:left;
  }
  .sample-ui .work-navigation { grid-template-rows:auto auto var(--header-main-height) var(--header-sub-height); }
  .sample-ui .work-navigation .mobile-reading-switch { margin-bottom:0; }
  .sample-ui .sample-app { padding-bottom:calc(55px + env(safe-area-inset-bottom, 0px)); }
  .sample-ui .sample-mobile-nav {
    height:calc(55px + env(safe-area-inset-bottom, 0px));
    padding:0 4px env(safe-area-inset-bottom, 0px);
    transform:translateY(0)!important;
    transition:transform .22s ease, opacity .22s ease, visibility .22s;
  }
  .sample-ui .sample-mobile-nav button {
    min-width:0;
    padding:8px 3px;
    white-space:nowrap;
  }
  .sample-ui .sample-mobile-nav button:disabled {
    background:#f5f7f9;
    color:#94a1ad;
    cursor:default;
  }
  .sample-ui .sample-mobile-nav.mobile-nav-hidden {
    transform:translateY(100%)!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none;
  }
  .sample-ui .sample-mobile-nav.mobile-nav-hidden:has(:focus-visible) {
    transform:translateY(0)!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto;
  }
}

/* NARU reporter-design 20260912: user JSON and three requested details. */

body.sample-ui {--sample-bg:#ffffff;--sample-heading:#ddf0fd;--sample-menu:#e9f7f8;--sample-tab:#00a1e1;--sample-tab-line:#cccccc;--header-row-gap:12px;}
.sample-ui .workspace {grid-template-columns:repeat(2,minmax(0,560px));max-width:1144px;gap:24px;}
.sample-ui .report-column,.sample-ui .work-column {max-width:560px;}
.sample-ui .read-document,.sample-ui .read-card {padding:12px;font-size:13.5px;font-weight:400;}
.sample-ui .read-document .detail-body,.sample-ui .read-card .detail-body,.sample-ui .read-document .basic-value {font-size:13.5px!important;font-weight:400!important;line-height:1.5!important;}
.sample-ui .staff-status-table,.sample-ui .question-label,.sample-ui .history-entry p,.sample-ui .read-card .step4-final-row {font-size:13.5px;}
.sample-ui .read-document .detail-title,.sample-ui .read-card .detail-title,.sample-ui .sharing-section-heading h3 {font-size:14px!important;}
.sample-ui .question-label,.sample-ui .read-document .basic-label {background:#f2f2f2!important;color:#454545!important;font-size:11.5px!important;font-weight:500!important;}
.sample-ui .read-document .basic-label {display:inline-block!important;width:fit-content;max-width:100%;padding:1px 6px!important;border-radius:4px;line-height:1.75!important;}
.sample-ui .read-document .detail-body,.sample-ui .read-card .detail-body,.sample-ui .read-document .basic-value,.sample-ui .question-answer-text {color:#1f1f1f!important;}
.sample-ui .read-document .detail-box,.sample-ui .read-card .detail-box {padding-bottom:15px!important;}
.sample-ui .read-document .detail-box+.detail-box,.sample-ui .read-card .detail-box+.detail-box {padding-top:15px!important;}
.sample-ui .parent-tabs button {font-size:13px;font-weight:500;}
.sample-ui .parent-tabs button[aria-selected=true],.sample-ui .child-tabs button[aria-selected=true] {color:#3e3e42;}
.sample-ui .read-document .report-basic-box {row-gap:6px!important;padding-bottom:6px!important;}
.sample-ui .read-document .basic-label {margin-bottom:2px!important;}
@media(min-width:761px) and (pointer:fine){.sample-ui {--header-main-height:27px;}.sample-ui .parent-tabs button {min-height:26px;padding:3px 13px;}}

.sample-ui .child-tabs button {font-size:11.5px;}
@media(min-width:761px) and (pointer:fine){.sample-ui .child-tabs button {min-height:10px;padding:3px 11px;}.sample-ui .child-tabs {min-height:0;}}
.sample-ui .read-card .step4-final-label,.sample-ui .read-card .step4-final-value {font-size:13.5px!important;line-height:1.5!important;}
.sample-ui .read-card .step4-final-label {font-weight:500!important;color:#454545!important;}
.sample-ui .read-card .step4-final-value {font-weight:400!important;color:#1f1f1f!important;}
.sample-ui .read-card .step4-final-row {min-height:0;}

.sample-ui .column-context,.sample-ui .work-navigation {row-gap:12px;padding-bottom:7px;}
@media(max-width:760px){.sample-ui .workspace {display:block;max-width:560px;}}

.sample-ui .edit-main .official-author-root h1{font-size:20px!important;}
.sample-ui .edit-main .official-author-root .section-title{font-weight:500!important;}
.sample-ui .edit-main .official-author-root .section-title{background-color:#fff2cc!important;}
/* Creation-form choices only; tabs and other active-state elements retain their colors. */
.sample-ui .edit-main .official-author-root :is(.choice-pill,.state-choice,.why-choice,.first-report-choice,.injury-choice,.traffic-choice,.hiyari-choice-card,.check-card,.check-option,.known-person):has(input:checked) {
  background:#d9ead3!important;
}
/* The category supplement grid follows the app's mobile breakpoint. */
@media(min-width:761px) {
  .sample-ui .edit-main .official-author-root .option-grid:has(> .check-card > #ordinaryFallGuide) {grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media(max-width:760px) {
  .sample-ui .edit-main .official-author-root .option-grid:has(> .check-card > #ordinaryFallGuide) {grid-template-columns:repeat(2,minmax(0,1fr));}
}
.sample-ui .read-document .detail-box+.detail-box,
.sample-ui .read-card .detail-box+.detail-box {border-top-color:#c6c6c6!important;}
/* End NARU reporter-design 20260912. */

/* NARU report heading 20260916: latest user color and one repeated spacing request. */
body.sample-ui {--sample-heading:#d8dee2;}
.sample-ui .read-document .basic-label {margin-bottom:4px!important;}

/* NARU report heading colors 20260916: reading headings only. */
body.sample-ui {--sample-heading:#f5f7f9;}
.sample-ui .read-document .detail-title,
.sample-ui .read-card .detail-title,
.sample-ui .read-card .sharing-section-heading h3 {color:#242f39!important;}

/* NARU 20260926: grey headings outside editing forms; black badge text. */
body.sample-ui { --sample-heading:#e7e9eb; }
body.sample-ui #workPanel[aria-labelledby="parent-edit"] { --sample-heading:#f5f7f9; }
/* Explicit heading roles include report, analysis, sharing, lists and dialogs.
   Form headings keep their existing backgrounds, including reporter yellow. */
body.sample-ui :is(h1,h2,h3,h4,h5,h6,[role="heading"],.detail-title,.record-heading,.major-heading,.rail-card-title,.reference-card-title,.reference-title,.share-section-title,.sharing-section-heading,.section-title,.attachment-preview-title):not(:where(#workPanel[aria-labelledby="parent-edit"] *,.edit-main *,.edit-view *,.official-author-root *,.official-hiyari-root *,.official-workflow-scope *)),
body.sample-ui :is(.read-document,.read-card) .detail-title:not(:where(#workPanel[aria-labelledby="parent-edit"] *)),
body.sample-ui .read-card .sharing-section-heading:not(:where(#workPanel[aria-labelledby="parent-edit"] *)) {
  background:#e7e9eb!important;
}
/* These status/field badges all have pale backgrounds. Keep the background
   distinctions and existing labels; use true black for readable lettering. */
body.sample-ui :is(.badge,.mini-status,.state-pill,.training-pill,.readonly-badge,.side-badge,.case-badge,.status-pill,.final-status-badge,.req,.opt,.optional-badge,.soft-badge,.question-label,.step-number,.type-label),
body.sample-ui .read-document .basic-label {
  color:#000000!important;
}

/* NARU 20260926: distinguish editing from reading without changing navigation. */
body.sample-ui #workPanel[aria-labelledby="parent-edit"] { --sample-heading:#e4f6d1; }
body.sample-ui #workPanel[aria-labelledby="parent-edit"] :is(h1,h2,h3,h4,h5,h6,[role="heading"],.section-title,.form-title,.subsection-title,.edit-title,.record-heading,.panel-title,.medical-title,.ref-card-title,.reference-title,.modal-head) {
  background:#e4f6d1!important;
}
/* Only the Edit parent and its role tabs use green. Active tabs remain white. */
body.sample-ui #parent-edit[aria-selected="false"],
body.sample-ui #childTabs > [id^="child-edit-"][aria-selected="false"] {
  background:#2fc742;
  color:#000000;
}
body.sample-ui #childTabs:has(> [id^="child-edit-"]) { background:#2fc742; }
body.sample-ui #parent-edit[aria-selected="true"],
body.sample-ui #childTabs > [id^="child-edit-"][aria-selected="true"] { background:#ffffff; }
/* The live save status stays visible; no blank space for the removed button. */
body.sample-ui .edit-session-bar {
  justify-content:flex-end;
  gap:0;
  min-height:0;
  padding:3px 0;
  margin-bottom:6px;
  line-height:1.5;
}

/* NARU 20260926: section bars belong to report content, not screen titles. */
body.sample-ui :is(.column-context h1,.list-heading h1,.sample-report-card h2,.sample-dialog h2,.attachment-preview-title),
body.sample-ui #workPanel:not([aria-labelledby="parent-edit"]) .read-card > :is(.record-heading,.major-heading) {
  background:transparent!important;
}
/* Equal top/bottom space centers the reading-panel title above its divider. */
body.sample-ui #workPanel:not([aria-labelledby="parent-edit"]) .read-card > :is(.record-heading,.major-heading) {
  display:flex!important;
  align-items:center;
  gap:8px;
  min-height:0!important;
  padding:6.5px 0!important;
}
body.sample-ui .record-heading .record-count { margin-left:auto; }

/* Compact, non-interactive pills: neutral drafts, amber review, green complete.
   Field labels retain their quieter neutral background and are not buttons. */
body.sample-ui :is(.badge,.mini-status,.state-pill,.training-pill,.readonly-badge,.side-badge,.case-badge,.status-pill,.final-status-badge,.type-label) {
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  min-height:24px!important;
  min-width:0;
  padding:3px 10px!important;
  border:0!important;
  border-radius:999px!important;
  background:var(--naru-badge-bg,#626f80)!important;
  color:#ffffff!important;
  font-size:12px!important;
  font-weight:500!important;
  line-height:1.5!important;
  white-space:nowrap;
  vertical-align:middle;
  box-shadow:none!important;
}
body.sample-ui .training-pill { --naru-badge-bg:#7054a2; margin:0 6px 0 0; }
body.sample-ui .sample-report-card .type-label { --naru-badge-bg:#286da8; margin-right:6px; }
body.sample-ui .status-label .training-pill { margin:0; }
body.sample-ui :is(.badge-accident,.badge.accident,.side-badge.accident,.case-badge.accident,.badge-attention) { --naru-badge-bg:#b53a37; }
body.sample-ui :is(.badge-hiyari,.badge.hiyari,.side-badge.status,.case-badge.status,.mini-status.status-read) { --naru-badge-bg:#286da8; }
body.sample-ui :is(.state-pill.pending,.badge-warning,.badge-pending,.mini-status.status-unfinished,.status-pill.incomplete,.final-status-badge.wait) { --naru-badge-bg:#986000; }
body.sample-ui :is(.state-pill.final,.badge-success,.mini-status.status-done,.mini-status.status-confirm,.status-pill.complete,.final-status-badge.ok) { --naru-badge-bg:#24764f; }
/* Required/optional markers stay smaller than workflow status badges. */
body.sample-ui :is(.req,.opt,.optional-badge,.soft-badge) {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:20px;
  padding:2px 7px;
  border:0!important;
  border-radius:999px;
  background:#eef1f4!important;
  color:#000000!important;
  font-size:10px;
  font-weight:500;
  line-height:1.4;
  vertical-align:middle;
}
body.sample-ui .req { background:#b53a37!important; color:#ffffff!important; }
/* User-requested white lettering for inactive editing tabs only. */
body.sample-ui #parent-edit[aria-selected="false"],
body.sample-ui #childTabs > [id^="child-edit-"][aria-selected="false"] { color:#ffffff; }

/* NARU 20260926: only the two reading-content section-title selectors. */
body.sample-ui .read-document .detail-title,
body.sample-ui .read-card .detail-title { background:#eef7ff!important; }

/* Workflow screen titles are labels, not the green section bars below them. */
body.sample-ui #workPanel[aria-labelledby="parent-edit"] .official-workflow-root > .edit-heading .edit-title {
  background:transparent!important;
}
/* Center the top title rows in each right-hand reading/editing screen. */
body.sample-ui #workPanel .read-card > :is(.record-heading,.major-heading) {
  display:flex!important;
  align-items:center;
  min-height:0!important;
  padding:6.5px 0!important;
}
body.sample-ui #workPanel .official-workflow-root > .edit-heading {
  align-items:center;
}
body.sample-ui #workPanel .official-workflow-root > .edit-heading .edit-title-row,
body.sample-ui #workPanel .official-author-root > .wrap > .top > .title-row {
  display:flex;
  align-items:center;
  padding:6.5px 0;
}
body.sample-ui #workPanel .official-workflow-root > .edit-heading .edit-title {
  margin:0;
  line-height:1.5;
}
/* Assigned staff/client indicators use the same compact neutral pill tokens. */
body.sample-ui #workPanel .official-workflow-root > .edit-heading .edit-client {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:3px 10px;
  border:0;
  border-radius:999px;
  background:#626f80;
  color:#ffffff;
  font-size:12px;
  font-weight:500;
  line-height:1.5;
  vertical-align:middle;
  box-shadow:none;
  white-space:normal;
  overflow-wrap:anywhere;
}

/* NARU 20260926: screenshot-approved colors/weight for reading item headings only. */
body.sample-ui .read-document .detail-title,
body.sample-ui .read-card .detail-title {
  background:#deedfa!important;
  color:#13171a!important;
  font-weight:600!important;
}

/* Only new follow-up forms/timeline content. Existing headings and badges stay intact. */
.sample-ui .followup-form { margin-top: 16px; padding-top: 16px; border-top: 1px solid #c6c6c6; }
.sample-ui .followup-form label { display: block; margin: 10px 0 6px; font-weight: 600; }
.sample-ui .followup-form textarea, .sample-ui .followup-form select { box-sizing: border-box; width: 100%; padding: 10px 12px; border: 1px solid #ccd8e2; border-radius: 8px; font: inherit; background: #fff; color: #13171a; }
.sample-ui .followup-form textarea { min-height: 140px; resize: vertical; }
.sample-ui .followup-form .dialog-actions { flex-wrap: wrap; margin-top: 12px; }
.sample-ui .followup-feedback, .sample-ui .followup-note { margin: 8px 0; overflow-wrap: anywhere; }
.sample-ui .followup-text, .sample-ui .followup-diff { white-space: pre-wrap; overflow-wrap: anywhere; }
.sample-ui .followup-superseded { opacity: .72; }
.sample-ui .followup-record-label { font-size: .85em; margin-left: 8px; }
.sample-ui .followup-record-actions { margin: 8px 0; }
.sample-ui .followup-diff { margin: 8px 0; padding: 8px 10px; border-left: 3px solid #ccd8e2; }

/* 2026-10-11: approved NARU interface. Applies to the connected app shell only. */
body.sample-ui {
  --sample-bg:#f6f8fc;
  --sample-menu:#f0f5ff;
  --sample-line:#dce3ed;
  --sample-ink:#253044;
  --sample-muted:#66748a;
  --sample-tab-line:#dce3ed;
  --sample-heading:#ffffff;
  --selection-bg:#c4d4f9;
  --selection-line:#9db5e6;
  --selection-ink:#353637;
  --main-tab-idle:#f7f9fe;
  --main-tab-font-size:14px;
  --main-tab-underline:4px;
  --subtab-font-size:12px;
  --subtab-height:28px;
  --subtab-idle:#ffffff;
  --subtab-selected:#c4d4f9;
  --report-inset:24px;
  --report-body-width:882px;
  background:var(--sample-bg);
  color:var(--sample-ink);
  font-family:'Noto Sans JP','Yu Gothic UI','Meiryo',sans-serif;
  font-size:15px;
  line-height:1.65;
}
body.sample-ui #app.sample-app {grid-template-columns:224px minmax(0,1fr);grid-template-rows:minmax(0,1fr);height:100dvh;overflow:hidden;padding:0;}
body.sample-ui #app .compact-header,body.sample-ui #app .menu-backdrop {display:none;}
body.sample-ui #app .main-surface {min-width:0;min-height:0;padding:0;background:var(--sample-bg);display:flex;flex-direction:column;overflow:hidden;}
body.sample-ui #app .global-menu {position:static;inset:auto;width:auto;min-width:0;min-height:0;padding:16px 14px 12px;display:flex;flex-direction:column;background:var(--sample-menu);border-right:1px solid var(--sample-line);overflow:auto;box-shadow:none;}
body.sample-ui #app .brand {display:flex;align-items:center;justify-content:center;gap:9px;position:relative;min-height:38px;margin:0;padding:0;border:0;font-size:14px;line-height:1.6;color:#50617d;}
body.sample-ui #app .brand img {width:35px;height:35px;object-fit:contain;background:transparent;flex:none;}
body.sample-ui #app .brand :is(span,strong,.brand-name) {margin:0;font-size:14px;font-weight:400;background:transparent!important;}
body.sample-ui #app .portal-button {display:flex;align-items:center;gap:8px;justify-content:flex-start;margin:12px 2px 14px;padding:7px 10px;min-height:38px;border:0;border-radius:7px;background:#fff;color:#253044;font-size:14px;font-weight:400;text-align:left;text-decoration:none;}
body.sample-ui #app .portal-button>:last-child {margin-left:auto;}
body.sample-ui #app .portal-button:hover {background:#e7eefb;}
body.sample-ui #app .app-name {display:flex;align-items:center;gap:11px;padding:15px 2px 17px;border-top:1px solid #d9e3f3;line-height:1.5;}
body.sample-ui #app .app-name img {width:43px;height:43px;object-fit:contain;flex:none;}
body.sample-ui #app .app-name strong {font-size:15px;font-weight:700;background:transparent!important;}
body.sample-ui #app .grand-nav {display:grid;gap:5px;padding:0;}
body.sample-ui #app .grand-nav button {display:flex;align-items:center;gap:12px;min-height:45px;width:100%;margin:0;padding:11px 12px;text-align:left;border:1px solid transparent;border-radius:7px;background:transparent;color:var(--sample-ink);font-size:14px;font-weight:400;line-height:1.5;box-shadow:none;}
body.sample-ui #app .grand-nav button:hover:not(:disabled) {background:#e7eefb;}
body.sample-ui #app .nav-caption {padding:0 12px 6px;color:#7a8699;font-size:11px;font-weight:400;background:transparent!important;}
body.sample-ui #app .nav-caption.management {margin-top:25px;padding-top:18px;border-top:1px solid #d9e3f3;}
body.sample-ui #app .grand-nav .nav-caption:not(:first-child) {margin-top:25px;padding-top:18px;border-top:1px solid #d9e3f3;}
body.sample-ui #app .nav-icon {display:inline-flex;color:#426ad0;flex:none;}
body.sample-ui #app .nav-icon svg {width:19px;height:19px;}
body.sample-ui #app #unconfirmedCount {margin-left:auto;min-width:22px;padding:0 6px;border:0;border-radius:12px;background:white;color:#285fe9;font-size:12px;text-align:center;}
body.sample-ui #app .sample-tools {margin-top:auto;padding-top:30px;font-size:12px;}
body.sample-ui #app .sample-tools :is(button,select) {font-size:12px;}
body.sample-ui #app :is(button,a):focus-visible {outline:3px solid #8aabff;outline-offset:3px;}

/* Selection is shared by navigation, tabs and existing form choices. */
body.sample-ui #app :is(.grand-nav button.selected,.grand-nav button[aria-current=page],.grand-nav button.active,.parent-tabs button[aria-selected=true],.child-tabs button[aria-selected=true],.rail-card.active,.radio-choice:has(input:checked)) {
  background:var(--selection-bg)!important;border-color:var(--selection-line)!important;color:var(--selection-ink)!important;font-weight:700!important;box-shadow:none!important;
}
body.sample-ui #app .edit-main :is(.choice-pill,.state-choice,.why-choice,.first-report-choice,.injury-choice,.traffic-choice,.hiyari-choice-card,.check-card,.check-option,.known-person,.radio-choice,.choice,.radio-option):has(input:checked),
body.sample-ui #app .edit-main :is(.switch-button,.toggle-button,.state-button,.option-button,.choice-button).active {
  background:var(--selection-bg)!important;border-color:var(--selection-line)!important;color:var(--selection-ink)!important;font-weight:700!important;box-shadow:none!important;
}

/* Lists prioritize the client and reporter, with equal gaps between columns. */
body.sample-ui #app #listPage {flex:1;min-height:0;width:100%;max-width:950px;padding:30px 34px;margin:0 auto 0 0;overflow:auto;}
body.sample-ui #app .list-heading {display:flex;align-items:center;flex-wrap:wrap;gap:12px;justify-content:space-between;margin:0 0 24px;}
body.sample-ui #app .list-heading h1 {margin:0;color:var(--sample-ink);font-size:24px;font-weight:700;line-height:1.4;background:transparent!important;}
body.sample-ui #app .list-heading :is(button,select) {font-size:13px;}
body.sample-ui #app .list-heading button.primary {min-height:42px;padding:9px 16px;border:1px solid #285fe9;border-radius:7px;background:#285fe9;color:white;font-size:14px;font-weight:600;}
body.sample-ui #app .list-counts {display:flex;gap:12px;margin:0 0 22px;}
body.sample-ui #app .count-box {display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1px 20px;min-width:170px;padding:12px 18px;border:1px solid var(--sample-line);border-radius:8px;background:white;}
body.sample-ui #app .count-box>span {grid-column:1;grid-row:1;font-size:11px;font-weight:400;line-height:1.5;color:var(--sample-muted);}
body.sample-ui #app .count-box>strong {grid-column:1;grid-row:2;font-size:14px;font-weight:600;line-height:1.65;color:var(--sample-ink);background:transparent!important;}
body.sample-ui #app .count-box>b {grid-column:2;grid-row:1/3;font-size:25px;font-weight:700;line-height:1;color:#285fe9;}
body.sample-ui #app .task-summary {display:flex;gap:12px;margin:0 0 22px;}
body.sample-ui #app .task-card {display:flex;align-items:center;justify-content:space-between;gap:20px;min-width:170px;padding:12px 18px;border:1px solid var(--sample-line);border-radius:8px;background:white;text-align:left;color:var(--sample-ink);}
body.sample-ui #app .task-card .task-copy {display:flex;flex-direction:column;gap:1px;}
body.sample-ui #app .task-card .task-scope {font-size:11px;color:var(--sample-muted);font-weight:400;}
body.sample-ui #app .task-card .task-name {font-size:14px;color:var(--sample-ink);font-weight:600;}
body.sample-ui #app .task-card strong {font-size:25px;color:#285fe9;font-weight:700;line-height:1;background:transparent!important;}
body.sample-ui #app .list-filters {display:flex;align-items:flex-end;flex-wrap:wrap;gap:12px;padding:15px 18px;margin:0 0 18px;border:1px solid var(--sample-line);border-radius:8px;background:white;}
body.sample-ui #app .list-filters label {display:block;min-width:0;margin:0;font-size:11px;color:var(--sample-muted);}
body.sample-ui #app .list-filters :is(select,input) {display:block;width:100%;min-height:38px;padding:6px 10px;border:1px solid #cdd7e5;border-radius:6px;background:white;color:var(--sample-ink);font:inherit;font-size:13px;}
body.sample-ui #app .list-filters>.search-label {flex:1;min-width:180px;}
body.sample-ui #app .list-filters>button {min-height:38px;padding:6px 11px;border:1px solid #cad5e4;border-radius:7px;background:white;color:var(--sample-ink);font-size:12px;font-weight:600;}
body.sample-ui #app .more-filters {flex-basis:100%;font-size:12px;color:var(--sample-muted);}
body.sample-ui #app .more-filters>label {display:inline-block;margin:10px 12px 0 0;}
body.sample-ui #app #reportList {container-type:inline-size;container-name:approved-report-list;}
body.sample-ui #app .sample-report-card {display:grid;grid-template-columns:300px 208px minmax(0,1fr) 16px;align-items:center;gap:22px;width:100%;padding:19px 22px;margin:0 0 11px;border:1px solid var(--sample-line);border-radius:9px;background:white;color:var(--sample-ink);text-align:left;font-weight:400;}
body.sample-ui #app .sample-report-card:hover {background:white;border-color:#a2b9e8;box-shadow:0 3px 10px #294c8910;}
body.sample-ui #app .case-primary {display:grid;grid-template-columns:112px minmax(0,1fr);align-items:center;gap:12px;min-width:0;}
body.sample-ui #app .case-identity {min-width:0;}
body.sample-ui #app .person-name {font-size:20px;font-weight:700;line-height:1.4;letter-spacing:.02em;overflow-wrap:anywhere;}
body.sample-ui #app .person-name .honor {margin-left:4px;font-size:.64em;font-weight:400;color:#677389;}
body.sample-ui #app .person-name small {margin-left:4px;font-size:.64em;font-weight:400;color:#677389;}
body.sample-ui #app .reporter-name {display:block;margin-top:3px;font-size:14px;font-weight:400;line-height:1.5;color:#66748a;overflow-wrap:anywhere;}
body.sample-ui #app .case-summary {display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0;}
body.sample-ui #app .case-summary .case-title {display:block;margin:0;padding:0;border:0;background:transparent!important;color:#46494d;font-size:14px;font-weight:400;line-height:1.65;overflow-wrap:anywhere;}
body.sample-ui #app .case-summary :is(time,.case-date,.case-datetime) {display:block;font-size:12px;color:var(--sample-muted);}
body.sample-ui #app .case-summary .training-pill {display:inline-flex!important;align-items:center;justify-content:center;min-height:0!important;min-width:0;width:auto;max-width:100%;margin:0 0 0 6px;padding:2px 8px!important;border:1px solid transparent!important;border-radius:5px!important;background:#eef1f6!important;color:#637083!important;font-size:11px!important;font-weight:400!important;line-height:1.8!important;box-shadow:none!important;white-space:nowrap;vertical-align:baseline;}
body.sample-ui #app .case-status {display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;}
body.sample-ui #app .case-status .status-row {display:grid;grid-template-columns:77px minmax(0,1fr);align-items:center;gap:6px;width:100%;min-width:0;}
body.sample-ui #app .case-status .status-row>:first-child {font-size:11px;font-weight:400;line-height:1.8;color:var(--sample-muted);white-space:nowrap;}
body.sample-ui #app .case-status .state-pill {justify-self:start;max-width:100%;white-space:normal;}
body.sample-ui #app .case-arrow {font-size:24px;line-height:1;color:#95a1b5;}

/* State pills are read-only information, distinct from blue selections. */
body.sample-ui #app :is(.state-pill,.personal-state,.case-status .badge,.header-progress .badge) {display:inline-flex!important;align-items:center;justify-content:center;min-height:0!important;min-width:0;padding:2px 8px!important;border:1px solid transparent!important;border-radius:5px!important;background:#eef1f6!important;color:#637083!important;font-size:11px!important;font-weight:500!important;line-height:1.8!important;box-shadow:none!important;white-space:nowrap;}
body.sample-ui #app :is(.state-pill.final,.header-progress .badge.done,.case-status .badge.done) {background:#e8f4ed!important;color:#287253!important;}
body.sample-ui #app .kind-badge {display:inline-flex;justify-content:center;align-items:center;justify-self:start;min-width:52px;padding:4px 9px;border:1px solid #f2d1cc;border-radius:6px;background:#fff0ed;color:#a54137;font-size:12px;font-weight:700;line-height:1.65;white-space:nowrap;}
body.sample-ui #app .kind-badge.hiyari {min-width:80px;background:#edf5ff;border-color:#d4e4f7;color:#376495;}

/* The report header, primary tabs and secondary tabs share one left edge. */
body.sample-ui #app #casePage.workspace {display:flex;flex:1;flex-direction:column;width:100%;max-width:none;min-width:0;min-height:0;height:100%;padding:0;margin:0;gap:0;overflow:hidden;}
body.sample-ui #app #reportMeta {display:block;flex:none;min-height:0;padding:18px var(--report-inset) 15px;margin:0;border-bottom:0;background:white;}
body.sample-ui #app #reportMeta :is(.case-heading,.report-title-line) {display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;min-width:0;margin:0 0 8px;}
body.sample-ui #app #reportMeta :is(h1,.person) {min-width:0;margin:0;padding:0;background:transparent!important;color:var(--sample-ink);font-size:25px;font-weight:700;line-height:1.4;overflow-wrap:anywhere;}
body.sample-ui #app #reportMeta .honor {font-size:14px;line-height:1.4;font-weight:400;color:var(--sample-muted);}
body.sample-ui #app #reportMeta h1 small {font-size:14px;line-height:1.4;font-weight:400;color:var(--sample-muted);}
body.sample-ui #app #reportMeta :is(.header-progress,.status-label) {display:inline-flex;align-items:baseline;gap:7px;max-width:100%;font-size:14px;line-height:1.4;white-space:nowrap;color:var(--sample-muted);}
body.sample-ui #app #reportMeta .header-progress-label {font-size:14px;font-weight:400;line-height:1.4;color:var(--sample-muted);}
body.sample-ui #app #reportMeta .case-subline {display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;font-weight:400;line-height:1.65;color:var(--sample-muted);}
body.sample-ui #app #reportMeta .case-subline strong {font-weight:600;}
/* 2026-10-12: final approved connected tabs. Tokens stay inside navigation;
   sidebar, rail cards and form-choice selection colors remain unchanged. */
body.sample-ui #app .work-navigation {
  --connected-main-active-border:2px;
  --connected-main-active-line:#9bb7f9;
  --connected-main-idle-border:1px;
  --connected-main-idle-line:#e2e4e9;
  --connected-main-idle-bg:#e7e8ec;
  --connected-main-idle-height-gap:6px;
  --connected-horizontal-width:2px;
  --connected-horizontal-color:#9bb7f9;
  --connected-tab-surface:#f6f8fc;
  --connected-sub-active-border:1.5px;
  --connected-sub-active-line:#9db5e6;
  --connected-sub-idle-border:1.5px;
  --connected-sub-idle-line:#dce3ed;
  display:flex;flex:none;flex-direction:column;align-items:stretch;min-height:0;margin:0;padding:0;gap:0;grid-template-rows:none;background:var(--connected-tab-surface);border:0;
}
body.sample-ui #app .parent-tabs {display:flex;align-items:stretch;justify-content:flex-start;gap:6px;overflow:visible;flex:none;margin:0;padding:10px var(--report-inset) 0;border:0;border-bottom:var(--connected-horizontal-width) solid var(--connected-horizontal-color);border-radius:0;background:white;isolation:isolate;}
body.sample-ui #app .parent-tabs button {--connected-main-top-gap:0px;position:relative;flex:0 1 auto;min-width:0;min-height:calc(46px - var(--connected-main-top-gap));margin:var(--connected-main-top-gap) 0 0;padding:calc(9px - var(--connected-main-top-gap) / 2) 16px;border:var(--connected-main-idle-border) solid var(--connected-main-idle-line);border-bottom:0;border-radius:8px 8px 0 0!important;background:var(--connected-main-idle-bg);color:#222222;font-size:var(--main-tab-font-size);font-weight:400;line-height:1.5;white-space:normal;overflow-wrap:anywhere;box-shadow:none!important;}
body.sample-ui #app .parent-tabs #parent-edit {display:inline-flex;align-items:center;justify-content:center;gap:6px;}
body.sample-ui #app .parent-tabs #parent-edit svg {display:block;flex:none;width:14px;height:14px;}
body.sample-ui #app .parent-tabs button[aria-selected=false] {--connected-main-top-gap:var(--connected-main-idle-height-gap);}
body.sample-ui #app .parent-tabs button[aria-selected=true] {z-index:1;border-width:var(--connected-main-active-border)!important;border-color:var(--connected-main-active-line)!important;border-bottom:0!important;background:var(--connected-tab-surface)!important;color:var(--selection-ink)!important;font-weight:700!important;}
/* Use the sample's simple mask under the active tab, without repainting its sides. */
body.sample-ui #app .parent-tabs button[aria-selected=true]::after {content:"";position:absolute;pointer-events:none;left:calc(0px - var(--connected-main-active-border));right:calc(0px - var(--connected-main-active-border));bottom:calc(0px - var(--connected-horizontal-width) - 1px);height:calc(var(--connected-horizontal-width) + 1px);background:var(--connected-tab-surface);}
body.sample-ui #app #childTabs {display:flex;align-items:center;align-self:stretch;flex:none;gap:8px 12px;flex-wrap:wrap;max-width:none;width:auto;min-height:0;margin:0;padding:12px var(--report-inset) 10px;overflow:visible;border:0;border-radius:0;background:var(--connected-tab-surface);}
body.sample-ui #app #childTabs .subtab-capsule {display:inline-flex;align-items:stretch;gap:0;flex:0 1 auto;flex-wrap:nowrap;min-width:0;max-width:100%;height:var(--subtab-height);margin:0;border:0;border-radius:999px;background:transparent;overflow:visible;isolation:isolate;}
body.sample-ui #app #childTabs button[data-child] {position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 1 auto;min-width:0;min-height:0;margin:0;padding:0 14px;border:var(--connected-sub-idle-border) solid var(--connected-sub-idle-line)!important;border-radius:0!important;background:var(--subtab-idle);color:#222222;font-size:var(--subtab-font-size);font-weight:400;line-height:1.3;white-space:normal;overflow-wrap:anywhere;box-shadow:none;}
body.sample-ui #app #childTabs button[data-child]:first-child {border-radius:999px 0 0 999px!important;}
body.sample-ui #app #childTabs button[data-child]:last-child {border-radius:0 999px 999px 0!important;}
body.sample-ui #app #childTabs button[data-child]:only-child {border-radius:999px!important;}
body.sample-ui #app #childTabs button[data-child]+button[data-child] {margin-left:calc(0px - var(--connected-sub-idle-border));border-left:var(--connected-sub-idle-border) solid var(--connected-sub-idle-line)!important;}
body.sample-ui #app #childTabs .subtab-capsule button[data-child][aria-selected=true] {z-index:1;border-width:var(--connected-sub-active-border)!important;border-color:var(--connected-sub-active-line)!important;background:var(--subtab-selected)!important;color:var(--selection-ink)!important;font-weight:700!important;}
body.sample-ui #app #childTabs :is(.reference-control,.editor-reference) {display:flex;align-items:center;gap:7px;flex:none;}
body.sample-ui #app #childTabs .reference-divider {font-size:14px;font-weight:400;color:#a8b4c5;}
body.sample-ui #app .back-to-list {display:none;}
body.sample-ui #app #referenceButton {display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px;margin:0;padding:6px 11px;border:1px solid #cad5e4;border-radius:7px!important;background:white;color:var(--sample-ink);font-size:12px;font-weight:600;line-height:1.65;white-space:nowrap;}
body.sample-ui #app #referenceButton[aria-pressed=true] {background:var(--selection-bg);border-color:var(--selection-line);color:var(--selection-ink);font-weight:700;}
body.sample-ui #app :is(#referenceButton,.reference-button,.analysis-edit) svg {display:block;flex:none;width:18px;height:18px;}
body.sample-ui #app #childTabs :is(.save-state,.draft-save-status) {margin-left:auto;font-size:11px;color:var(--sample-muted);}
body.sample-ui #app :is(.mobile-reading-switch,#mobileCaseLabel) {display:none!important;}

/* Report workspaces stay left-aligned and constrain long lines. */
body.sample-ui #app .workspace-body {display:flex;flex:1;min-width:0;min-height:0;overflow:hidden;background:var(--sample-bg);}
body.sample-ui #app .workspace-body>:is(.report-column,.work-column) {display:flex;flex:1;flex-direction:column;min-width:0;min-height:0;width:auto;max-width:none;height:auto;padding:0;margin:0;gap:0;}
body.sample-ui #app .work-panel {display:flex;flex:1;flex-direction:column;min-width:0;min-height:0;padding:0;margin:0;}
body.sample-ui #app .column-scroll {flex:1;min-height:0;min-width:0;padding:10px var(--report-inset);overflow:auto;scrollbar-gutter:auto;overscroll-behavior:contain;}
body.sample-ui #app :is(.read-document,.read-card,.edit-main) {width:100%;max-width:var(--report-body-width);margin:0 auto 17px 0;box-sizing:border-box;}
body.sample-ui #app :is(.read-document,.read-card) {padding:22px 25px;border:1px solid var(--sample-line);border-radius:8px;background:white;color:var(--sample-ink);font-size:15px;line-height:1.9;}
body.sample-ui #app .edit-main {background:transparent;}
body.sample-ui #app #caseContent {width:100%;min-width:0;max-width:none;padding:0;}
body.sample-ui #app .edit-footer-feedback {display:flex;align-items:center;flex:0 0 100%;flex-wrap:wrap;gap:3px 9px;width:100%;margin:0 0 7px;padding:0;background:transparent;color:var(--sample-muted);font-size:11px;font-weight:400;line-height:1.6;}
body.sample-ui #app .edit-footer-feedback:empty {display:none;}
body.sample-ui #app .edit-footer-feedback .draft-save-status {margin:0;font-size:inherit;}

/* Reading: solid section boundaries, light dotted item boundaries. */
body.sample-ui #app :is(.read-document,.read-card) .detail-box {padding:0 0 18px!important;border:0!important;border-radius:0!important;background:transparent!important;overflow:visible;}
body.sample-ui #app :is(.read-document,.read-card) .detail-box+.detail-box {padding-top:18px!important;border-top:1.5px dotted #d6deea!important;}
body.sample-ui #app :is(.read-document,.read-card) .detail-title {display:block;margin:0 0 14px!important;padding:0 0 9px!important;border:0!important;border-bottom:1.5px solid var(--sample-line)!important;border-radius:0!important;background:transparent!important;color:var(--sample-ink)!important;font-size:17px!important;font-weight:700!important;line-height:1.5!important;}
body.sample-ui #app :is(.read-document,.read-card) .detail-body {padding:0!important;background:transparent!important;color:#46494d!important;font-size:15px!important;font-weight:400!important;line-height:1.9!important;}
body.sample-ui #app :is(.read-document,.read-card) :is(.record-heading,.major-heading) {display:flex!important;align-items:center;min-height:0!important;padding:0 0 14px!important;margin:0 0 20px!important;border:0!important;border-bottom:1.5px solid var(--sample-line)!important;border-radius:0;background:transparent!important;color:var(--sample-ink)!important;font-size:19px!important;font-weight:700!important;line-height:1.5!important;}
body.sample-ui #app .read-document .report-basic-box {display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px!important;padding-bottom:18px!important;}
body.sample-ui #app .read-document .report-basic-box>.detail-title {margin-bottom:0!important;grid-column:1/-1;}
body.sample-ui #app .read-document .basic-row {display:block!important;padding:0 0 16px!important;border:0!important;min-width:0;}
body.sample-ui #app .read-document .basic-row:nth-last-child(n+3) {border-bottom:1.5px dotted #d6deea!important;}
body.sample-ui #app .read-document .basic-label {display:block!important;width:auto;max-width:none;margin:0 0 5px!important;padding:0!important;border:0;border-radius:0;background:transparent!important;color:var(--sample-muted)!important;font-size:12px!important;font-weight:400!important;line-height:1.6!important;}
body.sample-ui #app .read-document .basic-value {padding:0!important;color:#46494d!important;background:transparent!important;font-size:15px!important;font-weight:400!important;line-height:1.9!important;}
body.sample-ui #app .analysis-card-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 20px;padding-bottom:14px;border-bottom:1.5px solid var(--sample-line);}
body.sample-ui #app .analysis-card-heading h2 {margin:0;padding:0;border:0;background:transparent!important;color:var(--sample-ink);font-size:19px;font-weight:700;line-height:1.5;}
body.sample-ui #app .read-card.analysis-card .detail-title {margin:0 0 5px!important;padding:0!important;border:0!important;background:transparent!important;color:var(--sample-muted)!important;font-size:14px!important;font-weight:400!important;line-height:1.6!important;}
body.sample-ui #app .analysis-edit {display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:6px 11px;border:1px solid #cad5e4;border-radius:7px;background:white;color:var(--sample-ink);font-size:12px;font-weight:600;white-space:nowrap;}
body.sample-ui #app .question-answer {display:block;padding:10px 0;margin:0;}
body.sample-ui #app .question-answer+.question-answer {border-top:1.5px dotted #d6deea;}
body.sample-ui #app .question-label {display:block;max-width:none;margin:0 0 5px;padding:0;border:0;border-radius:0;background:transparent!important;color:var(--sample-muted)!important;font-size:12px!important;font-weight:400!important;line-height:1.6;}
body.sample-ui #app .question-answer-text {display:block;color:#46494d!important;font-size:15px;line-height:1.9;white-space:pre-wrap;overflow-wrap:anywhere;}
body.sample-ui #app .history-entry {border-bottom:1.5px dotted #d6deea;}
body.sample-ui #app .history-entry p {font-size:14px;line-height:1.8;}
body.sample-ui #app .record-metadata {color:var(--sample-muted);font-size:11px;}
/* Edit history reads from newest to oldest along one quiet vertical line. */
body.sample-ui #app .edit-history-timeline {margin:0;padding:0;list-style:none;}
body.sample-ui #app .edit-history-timeline :is(.history-entry,.history-item) {position:relative;margin:0;padding:0 0 22px 24px;border:0;}
body.sample-ui #app .edit-history-timeline :is(.history-entry,.history-item)::before {content:'';position:absolute;left:3px;top:7px;bottom:-7px;width:1.5px;background:#d6deea;}
body.sample-ui #app .edit-history-timeline :is(.history-entry,.history-item)::after {content:'';position:absolute;left:0;top:5px;width:8px;height:8px;border:1.5px solid #9eafc6;border-radius:50%;background:white;}
body.sample-ui #app .edit-history-timeline :is(.history-entry,.history-item):last-child {padding-bottom:0;}
body.sample-ui #app .edit-history-timeline :is(.history-entry,.history-item):last-child::before {display:none;}
body.sample-ui #app .edit-history-timeline :is(.history-entry,.history-item):first-child::after {border-color:#849ccc;background:var(--selection-bg);}
body.sample-ui #app .edit-history-timeline .record-metadata {justify-content:flex-start;flex-wrap:wrap;gap:3px 10px;margin:0 0 4px;}
body.sample-ui #app .edit-history-timeline p {margin:0;font-size:14px;line-height:1.8;overflow-wrap:anywhere;}

/* Two equal sharing cards, with each status directly beside its name. */
body.sample-ui #app .sharing-cards {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:18px;width:100%;max-width:var(--report-body-width);margin:0 0 17px;align-items:stretch;}
body.sample-ui #app .sharing-card {min-width:0;padding:22px 24px;border:1px solid var(--sample-line);border-radius:8px;background:white;}
body.sample-ui #app .sharing-card h2 {padding:0 0 14px;margin:0;border:0;border-bottom:1.5px solid var(--sample-line);border-radius:0;background:transparent!important;color:var(--sample-ink);font-size:19px;font-weight:700;line-height:1.5;}
body.sample-ui #app .sharing-status-row {display:grid;grid-template-columns:minmax(0,140px) minmax(0,1fr);align-items:baseline;gap:20px;padding:14px 0;border:0;border-bottom:1.5px dotted #d6deea;min-width:0;}
body.sample-ui #app .sharing-status-row:last-child {border-bottom:0;padding-bottom:0;}
body.sample-ui #app .sharing-person {min-width:0;font-size:14px;font-weight:400;line-height:1.8;color:var(--sample-ink);overflow-wrap:anywhere;}
body.sample-ui #app .sharing-state {min-width:0;font-size:13px!important;font-weight:400!important;line-height:1.8;color:var(--sample-muted)!important;background:none!important;border:0!important;padding:0!important;overflow-wrap:anywhere;}

/* Progress belongs to analysis content, not to the navigation band. */
body.sample-ui #app .progress-display {display:flex;align-items:center;gap:10px;max-width:var(--report-body-width);min-width:0;margin:0 0 18px;}
body.sample-ui #app .progress-meter {display:flex;align-items:center;gap:0;flex:1;min-width:0;max-width:100%;margin:0;padding:0;list-style:none;overflow-x:auto;overscroll-behavior-inline:contain;}
body.sample-ui #app .progress-meter-label {flex:none;font-size:12px;font-weight:400;color:var(--sample-muted);line-height:1.6;white-space:nowrap;}
body.sample-ui #app :is(.progress-steps,.progress-track) {display:flex;align-items:center;gap:0;flex:1;min-width:0;margin:0;padding:0;list-style:none;overflow-x:auto;overscroll-behavior-inline:contain;}
body.sample-ui #app .progress-step {display:inline-flex;align-items:center;gap:5px;flex:none;min-height:34px;margin:0;padding:0 9px;border:0;border-radius:5px;background:#edf0f3;color:#7d8898;font-size:11px;font-weight:400;line-height:1.4;white-space:nowrap;}
body.sample-ui #app .progress-step:is(.done,.current) {background:#d4e7dc;color:#355f48;}
body.sample-ui #app .progress-step.current {font-weight:600;}
body.sample-ui #app .progress-step :is(.step-state,strong) {font-size:11px;font-weight:400;color:inherit;}
body.sample-ui #app .progress-step :is(.step-number,.step-symbol) {display:inline-flex;align-items:center;justify-content:center;min-width:12px;min-height:0;padding:0;border:0;border-radius:0;background:transparent!important;color:inherit!important;font-size:11px;font-weight:inherit;}
body.sample-ui #app .progress-arrow {position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;color:#bcc5d0;font-size:0;font-weight:500;line-height:1;}
body.sample-ui #app .progress-arrow::before {content:'';position:absolute;left:0;top:50%;width:17px;height:2px;background:currentColor;transform:translateY(-50%);}
body.sample-ui #app .progress-arrow::after {content:'';position:absolute;right:3px;top:50%;width:6px;height:6px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:translateY(-50%) rotate(45deg);}
body.sample-ui #app .progress-step.done+.progress-arrow {color:#719b83;}
body.sample-ui #app .progress-arrow svg {width:20px;height:15px;stroke:currentColor;stroke-width:2;fill:none;}

/* Form structure is retained; only headings, boundaries and selections change. */
body.sample-ui #app .edit-main :is(.section,.form-card) {padding:22px 25px;margin:0 0 17px;border:1px solid var(--sample-line);border-radius:8px;background:white;overflow:visible;}
body.sample-ui #app .edit-main :is(.section-title,.form-title,.subsection-title) {margin:0 0 20px!important;padding:0 0 10px!important;border:0!important;border-bottom:1.5px solid var(--sample-line)!important;border-radius:0!important;background:transparent!important;color:var(--sample-ink)!important;font-size:17px!important;font-weight:700!important;line-height:1.5!important;}
body.sample-ui #app .edit-main :is(.section-body,.form-body) {padding:0;background:transparent;}
body.sample-ui #app .edit-main :is(.top,.edit-heading) {margin:0 0 17px;padding:12px 0;border:0;border-radius:0;background:transparent!important;}
body.sample-ui #app .edit-main :is(.section-body,.form-body)>.field+.field {border-top:1.5px dotted #d6deea;padding-top:18px;margin-top:18px;}
body.sample-ui #app .edit-main .field-row+.field-row {border-top:1.5px dotted #d6deea;padding-top:18px;margin-top:18px;}
body.sample-ui #app .edit-main :is(.info-row,.form-separator,.what-separator) {border-color:var(--sample-line);border-width:1.5px;}
body.sample-ui #app .edit-main :is(.actions,.action-row,.footer-actions,.submit-actions,.form-actions) {justify-content:flex-start;}
body.sample-ui #app .edit-main .form-actions {flex-wrap:wrap;}
body.sample-ui #app #confirmationBar {width:100%;max-width:var(--report-body-width);padding:12px 0;margin:0;border-top:1.5px solid var(--sample-line);background:transparent;}
body.sample-ui #app .followup-form {border-top:1.5px solid var(--sample-line);}

/* The independent report-list column uses a muted surface and blue selection. */
body.sample-ui #app #desktopReportsRail {flex:0 0 240px;width:240px;min-width:0;min-height:0;padding:12px;border:0;border-right:1px solid var(--sample-line);background:#e9eef3;overflow:auto;}
body.sample-ui #app #desktopReportsRail[hidden] {display:none!important;}
body.sample-ui #app #desktopReportsRail .rail-card {box-sizing:border-box;width:100%;margin:0 0 10px;padding:15px 14px;border:1px solid var(--sample-line)!important;border-radius:8px;background:white!important;box-shadow:none!important;text-align:left;cursor:pointer;}
body.sample-ui #app #desktopReportsRail .rail-card.active .person-name {font-weight:700;}
body.sample-ui #app #desktopReportsRail .rail-card .person-name {font-size:17px;}
body.sample-ui #app #desktopReportsRail .rail-card :is(.case-title,.reporter-name) {font-size:13px;font-weight:400;}
body.sample-ui #app #desktopReportsRail .rail-card .case-primary {display:flex;flex-direction:column;align-items:flex-start;gap:8px;}
body.sample-ui #app #desktopReportsRail .rail-card .case-summary {margin-top:8px;}
body.sample-ui #app #desktopReportsRail .rail-card .case-status {margin-top:10px;}
body.sample-ui #app #desktopReportsRail .rail-card .case-status .status-row {grid-template-columns:77px minmax(0,1fr);}

/* Reading reference occupies exactly half of the available desktop workspace. */
body.sample-ui #app #referencePane {display:flex;flex-direction:column;min-width:0;min-height:0;height:auto;max-width:none;width:auto;padding:0;border:0;border-left:1px solid #cdd4df;border-radius:0;background:#eef0f3;box-shadow:none;}
body.sample-ui #app #referencePane:not([hidden]) {display:flex!important;}
body.sample-ui #app #referencePane[hidden] {display:none!important;}
body.sample-ui #app #referencePane .reference-header {flex:none;padding:14px 17px 12px;border-bottom:1px solid #d2d8e0;background:#e7ebef;}
body.sample-ui #app #referencePane .reference-header {display:flex;align-items:center;flex-wrap:wrap;gap:8px;}
body.sample-ui #app #referencePane .reference-header>strong {font-size:14px;font-weight:600;color:#4f5a6d;}
body.sample-ui #app #referencePane .reference-header>strong {display:inline-flex;align-items:center;gap:7px;}
body.sample-ui #app #referencePane .reference-header>strong svg {flex:none;width:18px;height:18px;}
body.sample-ui #app #referencePane .reference-header>span {padding:1px 5px;border:1px solid #cbd3dd;border-radius:4px;background:white;font-size:10px;font-weight:400;color:#687789;}
body.sample-ui #app #referencePane .reference-header :is(h2,h3,.reference-title) {margin:0;padding:0;background:transparent!important;font-size:14px;line-height:1.5;color:#4f5a6d;}
body.sample-ui #app #referencePane .reference-scroll {flex:1;min-height:0;min-width:0;overflow:auto;padding:17px;}
body.sample-ui #app #referencePane .reference-document {margin:0;width:100%;max-width:none;padding:23px 21px;border:1px solid #d5dae2;background:white;color:var(--sample-ink);font-size:13px;line-height:1.9;}
body.sample-ui #app #referencePane :is(.reference-close,#referenceClose,#closeReference) {margin-left:auto;padding:4px 10px;min-height:30px;border:1px solid #c5cdd8;border-radius:5px;background:#f7f8fa;color:#556173;font-size:11px;}
body.sample-ui #app #referencePane .reference-document :is(.detail-title,.reference-card-title) {margin:0 0 12px!important;padding:0 0 9px!important;border:0!important;border-bottom:1.5px solid var(--sample-line)!important;background:transparent!important;color:var(--sample-ink)!important;font-size:14px!important;font-weight:700!important;}
body.sample-ui #app #referencePane .reference-document .detail-box {padding:0 0 16px!important;margin:0;border:0;border-radius:0;background:transparent!important;}
body.sample-ui #app #referencePane .reference-document .detail-box+.detail-box {padding-top:16px!important;border-top:1.5px dotted #d6deea!important;}
body.sample-ui #app #referencePane .reference-document :is(.detail-body,.basic-value,.question-answer-text) {padding:0!important;font-size:13px!important;font-weight:400!important;line-height:1.9!important;color:#46494d!important;background:transparent!important;}
body.sample-ui #app #referencePane .reference-document .report-basic-box {display:block!important;}
body.sample-ui #app #referencePane .reference-document .basic-row {display:block!important;padding:10px 0!important;border:0;border-bottom:1.5px dotted #d6deea!important;}
body.sample-ui #app #referencePane .reference-document .basic-row:last-child {border-bottom:0!important;}
body.sample-ui #app #referencePane .reference-document .basic-label {display:block!important;padding:0!important;margin-bottom:5px!important;background:transparent!important;font-size:11px!important;font-weight:400!important;color:var(--sample-muted)!important;}

@container approved-report-list (max-width:800px) {
  body.sample-ui #app .sample-report-card {grid-template-columns:minmax(0,1fr) 208px 16px;gap:10px 16px;}
  body.sample-ui #app .sample-report-card .case-primary {grid-column:1;grid-row:1;}
  body.sample-ui #app .sample-report-card .case-status {grid-column:2;grid-row:1;}
  body.sample-ui #app .sample-report-card .case-summary {grid-column:1/3;grid-row:2;padding-left:124px;}
  body.sample-ui #app .sample-report-card .case-arrow {grid-column:3;grid-row:1/3;}
}
@container approved-report-list (max-width:620px) {
  body.sample-ui #app .sample-report-card {grid-template-columns:minmax(0,1fr) 14px;}
  body.sample-ui #app .sample-report-card .case-primary {grid-column:1;grid-row:1;}
  body.sample-ui #app .sample-report-card .case-status {grid-column:1/3;grid-row:2;padding-left:124px;}
  body.sample-ui #app .sample-report-card .case-summary {grid-column:1/3;grid-row:3;padding-left:124px;}
  body.sample-ui #app .sample-report-card .case-arrow {grid-column:2;grid-row:1;}
}
@media(min-width:761px) {
  body.sample-ui #app #desktopReportsRail:not([hidden]) {display:block!important;}
}
@media(min-width:761px) {
  body.sample-ui #app .workspace-body.reference-open {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  body.sample-ui #app .workspace-body.reference-open>:is(.work-column,.reference-pane) {width:100%;max-width:none;min-width:0;}
}
@media(max-width:1279px) {
  body.sample-ui #app.sample-app {grid-template-columns:205px minmax(0,1fr);}
  body.sample-ui #app .global-menu {padding-inline:11px;}
  body.sample-ui #app .app-name {gap:7px;padding-inline:0;}
  body.sample-ui #app .app-name img {width:36px;height:36px;}
}
@media(max-width:1000px) {
  body.sample-ui {--report-inset:18px;}
  body.sample-ui #app #referencePane .reference-document {max-width:700px;margin-inline:auto;}
  body.sample-ui #app #desktopReportsRail {flex-basis:210px;width:210px;}
  body.sample-ui #app #desktopReportsRail .rail-card .status-row {grid-template-columns:1fr;gap:2px;}
}
@media(max-width:760px) {
  body.sample-ui {--report-inset:16px;}
  body.sample-ui #app.sample-app {display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);padding-bottom:calc(55px + env(safe-area-inset-bottom,0px));}
  body.sample-ui #app .compact-header {display:flex;align-items:center;gap:12px;min-height:50px;padding:5px 12px;border-bottom:1px solid var(--sample-line);background:var(--sample-menu);font-size:12px;}
  body.sample-ui #app .menu-backdrop:not([hidden]) {display:block;position:fixed;inset:50px 0 55px;z-index:1500;width:100%;height:calc(100dvh - 105px);padding:0;border:0;border-radius:0;background:#17324d44;}
  body.sample-ui #app .global-menu {display:none;}
  body.sample-ui #app[data-menu-open=true] .global-menu {display:flex;position:fixed;top:50px;bottom:55px;left:0;width:min(270px,85vw);z-index:1600;padding:16px;}
  body.sample-ui #app .main-surface {min-height:0;height:auto;padding:0;}
  body.sample-ui #app #listPage {padding:21px 16px;}
  body.sample-ui #app .list-heading {align-items:flex-start;gap:10px;margin-bottom:20px;}
  body.sample-ui #app .list-heading h1 {font-size:22px;}
  body.sample-ui #app .task-summary {gap:9px;margin-bottom:18px;}
  body.sample-ui #app .list-counts {gap:9px;margin-bottom:18px;}
  body.sample-ui #app .count-box {flex:1;min-width:0;padding:13px 14px;column-gap:8px;}
  body.sample-ui #app .count-box>strong {font-size:13px;}
  body.sample-ui #app .count-box>b {font-size:22px;}
  body.sample-ui #app .task-card {flex:1;min-width:0;padding:13px 14px;gap:8px;}
  body.sample-ui #app .task-card .task-name {font-size:13px;}
  body.sample-ui #app .task-card strong {font-size:22px;}
  body.sample-ui #app .list-filters {padding:12px;gap:9px;}
  body.sample-ui #app .list-filters label {flex:1;min-width:110px;}
  body.sample-ui #app .list-filters>.search-label {flex-basis:100%;min-width:0;}
  body.sample-ui #app .list-filters :is(input,select) {min-height:43px;}
  body.sample-ui #app .sample-report-card {display:flex;flex-direction:column;align-items:stretch;position:relative;gap:11px;padding:18px 17px;}
  body.sample-ui #app .sample-report-card .case-primary {display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px 12px;padding-right:20px;}
  body.sample-ui #app .sample-report-card .case-primary .case-identity {order:0;flex:1 1 160px;min-width:0;}
  body.sample-ui #app .sample-report-card .case-primary .kind-badge {order:1;flex:none;align-self:flex-start;margin-top:3px;}
  body.sample-ui #app .sample-report-card .person-name {font-size:21px;}
  body.sample-ui #app .sample-report-card :is(.case-summary,.case-status) {padding-left:0;}
  body.sample-ui #app .sample-report-card .case-arrow {position:absolute;right:14px;top:20px;}
  body.sample-ui #app .sample-report-card .kind-badge {font-size:11px;padding:3px 7px;}
  body.sample-ui #app #reportMeta {padding:12px 16px;}
  body.sample-ui #app #reportMeta :is(h1,.person) {font-size:21px;}
  body.sample-ui #app #reportMeta :is(.case-heading,.report-title-line) {gap:8px;margin-bottom:6px;}
  body.sample-ui #app #reportMeta .case-subline {font-size:11px;gap:3px 10px;}
  body.sample-ui #app .back-to-list {display:block;flex:none;padding:8px 16px;border:0;border-bottom:1px solid var(--sample-line);background:white;color:var(--sample-muted);font-size:12px;text-align:left;}
  body.sample-ui #app .parent-tabs {gap:4px;padding:7px 16px 0;justify-content:space-between;}
  body.sample-ui #app .parent-tabs button {flex:1;min-width:0;min-height:calc(50px - var(--connected-main-top-gap));padding:calc(8px - var(--connected-main-top-gap) / 2) 7px;white-space:normal;overflow-wrap:anywhere;}
  body.sample-ui #app #childTabs {gap:6px 8px;min-height:0;padding:6px 16px 10px;}
  body.sample-ui #app #childTabs .subtab-capsule {height:auto;min-height:47px;flex:0 1 auto;}
  body.sample-ui #app #childTabs button[data-child] {flex:1 1 auto;min-height:44px;padding:3px 10px;white-space:normal;overflow-wrap:anywhere;}
  body.sample-ui #app .workspace-body>.report-column:not([hidden]),body.sample-ui #app .workspace-body>.work-column:not([hidden]) {display:flex;}
  body.sample-ui #app .column-scroll {padding:10px 16px;}
  body.sample-ui #app :is(.read-document,.read-card) {padding:20px 18px;}
  body.sample-ui #app .analysis-card-heading h2 {font-size:17px;}
  body.sample-ui #app .read-document .report-basic-box {grid-template-columns:1fr;gap:12px!important;}
  body.sample-ui #app .read-document .basic-row:not(:last-child) {border-bottom:1.5px dotted #d6deea!important;}
  body.sample-ui #app .sharing-cards {grid-template-columns:1fr;gap:16px;}
  body.sample-ui #app .sharing-card {padding:20px 18px;}
  body.sample-ui #app .sharing-card h2 {font-size:18px;}
  body.sample-ui #app .sharing-status-row {column-gap:16px;}
  body.sample-ui #app .progress-display {flex-direction:column;align-items:stretch;gap:6px;}
  body.sample-ui #app .progress-meter {flex:none;width:100%;}
  body.sample-ui #app .progress-meter-label {display:block;}
  body.sample-ui #app .edit-main :is(.section,.form-card) {padding:19px 17px;}
  body.sample-ui #app .edit-footer-feedback {flex-basis:auto;}
  body.sample-ui #app #desktopReportsRail {display:none!important;}
  body.sample-ui #app #toggleReportsRail {display:none!important;}
  body.sample-ui #app #referencePane .reference-scroll {padding:16px;}
  body.sample-ui #app #referencePane .reference-document {padding:23px 20px;font-size:15px;}
  body.sample-ui #app #referencePane .reference-document :is(.detail-body,.basic-value,.question-answer-text) {font-size:15px!important;}
}
@media(max-height:500px) {
  body.sample-ui #app .edit-main :is(.actions,.footer-actions) {position:static;}
}
@media(pointer:coarse) {
  body.sample-ui #app .parent-tabs button {min-height:calc(50px - var(--connected-main-top-gap));}
  body.sample-ui #app #childTabs .subtab-capsule {height:auto;min-height:47px;}
  body.sample-ui #app #childTabs button[data-child] {min-height:44px;}
  body.sample-ui #app #referenceButton {min-height:44px;}
}
/* End approved NARU interface. */

/* 2026-10-11: approved UI layout follow-up. The deployed v1 remains frozen. */
body.sample-ui #app .case-summary .case-title {
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
body.sample-ui #app .app-name {
  gap:8px;
  padding-inline:0;
}
body.sample-ui #app .app-name img {
  width:36px;
  height:36px;
}
body.sample-ui #app .app-name strong {
  font-size:14px;
  white-space:nowrap;
}
/* End approved UI layout follow-up. */

/* TOP layout: full-width scroll surface, unchanged card width and compact sidebar. */
body.sample-ui #app #listPage {max-width:none;overflow-x:hidden;}
body.sample-ui #app #listPage .list-content {width:100%;max-width:867px;min-width:0;margin:0;}
body.sample-ui #app .list-heading h1 {display:flex;align-items:center;flex-wrap:wrap;gap:10px;}
body.sample-ui #app .training-mode-badge {display:inline-flex;align-items:center;justify-content:center;flex:none;min-height:30px;margin:0;padding:4px 9px;border:1px solid #e6c878;border-radius:6px;background:#fff5da;color:#805914;font-size:12px;font-weight:600;line-height:1.5;white-space:nowrap;box-shadow:none;}
body.sample-ui #app .training-mode-badge:hover {background:#ffedbd;}
body.sample-ui #app .training-mode-badge:focus-visible {outline:2px solid #9b701a;outline-offset:3px;}
body.sample-ui #app :is(#listPage,.global-menu) {scrollbar-width:thin;scrollbar-color:#bec6d2 transparent;}
body.sample-ui #app :is(#listPage,.global-menu)::-webkit-scrollbar {width:6px;height:6px;}
body.sample-ui #app :is(#listPage,.global-menu)::-webkit-scrollbar-track {background:transparent;}
body.sample-ui #app :is(#listPage,.global-menu)::-webkit-scrollbar-thumb {background:#bec6d2;border-radius:8px;}
body.sample-ui #app :is(#listPage,.global-menu)::-webkit-scrollbar-thumb:hover {background:#a6b0bf;}
body.sample-ui #app :is(#listPage,.global-menu)::-webkit-scrollbar-button {display:none;width:0;height:0;}
body.sample-ui #app .grand-nav {gap:3px;}
body.sample-ui #app .grand-nav .nav-caption:not(:first-child) {margin-top:18px;padding-top:12px;}
body.sample-ui #app .sample-tools {padding-top:20px;}

/* Heading glyphs inherit the exact heading text color on desktop and mobile. */
body.sample-ui #app [data-heading-icon] > .heading-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  vertical-align: -0.18em;
  color: inherit;
  line-height: 1;
}
body.sample-ui #app [data-heading-icon] > .heading-icon > svg {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
  fill: none;
  stroke: currentColor;
}
body.sample-ui #app #referencePane [data-heading-icon] > .heading-icon {
  width: 17px;
  height: 17px;
  margin-right: 6px;
}

/* 2026-10-13: mobile menus replace the mobile tab and bottom-navigation rows.
   All existing desktop navigation rules remain in force above 760px. */
body.sample-ui #app #mobileHeader,
body.sample-ui #app #mobileFilterApply,
body.sample-ui #app #mobileReportLocation,
body.sample-ui #app #reportMeta .mobile-meta {display:none;}

@media(max-width:760px) {
  body.sample-ui {--report-inset:14px;}
  body.sample-ui #app.sample-app {
    display:flex;flex-direction:column;gap:0;width:100%;min-width:0;
    height:100dvh;min-height:0;padding:0;overflow:hidden;
  }
  body.sample-ui #app :is(.compact-header,.sample-mobile-nav,.mobile-reading-switch,.back-to-list,#menuBackdrop,#mobileCaseLabel),
  body.sample-ui #app .global-menu,
  body.sample-ui #app[data-menu-open=true] .global-menu {display:none!important;}
  body.sample-ui #app .main-surface {
    flex:1;min-width:0;min-height:0;height:auto;padding:0;overflow:hidden;
  }
  body.sample-ui #app #mobileHeader {
    position:relative;z-index:20;display:block;flex:none;min-width:0;
    padding:calc(10px + env(safe-area-inset-top,0px)) 12px 10px;
    margin:0;border-bottom:1px solid var(--sample-line);
    background:var(--sample-menu);transition:margin-top 220ms ease;
  }
  body.sample-ui #app[data-mobile-view=report][data-mobile-chrome-hidden=true] #mobileHeader {
    margin-top:calc(0px - var(--mobile-header-height,106px));pointer-events:none;
  }
  body.sample-ui #app .mobile-app-heading {
    display:flex;align-items:center;justify-content:space-between;
    flex-wrap:wrap;gap:4px 8px;min-width:0;margin:0 0 9px;
  }
  body.sample-ui #app .mobile-title {
    margin:0;min-width:0;color:var(--sample-ink);font-size:18px;
    font-weight:600;line-height:1.5;overflow-wrap:anywhere;
  }
  body.sample-ui #app .mobile-training-badge {
    display:inline-flex;align-items:center;flex:none;min-height:24px;
    padding:2px 7px;border:0;border-radius:5px;
    background:#fff5da;color:#805914;font-size:11px;font-weight:400;
    line-height:1.5;white-space:nowrap;
  }
  body.sample-ui #app .mobile-menu-actions {
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.55fr);
    align-items:stretch;gap:8px;min-width:0;
  }
  body.sample-ui #app .mobile-menu-actions[data-list=true] {
    grid-template-columns:minmax(0,1fr) minmax(0,.75fr) minmax(0,1fr);gap:6px;
  }
  body.sample-ui #app .mobile-menu-actions[data-list=true][data-can-create=false] {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  body.sample-ui #app[data-mobile-view=other] .mobile-menu-actions {
    grid-template-columns:minmax(0,1fr);
  }
  body.sample-ui #app .mobile-menu-actions button {
    position:relative;display:inline-flex;align-items:center;justify-content:center;
    gap:6px;min-width:0;min-height:44px;margin:0;padding:8px;
    border:1px solid var(--sample-line);border-radius:7px;
    background:white;color:var(--sample-ink);font-size:14px;
    font-weight:400;line-height:1.5;white-space:nowrap;box-shadow:none;
    cursor:pointer;-webkit-tap-highlight-color:transparent;
  }
  body.sample-ui #app .mobile-menu-actions[data-list=true] button {gap:4px;padding-inline:5px;}
  body.sample-ui #app .mobile-menu-actions button[hidden] {display:none!important;}
  body.sample-ui #app .mobile-menu-actions button:disabled {cursor:default;opacity:.55;}
  body.sample-ui #app .mobile-menu-actions button svg {display:block;flex:none;width:18px;height:18px;}
  body.sample-ui #app .mobile-menu-actions[data-list=true] button svg {width:16px;height:16px;}
  body.sample-ui #app #mobileHeaderCreateButton {background:#285fe9;border-color:#285fe9;color:white;font-weight:600;}
  body.sample-ui #app #mobileSearchButton[aria-expanded=true] {background:var(--selection-bg);border-color:var(--selection-line);}
  body.sample-ui #app #mobileSearchButton.has-filters::after {
    content:'';position:absolute;top:6px;right:6px;width:6px;height:6px;
    border-radius:50%;background:#285fe9;pointer-events:none;
  }
  body.sample-ui #app #mobileReportMenuButton.mobile-menu-shine {
    animation:naru-mobile-menu-shine 950ms ease-out 1;
  }
  @keyframes naru-mobile-menu-shine {
    0% {border-color:var(--sample-line);box-shadow:0 0 0 0 #85a7fb00;}
    28% {border-color:#8aaaf5;box-shadow:0 0 0 2px #9bb8fa80,0 0 12px #94b4fa55;}
    58% {border-color:#9db5e6;box-shadow:0 0 0 3px #b5c9f540,0 0 18px #a8bff740;}
    100% {border-color:var(--sample-line);box-shadow:0 0 0 5px #b5c9f500;}
  }

  /* The report band is outside the scroller. It remains visible while the
     header retracts, without a second fixed layer or a copied client name. */
  body.sample-ui #app #casePage.workspace {height:auto;flex:1;min-height:0;min-width:0;overflow:hidden;}
  body.sample-ui #app #casePage .work-navigation {display:none!important;}
  body.sample-ui #app #reportMeta {
    position:relative;z-index:10;display:block;flex:none;min-height:0;
    padding:10px 14px 9px;margin:0;border:0;
    border-bottom:1px solid var(--sample-line);background:white;
  }
  body.sample-ui #app #reportMeta :is(.case-heading,.report-title-line) {
    display:flex;align-items:center;gap:5px 8px;flex-wrap:wrap;
    min-width:0;margin:0 0 4px;
  }
  body.sample-ui #app #reportMeta :is(h1,.person) {
    flex:0 1 auto;min-width:0;max-width:100%;font-size:22px;font-weight:700;line-height:1.4;
  }
  body.sample-ui #app #reportMeta h1 small {font-size:13px;}
  body.sample-ui #app #reportMeta .kind-badge {min-width:0;padding:2px 7px;font-size:11px;}
  body.sample-ui #app #reportMeta .header-progress {
    flex:none;align-items:center;margin-left:auto;gap:0;max-width:100%;
  }
  body.sample-ui #app #reportMeta .header-progress-label {display:none;}
  body.sample-ui #app #reportMeta .desktop-meta {display:none;}
  body.sample-ui #app #reportMeta .mobile-meta {display:inline;}
  body.sample-ui #app #reportMeta .header-progress .state-pill {font-size:11px!important;padding:2px 6px!important;}
  body.sample-ui #app #reportMeta #reportSaveStatus {display:none;}
  body.sample-ui #app #reportMeta .case-subline {
    display:flex;align-items:center;flex-wrap:wrap;gap:2px 9px;
    font-size:12px;line-height:1.65;
  }
  body.sample-ui #app #reportMeta .case-subline>span {min-width:0;max-width:100%;overflow-wrap:anywhere;}
  body.sample-ui #app #reportMeta .case-reporter {order:0;}
  body.sample-ui #app #reportMeta .assigned-saseki {order:1;}
  body.sample-ui #app #reportMeta .case-occurrence {order:2;margin-left:auto;white-space:nowrap;}
  body.sample-ui #app #trainingReportTools {display:none!important;}
  body.sample-ui #app .workspace-body {
    display:flex;flex-direction:column;flex:1;min-height:0;min-width:0;
  }
  body.sample-ui #app #mobileReportLocation {
    display:block;min-width:0;margin:0 0 10px;padding:0;
    background:var(--sample-bg);color:var(--sample-muted);
    font-size:12px;font-weight:400;line-height:1.6;overflow-wrap:anywhere;
  }
  body.sample-ui #app .workspace-body>:is(.report-column,.work-column) {
    flex:1;min-height:0;min-width:0;width:100%;
  }
  body.sample-ui #app .column-scroll {
    min-width:0;min-height:0;padding:14px 14px calc(14px + env(safe-area-inset-bottom,0px));
    overflow:auto;overscroll-behavior-y:contain;scrollbar-width:thin;
    scrollbar-color:#bec6d2 transparent;
  }
  body.sample-ui #app :is(.read-document,.read-card,.edit-main) {width:100%;min-width:0;max-width:none;}
  body.sample-ui #app :is(.read-document,.read-card,.sharing-card) {padding:17px 15px;}
  body.sample-ui #app .edit-main :is(.section,.form-card) {padding:17px 15px;}
  body.sample-ui #app .edit-main :is(input:not([type=checkbox]):not([type=radio]),select,textarea) {
    min-width:0;max-width:100%;font-size:16px;
  }
  body.sample-ui #app .edit-main :is(button,.choice-pill,.state-choice,.why-choice,.radio-choice) {min-height:44px;}
  body.sample-ui #app .edit-main :is(.actions,.footer-actions,.submit-actions,.form-actions) {flex-wrap:wrap;gap:8px;}
  body.sample-ui #app .edit-main :is(.actions,.footer-actions) {padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));}
  body.sample-ui #app #confirmationBar {padding:8px 14px calc(8px + env(safe-area-inset-bottom,0px));}
  body.sample-ui #app #referencePane .reference-header {padding:10px 12px;}
  body.sample-ui #app #referencePane :is(#closeReference,.reference-close) {min-height:44px;font-size:12px;}
  body.sample-ui #app #referencePane .reference-scroll {padding:14px 12px calc(14px + env(safe-area-inset-bottom,0px));}
  body.sample-ui #app #referencePane .reference-document {width:100%;max-width:none;min-width:0;padding:18px 15px;}
  body.sample-ui #toast {bottom:calc(14px + env(safe-area-inset-bottom,0px));max-width:calc(100vw - 28px);}

  /* Preserve the existing live search fields and their authorization rules.
     Only their drawer presentation changes on phones. */
  body.sample-ui #app #listPage {padding:12px 14px calc(14px + env(safe-area-inset-bottom,0px));}
  body.sample-ui #app #listPage .list-content {max-width:none;}
  body.sample-ui #app #listPage .list-heading {display:none;}
  body.sample-ui #app #listPage :is(.list-counts,.task-summary,.task-summary-list) {gap:8px;margin-bottom:12px;}
  body.sample-ui #app #listPage :is(.count-box,.task-card) {min-width:0;padding:9px 10px;gap:2px 8px;}
  body.sample-ui #app #listPage :is(.count-box>strong,.task-card .task-name) {font-size:12px;}
  body.sample-ui #app #listPage :is(.count-box>span,.task-card .task-scope) {font-size:10px;}
  body.sample-ui #app #listPage :is(.count-box>b,.task-card strong) {font-size:22px;}
  body.sample-ui #app #mobileSearchPanel {
    display:grid;grid-template-rows:0fr;opacity:0;margin:0;
    transition:grid-template-rows 280ms ease,opacity 180ms ease;
  }
  body.sample-ui #app #mobileSearchPanel[data-open=true] {grid-template-rows:1fr;opacity:1;}
  body.sample-ui #app #mobileSearchPanel .mobile-search-inner {min-height:0;overflow:hidden;}
  body.sample-ui #app #mobileSearchPanel .list-filters {margin:0 0 12px;padding:13px;gap:9px;}
  body.sample-ui #app #mobileSearchPanel .list-filters label {font-size:12px;}
  body.sample-ui #app #mobileSearchPanel .list-filters :is(input,select) {min-height:44px;min-width:0;font-size:16px;}
  body.sample-ui #app #mobileSearchPanel .list-filters>button {min-height:44px;font-size:13px;}
  body.sample-ui #app #mobileSearchPanel .more-filters>summary {min-height:44px;display:flex;align-items:center;cursor:pointer;}
  body.sample-ui #app #mobileFilterApply {
    display:inline-flex;align-items:center;justify-content:center;flex:1 1 auto;
    min-height:44px;padding:9px 12px;border:1px solid #285fe9;border-radius:6px;
    background:#285fe9;color:white;font-size:14px;font-weight:600;
  }
  body.sample-ui #app #listStatus {margin:0 0 12px;font-size:12px;color:var(--sample-muted);}
  body.sample-ui #app .sample-report-card {display:flex;min-width:0;gap:8px;padding:16px 15px;}
  body.sample-ui #app .sample-report-card :is(.case-summary,.case-status) {padding-left:0;}
  body.sample-ui #app .sample-report-card .case-title {font-size:15px;}
  body.sample-ui #app .sample-report-card .case-status .status-row {grid-template-columns:77px minmax(0,1fr);}

  /* The existing native dialog retains focus and Escape handling. Only the
     new destination menus receive this compact, scrollable presentation. */
  body.sample-ui #sampleDialog.mobile-menu-dialog {
    width:min(440px,calc(100vw - 24px));max-width:none;max-height:88dvh;
    padding:0;border:1px solid var(--sample-line);border-radius:12px;
    background:white;color:var(--sample-ink);overflow:hidden;
  }
  body.sample-ui #sampleDialog.mobile-menu-dialog[open] {display:flex;flex-direction:column;}
  body.sample-ui #sampleDialog.mobile-menu-dialog::backdrop {background:#24304566;}
  body.sample-ui #sampleDialog.mobile-menu-dialog>header {flex:none;min-width:0;padding:7px 8px 7px 15px;}
  body.sample-ui #sampleDialog.mobile-menu-dialog #sampleDialogTitle {min-width:0;margin:0;font-size:18px;font-weight:600;line-height:1.5;}
  body.sample-ui #sampleDialog.mobile-menu-dialog #dialogClose {display:flex;align-items:center;justify-content:center;flex:none;width:44px;min-height:44px;padding:0;font-size:24px;}
  body.sample-ui #sampleDialog.mobile-menu-dialog #sampleDialogBody {flex:1;min-height:0;min-width:0;padding:8px;overflow:auto;overscroll-behavior:contain;}
  body.sample-ui #sampleDialog .mobile-destination-menu {min-width:0;}
  body.sample-ui #sampleDialog :is(.mobile-destination,.mobile-report-choice) {
    display:flex;align-items:center;gap:10px;min-width:0;min-height:46px;
    width:100%;margin:0;padding:10px;border:1px solid transparent;
    border-radius:6px;background:transparent;color:var(--sample-ink);
    font-size:15px;font-weight:400;line-height:1.5;text-align:left;
    text-decoration:none;cursor:pointer;
  }
  body.sample-ui #sampleDialog :is(.mobile-destination,.mobile-report-choice) svg {display:block;flex:none;width:20px;height:20px;color:#426ad0;}
  body.sample-ui #sampleDialog :is(.mobile-destination,.mobile-report-choice)>span {min-width:0;overflow-wrap:anywhere;}
  body.sample-ui #sampleDialog :is(.mobile-destination,.mobile-report-choice):hover {background:var(--sample-menu);}
  body.sample-ui #sampleDialog :is(.mobile-destination,.mobile-report-choice)[aria-current=page] {background:var(--selection-bg);font-weight:600;}
  body.sample-ui #sampleDialog :is(.mobile-destination,.mobile-report-choice):disabled {cursor:default;opacity:.5;}
  body.sample-ui #sampleDialog :is(.mobile-menu-copy,.mobile-destination>span) {
    display:flex;flex:1;flex-direction:column;gap:2px;min-width:0;
  }
  body.sample-ui #sampleDialog .mobile-destination>span>strong {font-size:15px;font-weight:400;line-height:1.5;}
  body.sample-ui #sampleDialog .mobile-destination[aria-current=page]>span>strong {font-weight:600;}
  body.sample-ui #sampleDialog :is(.mobile-menu-copy small,.mobile-destination>span>small) {font-size:11px;font-weight:400;line-height:1.5;color:var(--sample-muted);}
  body.sample-ui #sampleDialog :is(.mobile-menu-group-title,.mobile-menu-caption,.mobile-destination-menu>h3) {
    display:block;margin:0;padding:10px 10px 4px;color:var(--sample-muted);
    font-size:12px;font-weight:400;line-height:1.5;
  }
  body.sample-ui #sampleDialog .mobile-menu-current {margin-left:auto;flex:none;font-size:11px;font-weight:400;color:var(--sample-muted);}
  body.sample-ui #sampleDialog .mobile-menu-count {margin-left:auto;padding:1px 7px;border-radius:12px;background:var(--sample-menu);color:var(--sample-muted);font-size:12px;}
  body.sample-ui #sampleDialog :is(.mobile-menu-user,.mobile-menu-account) {
    margin:0;padding:8px 10px;color:var(--sample-muted);font-size:12px;overflow-wrap:anywhere;
  }
  body.sample-ui #sampleDialog .mobile-destination-menu :is(button,a):focus-visible {outline:3px solid #8aabff;outline-offset:-2px;}
}

@media(max-width:360px) {
  body.sample-ui #app #mobileHeader {padding-inline:10px;}
  body.sample-ui #app .mobile-menu-actions button {padding-inline:5px;font-size:13px;}
  body.sample-ui #app .mobile-menu-actions[data-list=true] button {padding-inline:4px;}
  body.sample-ui #app #reportMeta {padding-inline:12px;}
  body.sample-ui #app #reportMeta :is(h1,.person) {font-size:21px;}
  body.sample-ui #app #reportMeta .case-subline {column-gap:7px;}
  body.sample-ui #app #listPage {padding-inline:12px;}
  body.sample-ui #app .column-scroll {padding-inline:12px;}
  body.sample-ui #app #mobileSearchPanel .list-filters>label {flex-basis:100%;}
}

@media(max-width:760px) and (prefers-reduced-motion:reduce) {
  body.sample-ui #app :is(#mobileHeader,#mobileSearchPanel) {transition:none;}
  body.sample-ui #app #mobileReportMenuButton.mobile-menu-shine {animation:none;}
}

/* Preserve reading position as the mobile operation band retracts. */
@media(max-width:760px){body.sample-ui #app .column-scroll{overflow-anchor:none;}}

/* A single phone page scrolls naturally. The client band sticks only after
   its normal position reaches the top; desktop column scrolling is intact. */
@media(max-width:760px) {
  body.sample-ui #app.sample-app {
    display:block;height:100dvh;min-height:0;overflow-x:hidden;overflow-y:auto;
    overscroll-behavior-y:contain;overflow-anchor:none;
    scrollbar-width:thin;scrollbar-color:#bec6d2 transparent;
  }
  body.sample-ui #app.sample-app::-webkit-scrollbar {width:6px;height:6px;}
  body.sample-ui #app.sample-app::-webkit-scrollbar-thumb {background:#bec6d2;border-radius:8px;}
  body.sample-ui #app #mobileHeader {
    position:relative;margin-top:0;transition:none;pointer-events:auto;
  }
  body.sample-ui #app[data-mobile-view=report][data-mobile-chrome-hidden=true] #mobileHeader {
    margin-top:0;pointer-events:auto;
  }
  body.sample-ui #app .main-surface {
    display:block;flex:none;min-height:0;height:auto;overflow:visible;
  }
  body.sample-ui #app #listPage {
    flex:none;min-height:0;height:auto;overflow:visible;
  }
  body.sample-ui #app #casePage.workspace {
    display:block;flex:none;min-height:0;height:auto;overflow:visible;
  }
  body.sample-ui #app #reportMeta {
    position:sticky;top:0;z-index:30;overflow:visible;
    background:white;box-shadow:0 2px 6px #2530440a;
  }
  body.sample-ui #app .workspace-body,
  body.sample-ui #app .workspace-body>:is(.report-column,.work-column),
  body.sample-ui #app .work-panel {
    flex:none;min-height:0;height:auto;overflow:visible;
  }
  body.sample-ui #app .workspace-body {display:block;}
  body.sample-ui #app .column-scroll {
    display:block;flex:none;height:auto;min-height:0;max-height:none;
    overflow:visible;overflow-anchor:none;overscroll-behavior:auto;
    scroll-margin-top:90px;
  }
  body.sample-ui #app #confirmationBar {
    position:sticky;bottom:0;z-index:40;max-width:none;background:white;
  }
  body.sample-ui #app .edit-main :is(.actions,.footer-actions) {
    position:sticky;bottom:0;z-index:40;background:white;
  }
  body.sample-ui #app .edit-main :is(input,select,textarea,[contenteditable=true]) {
    scroll-margin-top:96px;scroll-margin-bottom:96px;
  }
  /* Reference remains a viewport overlay with its own independent reader. */
  body.sample-ui #app .workspace-body.reference-open>#referencePane {
    position:fixed;inset:0;z-index:1700;width:100%;height:100dvh;
    min-height:0;overflow:hidden;
  }
  body.sample-ui #app #referencePane .reference-scroll {flex:1;min-height:0;overflow:auto;}

  /* The accepted light ring expands three times, without moving the button. */
  body.sample-ui #app #mobileReportMenuButton.mobile-menu-shine {animation:none;}
  body.sample-ui #app #mobileReportMenuButton::after {
    content:'';position:absolute;inset:-2px;border:2px solid #4a75d1;
    border-radius:9px;pointer-events:none;opacity:0;
  }
  body.sample-ui #app #mobileReportMenuButton.mobile-menu-shine::after {
    animation:naru-mobile-menu-ripple 800ms ease-out 3;
  }
  @keyframes naru-mobile-menu-ripple {
    0% {opacity:0;transform:scale(1);}
    20% {opacity:.85;transform:scale(1.015,1.07);}
    80%,100% {opacity:0;transform:scale(1.09,1.42);}
  }
}
@media(max-width:760px) and (max-height:500px) {
  body.sample-ui #app .edit-main :is(.actions,.footer-actions),
  body.sample-ui #app #confirmationBar {position:static;}
}
@media(max-width:760px) and (prefers-reduced-motion:reduce) {
  body.sample-ui #app #mobileReportMenuButton.mobile-menu-shine::after {animation:none;}
  body.sample-ui #app #mobileReportMenuButton.mobile-menu-shine {
    background:#e7efff;border-color:#9db5e6;
  }
}

/* mobile-reading-progress-20261013: compact manager heading and mobile actual progress. */
body.sample-ui #app #workPanel .official-workflow-root[data-official-work="manager"] > .manager-heading-compact {padding:0;margin:0 0 10px;}
body.sample-ui #app #workPanel .official-workflow-root[data-official-work="manager"] > .manager-heading-compact .edit-title-row {padding:4px 0;}
body.sample-ui #app .progress-mobile-summary {display:none;}
body.sample-ui #sampleDialog.progress-flow-dialog {box-sizing:border-box;width:min(480px,calc(100vw - 28px));max-width:calc(100vw - 28px);max-height:85dvh;overflow:hidden;}
body.sample-ui #sampleDialog.progress-flow-dialog[open] {display:flex;flex-direction:column;}
body.sample-ui #sampleDialog.progress-flow-dialog > header {flex:none;min-width:0;gap:8px;}
body.sample-ui #sampleDialog.progress-flow-dialog #sampleDialogTitle {min-width:0;overflow-wrap:anywhere;}
body.sample-ui #sampleDialog.progress-flow-dialog #dialogClose {flex:none;min-width:44px;height:44px;}
body.sample-ui #sampleDialog.progress-flow-dialog #sampleDialogBody {flex:1;min-height:0;min-width:0;overflow:auto;overscroll-behavior:contain;}
body.sample-ui #sampleDialog .progress-flow-status {display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:0 0 16px;font-size:13px;color:var(--sample-muted);}
body.sample-ui #sampleDialog .progress-flow-status .state-pill {font-size:13px;color:var(--sample-ink);}
body.sample-ui #sampleDialog .progress-flow-steps {display:flex;flex-direction:column;gap:0;min-width:0;max-width:100%;margin:0;padding:0;list-style:none;}
body.sample-ui #sampleDialog .progress-flow-step {position:relative;display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:10px;min-width:0;margin:0;padding:10px 0;color:#6b7789;font-size:14px;line-height:1.6;}
body.sample-ui #sampleDialog .progress-flow-step:not(:last-child)::after {content:'';position:absolute;left:13px;top:38px;bottom:-10px;width:2px;background:#d8e0ea;}
body.sample-ui #sampleDialog .progress-flow-marker {display:inline-flex;align-items:center;justify-content:center;position:relative;z-index:1;box-sizing:border-box;width:28px;height:28px;border:1px solid #d8e0ea;border-radius:50%;background:#f4f6f9;color:#6b7789;font-size:12px;}
body.sample-ui #sampleDialog .progress-flow-label {min-width:0;overflow-wrap:anywhere;}
body.sample-ui #sampleDialog .progress-flow-state {font-size:12px;white-space:nowrap;}
body.sample-ui #sampleDialog .progress-flow-step.done {color:#355f48;}
body.sample-ui #sampleDialog .progress-flow-step.done .progress-flow-marker {border-color:#c1daca;background:#e6f2e9;color:#355f48;}
body.sample-ui #sampleDialog .progress-flow-step.current {color:#2856a9;font-weight:600;}
body.sample-ui #sampleDialog .progress-flow-step.current .progress-flow-marker {border-color:#8eaee1;background:#e8f0ff;color:#2856a9;}
@media(max-width:760px) {
  body.sample-ui #app .progress-display {display:block;margin-bottom:14px;}
  body.sample-ui #app .progress-display > :is(.progress-meter-label,.progress-meter) {display:none;}
  body.sample-ui #app .progress-mobile-summary {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px;min-width:0;max-width:100%;}
  body.sample-ui #app .progress-mobile-status {display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-width:0;max-width:100%;color:var(--sample-muted);font-size:12px;line-height:1.6;}
  body.sample-ui #app .progress-flow-button {box-sizing:border-box;flex:none;max-width:100%;min-height:44px;padding:6px 10px;border:1px solid var(--sample-line);border-radius:6px;background:#fff;color:var(--sample-ink);font:inherit;font-size:12px;line-height:1.5;white-space:normal;overflow-wrap:anywhere;cursor:pointer;}
  body.sample-ui #app .progress-flow-button:focus-visible {outline:3px solid #8aabff;outline-offset:2px;}
  body.sample-ui #sampleDialog.progress-flow-dialog > header {padding:8px 10px 8px 16px;}
  body.sample-ui #sampleDialog.progress-flow-dialog #sampleDialogBody {padding:14px 16px;}
}

/* 2026-10-13: open section endings; keep dotted separators between items. */
body.sample-ui #app .read-document .detail-box + .detail-box,
body.sample-ui #app #referencePane .reference-document .detail-box + .detail-box {
  border-top: 0 !important;
}
body.sample-ui #app :is(.read-document,.read-card,.reference-document) .basic-row:not(:has(~ .basic-row)),
body.sample-ui #app .sharing-status-row:not(:has(~ .sharing-status-row)),
body.sample-ui #app .history-entry:not(:has(~ .history-entry)) {
  border-bottom: 0 !important;
}

/* Read-only legacy records stay outside the current workflow. */
body.sample-ui #app :is(.legacy-report-badge,.legacy-revision-badge,.legacy-readonly-label){display:inline-flex;align-items:center;padding:4px 9px;border-radius:6px;font-size:13px;line-height:1.4;white-space:nowrap;}
body.sample-ui #app .legacy-report-badge{color:#4b5d75;background:#e8edf5;border:1px solid #cbd5e4;font-weight:700;}
body.sample-ui #app .legacy-revision-badge{color:#5e586d;background:#f0edf5;font-weight:400;}
body.sample-ui #app .legacy-readonly-label{color:#687589;background:transparent;}
body.sample-ui #app .legacy-case-labels{display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
body.sample-ui #app .legacy-case-card .case-status{min-width:0;}
body.sample-ui #app .legacy-reading-note{margin:0 0 22px;color:#65748a;font-size:14px;line-height:1.7;}
body.sample-ui #app .legacy-document .question-answer-text,body.sample-ui #app .legacy-original-text{white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal;}
body.sample-ui #app .legacy-original-text{margin:0;line-height:1.85;}
body.sample-ui #app .legacy-comment-card + .legacy-comment-card{margin-top:18px;}
body.sample-ui #app .legacy-audit-controls{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:30px;padding-top:18px;border-top:1px solid var(--sample-line);}
body.sample-ui #app .legacy-audit-controls span{color:#69778a;font-size:13px;}
body.sample-ui #sampleDialog.legacy-audit-dialog{width:min(880px,calc(100vw - 28px));max-height:85dvh;overflow:hidden;}
body.sample-ui #sampleDialog.legacy-audit-dialog #sampleDialogBody{max-height:calc(85dvh - 100px);overflow:auto;}
body.sample-ui #sampleDialog .legacy-audit-json{margin:16px 0 0;padding:14px;background:#f6f8fc;color:#243045;font-size:12px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;}
body.sample-ui #app[data-list-source=legacy] .list-counts[hidden]{display:none !important;}
@media(max-width:760px){
  body.sample-ui #app[data-legacy-report=true] #reportMeta .case-subline{grid-template-columns:minmax(0,1fr) auto;gap:5px 9px;}
  body.sample-ui #app[data-legacy-report=true] #reportMeta .case-reporter{grid-column:1;grid-row:1;}
  body.sample-ui #app[data-legacy-report=true] #reportMeta .case-occurrence{grid-column:2;grid-row:1;white-space:nowrap;}
  body.sample-ui #app[data-legacy-report=true] #reportMeta .case-subline>.legacy-readonly-label{display:none;}
  body.sample-ui #app[data-legacy-report=true] #reportMeta .legacy-case-labels{gap:3px;}
  body.sample-ui #app[data-legacy-report=true] #reportMeta .legacy-case-labels :is(.legacy-report-badge,.legacy-revision-badge){padding:3px 6px;font-size:11px;}
  body.sample-ui #app[data-legacy-report=true] #reportMeta .legacy-revision-badge{display:none;}
}

/* mobile-polish-print-20261013: common spacing, axes and optical centers. */
body.sample-ui :is(#app,#sampleDialog) .current-progress-badge {
  display:inline-flex!important;align-items:center;justify-content:center;
  box-sizing:border-box;min-height:0!important;min-width:0;padding:2px 8px!important;
  border:1px solid transparent!important;border-radius:5px!important;
  background:#eef1f6!important;color:#637083!important;
  font-size:11px!important;font-weight:500!important;line-height:1.8!important;
  white-space:nowrap;box-shadow:none!important;
}
body.sample-ui :is(#app,#sampleDialog) .current-progress-badge.final {background:#e8f4ed!important;color:#287253!important;}
body.sample-ui #app .edit-history-timeline {--history-axis:5px;--history-dot:10px;--history-dot-y:9px;}
body.sample-ui #app .edit-history-timeline :is(.history-entry,.history-item)::before {
  left:var(--history-axis);top:var(--history-dot-y);bottom:calc(-1 * var(--history-dot-y));
  width:1.5px;transform:translateX(-50%);
}
body.sample-ui #app .edit-history-timeline :is(.history-entry,.history-item)::after {
  box-sizing:border-box;left:var(--history-axis);top:var(--history-dot-y);
  width:var(--history-dot);height:var(--history-dot);transform:translate(-50%,-50%);
}
@media(max-width:760px){
  body.sample-ui #app {--mobile-block-space:16px;}
  body.sample-ui #app #listPage {padding-top:var(--mobile-block-space);padding-bottom:calc(var(--mobile-block-space) + env(safe-area-inset-bottom,0px));}
  body.sample-ui #app #listPage :is(.list-counts,.task-summary,.task-summary-list) {margin:0 0 var(--mobile-block-space);}
  body.sample-ui #app #listStatus:empty {display:none;margin:0;padding:0;}
  body.sample-ui #app #listStatus:not(:empty) {margin:0 0 var(--mobile-block-space);}
  body.sample-ui #app #mobileSearchPanel .list-filters {margin:0 0 var(--mobile-block-space);}
  body.sample-ui #app #reportList {display:flex;flex-direction:column;gap:var(--mobile-block-space);}
  body.sample-ui #app #reportList .sample-report-card {margin:0;}
  body.sample-ui #app #loadMoreReports:not([hidden]) {margin-top:var(--mobile-block-space);}
  body.sample-ui #app .column-scroll {padding-top:var(--mobile-block-space);padding-bottom:calc(var(--mobile-block-space) + env(safe-area-inset-bottom,0px));}
  body.sample-ui #app #mobileReportLocation:not([hidden]) {margin:0 0 var(--mobile-block-space);}
  body.sample-ui #app #caseContent > :is(.read-card,.analysis-card,.sharing-grid,.legacy-comment-card) {margin-top:0;margin-bottom:var(--mobile-block-space);}
  body.sample-ui #app #caseContent > :last-child {margin-bottom:0;}
  body.sample-ui #app #caseContent .sharing-grid {gap:var(--mobile-block-space);}
  body.sample-ui #app #caseContent .sharing-grid > .sharing-card {margin:0;}
  body.sample-ui #app #caseContent .edit-main :is(.form-card,.section) {margin-block:0 var(--mobile-block-space);}
  body.sample-ui #app #caseContent .edit-main :is(.form-card,.section):last-child {margin-bottom:0;}
  body.sample-ui #app .progress-display {margin:0 0 var(--mobile-block-space);padding:0;}
  body.sample-ui #app .progress-mobile-summary {padding:0;min-height:44px;}
  body.sample-ui #app .edit-main .field-label-row {display:flex;align-items:center;gap:7px;flex-wrap:nowrap;}
  body.sample-ui #app .edit-main .field-label-row > :is(.field-label,label) {flex:0 1 auto;min-width:0;margin:0;padding:0;line-height:1.5;overflow-wrap:anywhere;}
  body.sample-ui #app .edit-main .field-label-row > :is(.req,.opt) {flex:none;align-self:center;box-sizing:border-box;margin:0;padding:3px 7px;line-height:1;min-height:20px;}
  body.sample-ui #app .edit-main .final-status-badge.wait {background:#fff0f0!important;color:#a33d3d!important;}
  body.sample-ui #sampleDialog > header {display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px;box-sizing:border-box;padding:8px 10px 8px 16px;}
  body.sample-ui #sampleDialog #sampleDialogTitle {display:flex;align-items:center;min-height:44px;margin:0;padding:0;line-height:1.35;}
  body.sample-ui #sampleDialog #dialogClose {display:flex;align-items:center;justify-content:center;box-sizing:border-box;flex:none;width:44px;height:44px;min-height:44px;margin:0;padding:0;line-height:1;}
  body.sample-ui #sampleDialog .mobile-destination-menu > .mobile-menu-group-title {display:flex;align-items:center;min-height:34px;box-sizing:border-box;margin:0;padding:7px 10px;font-size:12px;line-height:20px;}
}

/* works-theme-20261013: approved white/grey surfaces and green action buttons.
   Badge tokens, radio choices and field/status pills keep the app's own rules. */
body.sample-ui {
  --sample-bg:#f6f7f9;
  --works-primary:#10bf63;
  --works-primary-hover:#0eae59;
  --works-sidebar:#e9eef3;
  --works-sidebar-line:#d5dde6;
}
body.sample-ui #app :is(.count-box>b,.task-card strong) {color:#0c64e0;}
body.sample-ui #app :is(#mobileCreateButton,#mobileHeaderCreateButton,#mobileFilterApply,#confirmWholeReport),
body.sample-ui #app .edit-main :is(button.action.primary,button.action-button.primary,button.report-submit,button.submit-modal-confirm),
body.sample-ui #sampleDialog button.action.primary,
body.sample-ui .workflow-success-ok {
  border-color:#0c64e0!important;
  background:#0c64e0!important;
  color:#ffffff!important;
  box-shadow:none;
}
body.sample-ui #app :is(#mobileCreateButton,#mobileHeaderCreateButton,#mobileFilterApply,#confirmWholeReport):hover:not(:disabled),
body.sample-ui #app .edit-main :is(button.action.primary,button.action-button.primary,button.report-submit,button.submit-modal-confirm):hover:not(:disabled),
body.sample-ui #sampleDialog button.action.primary:hover:not(:disabled),
body.sample-ui .workflow-success-ok:hover:not(:disabled) {
  border-color:#0957c8!important;
  background:#0957c8!important;
}
body.sample-ui #app :is(#mobileCreateButton,#mobileHeaderCreateButton,#mobileFilterApply,#confirmWholeReport) svg,
body.sample-ui #app .edit-main :is(button.action.primary,button.action-button.primary,button.report-submit,button.submit-modal-confirm) svg {
  color:inherit;
}
body.sample-ui #app :is(#mobileCreateButton,#mobileHeaderCreateButton,#mobileFilterApply,#confirmWholeReport):disabled,
body.sample-ui #app .edit-main :is(button.action.primary,button.action-button.primary,button.report-submit,button.submit-modal-confirm):disabled,
body.sample-ui #sampleDialog button.action.primary:disabled {
  border-color:#b8c5d1!important;background:#cbd6df!important;color:#ffffff!important;
  cursor:not-allowed;
}
body.sample-ui #app .desktop-list-actions,
body.sample-ui #app #desktopTabActions,
body.sample-ui #app #desktopConfirmationSlot {display:none;}

@media(min-width:761px) {
  /* A distinct navigation surface, without recolouring the mobile header. */
  body.sample-ui #app .global-menu {
    background:var(--works-sidebar);
    border-right:1px solid var(--works-sidebar-line);
  }
  body.sample-ui #app .portal-button {margin-top:0;}
  body.sample-ui #app .nav-icon {color:var(--sample-ink);}
  body.sample-ui #app .grand-nav button:not(#trainingSettingsButton) {
    border-radius:7px;
    color:var(--sample-ink);
  }
  body.sample-ui #app .grand-nav button:not(#trainingSettingsButton):hover:not(:disabled) {background:#dce5ee;}
  body.sample-ui #app .grand-nav button:is(.selected,[aria-current=page],.active):not(#trainingSettingsButton) {
    background:var(--works-primary)!important;
    border-color:var(--works-primary)!important;
    color:#ffffff!important;
    font-weight:600!important;
  }
  body.sample-ui #app .grand-nav button:is(.selected,[aria-current=page],.active) .nav-icon {color:inherit;}
  body.sample-ui #app #trainingSettingsButton {
    padding-inline:12px!important;
    min-height:36px;
    font-size:12px;
  }
  body.sample-ui #app .sample-tools {padding-inline:12px;}
  body.sample-ui #app #unconfirmedCount {color:var(--sample-ink);}

  /* Search keeps its existing filters and the shared search panel. */
  body.sample-ui #app .list-counts {align-items:stretch;flex-wrap:wrap;}
  body.sample-ui #app .desktop-list-actions {
    display:flex;align-items:center;gap:10px;flex:0 0 auto;
  }
  body.sample-ui #app .desktop-list-actions>button {
    display:inline-flex;align-items:center;justify-content:center;gap:7px;
    min-height:40px;margin:0;padding:8px 14px;border:1px solid var(--sample-line);
    border-radius:7px;background:white;color:var(--sample-ink);
    font:inherit;font-size:13px;font-weight:600;line-height:1.5;white-space:nowrap;
  }
  body.sample-ui #app .desktop-list-actions>button svg {width:17px;height:17px;flex:none;}
  body.sample-ui #app #desktopSearchButton[aria-expanded=true] {background:#e4edfc;border-color:var(--selection-line);}
  body.sample-ui #app #mobileSearchPanel {
    display:grid;grid-template-rows:0fr;opacity:0;min-width:0;
    transition:grid-template-rows 240ms ease,opacity 180ms ease;
  }
  body.sample-ui #app #mobileSearchPanel[data-open=true] {grid-template-rows:1fr;opacity:1;}
  body.sample-ui #app #mobileSearchPanel .mobile-search-inner {min-height:0;overflow:hidden;}
  body.sample-ui #app #mobileSearchPanel .list-filters {margin:0 0 18px;}

  /* The original confirmation footer is moved into this reserved desktop
     profile slot. The one real confirmation control is never duplicated. */
  body.sample-ui #app #reportMeta {display:flex;align-items:center;gap:18px;}
  body.sample-ui #app .case-profile-main {flex:1;min-width:0;}
  body.sample-ui #app #desktopConfirmationSlot {
    display:flex;align-items:center;justify-content:flex-end;flex:0 0 244px;
    min-width:0;align-self:stretch;
  }
  body.sample-ui #app #desktopConfirmationSlot #confirmationBar {
    display:flex;align-items:flex-end;justify-content:center;flex-direction:column;
    gap:4px;width:100%;max-width:none;min-height:0;margin:0;padding:0;
    border:0;background:transparent;
  }
  body.sample-ui #app #desktopConfirmationSlot #confirmationBar[hidden] {display:none;}
  body.sample-ui #app #desktopConfirmationSlot #confirmationBar>span {font-size:11px;line-height:1.5;}
  body.sample-ui #app #desktopConfirmationSlot #confirmWholeReport {
    width:100%;min-height:42px;margin:0;padding:8px 12px;
    border-radius:7px;font-size:13px;font-weight:600;line-height:1.5;white-space:nowrap;
  }
  body.sample-ui #app #desktopConfirmationSlot .confirmation-time {font-size:11px;line-height:1.5;}
  body.sample-ui #app #caseTrainingBadge {
    flex:none;
  }

  /* Both vertical active-tab borders cross the horizontal line. There is
     no masking pseudo-element to erase the two small corner junctions. */
  body.sample-ui #app .work-navigation {
    --connected-main-active-line:#a1b9da;
    --connected-horizontal-color:#a1b9da;
    --connected-horizontal-width:2.5px;
    --connected-tab-surface:var(--sample-bg);
  }
  body.sample-ui #app .parent-tabs {
    align-items:flex-end;flex-wrap:wrap;gap:6px;
    padding:8px var(--report-inset) 0;
    border-bottom:2.5px solid var(--connected-horizontal-color);overflow:visible;
  }
  body.sample-ui #app .parent-tabs>button[role=tab] {
    --connected-main-top-gap:0px;
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    flex:0 0 auto;min-width:0;min-height:40px;margin:0;
    padding:8px 13px;border:1px solid #dfe3ea;border-bottom:0;
    background:#e4e6e9;color:#222222;font-size:14px;font-weight:400;
    line-height:1.5;white-space:nowrap;overflow-wrap:normal;
  }
  body.sample-ui #app .parent-tabs>button[role=tab][aria-selected=true] {
    min-height:46px;margin-bottom:-2.5px;padding-bottom:10px;
    border:2px solid var(--connected-horizontal-color)!important;border-bottom:0!important;
    background:var(--sample-bg)!important;color:#222222!important;font-weight:700!important;
  }
  body.sample-ui #app .parent-tabs>button[role=tab][aria-selected=true]::after {content:none;}
  body.sample-ui #app #desktopTabActions {
    display:flex;align-items:center;flex-wrap:wrap;gap:20px;
    margin-left:auto;padding-bottom:7px;
  }
  body.sample-ui #app #desktopTabActions>button {
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    flex:none;min-height:32px;margin:0;padding:4px 9px;
    border:1px solid var(--sample-line);border-radius:7px!important;
    background:white;color:var(--sample-ink);font:inherit;font-size:12px;
    font-weight:400;line-height:1.5;white-space:nowrap;box-shadow:none!important;
  }
  body.sample-ui #app #desktopTabActions>button svg {width:16px;height:16px;flex:none;}
  body.sample-ui #app #desktopTabActions #desktopDeleteTrainingButton {
    border-color:#efceca;background:#fff8f6;color:#a54137;
  }

  /* Sharing and editing use one set of dimensions, including the reference
     button; switching parent tabs cannot change this row's height. */
  body.sample-ui #app #childTabs {
    height:52px;min-height:52px;padding:12px var(--report-inset);
    align-content:center;align-items:center;gap:8px 12px;
  }
  body.sample-ui #app #childTabs .subtab-capsule {
    height:28px;min-height:28px;flex:none;
  }
  body.sample-ui #app #childTabs button[data-child] {
    flex:0 0 108px;width:108px;height:28px;min-height:28px;
    padding:0 10px;font-size:12px;line-height:1.3;white-space:nowrap;overflow-wrap:normal;
  }
  body.sample-ui #app #referenceButton {
    height:28px;min-height:28px;padding:0 9px;font-size:12px;line-height:1.3;
  }
  body.sample-ui #app #referenceButton svg {width:16px;height:16px;}

  /* Each available workflow phase gets equal room. Labels wrap inside the
     phase instead of producing a horizontal scrollbar. */
  body.sample-ui #app .progress-display {
    align-items:center;gap:14px;max-width:var(--report-body-width);
    padding:8px 0;margin:0 0 18px;
  }
  body.sample-ui #app .progress-meter {
    align-items:stretch;overflow:visible;flex:1;min-width:0;
  }
  body.sample-ui #app .progress-step {
    display:grid;grid-template-columns:16px minmax(0,1fr);align-content:center;
    align-items:center;gap:2px 5px;flex:1 1 0;min-width:0;min-height:56px;
    padding:8px 10px;white-space:normal;overflow-wrap:anywhere;font-size:12px;
  }
  body.sample-ui #app .progress-step .step-marker {
    grid-column:1;grid-row:1/3;align-self:center;justify-self:center;font-size:12px;
  }
  body.sample-ui #app .progress-step>span:not(.step-marker) {grid-column:2;min-width:0;}
  body.sample-ui #app .progress-step>strong {grid-column:2;font-size:11px;line-height:1.5;}
  body.sample-ui #app .progress-step.current {background:#e8f0ff;color:#2856a9;}
  body.sample-ui #app .progress-arrow {align-self:center;flex:0 0 20px;}
}
@media(min-width:761px) and (max-width:1100px) {
  body.sample-ui #app #childTabs {
    display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:28px 28px;
    height:90px;min-height:90px;gap:8px 12px;padding-block:13px;align-content:start;
  }
  body.sample-ui #app #childTabs .subtab-capsule {grid-column:1/-1;grid-row:1;justify-self:start;}
  body.sample-ui #app #childTabs>.reference-divider {grid-column:1;grid-row:2;}
  body.sample-ui #app #childTabs>#referenceButton {grid-column:2;grid-row:2;justify-self:start;}
  body.sample-ui #app #desktopConfirmationSlot {flex-basis:216px;}
  body.sample-ui #app #desktopConfirmationSlot #confirmWholeReport {font-size:12px;padding-inline:8px;}
  body.sample-ui #app .progress-display {flex-direction:column;align-items:stretch;gap:8px;}
  body.sample-ui #app .progress-meter {width:100%;}
  body.sample-ui #app .progress-step {min-height:64px;padding-inline:7px;}
}
@media(max-width:760px) {
  /* Keep the natural sticky profile; only the confirmation action is fixed. */
  body.sample-ui #app #caseTrainingBadge {display:none!important;}
  body.sample-ui #app #reportMeta .case-profile-main {width:100%;min-width:0;}
  body.sample-ui #app #confirmationBar {
    position:fixed;inset:auto 0 0;z-index:40;display:flex;align-items:center;
    justify-content:center;flex-wrap:wrap;gap:4px 10px;width:100%;max-width:none;
    margin:0;padding:8px 14px calc(8px + env(safe-area-inset-bottom,0px));
    border-top:1px solid var(--sample-line);background:white;font-size:11px;
  }
  body.sample-ui #app #confirmationBar[hidden] {display:none;}
  body.sample-ui #app #confirmationBar #confirmWholeReport {
    width:100%;min-height:48px;padding:9px 12px;border-radius:7px;
    font-size:14px;font-weight:600;line-height:1.5;
  }
  body.sample-ui #app #confirmationBar:has(#confirmWholeReport)>span {display:none;}
  body.sample-ui #app #confirmationBar .confirmation-time {font-size:11px;}
  body.sample-ui #app[data-confirmation-visible=true] {padding-bottom:var(--confirmation-bar-height,68px);}
}
@media(prefers-reduced-motion:reduce) {
  body.sample-ui #app #mobileSearchPanel {transition:none;}
}

/* desktop-progress-refine-20261013: center required markers on every screen;
   the warning color change is limited to the finalization checklist. */
body.sample-ui #app .edit-main .field-label-row {
  display:flex;align-items:center;gap:7px;flex-wrap:nowrap;
}
body.sample-ui #app .edit-main .field-label-row > :is(.field-label,label) {
  flex:0 1 auto;min-width:0;margin:0;padding:0;line-height:1.5;overflow-wrap:anywhere;
}
body.sample-ui #app .edit-main .field-label-row > :is(.req,.opt) {
  flex:none;align-self:center;box-sizing:border-box;margin:0;line-height:1;min-height:20px;
}
body.sample-ui #app .edit-main .final-status-badge.wait {
  background:#fff0f0!important;color:#a33d3d!important;
}

/* A compact desktop stepper follows the existing workflow stages. The line
   joins the centers of equal-width columns, underneath the 28px markers. */
@media(min-width:761px) {
  body.sample-ui #app .progress-stepper-display {
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    width:100%;max-width:var(--report-body-width);min-width:0;
    box-sizing:border-box;margin:0 0 16px;padding:12px 0;
  }
  body.sample-ui #app .progress-stepper-display > .progress-meter-label {display:none;}
  body.sample-ui #app .progress-desktop-stepper {
    display:grid;grid-template-columns:none;grid-auto-flow:column;
    grid-auto-columns:minmax(0,1fr);align-items:start;gap:8px;
    flex:none;width:100%;min-width:0;max-width:100%;margin:0;padding:0;
    list-style:none;overflow:visible;
  }
  body.sample-ui #app .progress-desktop-stepper .progress-step {
    position:relative;display:flex;flex-direction:column;align-items:center;
    justify-content:flex-start;gap:5px;flex:none;min-width:0;min-height:0;
    box-sizing:border-box;margin:0;padding:0 3px;border:0;border-radius:0;
    background:transparent;color:var(--sample-muted);font-size:12px;
    font-weight:400;line-height:1.4;text-align:center;white-space:normal;overflow-wrap:anywhere;
  }
  body.sample-ui #app .progress-desktop-stepper .progress-step::before {
    content:"";position:absolute;left:calc(-50% - 4px);right:50%;top:13px;
    height:2px;background:var(--sample-line);pointer-events:none;
  }
  body.sample-ui #app .progress-desktop-stepper .progress-step:first-child::before {content:none;}
  body.sample-ui #app .progress-desktop-stepper .progress-step .step-marker {
    position:relative;z-index:1;display:flex;align-items:center;justify-content:center;
    grid-column:auto;grid-row:auto;align-self:center;justify-self:auto;flex:none;
    box-sizing:border-box;width:28px;height:28px;min-width:28px;min-height:28px;
    margin:0;padding:0;border:0;border-radius:50%;background:#edf0f4;
    color:var(--sample-muted);font-size:12px;font-weight:500;line-height:1;
  }
  body.sample-ui #app .progress-desktop-stepper .progress-step > :is(.progress-stepper-label,.progress-stepper-state) {
    grid-column:auto;grid-row:auto;min-width:0;max-width:100%;
  }
  body.sample-ui #app .progress-desktop-stepper .progress-step > .progress-stepper-state {
    color:var(--sample-muted);font-size:11px;font-weight:400;line-height:1.5;
  }
  body.sample-ui #app .progress-desktop-stepper .progress-step.done {background:transparent;color:#0c64e0;}
  body.sample-ui #app .progress-desktop-stepper .progress-step.done .step-marker {background:#bfd7fa;color:#0c64e0;}
  body.sample-ui #app .progress-desktop-stepper .progress-step.current {background:transparent;color:#2856a9;font-weight:600;}
  body.sample-ui #app .progress-desktop-stepper .progress-step.current .step-marker {background:#e8f0ff;color:#2856a9;}
}

/* report-style-identity-20261013: retained dimensions and badge styles. */
body.sample-ui #app #childTabs .subtab-capsule button[data-child][aria-selected=true] {
  background:#0c64e0!important;color:#ffffff!important;border-color:#0c64e0!important;font-weight:550!important;
}
body.sample-ui #app .analysis-card-heading .analysis-heading-labels {
  display:flex;align-items:center;flex:1;flex-wrap:wrap;gap:5px 12px;min-width:0;
}
body.sample-ui #app .analysis-card-heading .section-author {
  min-width:0;max-width:100%;color:var(--sample-muted);font-size:12px;
  font-weight:400;line-height:1.5;overflow-wrap:anywhere;
}
body.sample-ui #app .analysis-card-heading .analysis-edit {flex:none;}
@media(min-width:761px) {
  body.sample-ui #app[data-report-kind=accident] .work-navigation {
    --connected-main-active-line:#a1b9da;
    --connected-horizontal-color:#a1b9da;
  }
}
@media(max-width:760px) {
  body.sample-ui #app #reportMeta {
    background-color:#ffffff;transition:background-color 360ms ease;
  }
  body.sample-ui #app[data-report-kind=accident] #reportMeta[data-profile-stuck=true] {
    background-color:#fff0ed;
  }
  body.sample-ui #app[data-report-kind=hiyari] #reportMeta[data-profile-stuck=true] {
    background-color:#edf5ff;
  }
  body.sample-ui #app .analysis-card-heading .section-author {font-size:11px;}
}
@media(max-width:760px) and (prefers-reduced-motion:reduce) {
  body.sample-ui #app #reportMeta {transition:none;}
}

/* blue-reference-confirmation-20261014: approved accent colors, category
   widths and direct reference controls. Sidebar selection keeps its green. */
body.sample-ui {
  --selection-bg:#e8f0ff;
  --selection-line:#0c64e0;
  --selection-ink:#2856a9;
}
body.sample-ui #app .text-link,
body.sample-ui #app .grand-nav #trainingSettingsButton {
  color:#0c64e0!important;
}
body.sample-ui #app :is(#desktopSearchButton,#mobileSearchButton).has-filters {
  border-color:#a1b9da;
}
body.sample-ui #app #mobileSearchButton.has-filters::after {content:none;}
body.sample-ui #app #toggleReportsRail:disabled {
  background:transparent!important;border-color:transparent!important;
  color:#8b929d!important;font-weight:400!important;cursor:default;
}
body.sample-ui #app #toggleReportsRail:disabled .nav-icon {color:inherit;}
body.sample-ui #app #desktopReportsRail .rail-card.active {
  background:#d6e2f4!important;
  box-shadow:none!important;
  color:var(--sample-ink)!important;
}

/* Fixed widths follow each semantic category's longest supported label.
   em units follow the badge's own font, including the smaller phone font. */
body.sample-ui :is(#app,#sampleDialog) [data-badge-group] {
  box-sizing:border-box;flex-shrink:0;text-align:center;white-space:nowrap;
}
body.sample-ui :is(#app,#sampleDialog) [data-badge-group=kind] {
  width:calc(6em + 20px);min-width:calc(6em + 20px);max-width:none;
}
body.sample-ui :is(#app,#sampleDialog) [data-badge-group=workflow],
body.sample-ui :is(#app,#sampleDialog) [data-badge-group=personal] {
  width:calc(6em + 18px);min-width:calc(6em + 18px);
}
body.sample-ui :is(#app,#sampleDialog) [data-badge-group=checklist] {
  width:calc(3em + 20px);min-width:calc(3em + 20px);max-width:none;
}
body.sample-ui :is(#app,#sampleDialog) :is(.state-pill.final,.state-pill.is-complete,.badge-success,
  .header-progress .badge.done,.case-status .badge.done,.status-pill.complete,
  .mini-status.status-done,.mini-status.status-confirm,.report-reading-case-status.is-success),
body.sample-ui :is(#app,#sampleDialog) .current-progress-badge.final {
  background:#e8f0ff!important;color:#0c64e0!important;
}
body.sample-ui :is(#app,#sampleDialog) .final-status-badge.ok {
  background:#0c64e0!important;color:#ffffff!important;
}
body.sample-ui :is(#app,#sampleDialog) :is(.final-status-badge.wait,.status-pill.incomplete) {
  background:#fff0f0!important;color:#a33d3d!important;
}
body.sample-ui :is(#app,#sampleDialog) :is(.mini-status.status-read,.mini-status.status-notneeded,.mini-status.status-unread) {
  background:#eef1f6!important;color:#637083!important;
}
body.sample-ui #sampleDialog .progress-flow-step.done {color:#0c64e0;}
body.sample-ui #sampleDialog .progress-flow-step.done .progress-flow-marker {
  background:#bfd7fa;border-color:#bfd7fa;color:#0c64e0;
}

/* Reference actions stay white and visually belong to their writing box. */
body.sample-ui #app .edit-main .section-heading-with-reference {
  display:flex;align-items:center;justify-content:flex-start;
  flex-wrap:wrap;gap:8px 12px;min-width:0;
}
body.sample-ui #app .edit-main .section-heading-with-reference>.heading-icon {margin-right:0;}
body.sample-ui #app .edit-main .section-reference-label {
  display:inline-flex;align-items:center;flex:1;gap:8px;min-width:0;
}
body.sample-ui #app .edit-main .context-reference-button {
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  flex:none;min-height:30px;margin:0 0 0 auto;padding:4px 9px;
  border:1px solid #cdd7e5;border-radius:6px!important;
  background:#ffffff!important;color:var(--sample-ink)!important;
  font:inherit;font-size:12px;font-weight:400;line-height:1.5;
  white-space:nowrap;box-shadow:none!important;
}
body.sample-ui #app .edit-main .context-reference-button:hover {background:#f6f8fb!important;}
body.sample-ui #app .edit-main .context-reference-button svg {
  display:block;flex:none;width:16px;height:16px;color:inherit;
}
body.sample-ui #app #referencePane .reference-section-tabs {
  display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px;
}
body.sample-ui #app #referencePane .reference-section-tabs button[data-reference-stage] {
  display:inline-flex;align-items:center;justify-content:center;
  min-height:32px;margin:0;padding:5px 9px;
  border:1px solid #cdd7e5;border-radius:6px;background:#ffffff;
  color:var(--sample-ink);font:inherit;font-size:12px;font-weight:400;
  line-height:1.5;white-space:nowrap;
}
body.sample-ui #app #referencePane .reference-section-tabs button[data-reference-stage][aria-selected=true] {
  border-color:#0c64e0;background:#0c64e0;color:#ffffff;font-weight:550;
}
body.sample-ui #app #referencePane .reference-reading-stage {min-width:0;}
body.sample-ui #app #referencePane .reference-stage-heading {
  display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;
  margin:0 0 14px;padding:0 0 10px;border-bottom:1.5px solid var(--sample-line);
}
body.sample-ui #app #referencePane .reference-stage-heading h2 {
  margin:0;padding:0;background:transparent!important;color:var(--sample-ink);
  font-size:16px;font-weight:600;line-height:1.5;
}
body.sample-ui #app #referencePane .reference-stage-heading .section-author {
  color:var(--sample-muted);font-size:11px;font-weight:400;line-height:1.5;
}
body.sample-ui #app #referencePane .reference-reading-stage :is(.read-card,.analysis-card) {
  max-width:100%;margin:0 0 14px;
}
body.sample-ui #app #referencePane .reference-reading-stage .analysis-card-heading {
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
body.sample-ui #app .section-author.is-empty {color:var(--sample-muted);}

@media(min-width:761px) {
  body.sample-ui #app .app-name {padding-top:0;border-top:0;}
  body.sample-ui #app .grand-nav .portal-button {
    min-height:45px;margin:0;padding:11px 12px;
    background:transparent;font-size:14px;line-height:1.5;
  }
  body.sample-ui #app .grand-nav .portal-button:hover {background:#dce5ee;}
  body.sample-ui #app .grand-nav .portal-button .portal-arrow {margin-left:auto;}
  body.sample-ui #app .parent-tabs>button[role=tab] {
    box-sizing:border-box;width:var(--main-tab-equal-width,112px);
    min-width:var(--main-tab-equal-width,112px);
    flex:0 0 var(--main-tab-equal-width,112px);
  }
  body.sample-ui #app #desktopReportsRail .rail-card [data-badge-group=workflow],
  body.sample-ui #app #desktopReportsRail .rail-card [data-badge-group=personal] {max-width:none;}

  /* The status box is beside the client name, with no colored PC surface. */
  body.sample-ui #app #reportMeta .case-heading {align-items:center;}
  body.sample-ui #app #desktopConfirmationSlot {
    display:inline-flex;align-items:center;justify-content:flex-start;
    flex:0 0 auto;align-self:center;width:auto;margin:0;min-width:0;
  }
  body.sample-ui #app #desktopConfirmationSlot[hidden] {display:none;}
  body.sample-ui #app #desktopConfirmationSlot #confirmationBar {
    display:grid;grid-template-columns:max-content max-content;align-items:center;
    justify-content:start;gap:2px 8px;width:auto;min-height:44px;
    margin:0;padding:6px 9px;border:1px solid #58616e;border-radius:6px;
    background:#ffffff;color:var(--sample-ink);
  }
  body.sample-ui #app #desktopConfirmationSlot #confirmationBar[hidden] {display:none;}
  body.sample-ui #app #desktopConfirmationSlot .confirmation-status-label {
    grid-column:1/-1;grid-row:1;font-size:10px;line-height:1.3;
    color:#222222;font-weight:400;white-space:nowrap;
  }
  body.sample-ui #app #desktopConfirmationSlot .confirmation-status-value {
    grid-column:1;grid-row:2;justify-self:stretch;text-align:center;
    font-size:12px;line-height:1.4;color:#ff0000;font-weight:500;
  }
  body.sample-ui #app #desktopConfirmationSlot #confirmationBar[data-confirmation-state=confirmed] .confirmation-status-value {color:#0c64e0;}
  body.sample-ui #app #desktopConfirmationSlot .confirmation-status-separator {display:none;}
  body.sample-ui #app #desktopConfirmationSlot .confirmation-time {
    grid-column:2;grid-row:2;font-size:11px;line-height:1.4;white-space:nowrap;color:var(--sample-muted);
  }
  body.sample-ui #app #desktopConfirmationSlot #confirmationBar:has(#confirmWholeReport) .confirmation-status-label {grid-column:1;}
  body.sample-ui #app #desktopConfirmationSlot #confirmWholeReport {
    grid-column:2;grid-row:1/3;width:auto;min-height:30px;margin:0;
    padding:4px 9px;border:1px solid #0c64e0!important;border-radius:5px;
    background:#ffffff!important;color:#0c64e0!important;
    font-size:12px;font-weight:500;line-height:1.5;white-space:nowrap;
  }
  body.sample-ui #app #desktopConfirmationSlot #confirmWholeReport:hover:not(:disabled) {
    border-color:#084fad!important;background:#ffffff!important;color:#084fad!important;
  }
  body.sample-ui #app #desktopConfirmationSlot #confirmWholeReport:disabled {
    background:#f3f5f7!important;border-color:#bfc5ce!important;color:#7c8593!important;
  }
  body.sample-ui #app .workspace-body.reference-open>#referencePane {
    position:static;inset:auto;z-index:auto;width:100%;height:auto;
    min-width:0;min-height:0;border:0;border-left:1px solid #cdd4df;
  }
}
@media(min-width:761px) and (max-width:1100px) {
  /* Keep all four tabs in their row, connected to the line beneath them. */
  body.sample-ui #app #desktopTabActions {order:-1;flex-basis:100%;justify-content:flex-end;padding-bottom:5px;}
}
@media(max-width:760px) {
  body.sample-ui #app #reportMeta [data-badge-group=kind] {
    width:calc(6em + 16px);min-width:calc(6em + 16px);
  }
  body.sample-ui #app #reportMeta [data-badge-group=workflow] {
    width:calc(6em + 14px);min-width:calc(6em + 14px);
  }
  body.sample-ui #app .edit-main .section-heading-with-reference {gap:8px;}
  body.sample-ui #app .edit-main .context-reference-button {min-height:44px;padding:8px 10px;}
  body.sample-ui #app #referencePane .reference-section-tabs button[data-reference-stage] {
    min-height:44px;padding:8px 10px;
  }
  body.sample-ui #app #confirmationBar {
    justify-content:center;gap:4px 6px;
    background:#fff0f0;border-top-color:#efcccc;
  }
  body.sample-ui #app #confirmationBar[data-confirmation-state=confirmed] {
    background:#e8f0ff;border-top-color:#c6d7ee;
  }
  body.sample-ui #app #confirmationBar .confirmation-status-label {
    display:inline!important;font-size:11px;color:var(--sample-muted);line-height:1.5;
  }
  body.sample-ui #app #confirmationBar .confirmation-status-value {
    display:inline!important;font-size:12px;font-weight:500;color:#a33d3d;line-height:1.5;
  }
  body.sample-ui #app #confirmationBar[data-confirmation-state=confirmed] .confirmation-status-value {color:#0c64e0;}
  body.sample-ui #app #confirmationBar .confirmation-status-separator {display:inline!important;color:var(--sample-muted);}
  body.sample-ui #app #confirmationBar .confirmation-time {font-size:11px;line-height:1.5;white-space:nowrap;}
  body.sample-ui #app #confirmationBar #confirmWholeReport {
    flex:none;width:auto;min-height:48px;margin:0 0 0 2px;padding:9px 12px;
    font-size:12px;line-height:1.5;
  }
}

/* workflow-clarity-20261014: distinguish actions from information and keep
   update guidance beside the report without adding a second card action. */
body.sample-ui #sampleDialog #dialogClose {
  display:inline-flex;align-items:center;justify-content:center;
  box-sizing:border-box;flex:none;width:34px;height:34px;min-width:34px;
  min-height:34px;margin:0;padding:0;line-height:1;
}
body.sample-ui #sampleDialog #dialogClose .dialog-close-icon {
  display:block;flex:none;width:20px;height:20px;
}
body.sample-ui #sampleDialog button.choice[data-new="事故"] {
  background:#fff0ed;border-color:#f2d1cc;color:#a54137;
}
body.sample-ui #sampleDialog button.choice[data-new="ヒヤリハット"] {
  background:#edf5ff;border-color:#d4e4f7;color:#376495;
}
body.sample-ui #sampleDialog button.choice[data-new="事故"]:hover {
  background:#ffe7e2;border-color:#dba29a;
}
body.sample-ui #sampleDialog button.choice[data-new="ヒヤリハット"]:hover {
  background:#e4efff;border-color:#9ebde0;
}

body.sample-ui #app #desktopReportsRail>h2 {
  margin:4px 0 16px;padding:4px 0;border:0;border-radius:0;
  background:transparent!important;color:var(--sample-ink);
  font-size:18px;font-weight:600;line-height:1.5;text-align:center;
}
body.sample-ui #app #desktopReportsRail .rail-card:is(.active,:hover) {
  border:2px solid #6f9ee9!important;padding:14px 13px;box-shadow:none!important;
}

/* Keep the close control reachable while this column scrolls. Equal side
   tracks keep the title centered independently of the close button. */
body.sample-ui #app #desktopReportsRail .reports-rail-heading {
  position:sticky;top:-12px;z-index:2;display:grid;
  grid-template-columns:32px minmax(0,1fr) 32px;align-items:center;
  margin:-12px -12px 12px;padding:12px;background:#e9eef3;
}
body.sample-ui #app #desktopReportsRail .reports-rail-heading>h2 {
  grid-column:2;margin:0;padding:4px 0;border:0;border-radius:0;
  background:transparent!important;color:var(--sample-ink);
  font-size:18px;font-weight:600;line-height:1.5;text-align:center;
}
body.sample-ui #app #closeReportsRail {
  grid-column:3;display:inline-flex;align-items:center;justify-content:center;
  box-sizing:border-box;width:32px;height:32px;min-width:32px;min-height:32px;
  margin:0;padding:0;border:0;border-radius:5px;background:transparent;
  color:#7b7f86;box-shadow:none;cursor:pointer;
}
body.sample-ui #app #closeReportsRail svg {display:block;width:20px;height:20px;flex:none;}
body.sample-ui #app #closeReportsRail:hover {background:#d6e2f4;}
body.sample-ui #app #closeReportsRail:focus-visible {outline:2px solid #0c64e0;outline-offset:2px;}

/* The card shell preserves one report-opening control in list and rail. */
body.sample-ui #app .report-card-shell {
  position:relative;min-width:0;margin:0 0 11px;
}
body.sample-ui #app .report-card-shell>.card-open-control {margin-bottom:0;}


@media(min-width:761px) {
  body.sample-ui #app .list-counts {align-items:stretch;gap:12px;}
  body.sample-ui #app .list-counts>.count-box {
    box-sizing:border-box;flex:0 0 auto;min-height:64px;cursor:default;
    border:1px solid var(--sample-line);background:#ffffff;box-shadow:none;
  }
  body.sample-ui #app #desktopSearchButton,
  body.sample-ui #app #desktopSearchButton[aria-expanded=true] {
    background:#ffffff;border-color:var(--sample-line);
  }
  body.sample-ui #app #desktopSearchButton[aria-expanded=true],
  body.sample-ui #app #desktopSearchButton.has-filters {border-color:#a1b9da;}
}
@media(min-width:1280px) {
  body.sample-ui #app #desktopReportsRail {flex-basis:270px;width:270px;}
}
@media(max-width:760px) {
  body.sample-ui #sampleDialog #dialogClose {width:44px;height:44px;min-width:44px;min-height:44px;}
  body.sample-ui #sampleDialog button.choice[data-new] {min-height:48px;}
}

/* report-navigation-layout-20261014: the report list is a sibling column
   of the complete report, so it never appears inside a report tab. */
body.sample-ui #app .grand-nav button:not(#trainingSettingsButton) {color:#262c38;}
body.sample-ui #app .grand-nav .portal-button {color:#262c38;}
body.sample-ui #app .grand-nav .nav-icon {color:inherit;}

@media(min-width:761px) {
  body.sample-ui #app .main-surface:has(>#desktopReportsRail:not([hidden])) {
    display:grid;grid-template-columns:240px minmax(0,1fr);
    grid-template-rows:minmax(0,1fr);align-items:stretch;
    min-width:0;min-height:0;overflow:hidden;
  }
  body.sample-ui #app .main-surface>#desktopReportsRail {
    grid-column:1;grid-row:1;box-sizing:border-box;
    height:100%;min-width:0;min-height:0;overflow:auto;
    overscroll-behavior-y:contain;scrollbar-width:thin;
    scrollbar-color:#bec6d2 transparent;
  }
  body.sample-ui #app .main-surface:has(>#desktopReportsRail:not([hidden]))>#casePage.workspace {
    grid-column:2;grid-row:1;width:auto;max-width:none;height:100%;
    min-width:0;min-height:0;overflow:hidden;
  }
  body.sample-ui #app .list-heading {align-items:center;gap:12px 20px;}
  body.sample-ui #app .list-heading>h1 {flex:1 1 auto;min-width:0;}
  body.sample-ui #app .list-heading>.desktop-list-actions {
    display:flex;align-items:center;flex:0 0 auto;gap:10px;margin-left:auto;
  }
  body.sample-ui #app .list-heading>.desktop-list-actions>button {
    box-sizing:border-box;height:44px;min-height:44px;padding:9px 14px;
    align-items:center;justify-content:center;
  }
}
@media(min-width:1280px) {
  body.sample-ui #app .main-surface:has(>#desktopReportsRail:not([hidden])) {
    grid-template-columns:270px minmax(0,1fr);
  }
}
@media(min-width:761px) and (max-width:1000px) {
  body.sample-ui #app .main-surface:has(>#desktopReportsRail:not([hidden])) {
    grid-template-columns:210px minmax(0,1fr);
  }
}
@media(max-width:760px) {
  body.sample-ui #app .list-heading>.desktop-list-actions {display:none;}
  body.sample-ui #app #mobileAppMenuButton[data-mobile-action=back] {
    align-items:center;justify-content:center;gap:6px;
    background:#ffffff;color:var(--sample-ink);
  }
  body.sample-ui #app #mobileAppMenuButton[data-mobile-action=back] svg {
    display:block;flex:none;width:18px;height:18px;
  }
}

/* save-status-visibility-20261014: the active editor heading and its save
   feedback stay together without adding a card or replacing form controls. */
body.sample-ui #app #editorSaveHeading.editor-save-heading {
  position:sticky;top:0;z-index:20;display:flex;align-items:center;
  flex-wrap:wrap;gap:4px 14px;box-sizing:border-box;
  width:100%;max-width:var(--report-body-width);min-width:0;
  margin:0 0 12px;padding:6px 0;border:0;border-radius:0;
  background:var(--sample-bg);color:#58616e;box-shadow:none;
  font-size:13px;font-weight:400;line-height:1.5;
}
body.sample-ui #app #editorSaveHeading[hidden],
body.sample-ui #app #editorSaveStatus[hidden],
body.sample-ui #app .save-status-origin[hidden] {display:none!important;}
body.sample-ui #app #editorSaveHeading .editor-save-title {
  flex:0 1 auto;min-width:0;max-width:100%;margin:0!important;padding:0!important;
  border:0!important;border-radius:0!important;background:transparent!important;
  color:var(--sample-ink)!important;font-size:19px!important;font-weight:600!important;
  line-height:1.5!important;overflow-wrap:anywhere;
}
body.sample-ui #app #editorSaveStatus.edit-save-status {
  display:flex;align-items:baseline;flex:0 1 auto;flex-wrap:wrap;
  gap:2px 8px;min-width:0;max-width:100%;margin:0;padding:0;
  color:#58616e;font-size:13px;font-weight:400;line-height:1.5;
}
body.sample-ui #app #editorSaveStatus .save-status-text,
body.sample-ui #app #editorSaveStatus .save-status-attachment {
  min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere;
  font-size:inherit;line-height:inherit;
}
body.sample-ui #app #editorSaveStatus[data-save-state=saving] {color:#58616e;}
body.sample-ui #app #editorSaveStatus[data-save-state=saved] {color:#0c64e0;}
body.sample-ui #app #editorSaveStatus:is([data-save-state=unsaved],[data-save-state=error]) {color:#ff0000;}
body.sample-ui #app #editorSaveStatus .save-status-attachment {color:#ff0000;}
body.sample-ui #app #editorSaveStatus .save-status-attachment[hidden] {display:none!important;}
body.sample-ui #app:has(#editorSaveHeading:not([hidden])) :is(#reportSaveStatus,#draftIndicator) {display:none!important;}
body.sample-ui #app .edit-main :is(.top,.edit-heading)[data-save-heading-source=true] {padding-top:0;}
/* Empty title-only wrappers do not leave a second heading's blank space. */
body.sample-ui #app .edit-main .edit-heading[data-save-heading-source=true]:not(:has(.edit-sub,.edit-client,.badges,.reporter,button,input,select,textarea)) {display:none;}
@media(max-width:760px) {
  body.sample-ui #app #editorSaveHeading.editor-save-heading {
    top:var(--editor-save-top,90px);flex-direction:column;align-items:flex-start;
    gap:2px;margin-bottom:10px;padding:4px 0;font-size:13px;
  }
  body.sample-ui #app #editorSaveHeading .editor-save-title {font-size:17px!important;}
}

/* approved-status-display-20261015: the identity, workflow and personal
   receipt use one common band. Existing application colors are retained;
   only the explicitly approved progress tokens are changed below. */
body.sample-ui #app #reportMeta {
  container-type:inline-size;container-name:report-status-profile;
}
body.sample-ui #app .report-status-summary {
  box-sizing:border-box;min-width:0;max-width:100%;color:var(--sample-ink);
}
body.sample-ui #app .report-status-summary #desktopConfirmationSlot {
  display:contents!important;
}
body.sample-ui #app .report-status-summary #desktopConfirmationSlot #confirmationBar.current-confirmation-summary {
  position:static;inset:auto;z-index:auto;box-sizing:border-box;
  flex-direction:row!important;flex-wrap:nowrap;justify-content:flex-start;
  width:auto;min-width:0;max-width:none;min-height:0;margin:0;padding:0;
  border:0;border-radius:0;background:transparent;color:var(--sample-ink);
}
body.sample-ui #app .report-status-summary #desktopConfirmationSlot #confirmationBar.current-confirmation-summary[hidden] {
  display:none!important;
}
body.sample-ui #app .report-status-summary .status-summary-label {
  min-width:0;color:var(--sample-ink);font-size:12px;font-weight:400;
  line-height:1.5;white-space:nowrap;
}
body.sample-ui #app .report-status-summary .mobile-status-label {display:none;}
body.sample-ui #app .state-pill.is-unconfirmed {color:#ff0000!important;}
body.sample-ui #app .report-status-summary .confirmation-personal-group {
  display:flex;align-items:center;min-width:0;gap:8px;
}
body.sample-ui #app .report-status-summary #desktopConfirmationSlot #confirmationBar>.confirmation-personal-group,
body.sample-ui #app .report-status-summary #desktopConfirmationSlot #confirmationBar>.confirmation-action-slot {
  display:flex!important;
}
body.sample-ui #app .report-status-summary .confirmation-action-slot {
  display:flex;align-items:center;justify-content:flex-start;min-width:0;
  min-height:32px;color:#0c64e0;
}
body.sample-ui #app .report-status-summary #desktopConfirmationSlot .confirmation-time {
  display:inline;grid-column:auto;grid-row:auto;margin:0;
  color:var(--sample-muted);font-size:12px;font-weight:400;
  line-height:1.5;white-space:nowrap;
}
body.sample-ui #app .report-status-summary .confirmation-check {
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  box-sizing:border-box;min-width:0;min-height:32px;margin:0;padding:0 3px;
  border:0;background:transparent;color:#0c64e0;font-size:13px;
  font-weight:500;line-height:1.5;white-space:nowrap;cursor:pointer;
}
body.sample-ui #app .report-status-summary #desktopConfirmationSlot input#confirmWholeReport {
  display:block;flex:none;box-sizing:border-box;width:18px;height:18px;
  min-width:18px;min-height:18px;margin:0;padding:0;border-radius:3px;
  grid-column:auto;grid-row:auto;background:#ffffff!important;color:#0c64e0!important;
  accent-color:#0c64e0;cursor:pointer;
}
body.sample-ui #app .report-status-summary #desktopConfirmationSlot input#confirmWholeReport:disabled {
  cursor:default;opacity:.6;
}
body.sample-ui #app .report-status-summary .confirmation-check:has(input:disabled) {
  cursor:default;
}
body.sample-ui #app .report-status-summary .confirmation-check:focus-within {
  outline:3px solid #8aabff;outline-offset:2px;border-radius:4px;
}
body.sample-ui #app[data-confirmation-visible=true] {padding-bottom:0;}
body.sample-ui #app .report-progress-region {
  box-sizing:border-box;width:100%;max-width:var(--report-body-width);
  min-width:0;margin:0 auto 0 0;padding:0;border:0;background:transparent;
}

@media(min-width:761px) {
  body.sample-ui #app #reportMeta {
    display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;
  }
  body.sample-ui #app #reportMeta .case-profile-main {
    flex:1 1 350px;min-width:0;
  }
  body.sample-ui #app #reportMeta .case-heading {align-items:center;}
  body.sample-ui #app #reportMeta .case-heading>.header-progress {display:none;}
  body.sample-ui #app .report-status-summary {
    display:flex;flex-direction:column;justify-content:center;flex:0 1 auto;
    align-self:stretch;gap:6px;padding:0 0 0 20px;
    border:0;border-left:1px solid var(--sample-line);background:transparent;
  }
  body.sample-ui #app #reportMeta .report-status-summary .report-progress-summary,
  body.sample-ui #app .report-status-summary .confirmation-personal-group {
    display:grid;grid-template-columns:132px 84px;align-items:center;
    gap:8px;min-height:30px;margin:0;
  }
  body.sample-ui #app .report-status-summary #desktopConfirmationSlot #confirmationBar>.confirmation-personal-group {
    display:grid!important;
  }
  body.sample-ui #app #reportMeta .report-status-summary .report-progress-summary {
    font-size:12px;line-height:1.5;
  }
  body.sample-ui #app .report-status-summary #desktopConfirmationSlot #confirmationBar.current-confirmation-summary {
    display:flex;align-items:center;gap:12px;
  }
  body.sample-ui #app #reportMeta .report-status-summary [data-badge-group]:is([data-badge-group=workflow],[data-badge-group=personal]) {
    box-sizing:border-box;width:84px;min-width:84px;font-size:11px!important;
  }
  body.sample-ui #app .parent-tabs {
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    box-sizing:border-box;align-items:end;gap:6px;flex-wrap:nowrap;
    width:100%;max-width:calc(var(--report-body-width) + 2 * var(--report-inset));
    margin:0;padding:8px var(--report-inset) 0;
  }
  body.sample-ui #app .parent-tabs>button[role=tab] {
    width:100%;min-width:0;max-width:100%;flex:auto;
    padding-inline:8px;white-space:normal;overflow-wrap:anywhere;
  }
  body.sample-ui #app .work-navigation>#desktopTabActions {
    display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;
    gap:12px;box-sizing:border-box;max-width:calc(var(--report-body-width) + 2 * var(--report-inset));
    width:100%;margin:0;padding:0 var(--report-inset) 5px;
  }
  body.sample-ui #app .parent-tabs>#desktopTabActions {
    grid-column:1/-1;order:-1;flex-basis:auto;margin:0;padding-bottom:5px;
  }
  body.sample-ui #app .progress-stepper-display {
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    box-sizing:border-box;width:100%;max-width:var(--report-body-width);
    min-width:0;margin:0 0 16px;padding:17px 0 10px;
  }
  body.sample-ui #app .progress-stepper-display>.progress-meter-label {display:none;}
  body.sample-ui #app .progress-desktop-stepper {
    display:grid;grid-template-columns:none;grid-auto-flow:column;
    grid-auto-columns:minmax(0,1fr);align-items:start;gap:8px;
    flex:none;width:100%;min-width:0;margin:0;padding:0;overflow:visible;
  }
  body.sample-ui #app .progress-desktop-stepper .progress-step {
    position:relative;display:flex;flex-direction:column;align-items:center;
    justify-content:flex-start;box-sizing:border-box;min-width:0;min-height:0;
    gap:5px;margin:0;padding:0 3px;border:0;border-radius:0;
    background:transparent;color:#0c64e0;font-size:12px;font-weight:400;
    line-height:1.4;text-align:center;white-space:normal;overflow-wrap:anywhere;
  }
  body.sample-ui #app .progress-desktop-stepper .progress-step::before {
    content:"";position:absolute;left:calc(-50% - 4px);right:50%;top:14px;
    height:2px;background:#dfe3ea;pointer-events:none;
  }
  body.sample-ui #app .progress-desktop-stepper .progress-step:first-child::before {content:none;}
  body.sample-ui #app .progress-desktop-stepper .progress-step .step-marker {
    position:relative;z-index:1;display:inline-flex;align-items:center;
    justify-content:center;gap:5px;flex:none;box-sizing:border-box;
    width:97px;max-width:100%;min-width:0;height:30px;min-height:30px;
    margin:0;padding:3px 5px;border:1.5px solid transparent;border-radius:6px;
    background:#cececf;color:#536274;font-size:12px;font-weight:500;line-height:1.3;
    white-space:nowrap;
  }
  body.sample-ui #app .progress-desktop-stepper .progress-step.done .step-marker {
    background:#e8f0ff;border-color:transparent;color:#0c64e0;
  }
  body.sample-ui #app .progress-desktop-stepper .progress-step.current .step-marker {
    background:#ffffff;border:1.5px solid #f5a49d;color:#0c64e0;
  }
  body.sample-ui #app .progress-desktop-stepper .step-marker svg {
    display:block;flex:none;width:14px;height:14px;stroke:currentColor;
  }
  body.sample-ui #app .progress-desktop-stepper .progress-step>.progress-stepper-label {
    min-width:0;max-width:100%;color:#0c64e0;font-size:12px;font-weight:500;line-height:1.5;
  }
  body.sample-ui #app .progress-desktop-stepper .progress-step>.progress-stepper-state {display:none;}
}

@container report-status-profile (max-width:640px) {
  body.sample-ui #app .case-profile-main {flex-basis:100%;}
  body.sample-ui #app .report-status-summary {
    flex-basis:100%;align-self:auto;padding:10px 0 0;
    border-left:0;border-top:1px solid var(--sample-line);
  }
}

@media(max-width:760px) {
  body.sample-ui #app #reportMeta {
    display:block;padding-bottom:0;background:#ffffff!important;
  }
  body.sample-ui #app #reportMeta .case-profile-main {padding-bottom:9px;}
  body.sample-ui #app #caseTrainingBadge {
    display:inline-flex!important;align-items:center;justify-content:center;
    flex:none;min-height:24px;margin:0;padding:2px 7px;font-size:11px;line-height:1.5;
  }
  body.sample-ui #app #reportMeta .case-heading>.header-progress {display:none;}
  body.sample-ui #app .report-status-summary {
    display:flex;align-items:center;flex-wrap:nowrap;gap:0;
    width:calc(100% + 28px);max-width:none;margin:0 -14px;
    padding:0 10px;border:0;border-top:1px solid var(--sample-line);
    background:white;min-height:46px;
  }
  body.sample-ui #app #reportMeta .report-status-summary .report-progress-summary {
    position:relative;display:flex;align-items:center;justify-content:center;
    flex:0 1 auto;gap:3px;min-width:0;margin:0 20px 0 0;padding:0;
    font-size:11px;line-height:1.5;
  }
  /* A single short rule. Its 20px gap provides the same 10px clear space
     on either side; the personal state and its action have no divider. */
  body.sample-ui #app #reportMeta .report-status-summary .report-progress-summary::after {
    content:"";position:absolute;right:-10px;top:50%;width:1px;height:18px;
    transform:translate(50%,-50%);background:var(--sample-line);pointer-events:none;
  }
  body.sample-ui #app .report-status-summary #desktopConfirmationSlot #confirmationBar.current-confirmation-summary {
    display:flex;align-items:center;flex:1 1 auto;gap:7px;min-width:0;
  }
  body.sample-ui #app .report-status-summary .confirmation-personal-group {
    justify-content:center;flex:0 1 auto;gap:3px;min-width:0;
  }
  body.sample-ui #app .report-status-summary .status-summary-label {
    font-size:11px;line-height:1.5;
  }
  body.sample-ui #app .report-status-summary .desktop-status-label {display:none;}
  body.sample-ui #app .report-status-summary .mobile-status-label {display:inline;}
  body.sample-ui #app #reportMeta .report-status-summary [data-badge-group]:is([data-badge-group=workflow],[data-badge-group=personal]) {
    width:60px;min-width:60px;max-width:60px;padding-inline:3px!important;
    font-size:11px!important;line-height:1.8!important;
  }
  body.sample-ui #app #reportMeta .report-status-summary .report-progress-summary [data-badge-group=workflow] {
    width:fit-content;min-width:60px;max-width:80px;
  }
  body.sample-ui #app #reportMeta .report-status-summary .confirmation-personal-group [data-badge-group=personal] {padding-inline:1px!important;}
  body.sample-ui #app .report-status-summary .confirmation-action-slot {
    justify-content:center;flex:1 1 auto;min-width:0;min-height:44px;
  }
  body.sample-ui #app .report-status-summary .confirmation-check {
    width:100%;min-height:44px;padding:0;font-size:12px;
  }
  body.sample-ui #app .report-status-summary #desktopConfirmationSlot .confirmation-time {
    font-size:11px;line-height:1.5;
  }
  body.sample-ui #app .progress-stepper-display {display:none;}
  body.sample-ui #app .report-progress-region {display:none;}
  body.sample-ui #app .mobile-app-heading {
    box-sizing:border-box;height:var(--mobile-app-heading-height,36px);
    min-height:0;max-height:var(--mobile-app-heading-height,36px);
    margin-bottom:9px;overflow:hidden;opacity:1;transform:translateY(0);
  }
  body.sample-ui #app.mobile-title-motion .mobile-app-heading {
    transition:height 340ms cubic-bezier(.22,.61,.36,1),max-height 340ms cubic-bezier(.22,.61,.36,1),margin-bottom 340ms cubic-bezier(.22,.61,.36,1),opacity 320ms ease,transform 340ms cubic-bezier(.22,.61,.36,1);
  }
  body.sample-ui #app.mobile-detail-title-hidden .mobile-app-heading {
    height:0;max-height:0;margin-bottom:0;opacity:0;transform:translateY(-12px);
    pointer-events:none;
  }
  body.sample-ui #app #confirmationBar.current-confirmation-summary {
    position:static;inset:auto;border:0;background:transparent;
  }
  body.sample-ui #app[data-confirmation-visible=true] {padding-bottom:0;}
}
@media(max-width:360px) {
  body.sample-ui #app .report-status-summary {
    width:calc(100% + 24px);margin-inline:-12px;padding-inline:9px;
  }
  body.sample-ui #app #reportMeta .report-status-summary .report-progress-summary,
  body.sample-ui #app .report-status-summary .confirmation-personal-group {
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    flex:1 1 0;gap:2px;padding-block:5px;
  }
  body.sample-ui #app .report-status-summary #desktopConfirmationSlot #confirmationBar.current-confirmation-summary {
    flex:2.3 1 0;gap:4px;
  }
  body.sample-ui #app #reportMeta .report-status-summary .report-progress-summary [data-badge-group=workflow] {
    min-width:60px;max-width:100%;
  }
  body.sample-ui #app .report-status-summary .confirmation-action-slot {flex:1.3 1 0;}
  body.sample-ui #app .report-status-summary .status-summary-label {font-size:11px;}
  body.sample-ui #app .report-status-summary #desktopConfirmationSlot .confirmation-time {font-size:11px;}
}
@media(prefers-reduced-motion:reduce) {
  body.sample-ui #app.mobile-title-motion .mobile-app-heading {transition:none;}
}
@media(min-width:761px) and (max-width:1279px) {
  /* Narrow report-list cards keep the full caption and badge inside the
     existing card padding; normal list cards and selected colors stay intact. */
  body.sample-ui #app #desktopReportsRail .rail-card .case-status .status-row {
    grid-template-columns:minmax(0,1fr) minmax(0,84px);gap:6px;
    min-width:0;max-width:100%;
  }
  body.sample-ui #app #desktopReportsRail .rail-card .case-status .status-row>.status-caption {
    min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere;
    font-size:11px;line-height:1.4;
  }
  body.sample-ui #app #desktopReportsRail .rail-card .case-status .status-row>.state-pill {
    box-sizing:border-box;min-width:0;width:84px;max-width:100%;
  }
}

/* morning-layout-20261015: nearby report states, low-frequency report
   actions, and a desktop list with its existing summary kept in view. */
body.sample-ui #app #desktopReportMoreButton,
body.sample-ui #app #desktopReportMoreMenu {display:none;}
body.sample-ui #app #myUnconfirmedSummaryButton {
  font:inherit;text-align:left;color:var(--sample-ink);cursor:pointer;
  appearance:none;box-shadow:none;
}
body.sample-ui #app .list-counts>#myUnconfirmedSummaryButton {cursor:pointer;}
body.sample-ui #app #myUnconfirmedSummaryButton:hover {
  border-color:#a1b9da;background:#ffffff;
}
body.sample-ui #app #myUnconfirmedSummaryButton[aria-pressed=true] {
  border-color:var(--selection-line);background:#ffffff;box-shadow:none;
}
body.sample-ui #app #clearSummaryUnconfirmed {
  display:inline-flex;align-items:center;justify-content:center;align-self:center;
  box-sizing:border-box;min-height:32px;margin:0;padding:4px 2px;
  border:0;border-radius:4px;background:transparent;box-shadow:none;
  color:#0c64e0;font:inherit;font-size:12px;font-weight:400;line-height:1.5;
  white-space:normal;cursor:pointer;
}
body.sample-ui #app #clearSummaryUnconfirmed:hover {text-decoration:underline;}
body.sample-ui #app #clearSummaryUnconfirmed[hidden] {display:none!important;}
body.sample-ui #app #desktopReportsRail .rail-card .case-arrow {display:none!important;}

@media(min-width:761px) {
  /* Intrinsic identity width brings the states beside the person rather
     than using the unused width of a large desktop display. */
  body.sample-ui #app #reportMeta {
    position:relative;align-items:center;flex-wrap:nowrap;gap:12px 24px;
  }
  body.sample-ui #app #reportMeta .case-profile-main {
    flex:0 1 auto;width:auto;min-width:0;max-width:100%;
  }
  body.sample-ui #app #reportMeta .report-status-summary {
    flex:0 0 auto;padding-left:24px;
  }
  body.sample-ui #app #desktopReportMoreButton {
    display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
    align-self:center;box-sizing:border-box;min-width:44px;min-height:32px;
    margin:0 0 0 auto;padding:4px 3px;border:0;border-radius:4px;
    background:transparent;box-shadow:none;color:var(--sample-muted);
    font:inherit;font-size:12px;font-weight:400;line-height:1.5;white-space:nowrap;
    cursor:pointer;
  }
  body.sample-ui #app #desktopReportMoreButton:hover {color:var(--sample-ink);}
  body.sample-ui #app #desktopReportMoreButton[hidden] {display:none!important;}
  body.sample-ui #app #desktopReportMoreMenu {
    position:absolute;z-index:60;top:var(--report-more-menu-top,calc(50% + 16px));
    right:var(--report-inset);display:flex;flex-direction:column;gap:0;
    box-sizing:border-box;width:190px;max-width:calc(100% - 2 * var(--report-inset));
    margin:0;padding:4px;border:1px solid var(--sample-line);border-radius:7px;
    background:#ffffff;box-shadow:none;color:var(--sample-ink);
  }
  body.sample-ui #app #desktopReportMoreMenu[hidden] {display:none!important;}
  body.sample-ui #app #desktopReportMoreMenu>button {
    display:flex;align-items:center;justify-content:flex-start;gap:7px;
    box-sizing:border-box;width:100%;min-height:36px;margin:0;padding:7px 9px;
    border:0;border-radius:3px;background:transparent;box-shadow:none;
    color:var(--sample-ink);font:inherit;font-size:12px;font-weight:400;
    line-height:1.5;text-align:left;white-space:normal;cursor:pointer;
  }
  body.sample-ui #app #desktopReportMoreMenu>button:hover {background:var(--sample-bg);}
  body.sample-ui #app #desktopReportMoreMenu>button svg {width:16px;height:16px;flex:none;}
  body.sample-ui #app #desktopReportMoreMenu #reportMoreDelete {
    margin-top:3px;padding-top:9px;border-top:1px solid var(--sample-line);
    border-radius:0;color:#a54137;
  }
  body.sample-ui #app #desktopReportMoreMenu>button[hidden] {display:none!important;}
  body.sample-ui #app #desktopTabActions {display:none!important;}

  /* The full-width strip owns the connecting rule; the four tabs keep
     their established body width and the selected tab crosses that rule. */
  body.sample-ui #app .work-navigation {background:#ffffff;}
  body.sample-ui #app .main-tabs-strip {
    box-sizing:border-box;flex:none;width:100%;min-width:0;margin:0;padding:0;
    border:0;border-bottom:var(--connected-horizontal-width) solid var(--connected-horizontal-color);
    background:#ffffff;
  }
  body.sample-ui #app .main-tabs-strip>.parent-tabs {border-bottom:0;}

  body.sample-ui #app .list-heading>.desktop-list-actions>button {
    display:inline-flex;align-items:center;justify-content:center;gap:7px;
    box-sizing:border-box;height:44px;min-height:44px;max-height:44px;
    margin:0;padding:9px 14px;border-width:1px;border-style:solid;line-height:1.5;
  }
  body.sample-ui #app #listPage {
    display:flex;flex-direction:column;min-height:0;height:100%;overflow:hidden;
  }
  body.sample-ui #app #listPage[hidden] {display:none!important;}
  body.sample-ui #app #listPage .list-content {
    display:flex;flex-direction:column;flex:1 1 auto;min-height:0;
  }
  body.sample-ui #app .list-fixed-header {flex:none;min-width:0;background:var(--sample-bg);}
  body.sample-ui #app #listCardsScroller {
    flex:1 1 auto;min-width:0;min-height:0;overflow-x:hidden;overflow-y:auto;
    overscroll-behavior-y:contain;scrollbar-width:thin;scrollbar-color:#bec6d2 transparent;
    padding:2px 0 0;overflow-anchor:none;
  }
  body.sample-ui #app #listCardsScroller::-webkit-scrollbar {width:6px;height:6px;}
  body.sample-ui #app #listCardsScroller::-webkit-scrollbar-track {background:transparent;}
  body.sample-ui #app #listCardsScroller::-webkit-scrollbar-thumb {background:#bec6d2;border-radius:8px;}
  body.sample-ui #app #listCardsScroller::-webkit-scrollbar-thumb:hover {background:#a6b0bf;}

  /* Each rail card retains its full width while the outer grid track
     changes width, so its text never reflows during the short transition. */
  body.sample-ui #app .main-surface[data-rail-state]:has(>#desktopReportsRail) {
    --reports-rail-width:240px;
    --reports-rail-track:0px;
    display:grid;grid-template-columns:var(--reports-rail-track) minmax(0,1fr);
    grid-template-rows:minmax(0,1fr);align-items:stretch;
    transition:grid-template-columns 250ms ease;
  }
  body.sample-ui #app .main-surface:is([data-rail-state=opening],[data-rail-state=open]):has(>#desktopReportsRail) {
    --reports-rail-track:var(--reports-rail-width);
  }
  body.sample-ui #app .main-surface[data-rail-state]>#desktopReportsRail {
    grid-column:1;grid-row:1;box-sizing:border-box;width:100%;height:100%;
    min-width:0;min-height:0;margin:0;padding:0;border:0;overflow:hidden;
    opacity:0;transition:opacity 250ms ease;
  }
  body.sample-ui #app .main-surface:is([data-rail-state=opening],[data-rail-state=open])>#desktopReportsRail {opacity:1;}
  body.sample-ui #app .main-surface:is([data-rail-state=closing],[data-rail-state=closed])>#desktopReportsRail {pointer-events:none;}
  body.sample-ui #app .main-surface[data-rail-state]:has(>#desktopReportsRail)>#casePage.workspace {
    grid-column:2;grid-row:1;width:auto;max-width:none;height:100%;min-width:0;min-height:0;
  }
  body.sample-ui #app #desktopReportsRail .reports-rail-inner {
    box-sizing:border-box;width:var(--reports-rail-width,240px);
    min-width:var(--reports-rail-width,240px);height:100%;min-height:0;
    margin:0;padding:12px;border:0;border-right:1px solid var(--sample-line);
    overflow:auto;overscroll-behavior-y:contain;
    scrollbar-width:thin;scrollbar-color:#bec6d2 transparent;
  }
}
@media(min-width:761px) and (max-width:1000px) {
  body.sample-ui #app .main-surface[data-rail-state]:has(>#desktopReportsRail) {--reports-rail-width:210px;}
}
@media(min-width:1280px) {
  body.sample-ui #app .main-surface[data-rail-state]:has(>#desktopReportsRail) {--reports-rail-width:270px;}
}
@container report-status-profile (max-width:640px) {
  body.sample-ui #app #reportMeta .case-profile-main {flex-basis:100%;}
  body.sample-ui #app #reportMeta .report-status-summary {padding-left:0;}
}
@media(max-width:760px) {
  /* These structural wrappers do not introduce a second phone scrollbar. */
  body.sample-ui #app .list-fixed-header,
  body.sample-ui #app #listCardsScroller {display:block;min-height:0;height:auto;overflow:visible;}
}
@media(prefers-reduced-motion:reduce) {
  body.sample-ui #app .main-surface[data-rail-state]:has(>#desktopReportsRail),
  body.sample-ui #app .main-surface[data-rail-state]>#desktopReportsRail {transition:none;}
}

/* A container cannot query its own size. Use the surrounding desktop
   workspace to wrap the complete identity above the two compact controls. */
@media(min-width:761px) {
  body.sample-ui #app #casePage.workspace {
    container-type:inline-size;container-name:report-workspace;
  }
  @container report-workspace (max-width:688px) {
    body.sample-ui #app #reportMeta {flex-wrap:wrap;}
    body.sample-ui #app #reportMeta .case-profile-main {
      flex:0 1 100%;width:100%;min-width:0;
    }
    body.sample-ui #app #reportMeta .report-status-summary {
      flex:0 1 auto;align-self:center;padding-left:0;
    }
  }
}

/* layout-alignment-20261015: the desktop header and its infrequent action
   share the report's reading width; the list scrollbar stays at the edge. */
body.sample-ui #app .report-meta-inner {display:contents;}

@media(min-width:761px) {
  body.sample-ui #app #reportMeta {display:block;z-index:40;}
  body.sample-ui #app #reportMeta .report-meta-inner {
    position:relative;display:flex;align-items:center;flex-wrap:nowrap;
    box-sizing:border-box;width:calc(100% - var(--report-reading-gutter,10px));max-width:var(--report-body-width);
    min-width:0;margin:0;padding:0;gap:12px 24px;
  }
  body.sample-ui #app #reportMeta .report-meta-inner .case-profile-main {
    flex:0 1 auto;width:auto;min-width:0;max-width:100%;
  }
  /* Both captions contribute to the same intrinsic grid column. The
     badge starts are aligned, without an arbitrary 132px label width. */
  body.sample-ui #app #reportMeta .report-status-summary {
    display:grid;grid-template-columns:max-content 84px max-content;
    grid-auto-rows:minmax(30px,auto);align-items:center;justify-content:start;
    flex:0 0 auto;gap:6px 8px;min-width:0;max-width:100%;
  }
  body.sample-ui #app #reportMeta .report-status-summary .report-progress-summary,
  body.sample-ui #app #reportMeta .report-status-summary #desktopConfirmationSlot #confirmationBar.current-confirmation-summary,
  body.sample-ui #app #reportMeta .report-status-summary #desktopConfirmationSlot #confirmationBar>.confirmation-personal-group {
    display:contents!important;
  }
  body.sample-ui #app #reportMeta .report-status-summary #desktopConfirmationSlot #confirmationBar.current-confirmation-summary[hidden] {
    display:none!important;
  }
  body.sample-ui #app #reportMeta .report-status-summary .report-progress-summary>.status-summary-label {
    grid-column:1;grid-row:1;
  }
  body.sample-ui #app #reportMeta .report-status-summary .report-progress-summary>[data-badge-group=workflow] {
    grid-column:2;grid-row:1;
  }
  body.sample-ui #app #reportMeta .report-status-summary .confirmation-personal-group>.status-summary-label {
    grid-column:1;grid-row:2;
  }
  body.sample-ui #app #reportMeta .report-status-summary .confirmation-personal-group>[data-badge-group=personal] {
    grid-column:2;grid-row:2;
  }
  body.sample-ui #app #reportMeta .report-status-summary .confirmation-action-slot {
    grid-column:3;grid-row:2;min-width:0;
  }
  body.sample-ui #app #reportMeta .report-meta-inner>#desktopReportMoreMenu {
    top:calc(100% + 4px);right:0;
  }

  body.sample-ui #app #listPage {padding:30px 0;}
  body.sample-ui #app #listPage .list-content {width:100%;max-width:none;min-width:0;}
  body.sample-ui #app #listPage .list-fixed-header,
  body.sample-ui #app #listPage .list-card-content {
    box-sizing:border-box;width:calc(100% - 68px);max-width:867px;
    min-width:0;margin:0 0 0 34px;padding:0;
  }
  body.sample-ui #app #listCardsScroller {width:100%;max-width:none;margin:0;padding:2px 0 0;}

  body.sample-ui #app .main-surface[data-rail-state]:has(>#desktopReportsRail) {
    transition:grid-template-columns 500ms ease;
  }
  body.sample-ui #app .main-surface[data-rail-state]>#desktopReportsRail {
    transition:opacity 500ms ease;
  }
  @container report-status-profile (max-width:640px) {
    body.sample-ui #app #reportMeta .report-meta-inner {flex-wrap:wrap;}
    body.sample-ui #app #reportMeta .report-meta-inner .case-profile-main {
      flex:0 1 100%;width:100%;min-width:0;
    }
    body.sample-ui #app #reportMeta .report-meta-inner .report-status-summary {
      flex:0 1 auto;align-self:center;padding-left:0;
    }
  }
}
@media(max-width:760px) {
  body.sample-ui #app #listPage .list-card-content {width:auto;max-width:none;margin:0;padding:0;}
}
@media(prefers-reduced-motion:reduce) {
  body.sample-ui #app .main-surface[data-rail-state]:has(>#desktopReportsRail),
  body.sample-ui #app .main-surface[data-rail-state]>#desktopReportsRail {transition:none;}
}

/* interaction-fixes-20261015: align the quiet report action with the first
   header row. In reduced-motion mode the list still fades gently, without
   an animated change in the report's position or card width. */
@media(min-width:761px) {
  body.sample-ui #app #desktopReportMoreButton {align-self:flex-start;}
}
@media(min-width:761px) and (prefers-reduced-motion:reduce) {
  body.sample-ui #app .main-surface[data-rail-state]:has(>#desktopReportsRail) {
    transition:none;
  }
  body.sample-ui #app .main-surface[data-rail-state]>#desktopReportsRail {
    /* This narrow override leaves the application's global reduced-motion
       rule intact for title slides and every other moving element. */
    transition:opacity 500ms ease!important;
  }
  /* Keep the reader in place until the closing fade has finished. The
     existing presentation timer then sets closed and releases this track. */
  body.sample-ui #app .main-surface[data-rail-state=closing]:has(>#desktopReportsRail) {
    --reports-rail-track:var(--reports-rail-width);
  }
}

/* rail-sync-20261015: the approved desktop list fades and changes the
   report's available width together, using the same half-second timing.
   This exception is limited to the list rail and its immediate grid. */
@media(min-width:761px) {
  body.sample-ui #app .main-surface[data-rail-state]:has(>#desktopReportsRail) {
    transition:grid-template-columns 500ms ease!important;
  }
  body.sample-ui #app .main-surface[data-rail-state]>#desktopReportsRail {
    transition:opacity 500ms ease!important;
  }
  body.sample-ui #app .main-surface[data-rail-state=closing]:has(>#desktopReportsRail) {
    --reports-rail-track:0px;
  }
}

/* autosave-hiyari-news-20261016: keep save feedback beside the subtabs;
   editor identity and guidance belong to the scrolling document. */
body.sample-ui #app #editorSubtabBand {
  display:flex;align-items:center;flex-wrap:wrap;flex:none;box-sizing:border-box;
  width:100%;max-width:calc(var(--report-body-width) + 2 * var(--report-inset));
  min-width:0;gap:8px 12px;margin:0;padding:10px var(--report-inset);
  background:var(--connected-tab-surface);
}
body.sample-ui #app #editorSubtabBand[hidden] {display:none!important;}
body.sample-ui #app #editorSubtabBand>#childTabs {
  flex:0 1 auto;align-self:auto;width:auto;max-width:100%;min-width:0;
  margin:0;padding:0;
}
body.sample-ui #app #editorSubtabBand>#childTabs[hidden] {display:none!important;}
body.sample-ui #app #editorSaveSlot {
  display:flex;align-items:center;justify-content:flex-end;flex:0 0 auto;
  min-width:0;max-width:100%;margin:0 0 0 auto;padding:0;gap:7px;
}
body.sample-ui #app #editorSaveSlot[hidden] {display:none!important;}
body.sample-ui #app #editorSaveStatus.edit-save-status {
  display:flex;align-items:center;justify-content:center;box-sizing:border-box;
  flex:0 1 166px;width:166px;min-height:30px;max-width:100%;gap:2px 5px;
  padding:4px 9px;margin:0;border:1px solid var(--sample-line);border-radius:6px;
  background:#edf1f5;color:#58616e;font-size:12px;font-weight:500;line-height:1.5;
}
body.sample-ui #app #editorSaveStatus[data-save-state=saved] {
  background:#e8f0ff;border-color:#e8f0ff;color:#0c64e0;
}
body.sample-ui #app #editorSaveStatus[data-save-state=error] {
  background:#fff0ed;border-color:#f5a49d;color:#b63c35;
}
body.sample-ui #app #editorSaveSlot :is(.editor-save-retry,.editor-save-backup) {
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  box-sizing:border-box;min-height:30px;margin:0;padding:4px 9px;
  border:1px solid #f5a49d;border-radius:6px;background:white;color:#b63c35;
  font-size:12px;font-weight:500;line-height:1.5;cursor:pointer;box-shadow:none;
}
body.sample-ui #app #editorSaveSlot :is(.editor-save-retry,.editor-save-backup):focus-visible {
  outline:2px solid #8aabff;outline-offset:2px;
}
body.sample-ui #app #editorSaveSlot :is(.editor-save-retry,.editor-save-backup)[hidden],
body.sample-ui #app .edit-main button[data-autosave-superseded][hidden] {display:none!important;}
body.sample-ui #app #editorSaveHeading.editor-save-heading {
  position:static;top:auto;z-index:auto;display:block;box-sizing:border-box;
  width:100%;max-width:var(--report-body-width);min-width:0;
  margin:0 0 12px;padding:0;border:0;background:transparent;box-shadow:none;
}
body.sample-ui #app #editorSaveHeading .editor-title-row {
  display:flex;align-items:center;flex-wrap:wrap;gap:5px 12px;min-width:0;
}
body.sample-ui #app #editorSaveHeading .assigned-editor-badge {
  display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;
  min-height:24px;max-width:100%;padding:3px 10px;border:0;border-radius:999px;
  background:#626f80;color:white;font-size:12px;font-weight:500;line-height:1.5;
  white-space:normal;overflow-wrap:anywhere;box-shadow:none;
}
body.sample-ui #app #editorSaveHeading .assigned-editor-badge[hidden] {display:none!important;}
body.sample-ui #app #editorSaveHeading .editor-save-intro {
  margin:4px 0 0;padding:0;color:var(--sample-muted);font-size:13px;line-height:1.65;
}
body.sample-ui #app #editorSaveHeading .editor-save-intro:empty {display:none;}
/* The old heading's transferred children are hidden, including their empty
   row. Do not retain its former padding as a second blank heading. */
body.sample-ui #app .edit-main .edit-heading[data-save-heading-source=true]:not(:has(.edit-sub:not([hidden]),.edit-client:not([hidden]),.badges:not([hidden]),.reporter:not([hidden]),button:not([hidden]),input:not([hidden]),select:not([hidden]),textarea:not([hidden]))) {display:none;}
@media(max-width:760px) {
  /* Phone destinations still use the existing report menu. Expose only the
     save feedback inside its otherwise hidden desktop navigation header. */
  body.sample-ui #app #casePage .work-navigation:has(#editorSaveSlot:not([hidden])) {
    display:block!important;position:sticky;top:var(--editor-save-top,100px);
    z-index:24;min-height:0;padding:0;margin:0;background:var(--sample-bg);
  }
  body.sample-ui #app #casePage .work-navigation:has(#editorSaveSlot:not([hidden]))>:not(#editorSubtabBand),
  body.sample-ui #app #editorSubtabBand>#childTabs {display:none!important;}
  body.sample-ui #app #editorSubtabBand {gap:7px 9px;padding:8px var(--report-inset);}
  body.sample-ui #app #editorSaveSlot {flex-wrap:wrap;}
  body.sample-ui #app #editorSaveStatus.edit-save-status {width:150px;flex-basis:150px;}
  body.sample-ui #app #editorSaveHeading.editor-save-heading {position:static;top:auto;margin-bottom:10px;padding:0;}
}

/* save-status-polish-20261016: paint the whole subtab band while retaining
   its controls at the report body's right edge. Save is draft feedback. */
body.sample-ui #app #editorSubtabBand {
  max-width:none;
  padding-right:max(var(--report-inset),calc(100% - var(--report-body-width) - var(--report-inset)));
}
body.sample-ui #app #editorSaveStatus.edit-save-status {
  border:1px solid #262c38;background:#fff;color:#262c38;font-weight:400;
}
body.sample-ui #app #editorSaveStatus[data-save-state=saved] {
  border-color:#262c38;background:#fff;color:#262c38;
}
body.sample-ui #app #editorSaveStatus .save-status-text {font-weight:400;}
body.sample-ui #app #editorSaveStatus[data-save-state=error] {
  background:#fff0ed;border-color:#f5a49d;color:#b63c35;
}

/* save-feedback-spinner-20261016: match the reference control's normal
   frame. Only the save-in-progress indicator opts into continuous motion. */
body.sample-ui #app #editorSaveStatus.edit-save-status {
  flex:0 0 115px;width:115px;height:28px;min-height:28px;
  gap:7px;padding:0 9px;border:1px solid #cad5e4;border-radius:7px;
  background:#fff;color:#262c38;font-size:12px;font-weight:400;line-height:1.3;
}
body.sample-ui #app #editorSaveStatus:is([data-save-state=saving],[data-save-state=saved]) {
  border-color:#cad5e4;background:#fff;color:#262c38;
}
body.sample-ui #app #editorSaveStatus .save-status-spinner,
body.sample-ui #app #editorSaveStatus .save-status-check {
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 13px;
  box-sizing:border-box;width:13px;height:13px;color:inherit;
}
body.sample-ui #app #editorSaveStatus .save-status-spinner {
  border:1.5px solid currentColor;border-right-color:transparent;border-radius:50%;
  animation:none!important;
}
body.sample-ui #app #editorSaveStatus[data-save-state=saving] .save-status-spinner {
  /* This approved exception leaves every other reduced-motion rule intact. */
  animation:naru-editor-save-spin .9s linear infinite!important;
}
body.sample-ui #app #editorSaveStatus .save-status-check {font-size:14px;font-weight:400;}
body.sample-ui #app #editorSaveStatus [hidden] {display:none!important;}
body.sample-ui #app #editorSaveStatus:is([data-save-state=error],[data-save-state=unsaved]),
body.sample-ui #app #editorSaveStatus:has(.save-status-attachment:not([hidden])) {
  height:auto;min-height:28px;padding-top:4px;padding-bottom:4px;
}
body.sample-ui #app #editorSaveStatus[data-save-state=error] {
  background:#fff0ed;border-color:#f5a49d;color:#b63c35;
}
@keyframes naru-editor-save-spin {to {transform:rotate(360deg);}}
@media(min-width:761px) {
  body.sample-ui #app #referenceButton {
    flex:0 0 115px;box-sizing:border-box;width:115px;height:28px;min-height:28px;
  }
}

/* mobile-editor-layout-20261016: the new anchor has no desktop box. On
   phones only the client profile sticks; status and editor identity scroll. */
body.sample-ui #app #editorSaveSlot>.editor-save-anchor,
body.sample-ui #app #editorSaveSlot .editor-save-floating-content {display:contents;}
@media(max-width:760px) {
  body.sample-ui #app #reportMeta {
    position:sticky;top:0;z-index:40;padding-bottom:9px;
    border-bottom:0;background:#fff!important;
  }
  body.sample-ui #app #reportMeta .case-profile-main {padding-bottom:0;}
  body.sample-ui #app[data-report-kind=accident] #reportMeta[data-profile-stuck=true] {
    background:#fff0ed!important;
  }
  body.sample-ui #app[data-report-kind=hiyari] #reportMeta[data-profile-stuck=true] {
    background:#edf5ff!important;
  }
  body.sample-ui #app #casePage>.report-status-summary[data-mobile-status-band=true] {
    position:static;inset:auto;z-index:auto;display:flex;align-items:center;
    flex:none;flex-wrap:nowrap;box-sizing:border-box;width:100%;max-width:100%;
    min-height:46px;margin:0;padding:0 14px;border:0;
    border-top:1px solid var(--sample-line);background:#fff;
  }
  body.sample-ui #app .report-status-summary[data-mobile-status-band=true] .report-progress-summary {
    position:relative;display:flex;align-items:center;justify-content:center;
    flex:0 1 auto;gap:3px;min-width:0;margin:0 20px 0 0;padding:0;
    font-size:11px;line-height:1.5;
  }
  /* One divider, with the same ten-pixel breathing room on each side. */
  body.sample-ui #app .report-status-summary[data-mobile-status-band=true] .report-progress-summary::after {
    content:"";position:absolute;right:-10px;top:50%;width:1px;height:18px;
    transform:translate(50%,-50%);background:var(--sample-line);pointer-events:none;
  }
  body.sample-ui #app .report-status-summary[data-mobile-status-band=true] #desktopConfirmationSlot #confirmationBar.current-confirmation-summary {
    position:static;inset:auto;z-index:auto;display:flex;align-items:center;
    flex:1 1 auto;flex-direction:row!important;flex-wrap:nowrap;gap:7px;
    width:auto;min-width:0;max-width:none;min-height:0;margin:0;padding:0;
    border:0;border-radius:0;background:transparent;
  }
  body.sample-ui #app .report-status-summary[data-mobile-status-band=true] .confirmation-personal-group {
    display:flex;align-items:center;justify-content:center;
    flex:0 1 auto;gap:3px;min-width:0;
  }
  body.sample-ui #app .report-status-summary[data-mobile-status-band=true] [data-badge-group]:is([data-badge-group=workflow],[data-badge-group=personal]) {
    width:60px;min-width:60px;max-width:60px;padding-inline:3px!important;
    font-size:11px!important;line-height:1.8!important;
  }
  body.sample-ui #app .report-status-summary[data-mobile-status-band=true] .report-progress-summary [data-badge-group=workflow] {
    width:fit-content;min-width:60px;max-width:80px;
  }
  body.sample-ui #app .report-status-summary[data-mobile-status-band=true] .confirmation-personal-group [data-badge-group=personal] {padding-inline:1px!important;}
  body.sample-ui #app .report-status-summary[data-mobile-status-band=true] .confirmation-action-slot {
    justify-content:center;flex:1 1 auto;min-width:0;min-height:44px;
  }
  body.sample-ui #app .report-status-summary[data-mobile-status-band=true] .confirmation-check {
    width:100%;min-height:44px;padding:0;font-size:12px;
  }
  body.sample-ui #app .report-status-summary[data-mobile-status-band=true] #desktopConfirmationSlot .confirmation-time {
    display:inline;margin:0;font-size:11px;line-height:1.5;white-space:nowrap;
  }
  body.sample-ui #app[data-current-parent=edit] #mobileReportLocation {display:none!important;}
  body.sample-ui #app #casePage .work-navigation:has(#editorSaveSlot:not([hidden])) {
    position:static;top:auto;z-index:auto;min-height:0;margin:0;padding:0;
  }
  body.sample-ui #app #editorSubtabBand {
    align-items:flex-start;flex-wrap:nowrap;gap:8px;
    padding:8px 8px 6px;
  }
  body.sample-ui #app #editorSubtabBand>#editorSaveHeading.editor-save-heading {
    position:static;top:auto;display:block;flex:1 1 auto;
    width:auto;min-width:0;max-width:none;margin:0;padding:0;
  }
  body.sample-ui #app #editorSaveHeading .editor-title-row {
    flex-wrap:nowrap;align-items:center;min-height:28px;
  }
  body.sample-ui #app #editorSaveHeading .editor-save-title {
    min-width:0;white-space:nowrap;line-height:1.4!important;
  }
  /* The same assigned name remains in the sticky client profile. */
  body.sample-ui #app #editorSaveHeading .assigned-editor-badge {display:none!important;}
  body.sample-ui #app #editorSaveHeading[data-editor-work=manager] .editor-save-intro {display:none;}
  body.sample-ui #app #editorSubtabBand>#editorSaveSlot {
    align-items:flex-start;align-self:flex-start;flex:0 0 auto;
    min-width:0;max-width:100%;margin:0;padding:0;
  }
  body.sample-ui #app #editorSubtabBand:has(#editorSaveStatus[data-save-state=error]) {flex-wrap:wrap;}
  body.sample-ui #app #editorSubtabBand:has(#editorSaveStatus[data-save-state=error])>#editorSaveSlot {
    flex:1 1 100%;justify-content:flex-start;
  }
  body.sample-ui #app #editorSaveSlot>.editor-save-anchor {
    display:inline-flex;flex:0 0 auto;box-sizing:border-box;
    min-width:0;max-width:100%;vertical-align:top;
  }
  body.sample-ui #app #editorSaveSlot>.editor-save-anchor[data-floating=true] {
    flex:none;width:var(--mobile-save-placeholder-width,115px);
    height:var(--mobile-save-placeholder-height,28px);
  }
  body.sample-ui #app #editorSaveSlot .editor-save-floating-content {
    display:flex;align-items:center;justify-content:flex-end;
    flex-wrap:wrap;box-sizing:border-box;max-width:100%;gap:7px;
  }
  body.sample-ui #app #editorSaveSlot .editor-save-floating-content[data-floating=true] {
    position:fixed;inset:auto;top:var(--mobile-save-top,88px);right:14px;
    z-index:50;width:max-content;max-width:calc(100vw - 28px);margin:0;
    background:transparent;pointer-events:none;
  }
  body.sample-ui #app #editorSaveSlot .editor-save-floating-content :is(.editor-save-retry,.editor-save-backup) {
    min-height:44px;pointer-events:auto;
  }
  body.sample-ui #app #editorSaveStatus.edit-save-status {
    opacity:1;transition:background-color 180ms ease,border-color 180ms ease;
    animation:naru-mobile-save-inline-in 180ms ease-out;
  }
  body.sample-ui #app #editorSaveStatus.edit-save-status[data-floating=true] {
    background:rgba(255,255,255,.82);color:#262c38;opacity:1;
    pointer-events:none;animation:naru-mobile-save-floating-in 180ms ease-out;
  }
  body.sample-ui #app #editorSaveStatus.edit-save-status[data-floating=true][data-save-state=error] {
    background:#fff0ed;border-color:#f5a49d;color:#b63c35;animation:none;
  }
  body.sample-ui #app #editorSaveStatus.edit-save-status[data-floating=true][data-save-state=unsaved] {color:#ff0000;}
  body.sample-ui #app #workPanel[aria-labelledby=parent-edit] #workScroll {
    padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px));
  }
  body.sample-ui #app #workPanel[aria-labelledby=parent-edit] #caseContent .edit-main :is(.section,.form-card) {
    padding:14px 11px;
  }
  @keyframes naru-mobile-save-floating-in {
    from {opacity:0;transform:translateY(-2px);}
    to {opacity:1;transform:none;}
  }
  @keyframes naru-mobile-save-inline-in {from {opacity:0;}to {opacity:1;}}
}
@media(max-width:360px) {
  body.sample-ui #app #casePage>.report-status-summary[data-mobile-status-band=true] {
    width:100%;margin:0;padding-inline:14px;
  }
  body.sample-ui #app .report-status-summary[data-mobile-status-band=true] .report-progress-summary,
  body.sample-ui #app .report-status-summary[data-mobile-status-band=true] .confirmation-personal-group {
    flex:1 1 0;flex-direction:column;align-items:center;justify-content:center;
    gap:2px;padding-block:5px;
  }
  body.sample-ui #app .report-status-summary[data-mobile-status-band=true] #desktopConfirmationSlot #confirmationBar.current-confirmation-summary {
    flex:2.3 1 0;gap:4px;
  }
  body.sample-ui #app .report-status-summary[data-mobile-status-band=true] .report-progress-summary [data-badge-group=workflow] {max-width:100%;}
  body.sample-ui #app .report-status-summary[data-mobile-status-band=true] .confirmation-action-slot {flex:1.3 1 0;}
}

/* mobile-menu-motion-20261017: preserve the existing menu palette and native
   dialog; only these phone menus and their backdrops receive a soft fade. */
@media(max-width:760px) {
  body.sample-ui #sampleDialog.mobile-menu-dialog {
    opacity:1;transform:none;
    transition:opacity 320ms ease,transform 320ms ease!important;
  }
  body.sample-ui #sampleDialog.mobile-menu-dialog::backdrop {
    opacity:1;transition:opacity 320ms ease!important;
  }
  body.sample-ui #sampleDialog.mobile-menu-dialog:is([data-menu-motion=opening],[data-menu-motion=closing]) {
    opacity:0;transform:translateY(6px);
  }
  body.sample-ui #sampleDialog.mobile-menu-dialog:is([data-menu-motion=opening],[data-menu-motion=closing])::backdrop {opacity:0;}
  body.sample-ui #sampleDialog.mobile-menu-dialog[data-menu-motion=closing] {pointer-events:none;}
}
@media(max-width:760px) and (prefers-reduced-motion:reduce) {
  /* This menu-only exception keeps the requested fade on reduced-motion
     devices, without spatial motion or changes to other animation rules. */
  body.sample-ui #sampleDialog.mobile-menu-dialog {
    transform:none!important;transition:opacity 160ms ease!important;
  }
  body.sample-ui #sampleDialog.mobile-menu-dialog::backdrop {transition:opacity 160ms ease!important;}
}

/* Submission-confirmation titles keep the dialog header's own background. */
body.sample-ui #app #workPanel .submit-modal-title {
  background:transparent!important;
}

/* sidebar-mode-scroll-20261018: personal report context is a compact pair,
   independent from the navigation's green selection and management settings. */
body.sample-ui :is(#app,#sampleDialog) .personal-mode-control {
  box-sizing:border-box;width:100%;min-width:0;margin:18px 0 0;padding:14px 12px 0;
  border:0;border-top:1px solid var(--works-sidebar-line,var(--sample-line));
  background:transparent;
}
body.sample-ui :is(#app,#sampleDialog) .personal-mode-control .personal-mode-label {
  display:block;max-width:190px;margin:0 0 6px;padding:0;
  color:var(--sample-muted);font-size:12px;font-weight:400;line-height:1.5;
  background:transparent;
}
body.sample-ui :is(#app,#sampleDialog) .personal-mode-control .personal-mode-switch {
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;
  box-sizing:border-box;width:100%;max-width:190px;min-width:0;margin:0;padding:3px;
  border:1px solid var(--sample-line);border-radius:24px;background:#fff;
}
body.sample-ui #app .personal-mode-control .personal-mode-switch .personal-mode-option:is(#personalTrainingButton,#personalTrainingPracticeButton),
body.sample-ui #sampleDialog .personal-mode-control .personal-mode-switch .personal-mode-option {
  display:inline-flex;align-items:center;justify-content:center;gap:0;
  box-sizing:border-box;width:100%;min-width:0;height:36px;min-height:36px;
  margin:0;padding:6px 10px!important;border:1px solid transparent!important;
  border-radius:20px;background:transparent!important;color:#262c38!important;
  text-align:center;font-size:14px!important;font-weight:400!important;line-height:1.4;
  white-space:nowrap;box-shadow:none!important;cursor:pointer;
}
body.sample-ui #app .personal-mode-control .personal-mode-switch .personal-mode-option:is(#personalTrainingButton,#personalTrainingPracticeButton)[aria-pressed=true],
body.sample-ui #sampleDialog .personal-mode-control .personal-mode-switch .personal-mode-option[aria-pressed=true] {
  background:#0c64e0!important;border-color:#0c64e0!important;color:#fff!important;
  font-weight:500!important;box-shadow:0 1px 2px rgba(12,100,224,.12)!important;
}
body.sample-ui #app .personal-mode-control .personal-mode-switch .personal-mode-option:is(#personalTrainingButton,#personalTrainingPracticeButton):disabled,
body.sample-ui #sampleDialog .personal-mode-control .personal-mode-switch .personal-mode-option:disabled {cursor:wait;}
body.sample-ui :is(#app,#sampleDialog) .personal-mode-control .personal-mode-description {
  max-width:190px;margin:6px 0 0;padding:0;color:var(--sample-muted);
  font-size:11px;font-weight:400;line-height:1.65;background:transparent;
}
body.sample-ui #app .grand-nav #trainingSettingsButton {
  display:flex;align-items:center;gap:12px;box-sizing:border-box;width:100%;
  min-height:45px;margin:0;padding:11px 12px!important;
  border:1px solid transparent!important;border-radius:7px;
  background:transparent!important;color:#262c38!important;
  text-align:left;font-size:14px!important;font-weight:400!important;line-height:1.5;
  box-shadow:none;
}
body.sample-ui #app .grand-nav #trainingSettingsButton:hover:not(:disabled) {background:#dce5ee!important;}
@media(max-width:760px),(pointer:coarse) {
  body.sample-ui #app .personal-mode-control .personal-mode-switch .personal-mode-option:is(#personalTrainingButton,#personalTrainingPracticeButton),
  body.sample-ui #sampleDialog .personal-mode-control .personal-mode-switch .personal-mode-option {height:44px;min-height:44px;}
}
@media(min-width:761px) {
  /* Only the heading remains above this existing scroll viewport. */
  body.sample-ui #app #listCardsScroller>.list-card-content>.list-counts {
    position:static;inset:auto;z-index:auto;
  }
}

/* ui-readability-20261018: approved lettering and sidebar details only. */
body.sample-ui #app :is(.state-pill,.personal-state,.case-status .badge,.header-progress .badge):not(:is(.final,.is-complete,.is-unconfirmed,.done,.badge-success)) {
  color:#606977!important;
}
body.sample-ui #app .official-workflow-scope .action {font-weight:600!important;}
body.sample-ui #staffManagementDialog #staffManagementTitle {
  background:transparent!important;font-family:inherit!important;
  font-size:17px!important;font-weight:500!important;
}
body.sample-ui #app .grand-nav .nav-caption:not(:first-child),
body.sample-ui #app .sample-tools,
body.sample-ui :is(#app,#sampleDialog) .personal-mode-control {border-top-width:1.5px;}
body.sample-ui :is(#app,#sampleDialog) .personal-mode-control .personal-mode-label {font-size:11px;}
body.sample-ui :is(#app,#sampleDialog) .personal-mode-control .personal-mode-switch {background:#f6f7f9;}
body.sample-ui #app .personal-mode-control .personal-mode-switch .personal-mode-option:is(#personalTrainingButton,#personalTrainingPracticeButton)[aria-pressed=true],
body.sample-ui #sampleDialog .personal-mode-control .personal-mode-switch .personal-mode-option[aria-pressed=true] {
  background:#10bf63!important;border-color:#10bf63!important;color:#fff!important;
  font-weight:500!important;box-shadow:0 1px 2px rgba(12,100,224,.12)!important;
}

/* soft-mode-switch-20261018: approved capsule palette and equal inner insets. */
body.sample-ui :is(#app,#sampleDialog) .personal-mode-control .personal-mode-switch {
  align-items:center;height:44px;min-height:44px;
  border:1px solid #dce3ed;background:#f6f7f9;
}
body.sample-ui #app .personal-mode-control .personal-mode-switch .personal-mode-option:is(#personalTrainingButton,#personalTrainingPracticeButton),
body.sample-ui #sampleDialog .personal-mode-control .personal-mode-switch .personal-mode-option {
  height:36px;min-height:36px;padding:0!important;color:#747e8f!important;
}
body.sample-ui #app .personal-mode-control .personal-mode-switch .personal-mode-option:is(#personalTrainingButton,#personalTrainingPracticeButton)[aria-pressed=true],
body.sample-ui #sampleDialog .personal-mode-control .personal-mode-switch .personal-mode-option[aria-pressed=true] {
  background:#e8f0ff!important;border-color:#cbd9ef!important;color:#243045!important;
  font-weight:500!important;box-shadow:none!important;
}
@media(max-width:760px),(pointer:coarse) {
  body.sample-ui :is(#app,#sampleDialog) .personal-mode-control .personal-mode-switch {height:52px;min-height:52px;}
  body.sample-ui #app .personal-mode-control .personal-mode-switch .personal-mode-option:is(#personalTrainingButton,#personalTrainingPracticeButton),
  body.sample-ui #sampleDialog .personal-mode-control .personal-mode-switch .personal-mode-option {height:44px;min-height:44px;}
}
@media(max-width:760px) {
  body.sample-ui #sampleDialog .personal-mode-control .personal-mode-switch {background:#fff;border-color:#cbd5e1;}
  body.sample-ui #sampleDialog #mobilePersonalModeControl+.mobile-menu-group-title {margin-top:16px;}
}

/* list-return-20261018: the last opened report remains a visual place marker. */
body.sample-ui #app #reportList .case-card.last-viewed {
  background:#d6e2f4!important;
  color:var(--sample-ink)!important;
  box-shadow:none!important;
}

/* top-button-20261018: approved blue circle, 87% background transparency.
   The white triangle stays opaque; no filter or list-state changes. */
body.sample-ui #app #listBackToTop {
  position:fixed;z-index:35;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));
  display:inline-flex!important;align-items:center;justify-content:center;
  box-sizing:border-box;width:46px;min-width:46px;height:46px;min-height:46px;
  margin:0;padding:0;border:0!important;border-radius:50%;
  background:rgba(12,100,224,.13)!important;color:#fff!important;
  box-shadow:0 2px 6px rgba(35,55,85,.0182);opacity:1;
  cursor:pointer;transform:none;touch-action:manipulation;
}
body.sample-ui #app #listBackToTop[hidden] {display:none!important;}
body.sample-ui #app #listBackToTop>span {
  display:block;font-family:Arial,sans-serif;font-size:20px;font-weight:400;
  line-height:1;transform:translateY(-1px);pointer-events:none;
}
body.sample-ui #app #listBackToTop:focus-visible {
  outline:2px solid #0c64e0;outline-offset:3px;
}