/* Guard against horizontal panning on phones if any element regresses
         past the viewport. `clip` (unlike `hidden`) doesn't create a scroll
         container, so position:sticky keeps working; iOS honors it on html. */
      /* iOS Safari zooms the whole page when a focused input's font-size
         is under 16px, forcing users to pinch back out. On phone widths,
         hold every form control (and the Quill editor) at 16px so focus
         never zooms; desktop keeps the compact sizes. !important beats the
         -sm classes and per-template inline sizes. */
      @media (max-width: 767.98px) {
        input.form-control, select.form-select, textarea.form-control,
        .form-control, .form-control-sm, .form-select, .form-select-sm,
        input[type="text"], input[type="search"], input[type="email"],
        input[type="password"], input[type="number"], input[type="date"],
        input[type="time"], input[type="tel"], input[type="url"],
        textarea, select, .ql-editor {
          font-size: 16px !important;
        }
      }

      /* On body, not html: clipping the ROOT element trips version-specific
         WebKit bugs where position:fixed descendants (modal backdrops)
         mis-anchor to the document instead of the viewport. Body-level clip
         gives identical horizontal-overflow protection — and `clip` still
         never creates a scroll container, so position:sticky keeps working. */
      body {
        overflow-x: clip;
      }

      /* Ink & Brass preview palette. The semantic cf-* tokens are the source
         of truth; the legacy --brass aliases keep owner-selected public themes
         and existing participant components working while the palette is
         evaluated in this isolated worktree. */
      :root {
        --cf-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        --bs-body-font-family: var(--cf-font-body);
        --cf-ink: #22252A;
        --cf-page: #F1F0EB;
        --cf-surface: #FBFAF7;
        --cf-border: #CBC8C0;
        --cf-control-border: #8D897F;
        --cf-muted: #5F6368;
        --cf-stone-soft: #E4E1D8;
        --cf-brass: #C9A227;
        --cf-brass-hover: #B3901F;
        --cf-brass-soft: #E8DBA8;
        --cf-brass-wash: #F3ECD2;
        --cf-brass-text: #8A6D1A;
        --cf-danger: #DC3545;
        --brass: var(--cf-brass);
        --brass-hover: var(--cf-brass-hover);
        --brass-ink: var(--cf-ink);
      }

      html,
      body,
      button,
      input,
      select,
      textarea {
        font-family: var(--cf-font-body) !important;
      }

      .cf-brand-icon {
        display: block;
        flex: 0 0 auto;
        object-fit: contain;
      }

      .fs-label { font-size: 0.75rem !important; }
      .fs-micro { font-size: 0.72rem !important; }

      /* Shared disclosure control: the chevron follows Bootstrap's collapsed
         state on cards, inner sections, and compact settings toggles. */
      .sidebar-accordion-toggle {
        cursor: pointer;
      }

      .sidebar-accordion-toggle .accordion-chevron {
        flex-shrink: 0;
        transition: transform 0.2s ease;
      }

      .sidebar-accordion-toggle:not(.collapsed) .accordion-chevron {
        transform: rotate(180deg);
      }

      /* Canonical single-select filter / option control. The capsule shape
         distinguishes view filtering from ordinary rectangular actions. */
      .filter-pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 6px 14px;
        border: 2px solid var(--cf-ink);
        border-radius: 999px;
        background-color: var(--cf-surface);
        color: var(--cf-ink);
        font-size: 0.85rem;
        font-weight: 700;
        line-height: 1.35;
        text-decoration: none;
        white-space: nowrap;
        cursor: pointer;
        box-shadow: none;
        transition: background-color 0.15s ease, border-color 0.15s ease,
                    color 0.15s ease;
      }

      .filter-pill:hover {
        background-color: var(--cf-brass-soft);
        border-color: var(--cf-brass);
        color: var(--cf-ink);
      }

      .filter-pill.active,
      .filter-pill[aria-pressed="true"],
      .filter-pill[aria-current="page"] {
        background-color: var(--cf-ink);
        border-color: var(--cf-ink);
        color: var(--cf-surface);
      }

      .filter-pill.active:hover,
      .filter-pill[aria-pressed="true"]:hover,
      .filter-pill[aria-current="page"]:hover {
        background-color: var(--cf-ink);
        border-color: var(--cf-ink);
        color: var(--cf-surface);
      }

      .filter-pill:focus-visible {
        outline: none;
        box-shadow: inset 0 0 0 2px var(--cf-brass);
      }

      .filter-pill-lg {
        padding: 8px 18px;
        font-size: 0.9rem;
      }

      .btn-primary-clip {
        background-color: var(--brass) !important;
        border-color: var(--brass) !important;
        color: var(--brass-ink) !important;
      }
      .btn-primary-clip:hover, .btn-primary-clip:focus {
        background-color: var(--brass-hover) !important;
        border-color: var(--brass-hover) !important;
        color: var(--brass-ink) !important;
      }

      .btn-success {
        background-color: var(--brass) !important;
        border-color: var(--brass) !important;
        color: var(--brass-ink) !important;
      }
      .btn-success:hover, .btn-success:focus {
        background-color: var(--brass-hover) !important;
        border-color: var(--brass-hover) !important;
        color: var(--brass-ink) !important;
      }

      .alert-success {
        background-color: var(--cf-surface) !important;
        border-color: var(--cf-ink) !important;
        color: var(--cf-ink) !important;
      }

      .badge.bg-success {
        background-color: var(--cf-ink) !important;
        border-color: var(--cf-ink) !important;
        color: var(--cf-surface) !important;
      }

      /* Status copy is structural ink; brass is reserved for small accents
         and decisive actions rather than every successful/active state. */
      .text-success {
        color: var(--cf-ink) !important;
      }

      /* Palette foundation. The body scope deliberately outranks legacy
         per-page rules without requiring a risky all-template rewrite for the
         preview. Owner-selected themes override the canvas in their own block. */
      body.cf-ink-brass {
        background-color: var(--cf-page) !important;
        color: var(--cf-ink);
      }

      body.cf-ink-brass .navbar.bg-dark {
        background-color: var(--cf-ink) !important;
        border-bottom-color: var(--brass) !important;
      }

      /* Compact mobile navigation affordance: three lines become an X when
         Bootstrap marks the collapse trigger expanded. Pointer clicks do not
         leave Bootstrap's glow behind; keyboard focus keeps a crisp outline. */
      body.cf-ink-brass .cf-navbar-toggler {
        width: 44px;
        height: 44px;
        padding: 12px 10px;
        color: var(--cf-surface);
      }

      body.cf-ink-brass .cf-navbar-toggler:focus {
        box-shadow: none !important;
        outline: none;
      }

      body.cf-ink-brass .cf-navbar-toggler:focus-visible {
        outline: none;
        color: var(--cf-brass);
      }

      .cf-navbar-toggle-icon {
        display: block;
        position: relative;
        width: 24px;
        height: 18px;
        margin: 0 auto;
      }

      .cf-navbar-toggle-icon span {
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        border-radius: 999px;
        background-color: currentColor;
        transition: transform 0.18s ease, opacity 0.18s ease;
      }

      .cf-navbar-toggle-icon span:nth-child(1) { top: 0; }
      .cf-navbar-toggle-icon span:nth-child(2) { top: 8px; }
      .cf-navbar-toggle-icon span:nth-child(3) { top: 16px; }

      .cf-navbar-toggler[aria-expanded="true"] .cf-navbar-toggle-icon span:nth-child(1),
      .cf-float-nav-toggle[aria-expanded="true"] .cf-navbar-toggle-icon span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
      }

      .cf-navbar-toggler[aria-expanded="true"] .cf-navbar-toggle-icon span:nth-child(2),
      .cf-float-nav-toggle[aria-expanded="true"] .cf-navbar-toggle-icon span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0.5);
      }

      .cf-navbar-toggler[aria-expanded="true"] .cf-navbar-toggle-icon span:nth-child(3),
      .cf-float-nav-toggle[aria-expanded="true"] .cf-navbar-toggle-icon span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
      }

      @media (prefers-reduced-motion: reduce) {
        .cf-navbar-toggle-icon span { transition: none; }
      }

      body.cf-ink-brass .card:not(.bg-dark),
      body.cf-ink-brass .premium-card,
      body.cf-ink-brass .recent-card,
      body.cf-ink-brass .wizard-card,
      body.cf-ink-brass .settings-container,
      body.cf-ink-brass .admin-container,
      body.cf-ink-brass .share-row,
      body.cf-ink-brass .modal-content,
      body.cf-ink-brass .dropdown-menu,
      body.cf-ink-brass .search-dropdown-menu,
      body.cf-ink-brass .list-group-item,
      body.cf-ink-brass .accordion-item {
        background-color: var(--cf-surface);
        border-color: var(--cf-border);
        box-shadow: none !important;
      }

      body.cf-ink-brass .dropdown-item:hover,
      body.cf-ink-brass .dropdown-item:focus {
        background-color: var(--cf-page);
        color: var(--cf-ink);
      }

      body.cf-ink-brass .dropdown-item.active,
      body.cf-ink-brass .dropdown-item:active {
        background-color: var(--cf-ink);
        color: var(--cf-surface);
      }

      body.cf-ink-brass .dropdown-item.text-danger:active {
        background-color: var(--cf-danger);
        color: #ffffff !important;
      }

      /* Ink & Brass follows the flat, print-like character of the reference
         branding. Existing Bootstrap elevation utilities become conspicuous
         against the warm canvas, so borders—not decorative shadows—separate
         navigation, alerts, cards, tables, menus, and dialogs. */
      body.cf-ink-brass .shadow,
      body.cf-ink-brass .shadow-sm,
      body.cf-ink-brass .shadow-lg,
      body.cf-ink-brass [class$="-card"],
      body.cf-ink-brass [class*="-card "],
      body.cf-ink-brass .tl-sheet {
        box-shadow: none !important;
      }

      body.cf-ink-brass .bg-white {
        background-color: var(--cf-surface) !important;
      }

      body.cf-ink-brass .bg-light {
        background-color: var(--cf-page) !important;
      }

      body.cf-ink-brass .bg-dark,
      body.cf-ink-brass .table-dark {
        background-color: var(--cf-ink) !important;
      }

      body.cf-ink-brass .text-dark {
        color: var(--cf-ink) !important;
      }

      body.cf-ink-brass .text-muted {
        color: var(--cf-muted) !important;
      }

      body.cf-ink-brass .text-warning {
        color: var(--cf-brass) !important;
      }

      body.cf-ink-brass .border-dark {
        border-color: var(--cf-ink) !important;
      }

      body.cf-ink-brass .border-light {
        border-color: var(--cf-border) !important;
      }

      body.cf-ink-brass .border:not(.border-dark):not(.border-warning):not(.border-danger):not(.border-secondary) {
        border-color: var(--cf-border) !important;
      }

      body.cf-ink-brass .border-warning {
        border-color: var(--cf-brass) !important;
      }

      body.cf-ink-brass .btn-dark {
        background-color: var(--cf-ink);
        border-color: var(--cf-ink);
        color: var(--cf-surface);
      }

      body.cf-ink-brass .btn-dark:hover,
      body.cf-ink-brass .btn-dark:focus {
        background-color: #34383F;
        border-color: #34383F;
        color: var(--cf-surface);
      }

      body.cf-ink-brass .btn-outline-dark {
        background-color: var(--cf-surface);
        border-color: var(--cf-ink);
        color: var(--cf-ink);
      }

      body.cf-ink-brass .btn-outline-dark:hover,
      body.cf-ink-brass .btn-outline-dark:focus {
        background-color: var(--cf-ink);
        border-color: var(--cf-ink);
        color: var(--cf-surface);
      }

      /* Hover feedback stays inside the button through its background and
         border. External glow competes with neighboring controls and makes
         compact actions feel much heavier than pills and tabs. */
      body.cf-ink-brass .btn:hover,
      body.cf-ink-brass .btn:focus,
      body.cf-ink-brass .btn-check:focus + .btn {
        box-shadow: none !important;
      }

      body.cf-ink-brass .btn:focus-visible,
      body.cf-ink-brass .btn-check:focus-visible + .btn {
        outline: none;
        box-shadow: inset 0 0 0 2px var(--cf-brass) !important;
      }

      body.cf-ink-brass .btn-primary-clip:disabled,
      body.cf-ink-brass .btn-success:disabled {
        background-color: var(--cf-border) !important;
        border-color: var(--cf-border) !important;
        color: var(--cf-muted) !important;
        opacity: 1;
      }

      body.cf-ink-brass .btn-light {
        background-color: var(--cf-surface);
        border-color: var(--cf-border);
        color: var(--cf-ink);
      }

      body.cf-ink-brass .badge.bg-warning,
      body.cf-ink-brass .status-editable {
        background-color: var(--cf-brass-soft) !important;
        border-color: var(--cf-brass) !important;
        color: var(--cf-ink) !important;
      }

      body.cf-ink-brass .badge.bg-dark,
      body.cf-ink-brass .badge-role {
        background-color: var(--cf-ink) !important;
        border-color: var(--cf-ink) !important;
        color: var(--cf-surface) !important;
      }

      body.cf-ink-brass .badge.bg-light {
        background-color: var(--cf-page) !important;
        border-color: var(--cf-border) !important;
        color: var(--cf-ink) !important;
      }

      body.cf-ink-brass .badge.bg-secondary,
      body.cf-ink-brass .status-locked {
        background-color: #6A6965 !important;
        border-color: #6A6965 !important;
        color: var(--cf-surface) !important;
      }

      body.cf-ink-brass .alert-warning {
        background-color: var(--cf-brass-wash);
        border-color: var(--cf-brass);
        color: var(--cf-ink);
      }

      body.cf-ink-brass .form-control,
      body.cf-ink-brass .form-select,
      body.cf-ink-brass .input-group-text,
      body.cf-ink-brass .ql-toolbar,
      body.cf-ink-brass .ql-container {
        background-color: var(--cf-surface);
        border-color: var(--cf-control-border);
        color: var(--cf-ink);
      }

      body.cf-ink-brass .form-control:focus,
      body.cf-ink-brass .form-select:focus {
        background-color: var(--cf-surface);
        border-color: var(--cf-control-border) !important;
        color: var(--cf-ink);
        box-shadow: none !important;
        outline: none !important;
      }

      body.cf-ink-brass .form-control::placeholder {
        color: var(--cf-muted);
        opacity: 0.85;
      }

      body.cf-ink-brass .form-check-input:checked {
        background-color: var(--cf-ink);
        border-color: var(--cf-ink);
      }

      body.cf-ink-brass .form-check-input:focus {
        border-color: var(--cf-ink);
        box-shadow: none !important;
        outline: 2px solid var(--cf-ink);
        outline-offset: 2px;
      }

      /* Bootstrap swaps in a bright-blue SVG thumb when a switch receives
         focus. Keep the focus outline, but make the thumb follow the palette
         after toggling in either direction. */
      body.cf-ink-brass .form-switch .form-check-input:not(:checked):focus {
        --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2322252A'/%3e%3c/svg%3e");
        background-image: var(--bs-form-switch-bg);
      }

      body.cf-ink-brass .form-switch .form-check-input:checked:focus {
        --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
        background-image: var(--bs-form-switch-bg);
      }

      /* Small activity dots are an intentional brass punctuation mark. */
      body.cf-ink-brass .bg-success:not(.badge) {
        background-color: var(--cf-brass) !important;
      }

      body.cf-ink-brass .table {
        --bs-table-bg: transparent;
        --bs-table-striped-bg: rgba(34, 37, 42, 0.025);
        --bs-table-hover-bg: rgba(34, 37, 42, 0.055);
        color: var(--cf-ink);
        border-color: var(--cf-border);
      }

      body.cf-ink-brass .category-pill,
      body.cf-ink-brass .view-tab,
      body.cf-ink-brass .sidebar-link,
      body.cf-ink-brass .nav-btn-link {
        background-color: var(--cf-surface);
        border-color: var(--cf-ink);
        color: var(--cf-ink);
        box-shadow: none !important;
      }

      body.cf-ink-brass .category-pill:hover,
      body.cf-ink-brass .view-tab:hover,
      body.cf-ink-brass .sidebar-link:hover,
      body.cf-ink-brass .nav-btn-link:hover {
        background-color: var(--cf-brass-soft);
        border-color: var(--cf-brass);
        color: var(--cf-ink);
      }

      body.cf-ink-brass .category-pill.active,
      body.cf-ink-brass .view-tab.active,
      body.cf-ink-brass .sidebar-link.active {
        background-color: var(--cf-ink) !important;
        border-color: var(--cf-ink) !important;
        color: var(--cf-surface) !important;
      }

      body.cf-ink-brass a:not(.btn):not(.navbar-brand):not(.filter-pill) {
        color: var(--cf-brass-text);
      }

      body.cf-ink-brass a:not(.btn):not(.navbar-brand):not(.filter-pill):hover {
        color: #6B570E;
      }

      /* Compact policy footer for the authenticated dashboard. */
      body.cf-ink-brass .cf-policy-footer {
        width: 100%;
        padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
        border-top: 1px solid #D8D5CE;
        background: #FBFAF7 !important;
        color: #5F6368 !important;
        font-size: 0.75rem;
        line-height: 1.4;
        text-align: center;
      }

      body.cf-ink-brass .cf-policy-footer-links {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 0.55rem;
      }

      body.cf-ink-brass .cf-policy-footer a {
        color: #5F6368 !important;
        text-decoration: none;
      }

      body.cf-ink-brass .cf-policy-footer a:hover,
      body.cf-ink-brass .cf-policy-footer a:focus-visible {
        color: #22252A !important;
        text-decoration: underline;
        text-underline-offset: 0.16em;
      }

      /* Public Clipform and folder-catalogue pages replace authenticated app
         chrome with a compact account menu at every viewport size. These rules
         intentionally use fixed cf-* application tokens, not owner-theme
         --brass/page variables. */
      .cf-float-nav {
        position: fixed;
        right: calc(1rem + env(safe-area-inset-right));
        bottom: calc(1rem + env(safe-area-inset-bottom));
        z-index: 1040;
      }

      body.cf-ink-brass .cf-float-nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 52px;
        height: 52px;
        padding: 14px 12px;
        border: 2px solid var(--cf-surface);
        border-radius: 50%;
        background-color: var(--cf-ink);
        color: var(--cf-surface);
        cursor: pointer;
        box-shadow: none;
      }

      body.cf-ink-brass .cf-float-nav-toggle:hover {
        color: var(--cf-brass);
      }

      body.cf-ink-brass .cf-float-nav-toggle:focus {
        outline: none;
        box-shadow: none;
      }

      body.cf-ink-brass .cf-float-nav-toggle:focus-visible {
        box-shadow: inset 0 0 0 2px var(--cf-brass);
      }

      body.cf-ink-brass .cf-float-nav-menu {
        min-width: 14rem;
        max-width: calc(100vw - 2rem);
        margin-bottom: 0.5rem !important;
        padding: 0.5rem 0;
        border: 2px solid var(--cf-ink);
        border-radius: 8px;
        background-color: var(--cf-surface);
        color: var(--cf-ink);
        box-shadow: none !important;
      }

      body.cf-ink-brass .cf-float-nav-menu .dropdown-header,
      body.cf-ink-brass #cfPublicNavMenu .dropdown-item {
        color: var(--cf-ink);
      }

      body.cf-ink-brass #cfPublicNavMenu .dropdown-item:hover,
      body.cf-ink-brass #cfPublicNavMenu .dropdown-item:focus {
        background-color: var(--cf-page);
        color: var(--cf-ink);
      }

      body.cf-ink-brass #cfPublicNavMenu .dropdown-item:active {
        background-color: var(--cf-ink);
        color: var(--cf-surface);
      }

      body.cf-ink-brass .cf-float-nav-menu .dropdown-divider {
        border-color: var(--cf-border);
        opacity: 1;
      }

      .cf-public-page-shell-menu {
        padding-bottom: calc(6rem + env(safe-area-inset-bottom)) !important;
      }

      body.cf-ink-brass .cf-icon-accent {
        color: var(--cf-brass-text) !important;
      }

      body.cf-ink-brass .folder-tile-icon {
        width: 44px;
        height: 44px;
        justify-content: center;
        border-radius: 50%;
        background-color: var(--cf-stone-soft);
        color: var(--cf-brass-text);
      }

      body.cf-ink-brass .folder-tile-icon .text-dark {
        color: var(--cf-brass-text) !important;
      }

      body.cf-ink-brass hr {
        border-color: var(--cf-border);
        opacity: 1;
      }

      /* Comfortable touch target for primary action buttons (48px per Material guidance).
         Inline-flex keeps the label vertically centered for both <button> and <a>. */
      .btn-tap {
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }

      /* Mobile viewport button sizing: keep labels compact but preserve a
         finger-sized tap area. Only .btn-sm stays truly compact (dense toolbars). */
      @media (max-width: 575.98px) {
        .btn {
          font-size: 0.9rem !important;
          padding: 0.5rem 0.75rem !important;
        }
        .btn-sm {
          font-size: 0.72rem !important;
          padding: 0.2rem 0.4rem !important;
        }
        /* Text inputs and selects get a comfortable touch height too
           (compact -sm variants in dense management UIs are left alone) */
        .form-control:not(.form-control-sm),
        .form-select:not(.form-select-sm) {
          min-height: 44px;
        }
        /* Checkboxes/radios are hard to hit at Bootstrap's 1em default */
        .form-check-input {
          width: 1.35em;
          height: 1.35em;
        }
        .navbar-brand {
          font-size: 0.95rem !important;
        }
        h2, h3, h4 {
          font-size: 1.25rem !important;
        }
      }

      /* Responsive stacked tables for narrow screens (mobile/tablet < 992px) */
      @media (max-width: 991.98px) {
        .responsive-table-stacked table,
        .responsive-table-stacked thead,
        .responsive-table-stacked tbody,
        .responsive-table-stacked th,
        .responsive-table-stacked td,
        .responsive-table-stacked tr {
          display: block !important;
        }

        .responsive-table-stacked thead {
          display: none !important; /* Hide headers */
        }

        .responsive-table-stacked tr {
          margin-bottom: 1rem;
          border: 1px solid #dee2e6 !important;
          border-radius: 0.375rem;
          padding: 0.75rem;
          background-color: #ffffff;
          box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }

        .responsive-table-stacked td {
          display: flex !important;
          justify-content: space-between;
          align-items: center;
          padding: 0.5rem 0.25rem !important;
          border-bottom: 1px solid #f1f3f5 !important;
        }

        .responsive-table-stacked td:last-child {
          border-bottom: none !important;
        }

        /* Label on the left from data-label attribute */
        .responsive-table-stacked td::before {
          content: attr(data-label);
          font-weight: 600;
          color: #495057;
          font-size: 0.85rem;
        }

        /* Make the field title cell act as a full-width header for the stacked card */
        .responsive-table-stacked .field-title-cell {
          display: block !important;
          font-size: 0.95rem;
          font-weight: 700 !important;
          color: #212529 !important;
          background-color: #f8f9fa;
          padding: 0.5rem 0.75rem !important;
          margin: -0.75rem -0.75rem 0.5rem -0.75rem; /* offset padding of parent tr */
          border-top-left-radius: 0.375rem;
          border-top-right-radius: 0.375rem;
          border-bottom: 1px solid #dee2e6 !important;
        }

        .responsive-table-stacked .field-title-cell::before {
          display: none !important; /* Hide prefix label for header cell */
        }

        .responsive-table-stacked select {
          width: auto !important;
          max-width: 180px !important;
          min-width: 130px !important;
        }
      }