/* app-late.css — extracted from base.html by Phase 1 of the design-system work.
   Blocks appear in their original document order; that order is the cascade. */

/* ===== base.html style block #6 ===== */
/* Card chrome, backdrop, centring, scrolling and footer come from dialog.intake-modal.
       The close X is gone; the footer button closes it, per the standard. */
    #license-dialog > .intake-card > .license-modal-head {
      flex-direction: row; align-items: center; justify-content: space-between; }
    .license-modal-head h3 { margin: 0; font-size: var(--text-3xl); font-weight: 600; letter-spacing: -0.025em;
      display: flex; align-items: center; gap: var(--space-2); color: var(--nc-text-strong); }
    .license-modal-head h3 .ti { color: var(--nc-accent); }
    #license-dialog .license-card { display: grid; grid-template-columns: max-content minmax(0, 1fr);
      column-gap: var(--space-5); row-gap: var(--space-3); padding: 1.1rem 1.25rem; border: 1px solid var(--pico-card-border-color);
      border-radius: var(--radius-md); background: var(--pico-card-sectioning-background-color); }
    #license-dialog .license-row { display: contents; }
    #license-dialog .license-label { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.05em;
      color: var(--pico-muted-color); font-weight: 600; align-self: center; }
    #license-dialog .license-value { font-size: var(--text-lg); }
    #license-dialog .license-value.license-key { font-family: var(--pico-font-family-monospace);
      letter-spacing: 0.05em; }
    .license-switch-btn { display: inline-flex; align-items: center; gap: var(--space-1-5); width: auto; margin: 0; }

/* ===== base.html style block #9 ===== */
.upgrade-features {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.6rem 1rem;
      margin: 0.25rem 0 1rem;
    }
    @media (max-width: 560px) { .upgrade-features { grid-template-columns: 1fr; } }
    .upgrade-feature { display: flex; gap: var(--space-2-5); align-items: flex-start; }
    .upgrade-feature > .ti {
      font-size: var(--text-2xl); color: var(--nc-accent); margin-top: 0.1rem; flex: 0 0 auto;
    }
    .upgrade-feature strong { display: block; font-size: var(--text-base); line-height: 1.3; }
    .upgrade-feature span { display: block; font-size: var(--text-sm); color: var(--pico-muted-color); line-height: 1.4; }
    .upgrade-tiers { display: flex; gap: var(--space-2-5); flex-wrap: wrap; margin-bottom: 0.5rem; }
    .upgrade-tier {
      flex: 1; min-width: 8rem; text-align: center;
      padding: 0.75rem 0.5rem;
      border: 1px solid var(--pico-card-border-color);
      border-radius: var(--radius-md);
      background: var(--nc-card-bg);
    }
    .upgrade-tier .ut-name { display: block; font-size: var(--text-sm); color: var(--pico-muted-color); font-weight: 600; }
    .upgrade-tier .ut-price { display: block; font-size: var(--text-3xl); font-weight: 600; letter-spacing: -0.02em; margin: 0.15rem 0; }
    .upgrade-tier .ut-note { display: block; font-size: var(--text-xs); color: var(--pico-muted-color); }

/* ===== ONLINE upgrade modal (base.html #upgrade-modal, web branch) =====
   Two choice tiles, then one of two panels. Shares the dialog chrome and the type scale
   with every other .intake-modal; only the tiles and the tier cards are new. */
.ou-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2-5); margin: 0.25rem 0 0.5rem; }
@media (max-width: 560px) { .ou-choices { grid-template-columns: 1fr; } }
/* UNDOES THE SHARED BUTTON CHROME. `.ou-choice` is a <button>, so it is hit by the
   `:is(button, [role=button], ...)` rule at app.css:643 — which pins height: 2.5rem,
   display: inline-flex, justify-content: center, align-items: center, padding: 0 1.25rem
   and white-space: nowrap. That rule is (0,1,0) and so is this one, so ONLY the properties
   named here win. Omitting height and white-space is what flattened both tiles to 40px
   and pushed their text out underneath them. Reset all six, deliberately and together —
   .stat-card[role="button"] at app.css:2634 carries the same list for the same reason. */
.ou-choice { display: block; width: 100%; margin: 0; text-align: left;
  height: auto; min-height: 0; white-space: normal; justify-content: initial;
  align-items: initial; font-weight: 400; letter-spacing: normal;
  padding: 0.9rem 1rem; border: 1px solid var(--pico-card-border-color);
  border-radius: var(--radius-md); background: var(--nc-card-bg); cursor: pointer;
  color: inherit;
  transition: border-color 0.12s, background 0.12s; }
.ou-choice:hover:not(:disabled) { border-color: var(--nc-accent); }
.ou-choice:disabled { opacity: 0.5; cursor: not-allowed; }
.ou-choice > .ti { display: block; font-size: var(--text-2xl); color: var(--nc-accent);
  margin-bottom: 0.35rem; }
.ou-choice strong { display: block; font-size: var(--text-base); line-height: 1.3; }
.ou-choice span { display: block; font-size: var(--text-sm); line-height: 1.4;
  color: var(--pico-muted-color); margin-top: 0.15rem; }

.ou-panel { margin: 0.25rem 0 0.5rem; }
.ou-fine { font-size: var(--text-xs); margin: 0.5rem 0 0; }

.ou-seat-row { display: flex; align-items: center; gap: var(--space-2-5); flex-wrap: wrap; }
.ou-seat-row label { margin: 0; font-weight: 600; }
.ou-seat-row input { width: 5.5rem; margin: 0; }
.ou-seat-total { font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.02em;
  margin-left: auto; }

.ou-tiers { display: flex; gap: var(--space-2-5); flex-wrap: wrap; }
/* Same reset, same reason — see the note on .ou-choice above. */
.ou-tier { position: relative; flex: 1 1 10rem; min-width: 10rem; margin: 0;
  display: block; height: auto; min-height: 0; white-space: normal;
  justify-content: initial; align-items: initial; font-weight: 400;
  letter-spacing: normal; color: inherit;
  text-align: left; padding: 0.85rem 0.9rem 0.9rem;
  border: 1px solid var(--pico-card-border-color); border-radius: var(--radius-md);
  background: var(--nc-card-bg); cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s; }
.ou-tier:hover:not(:disabled) { border-color: var(--nc-accent); }
.ou-tier.is-picked { border-color: var(--nc-accent);
  box-shadow: 0 0 0 1px var(--nc-accent) inset; }
/* The current plan is shown, not offered - disabled rather than hidden, because a plan
   list with your own plan missing from it is a list you cannot place yourself in. */
.ou-tier.is-current { opacity: 0.62; cursor: default; }
.ou-tier-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-1-5); }
.ou-tier-name { font-size: var(--text-sm); font-weight: 600;
  color: var(--pico-muted-color); }
.ou-tier-price { font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.02em; }
.ou-tier-price small { font-size: var(--text-xs); font-weight: 400;
  color: var(--pico-muted-color); margin-left: 0.15rem; }
.ou-tier-files { font-size: var(--text-sm); margin: 0.15rem 0 0.4rem; }
.ou-tier-list { list-style: none; margin: 0; padding: 0; }
.ou-tier-list li { font-size: var(--text-xs); color: var(--pico-muted-color);
  line-height: 1.45; padding-left: 0.85rem; position: relative; }
.ou-tier-list li::before { content: "\2022"; position: absolute; left: 0;
  color: var(--nc-accent); }
.ou-tier-tag { position: absolute; top: -0.55rem; right: 0.6rem;
  font-size: var(--text-xs); font-weight: 600; padding: 0.05rem 0.4rem;
  border-radius: var(--radius-sm, 6px); background: var(--nc-card-bg);
  border: 1px solid var(--pico-card-border-color); color: var(--pico-muted-color); }
.ou-tier-tag-pop { border-color: var(--nc-accent); color: var(--nc-accent); }

.ou-msg { font-size: var(--text-sm); line-height: 1.45; margin: 0.5rem 0 0;
  padding: 0.55rem 0.7rem; border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--pico-card-border-color); }
.ou-msg-err { border-color: var(--nc-danger, #d9534f); }
.ou-msg-ok { border-color: var(--nc-success, #1e8449); }

/* ===== RESTORE POINTS (base.html #restore-points-modal, web only) ===== */
.rp-new { display: flex; gap: var(--space-2-5); align-items: center; flex-wrap: wrap;
  margin: 0 0 0.75rem; }
.rp-new input { flex: 1 1 16rem; margin: 0; }
.rp-new button { flex: 0 0 auto; }
.rp-row { display: flex; align-items: center; gap: var(--space-3);
  padding: 0.6rem 0.7rem; border: 1px solid var(--pico-card-border-color);
  border-radius: var(--radius-md); background: var(--nc-card-bg); margin: 0 0 0.45rem; }
/* A point whose file is gone is SHOWN, not hidden — the reader needs to know it was taken
   and why it cannot be used, or the list silently loses history. */
.rp-row.is-stale { opacity: 0.62; }
.rp-main { flex: 1 1 auto; min-width: 0; }
.rp-main strong { display: block; font-size: var(--text-base); line-height: 1.3;
  overflow-wrap: anywhere; }
.rp-meta { display: block; font-size: var(--text-xs); color: var(--pico-muted-color);
  line-height: 1.45; }
.rp-gone { color: var(--nc-warning); }
.rp-acts { display: flex; align-items: center; gap: 0.35rem; flex: 0 0 auto; }
.rp-acts button { margin: 0; }
.rp-foot { font-size: var(--text-xs); margin: 0.6rem 0 0; }
.rp-msg { font-size: var(--text-sm); line-height: 1.45; margin: 0 0 0.6rem;
  padding: 0.55rem 0.7rem; border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--pico-card-border-color); }
.rp-msg-err { border-color: var(--nc-danger, #d9534f); }
.rp-msg-ok { border-color: var(--nc-success, #1e8449); }

/* ===== BOOK FILE modal (base.html #book-file-modal) ===== */
.bf-sec { margin: 0 0 var(--space-4); }
.bf-sec > strong { display: block; font-size: var(--text-base); margin: 0 0 0.2rem; }
.bf-note { font-size: var(--text-sm); line-height: 1.5; margin: 0 0 0.6rem; }
.bf-sec > button { margin: 0; }
.bf-import { display: flex; flex-direction: column; gap: 0.55rem; margin: 0; }
.bf-import label { display: flex; flex-direction: column; gap: 0.25rem;
  font-size: var(--text-sm); margin: 0; }
.bf-import input, .bf-import select, .bf-import button { margin: 0; }
.bf-warn { font-size: var(--text-sm); color: var(--nc-danger, #d9534f); margin: 0;
  line-height: 1.45; }
.bf-msg { font-size: var(--text-sm); line-height: 1.5; margin: 0.6rem 0 0;
  padding: 0.55rem 0.7rem; border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--pico-card-border-color);
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.bf-msg-err { border-color: var(--nc-danger, #d9534f); }
.bf-msg-ok { border-color: var(--nc-success, #1e8449); }
.bf-msg [role="button"] { margin: 0; }
#bf-list table { width: 100%; margin: 0; }
#bf-list code { font-size: var(--text-xs); overflow-wrap: anywhere; }

/* ===== base.html style block #10 ===== */
.license-key { display: inline-flex; align-items: center; gap: var(--space-1-5); flex-wrap: wrap; min-width: 0; max-width: 100%; }
    .license-key .key-text { font-family: var(--pico-font-family-monospace); letter-spacing: 0.04em;
      min-width: 0; overflow-wrap: anywhere; word-break: break-all; }
    .license-key .key-tool {
      width: auto !important; min-width: 0 !important; height: 1.5rem !important; padding: 0 0.3rem !important;
      margin: 0 !important; display: inline-flex; align-items: center; justify-content: center;
      background: transparent; border: 1px solid var(--pico-card-border-color); border-radius: var(--radius-sm);
      color: var(--nc-text-subtle, var(--pico-muted-color)); cursor: pointer;
    }
    .license-key .key-tool:hover { color: var(--nc-text-strong, var(--pico-color)); background: var(--nc-hover-bg, rgba(255,255,255,0.05)); }
    .license-key .key-tool i.ti { font-size: var(--text-base); margin: 0 !important; }

/* ===== base.html style block #11 ===== */
.split-rows {
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
      margin: 0.5rem 0;
    }
    .split-row {
      display: grid;
      grid-template-columns: 7rem 1fr auto auto;
      gap: var(--space-2);
      align-items: center;
      padding: 0.5rem;
      background: var(--pico-card-background-color);
      border: 1px solid var(--pico-card-border-color);
      border-radius: var(--radius-sm);
    }
    /* Only a line that deliberately runs against the original is marked. */
    .split-row.is-contra {
      border-color: rgba(239, 68, 68, 0.45);
      background: rgba(239, 68, 68, 0.05);
    }
    .split-row-actions { display: flex; gap: var(--space-2); margin: 0.5rem 0 0; }
    .split-row-actions button { margin: 0; }
    .split-row input, .split-row select {
      margin: 0 !important;
      padding: 0.45rem 0.55rem !important;
      font-size: 0.85rem !important;
    }
    /* Per-line "subtract" toggle. Every line follows the original's direction by
       default, so this is an EXCEPTION control, not a required choice — it stays
       muted and unobtrusive until it's actually used. (It used to render a bold
       green + / red − on every row, which read as "set me first".) */
    .split-row .split-sign {
      margin: 0 !important; width: auto !important;
      padding: 0.3rem 0.5rem !important;
      font-size: 0.72rem !important; font-weight: 500; line-height: 1.2;
      white-space: nowrap; border-radius: var(--radius-sm); cursor: pointer;
      background: transparent !important;
      color: var(--pico-muted-color) !important;
      border: 1px solid var(--pico-card-border-color) !important;
      opacity: 0.65; transition: opacity .15s, color .15s, border-color .15s;
    }
    .split-row .split-sign:hover { opacity: 1; }
    .split-row .split-sign.is-contra {
      opacity: 1; font-weight: 600;
      color: #ef4444 !important;
      background: rgba(239,68,68,0.12) !important;
      border-color: rgba(239,68,68,0.45) !important;
    }
    .split-row .split-remove {
      margin: 0 !important;
      padding: 0.4rem 0.55rem !important;
      background: transparent !important;
      border: 1px solid var(--pico-card-border-color) !important;
      color: var(--pico-muted-color) !important;
      width: auto !important;
    }
    .split-row .split-remove:hover { color: #ef4444 !important; border-color: #ef4444 !important; }
    .split-status {
      font-size: var(--text-base);
      padding: 0.5rem 0.75rem;
      border-radius: var(--radius-sm);
      margin-top: 0.5rem;
    }
    .split-status.ok    { background: rgba(34,197,94,0.10); color: #22c55e; }
    .split-status.bad   { background: rgba(239,68,68,0.10); color: #ef4444; }
    .split-status.empty { display: none; }

/* ===== base.html style block #12 ===== */
/* The enable toggle reads as the modal's headline choice, so center it and
       size it to match one column of the interval/retention row below (the
       grid is two 1fr columns with a 1rem gap → each column is 50% - 0.5rem). */
    #auto-backup-dialog .intake-check {
      width: calc(50% - 0.5rem);
      margin: 0 auto;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
    #auto-backup-dialog .intake-check small {
      flex: 0 0 auto;
      margin-left: 0;
    }

/* ===== base.html style block #13 ===== */
.backup-load-list {
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
      max-height: 50vh;
      overflow-y: auto;
      margin: 0.5rem 0;
      width: 100%;
    }
    .backup-row {
      display: flex !important;
      flex-direction: row !important;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-3);
      padding: 0.7rem 0.85rem;
      border: 1px solid var(--pico-card-border-color);
      border-radius: var(--radius-md);
      background: var(--pico-card-sectioning-background-color);
      width: 100%;
    }
    /* Meta column needs `min-width: 0` so its text content can shrink under
       the action buttons' natural width — without it,
the column refuses to
       shrink and the row overflows horizontally. With `overflow: hidden`
       below and `white-space: nowrap` on the time{
      flex: 1 1 auto;
      min-width: 0;
      overflow: hidden;
    }
    #backup-load-list form{
      margin: 0 !important;
      display: inline-flex;
      width: auto;
      background: transparent !important;
      border: 0 !important;
      padding: 0 !important;
      box-shadow: none !important;
    }
    /* Pico v2 ships `button { width: 100% }` as a default,
which makes
       these per-row buttons inflate to fill their parent form (which then
       inflates the actions column,
which collapses the meta column to 0
       width{
      margin: 0 !important;
      padding: 0.35rem 0.5rem !important;
      font-size: 0.82rem !important;
      white-space: nowrap;
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      gap: var(--space-1);
      width: auto !important;
      flex: 0 0 auto;
      border: 0 !important;
      background: transparent !important;
    }
    .backup-empty {
      text-align: center;
      padding: 2rem 1rem;
      color: var(--pico-muted-color);
      font-size: var(--text-lg);
    }
    .backup-empty i.ti {
      font-size: var(--text-4xl);
      opacity: 0.4;
      display: block;
      margin-bottom: 0.5rem;
    }

    /* Toast that confirms a save / delete / restore. Lives at the top
       center of the viewport, fades in for 4 s, then fades out. */
    .backup-toast {
      position: fixed;
      top: 1rem;
      left: 50%;
      transform: translateX(-50%);
      padding: 0.65rem 1.1rem;
      background: rgba(34, 197, 94, 0.96);
      color: #fff;
      border-radius: var(--radius-md);
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
      z-index: 999;
      font-size: var(--text-base);
      font-weight: 500;
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      animation: backupToast 4s ease forwards;
    }
    .backup-toast.error { background: rgba(239, 68, 68, 0.96); }
    @keyframes backupToast {
      0% { opacity: 0; transform: translate(-50%, -8px); }
      10%, 88% { opacity: 1; transform: translate(-50%, 0); }
      100% { opacity: 0; transform: translate(-50%, -8px); }
    }

/* ===== base.html style block #14 ===== */
#custom-theme-dialog .ct-grid { display: flex; flex-direction: column; gap: var(--space-4); }
    #custom-theme-dialog .ct-field {
      display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
      padding: 0.7rem 0.85rem; border: 1px solid var(--pico-card-border-color);
      border-radius: var(--radius-md); background: var(--pico-card-sectioning-background-color);
    }
    #custom-theme-dialog .ct-name { font-weight: 600; font-size: var(--text-lg); }
    #custom-theme-dialog .ct-sub { display: block; font-weight: 400; font-size: var(--text-sm); color: var(--pico-muted-color); margin-top: 1px; }
    #custom-theme-dialog .ct-inputs { display: flex; align-items: center; gap: var(--space-2); }
    #custom-theme-dialog input[type="color"] {
      width: 2.6rem; height: 2.2rem; padding: 0; margin: 0; border: 1px solid var(--pico-card-border-color);
      border-radius: var(--radius-sm); background: none; cursor: pointer;
    }
    #custom-theme-dialog .ct-hex {
      width: 6.2rem; margin: 0; font-family: monospace; font-size: var(--text-base);
      text-transform: lowercase; padding: 0.4rem 0.5rem;
    }

/* ===== base.html style block #16 ===== */
/* The confirm dialog is its OWN small centered card — not the heavy
       intake-modal full-height shell. Explicit centering + content-sized
       so the box sits in the middle of the screen even when the message
       is short. */
    dialog#app-confirm-dialog {
      position: fixed;
      inset: 0;
      width: 100vw;
      height: 100vh;
      max-width: 100vw;
      max-height: 100vh;
      margin: 0;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--pico-color);
    }
    dialog#app-confirm-dialog[open] {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    dialog#app-confirm-dialog::backdrop {
      background: rgba(10, 14, 24, 0.55);
      backdrop-filter: blur(3px);
      -webkit-backdrop-filter: blur(3px);
    }
    /* Card chrome and footer come from dialog.intake-modal now. */
    dialog#app-confirm-dialog .app-confirm-title {
      margin: 0; display: flex; align-items: center; gap: var(--space-2);
      font-size: var(--text-xl); font-weight: 600; color: var(--nc-text-strong);
    }
    dialog#app-confirm-dialog .app-confirm-title i.ti { color: #f59e0b; font-size: var(--text-2xl); }
    dialog#app-confirm-dialog .app-confirm-message {
      margin: 0; line-height: 1.5; white-space: pre-wrap;
      color: var(--pico-muted-color); font-size: var(--text-lg);
    }

/* ===== base.html style block #17 ===== */
#nc-loading {
      position: fixed; inset: 0; z-index: 9999;
      display: none; align-items: center; justify-content: center;
      background: color-mix(in srgb, var(--pico-background-color) 60%, transparent);
      backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
    }
    #nc-loading.show { display: flex; animation: nc-fade-in var(--dur-fast, 140ms) ease-out; }
    @keyframes nc-fade-in { from { opacity: 0; } to { opacity: 1; } }
    .nc-loading-card {
      display: inline-flex; align-items: center; gap: var(--space-3);
      padding: 0.85rem 1.25rem; border-radius: var(--radius-md, 10px);
      background: var(--pico-card-background-color);
      border: 1px solid var(--pico-card-border-color);
      box-shadow: var(--shadow-lg);
      color: var(--nc-text-strong); font-weight: 600; font-size: var(--text-lg);
    }
    .nc-spinner {
      width: 1.15rem; height: 1.15rem; border-radius: 50%;
      border: 2.5px solid var(--nc-badge-border, #ccc);
      border-top-color: var(--nc-accent, #635bff);
      animation: nc-spin 0.7s linear infinite; flex: 0 0 auto;
    }
    @keyframes nc-spin { to { transform: rotate(360deg); } }
    @media (prefers-reduced-motion: reduce) { .nc-spinner { animation-duration: 1.4s; } }

/* ===== base.html style block #19 ===== */
.dev-edition-toggle{position:fixed;left:12px;bottom:12px;z-index:99999;display:flex;
      align-items:center;gap:4px;background:#160f2b;border:1px solid #7c3aed;border-radius:var(--radius-md);
      padding:4px 6px;font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
      box-shadow:0 4px 14px rgba(0,0,0,.45);opacity:.8;transition:opacity .15s}
    .dev-edition-toggle:hover{opacity:1}
    .dev-edition-toggle .det-label{color:#a78bfa;letter-spacing:.1em;padding:0 3px}
    .dev-edition-toggle .det-btn{color:#c4b5fd;text-decoration:none;padding:3px 9px;border-radius:var(--radius-sm)}
    .dev-edition-toggle .det-btn:hover{background:rgba(124,58,237,.25);text-decoration:none}
    .dev-edition-toggle .det-btn.on{background:linear-gradient(135deg,#7c3aed,#db2777);color:#fff}
    /* Divider between the tier buttons and the surface buttons: they're different axes
       (a book is Basic-on-web or Firm-on-desktop), and without a break the five read as
       one mutually exclusive set. */
    .dev-edition-toggle .det-sep{width:1px;align-self:stretch;background:#7c3aed;
      opacity:.5;margin:0 3px}

/* ── Neo-Capital Ads (2026-08-25) ─────────────────────────────────────────────
   Small additive rules for the Ads pages, here in the late sheet on purpose:
   nothing below overrides an existing class's meaning. */

/* An inline form INSIDE a .filter-bar. The bar is a flex row of .fb-field columns;
   a <form> child is a block and breaks the row into stacked fragments (the Ads
   dashboard's from/to pickers shipped that way). display:contents lifts the form's
   fields into the bar's own flex context — the form still submits, the row stays
   a row. */
.filter-bar form.fb-inline { display: contents; }

/* The Ads assistant chat. Bubbles hug their content instead of spanning the card;
   the rail is a quiet list, not a stack of buttons. */
.ag-msg { display: flex; }
.ag-msg.ag-user { justify-content: flex-end; }
.ag-msg.ag-assistant { justify-content: flex-start; flex-direction: column; }
.ag-bubble {
  display: inline-block; width: fit-content; max-width: 72%;
  padding: 0.5rem 0.8rem; border-radius: 12px;
  white-space: pre-wrap; word-break: break-word; line-height: 1.45;
}
.ag-msg.ag-user .ag-bubble { background: var(--nc-accent); color: #fff;
  border-bottom-right-radius: 4px; }
.ag-msg.ag-assistant .ag-bubble { background: var(--nc-surface-raised);
  border: 1px solid var(--nc-table-border);
  border-bottom-left-radius: 4px; max-width: 85%; }
.ag-bubble code { font-size: 0.85em; background: var(--nc-badge-bg);
  padding: 0 0.25em; border-radius: 4px; }
.ag-msg.ag-user .ag-bubble code { background: rgba(255,255,255,0.2); }
.ag-note { color: var(--nc-text-subtle); font-size: 0.8rem; padding-left: 0.25rem; }
.ag-tools { max-width: 85%; }
.ag-tools summary { cursor: pointer; color: var(--nc-text-subtle);
  font-size: 0.78rem; }
.ag-tools pre { font-size: 0.72rem; overflow-x: auto; margin: 0.25rem 0 0;
  background: var(--nc-surface-raised); border-radius: 6px; padding: 0.5rem;
  max-height: 14rem; overflow-y: auto; }
.ag-rail { display: grid; gap: 2px; }
.ag-rail-item {
  display: block; padding: 0.45rem 0.6rem; border-radius: 8px;
  font-size: 0.85rem; text-decoration: none; color: var(--nc-text-strong);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border-left: 3px solid transparent;
}
.ag-rail-item:hover { background: var(--nc-surface-raised); text-decoration: none; }
.ag-rail-item.is-active { background: var(--nc-surface-raised);
  border-left-color: var(--nc-accent); font-weight: 600; }

/* Modal footers WITHOUT the divider line (River, 2026-08-25): the same canon footer —
   sticky, right-aligned buttons — for lightweight dialogs where the rule is the only
   thing between a short body and its buttons, and it reads as clutter. Structure stays;
   only the line goes. */
dialog.intake-modal .intake-card > footer.foot-flat { border-top: 0; }