/* Shared task layouts. Colours and controls live in design-system.css. */
  /* the ⌘K palette */
  dialog#cmdk { border: 1px solid var(--line); border-radius:9px; padding: 0;
    width: min(560px, 92vw); margin: 8vh auto auto;
    box-shadow: 0 24px 70px rgba(26,26,23,.25); }
  dialog#cmdk::backdrop { background: rgba(26,26,23,.28);
    backdrop-filter: blur(2px); }
  dialog#cmdk[open] { animation: palin .16s ease; }
  @keyframes palin { from { opacity: 0; transform: translateY(-6px) scale(.985); }
                     to { opacity: 1; } }
  #cmdk-q { width: 100%; border: none; outline: none; font: inherit;
    font-size: 15px; padding: 14px 18px; border-bottom: 1px solid var(--line);
    border-radius: 0; background: var(--card); }
  #cmdk-list { max-height: 46vh; overflow-y: auto; padding-bottom: 6px; }
  #cmdk-list .grp { font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--muted); padding: 10px 18px 4px; }
  .cmdk-item { display: flex; gap: 10px; align-items: center;
    padding: 8px 18px; font-size: 13.5px; cursor: pointer; }
  .cmdk-item .ic { width: 22px; height: 22px; border-radius: 7px;
    background: var(--quiet-bg); flex: none; display: inline-flex;
    align-items: center; justify-content: center; font-size: 11px; }
  .cmdk-item .tt { font-weight: 600; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; max-width: 300px; }
  .cmdk-item .ss { color: var(--muted); white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; flex: 1; }
  .cmdk-item.sel { background: var(--button); }
  .cmdk-empty { padding: 16px 18px; font-size: 13px; color: var(--muted); }

  /* page header: title left, counts beside, actions right */
  .phead { display: flex; align-items: center; gap: 12px; margin: 0 0 18px;
           flex-wrap: wrap; }
  .phead .count { color: var(--muted); font-size: 13px;
                  font-family: Inter, sans-serif;
                  font-feature-settings: "tnum"; }
  .phead .right { margin-left: auto; display: flex; gap: 8px;
                  align-items: center; flex-wrap: wrap; }

  .msg { background: var(--ok-bg); border: 1px solid var(--line); color: var(--ok);
         padding: 9px 14px; border-radius:9px; margin-bottom: 16px;
         font-size: 13.5px; }

  .hint { color: var(--muted); font-size: 12.5px; }

  table { border-collapse: separate; border-spacing: 0; width: auto;
          background: var(--card); font-size: 13px; border: 1px solid var(--line);
          border-radius:9px; overflow: hidden;
          font-feature-settings: "tnum"; }
  th, td { padding: 8px 14px; text-align: left;
           border-bottom: 1px solid var(--hairline); }
  th { background: var(--bg); font-size: 11.5px; color: var(--muted);
       font-weight: 550; border-bottom: 1px solid var(--line); }
  tr:last-child td { border-bottom: none; }
  tbody tr:hover td { background: var(--bg); }
  table a { text-decoration: none; border-bottom: 1px solid var(--line); }
  table a:hover { border-bottom-color: var(--ink); }

  .muted { color: var(--muted); } .flag { color: var(--flag); font-weight: 600; }
  .ok-text { color: var(--ok); font-weight: 600; }
  .mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; }

  /* pill-shaped filter selects */
  .filters { display: flex; gap: 7px; align-items: center; flex-wrap: wrap;
             margin: 0 0 14px; }
  .filters select, .filters input[type=date] {
    border-radius:4px; padding: 5px 12px; font-weight: 550; }

  td.cell-info { background: var(--warn-bg); }
  td.cell-review { background: var(--flag-bg); }
  td.cell-computed { background: var(--computed-bg); color: var(--computed);
                     font-weight: 600; }
  th.th-computed { color: var(--computed); }
  td.cell-bad-edit { background: var(--flag-bg);
                     box-shadow: inset 0 0 0 2px var(--flag); }
  /* the ⓘ popover: legend + fine print, shown on demand */
  details.ibox { position: relative; display: inline-block; }
  details.ibox summary { list-style: none; cursor: pointer; color: var(--muted);
    font-size: 11px; border: 1px solid var(--line); border-radius: 50%;
    width: 18px; height: 18px; display: inline-flex; align-items: center;
    justify-content: center; font-weight: 600; background: var(--card); }
  details.ibox summary::-webkit-details-marker { display: none; }
  details.ibox[open] summary { background: var(--quiet-bg); }
  details.ibox .ipop { position: absolute; z-index: 30; top: 24px; left: 0;
    background: var(--card); border: 1px solid var(--line); border-radius:9px;
    padding: 12px 14px; min-width: 340px; box-shadow: 0 8px 28px rgba(26,26,23,.12);
    font-size: 12.5px; color: var(--muted); }

  .legend { display: flex; gap: 8px; flex-direction: column;
            font-size: 12.5px; color: var(--muted); }
  .legend .key { display: flex; gap: 8px; align-items: center; }
  .legend .swatch { width: 14px; height: 14px; border-radius: 4px;
                    border: 1px solid var(--line); display: inline-block;
                    flex: none; }
  .legend .swatch-review { background: var(--flag-bg); border-color: var(--warm-edge); }
  .legend .swatch-info { background: var(--warn-bg); border-color: var(--warm-edge); }
  .legend .swatch-computed { background: var(--computed-bg); border-color: #d5cde8; }

  s.oldval { color: var(--muted); font-size: 12px; margin-left: 6px; }
  .dittomark { color: var(--muted); font-size: 11px; margin-top: 2px; }
  .cellmsg { font-size: 11.5px; margin-top: 3px; color: var(--muted);
             max-width: 180px; white-space: normal; }
  .cellmsg.bad { color: var(--flag); font-weight: 600; }
  input.cellbox { display: none; }
  td.draft-cell { box-shadow: inset 0 -3px 0 var(--accent); }
  body.editing input.cellbox { display: inline-block; }
  body.editing .grid-pane td .val { display: none; }
  .corrmark { color: var(--green); font-size: 11px; margin-left: 4px; text-decoration: none;
              background: var(--button); border-radius: 999px; padding: 1px 6px; white-space: nowrap; }
  .corrmark.pending { color: var(--amb); background: var(--amb-bg); }
  .whoami { display: inline-flex; align-items: center; gap: 8px; margin-left: 8px; }
  .toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
             margin: 0 0 14px; }
  .lockbar { background: var(--ok-bg); border: 1px solid var(--line);
             color: var(--ok); padding: 9px 14px; border-radius:9px;
             margin-bottom: 14px; font-size: 13.5px; font-weight: 600;
             display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
  .lockbar.quiet-bar { background: var(--quiet-bg); border-color: var(--line);
                       color: var(--quiet); font-weight: 500; }

  .split { display: flex; gap: 16px; align-items: flex-start; }
  .split .photo-pane { flex: 0 0 42%; max-width: 42%; position: sticky; top: 14px; }
  .split .photo-pane img { width: 100%; border: 1px solid var(--line);
                           border-radius:9px; background: #fff; }
  .split .grid-pane { flex: 1; overflow-x: auto; }
  .review-workspace .photo-scroll { overflow: auto; max-height: 70vh; }
  .review-workspace .photo-tools { flex-wrap: wrap; }
  @media (max-width: 760px) {
    .review-workspace { flex-direction: column; }
    .split.review-workspace .photo-pane { flex: auto; max-width: 100%; width: 100%; position: static; }
    .split.review-workspace .grid-pane { flex: auto; width: 100%; min-width: 0; }
    .review-workspace .photo-scroll { max-height: 320px; }
    .review-workspace input.cellbox { font-size: 16px; min-height: 40px; }
  }
  .photo-tools { display: flex; justify-content: flex-end; margin: 6px 0 0;
                 gap: 8px; align-items: center; }
  .photo-tools button { padding: 3px 12px; font-size: 12px; }

  /* photo grid overlay (display only, drawn by code) */
  .photo-wrap { position: relative; }
  #overlay { position: absolute; inset: 0; }
  .gcell { position: absolute; pointer-events: auto; }
  .gcell.hot { background: rgba(82,101,71,.18); outline: 2px solid var(--focus); }
  td.hot { background: var(--button) !important; outline: 2px solid var(--focus);
           outline-offset: -2px; }
  tr.hot td { background: var(--button) !important; }
  .glabel { position: absolute; transform: translate(-50%, 0);
            background: rgba(26,26,23,.58); color: #fff; font-size: 10px;
            line-height: 1.5; padding: 0 4px; border-radius: 3px;
            pointer-events: none; }
  .glabel.gside { transform: translate(0, -50%); }

  details summary { cursor: pointer; color: var(--muted); font-size: 12.5px; }
  pre { background: var(--bg); border: 1px solid var(--line); padding: 14px;
        border-radius:9px; overflow-x: auto; font-size: 12px; }
  .doc-body { font-size: 13.5px; max-width: 880px; }
  .doc-body h1 { font-size: 17px; } .doc-body h2 { font-size: 15px; }
  .doc-body code { background: var(--quiet-bg); padding: 1px 5px;
                   border-radius: 4px; font-size: 12px; }
  .doc-body table { font-size: 12.5px; margin: 8px 0; }
  .empty { color: var(--muted); background: var(--card);
           border: 1px dashed var(--line); border-radius:9px; padding: 22px;
           text-align: center; font-size: 13.5px; }
  .field-row { display: grid; grid-template-columns: 300px auto 1fr; gap: 12px;
               align-items: center; padding: 8px 0;
               border-bottom: 1px solid var(--hairline); }
  .field-row:last-child { border-bottom: none; }
  .badge-tbd { background: var(--amb-bg); color: var(--amb); padding: 2px 9px;
               border-radius:4px; font-size: 11.5px; font-weight: 700; }

  /* Database / Knowledge / Notes: the same portal components, arranged as
     one status, one action, and progressively disclosed detail. */
  .simple-tab-page { max-width: 980px; }
  .simple-tab-page .phead { margin-bottom: 14px; }
  .tab-summary { display: flex; align-items: center; gap: 18px;
                 padding: 18px; }
  .tab-summary .copy { min-width: 0; }
  .tab-summary h3 { font-size: 15px; margin-bottom: 3px; }
  .tab-summary p { margin: 0; }
  .tab-summary .action { margin-left: auto; flex: none; }
  .tab-section-head { display: flex; align-items: baseline; gap: 9px;
                      margin: 24px 0 9px; }
  .tab-section-head h2 { margin: 0; }
  .tab-list { background: var(--card); border: 1px solid var(--line);
              border-radius:9px; padding: 0 18px; }
  .tab-row { display: grid; grid-template-columns: minmax(0, 1fr) auto;
             gap: 14px; align-items: center; padding: 13px 0;
             border-bottom: 1px solid var(--hairline); }
  .tab-row:last-child { border-bottom: none; }
  .tab-row .title { font-size: 13.5px; font-weight: 650; }
  .tab-row .desc { color: var(--muted); font-size: 12.5px; margin-top: 1px; }
  .tab-row .meta { display: flex; flex-wrap: wrap; gap: 4px 10px;
                   color: var(--muted); font-size: 12px; margin-top: 5px;
                   font-feature-settings: "tnum"; }
  .tab-row .meta span + span::before { content: "·"; margin-right: 10px;
                                      color: var(--muted); }
  .tab-row details { margin-top: 6px; }
  .tab-row-actions { display: flex; gap: 7px; align-items: center;
                     justify-content: flex-end; flex-wrap: wrap; }
  details.tab-disclosure { background: var(--card); border: 1px solid var(--line);
                           border-radius:9px; margin: 14px 0; overflow: hidden; }
  details.tab-disclosure > summary { list-style: none; display: flex;
    align-items: center; gap: 10px; min-height: 54px; padding: 12px 18px;
    color: var(--ink); font-size: 13.5px; font-weight: 650; }
  details.tab-disclosure > summary::-webkit-details-marker { display: none; }
  details.tab-disclosure > summary::after { content: "›"; margin-left: 0;
    color: var(--muted); font-size: 20px; font-weight: 400;
    transform: rotate(90deg); transition: transform .15s; }
  details.tab-disclosure[open] > summary::after { transform: rotate(-90deg); }
  details.tab-disclosure[open] > summary { border-bottom: 1px solid var(--line); }
  .tab-disclosure .summary-copy { min-width: 0; flex: 1; }
  .tab-disclosure .summary-copy .hint { display: block; margin-top: 1px;
                                       font-weight: 400; }
  .tab-disclosure .summary-count { margin-left: 0; }
  .tab-disclosure-body { padding: 14px 18px 18px; }
  .tab-disclosure-body > :first-child { margin-top: 0; }
  .tab-disclosure-body > :last-child { margin-bottom: 0; }
  .tab-table-wrap { max-width: 100%; overflow-x: auto; }
  .tab-form-actions { display: flex; gap: 10px; align-items: center;
                      flex-wrap: wrap; margin-top: 14px; }
  .note-copy { margin: 5px 0 0; font-size: 13px; max-width: 680px; }
  .note-evidence { margin-top: 7px; }
  .note-evidence .hint { margin-top: 5px; max-width: 700px; }

  @media (max-width: 720px) {
    .tab-summary { align-items: flex-start; flex-direction: column; gap: 12px; }
    .tab-summary .action { margin-left: 0; }
    .tab-row { align-items: start; }
    .field-row { grid-template-columns: 1fr; gap: 5px; }
  }

  /* home */
  .dotgrid { position: relative; }
  .dotgrid::before { content: ""; position: absolute; inset: -24px -28px auto;
    height: 260px; pointer-events: none;
    background-image: radial-gradient(rgba(26,26,23,.055) 1px, transparent 1px);
    background-size: 18px 18px;
    -webkit-mask-image: linear-gradient(#000 30%, transparent);
    mask-image: linear-gradient(#000 30%, transparent); }
  .dateline { position: relative; font-size: 12.5px; color: var(--muted);
              margin: 0 0 14px; font-feature-settings: "tnum"; }
  .dateline b { color: var(--ink); font-weight: 600; }
  .tile-row { position: relative; display: grid;
              grid-template-columns: repeat(3, 1fr); gap: 12px;
              margin-bottom: 12px; }
  .tile { background: var(--card); border: 1px solid var(--line);
          border-radius:9px; padding: 15px 18px 13px; position: relative;
          overflow: hidden;
          transition: transform .18s ease, box-shadow .18s ease;
          animation: rise .5s ease both; }
  .tile:nth-child(2) { animation-delay: .06s; }
  .tile:nth-child(3) { animation-delay: .12s; }
  .tile:hover { transform: translateY(-2px);
                box-shadow: 0 10px 26px rgba(26,26,23,.09); }
  @keyframes rise { from { opacity: 0; transform: translateY(8px); }
                    to { opacity: 1; } }
  .tile .l { font-size: 12px; color: var(--muted); font-weight: 500; }
  .tile .v { font-family: Inter, sans-serif;
             font-size: 40px; font-weight: 500; letter-spacing: -.03em;
             line-height: 1.15; margin: 3px 0 1px;
             font-feature-settings: "tnum"; }
  .tile .v .u { font-size: 15px; color: var(--muted); font-weight: 500;
                letter-spacing: 0; font-family: Inter, sans-serif; }
  .tile .s { font-size: 12px; color: var(--muted); display: flex; gap: 6px;
             align-items: center; }
  .dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block;
         flex: none; }
  .dot.g { background: var(--ok); } .dot.r { background: var(--flag); }
  .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--flag);
           flex: none; display: inline-block; animation: pulse 2s infinite; }
  @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(196,61,47,.35); }
                     70% { box-shadow: 0 0 0 7px rgba(196,61,47,0); }
                     100% { box-shadow: 0 0 0 0 rgba(196,61,47,0); } }
  .spark { position: absolute; right: 14px; bottom: 12px; opacity: .9; }
  .ringwrap { display: flex; align-items: center; gap: 12px; }
  .compo { display: flex; gap: 2px; height: 6px; border-radius: 3px;
           overflow: hidden; margin-top: 9px; }
  .compo i { display: block; height: 100%; }
  .attn { display: flex; align-items: center; gap: 10px; padding: 9px 10px;
          font-size: 13px; border-top: 1px solid var(--hairline);
          margin: 0 -10px; border-radius: 8px; flex-wrap: wrap;
          transition: background .15s; }
  .attn:hover { background: var(--bg); }
  .attn:first-of-type { border-top: none; }
  .attn .why { color: var(--muted); }
  .attn .go { margin-left: auto; font-size: 12px; font-weight: 600;
              color: var(--ink); text-decoration: none;
              background: var(--quiet-bg); border-radius: 7px; padding: 4px 11px;
              transition: transform .15s, background .15s; }
  .attn:hover .go { background: var(--button); transform: translateX(-2px); }
  .act { display: flex; gap: 11px; padding: 8px 0; font-size: 12.5px;
         color: var(--muted); border-top: 1px solid var(--hairline);
         align-items: center; }
  .act:first-of-type { border-top: none; }
  .act .ic { width: 24px; height: 24px; border-radius: 8px;
             background: var(--quiet-bg); flex: none; display: inline-flex;
             align-items: center; justify-content: center; font-size: 12px;
             color: var(--ink); }
  .act .t { font-feature-settings: "tnum"; width: 70px; flex: none;
            color: var(--muted); }
  .act b { color: var(--ink); font-weight: 600; }
  .freshbar { display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 6px 28px;
              border-bottom: 1px solid var(--line); background: var(--bg);
              color: var(--muted); font-size: 11.5px; }
  .freshbar b { color: var(--ink); font-weight: 600; margin-right: 4px; }
  .report-frame { width: 100%; height: calc(100vh - 160px); min-height: 640px;
                  border: 1px solid var(--line); border-radius:9px;
                  background: var(--card); }

  .source-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
                 gap: 14px; }
  .source-card { background: var(--card); border: 1px solid var(--line);
                 border-radius:9px; padding: 18px; }
  .source-card-head { display: flex; align-items: flex-start; gap: 12px; }
  .source-icon { width: 38px; height: 38px; border-radius:9px;
                 background: var(--button); color: var(--green);
                 display: inline-flex; align-items: center; justify-content: center;
                 font-size: 15px; font-weight: 750; flex: none; }
  .source-card h2 { font-size: 15px; margin: 0; }
  .source-card .source-desc { color: var(--muted); font-size: 12.5px; margin: 2px 0 0; }
  .source-card .source-status { margin-left: auto; }
  .source-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
                  gap: 8px; margin: 16px 0; }
  .source-fact { background: var(--bg); border-radius: 9px; padding: 9px 10px; }
  .source-fact .label { color: var(--muted); font-size: 10.5px; }
  .source-fact .value { font-size: 12.5px; font-weight: 600; margin-top: 2px;
                        overflow-wrap: anywhere; }
  .source-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .source-note { color: var(--muted); font-size: 11.5px; margin: 13px 0 0; }