:root {
  --cw-canvas: #f6f7f5;
  --cw-surface: #ffffff;
  --cw-border: #e2e7e4;
  --cw-text: #1d2927;
  --cw-muted: #66736f;
  --cw-teal: #25747c;
  --cw-teal-dark: #1f5e65;
  --cw-teal-soft: #e8f2f2;
  --cw-radius: .75rem;
  --cw-shadow: 0 1px 2px rgba(24,39,35,.04), 0 8px 28px rgba(24,39,35,.035);
}

html, body, #app-shell { background: var(--cw-canvas); color: var(--cw-text); }
.cw-nav-shell { background: #fbfcfb; border-color: var(--cw-border); }
.cw-rail { width: 4.5rem; flex: 0 0 4.5rem; background: #173f43; color: white; }
.cw-rail-link { position: relative; display: flex; min-height: 3.5rem; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; border-radius: .65rem; color: rgba(255,255,255,.67); font-size: .625rem; font-weight: 600; }
.cw-rail-link:hover { background: rgba(255,255,255,.08); color: white; }
.cw-rail-link[aria-current="page"] { background: rgba(255,255,255,.13); color: white; }
.cw-rail-link[aria-current="page"]::before { position: absolute; left: -.25rem; width: .2rem; height: 1.5rem; border-radius: 999px; background: #8dd0d2; content: ""; }
.cw-context-panel { width: 13.5rem; flex: 0 0 13.5rem; background: #fbfcfb; }
.cw-context-link { display: flex; min-height: 2.5rem; align-items: center; gap: .625rem; border-radius: .625rem; padding: .55rem .75rem; color: #53615e; font-size: .875rem; font-weight: 500; }
.cw-context-link:hover { background: #f0f4f2; color: var(--cw-text); }
.cw-context-link[aria-current="page"] { background: var(--cw-teal-soft); color: var(--cw-teal-dark); font-weight: 650; }
.cw-command-bar { min-height: 4rem; background: rgba(255,255,255,.96); border-color: var(--cw-border); }
.cw-command-search { max-width: 30rem !important; border-color: var(--cw-border) !important; background: #f7f9f8 !important; }
.cw-workspace { width: 100%; max-width: 112rem; margin-left: auto; margin-right: auto; padding-bottom: 6rem; }
.cw-surface { border: 1px solid var(--cw-border); border-radius: var(--cw-radius); background: var(--cw-surface); box-shadow: var(--cw-shadow); }
.cw-mobile-nav { padding-bottom: max(.45rem, env(safe-area-inset-bottom)); border-color: var(--cw-border); background: rgba(255,255,255,.97); }
.cw-mobile-link { display: flex; min-height: 3.35rem; flex: 1 1 0; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; color: #74807d; font-size: .625rem; font-weight: 600; }
.cw-mobile-link[aria-current="page"] { color: var(--cw-teal-dark); }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--cw-teal);
  outline-offset: 2px;
}

@media (min-width: 1024px) {
  body.ankro-sidebar-collapsed [data-nav-drawer] { display: flex !important; width: 4.5rem !important; }
  body.ankro-sidebar-collapsed [data-context-panel] { display: none; }
  body.ankro-sidebar-collapsed [data-sidebar-expand-toggle], body.ankro-sidebar-collapsed [data-brand-badge] { display: none !important; }
  /* Home: the section panel is hidden and the sidebar is just the rail (base.html's
     data-home-panel); the rail's Sections button adds this class to bring the panel in. */
  [data-nav-drawer].ankro-home-panel-open { width: 18rem; }
  [data-nav-drawer].ankro-home-panel-open [data-context-panel] { display: flex; }
  .cw-workspace { padding-bottom: 2.5rem; }
}
@media (min-width: 1920px) { .cw-context-panel { width: 15rem; flex-basis: 15rem; } }
@media (max-width: 767px) { .cw-workspace { padding-left: 1rem !important; padding-right: 1rem !important; padding-top: 1.25rem !important; } }
/* Staff pages share the Back button's left edge. Keep each page's width limit
   and internal spacing; remove only the shell inset and nested centering.
   Screen-only rules leave printed reports and document layouts unchanged. */
@media screen {
  .cw-workspace[data-content] { margin-left: 0; margin-right: 0; padding: 1rem 1.5rem 6rem; }
  .cw-workspace[data-content] > .ankro-tap { margin-bottom: .5rem; }
  .cw-workspace :is(.sf-page, .ww-page, .pw-page, .dw-page, .ct-page, .pw-workspace, .mw-workspace) { margin-left: 0; margin-right: 0; }
}
@media screen and (min-width: 1024px) {
  .cw-workspace[data-content] { padding-bottom: 2.5rem; }
}
@media screen and (max-width: 767px) {
  .cw-workspace[data-content] { padding-top: .75rem !important; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }

/* Lease workspace (lease-workspace-build-plan.md): grouped text sidebar, one section on
   screen, section footer, status line, unsaved-changes prompt. Scoped to the lw- prefix
   so nothing else in the app is touched. */
.lw-layout { display: block; }
.lw-nav { width: 12.5rem; flex: 0 0 12.5rem; position: sticky; top: 1.5rem; align-self: flex-start; max-height: calc(100vh - 3rem); overflow-y: auto; padding-right: .25rem; }
.lw-group + .lw-group { margin-top: 1.1rem; }
.lw-group-label { padding: 0 .75rem .3rem; color: #8a9692; font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.lw-link { display: flex; min-height: 2.25rem; align-items: center; justify-content: space-between; gap: .5rem; border-radius: .5rem; padding: .4rem .75rem; color: #53615e; font-size: .875rem; font-weight: 500; }
.lw-link:hover { background: #f0f4f2; color: var(--cw-text); }
.lw-link[aria-current="page"] { background: var(--cw-teal-soft); color: var(--cw-teal-dark); font-weight: 650; }
.lw-count { flex: none; color: #8a9692; font-size: .75rem; font-variant-numeric: tabular-nums; }
.lw-select-wrap { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.lw-select-label { flex: none; color: #53615e; font-size: .8125rem; font-weight: 600; }
.lw-select { min-height: 2.75rem; min-width: 0; flex: 1; border: 1px solid #cfd8d4; border-radius: .6rem; background: #fff; padding: 0 .75rem; color: var(--cw-text); font-size: 1rem; font-weight: 600; max-width: none !important; }
.lw-go { min-height: 2.75rem; border: 1px solid #cfd8d4; border-radius: .6rem; background: #fff; padding: 0 1rem; font-weight: 600; }
.lw-main { min-width: 0; flex: 1; max-width: 52rem; }
.lw-heading { display: flex; align-items: center; gap: .6rem; }
.lw-heading:focus { outline: none; }
.lw-status { margin: 0 0 .75rem; border-radius: .5rem; padding: .45rem .75rem; font-size: .8125rem; font-weight: 600; background: #f0f4f2; color: #33413e; }
.lw-status[data-state="dirty"] { background: #fff7e0; color: #7a5b00; }
.lw-status[data-state="saving"] { background: #eef4fb; color: #24507e; }
.lw-status[data-state="failed"] { background: #fdeaea; color: #a12626; }
.lw-status[data-state="saved"] { background: #e8f5ee; color: #1f6a45; }
.lw-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--cw-border); }
.lw-back { color: var(--cw-muted); font-size: .875rem; font-weight: 500; }
.lw-back:hover { color: var(--cw-text); }
.lw-continue { display: inline-flex; min-height: 2.5rem; align-items: center; border-radius: .6rem; background: var(--cw-teal); color: #fff; padding: 0 1rem; font-size: .875rem; font-weight: 600; }
.lw-continue:hover { background: var(--cw-teal-dark); }
.lw-error { border: 1px solid #f0b8b8; border-radius: .6rem; background: #fdeaea; color: #a12626; padding: .6rem .8rem; margin: 0 0 .9rem; font-size: .875rem; font-weight: 600; }
.lw-invalid { border-color: #d24b4b !important; }
.lw-dialog { max-width: 30rem; width: calc(100% - 2rem); border: 1px solid var(--cw-border); border-radius: .9rem; padding: 0; box-shadow: 0 20px 60px rgba(24,39,35,.25); }
.lw-dialog::backdrop { background: rgba(24,39,35,.4); }
.lw-dialog-body { padding: 1.25rem; }
.lw-btn-primary, .lw-btn-quiet { min-height: 2.5rem; border-radius: .6rem; padding: 0 1rem; font-size: .875rem; font-weight: 600; }
.lw-btn-primary { background: var(--cw-teal); color: #fff; }
.lw-btn-primary:hover { background: var(--cw-teal-dark); }
.lw-btn-primary[disabled] { opacity: .5; cursor: not-allowed; }
.lw-btn-quiet { border: 1px solid #cfd8d4; background: #fff; color: #33413e; }
.lw-btn-quiet:hover { background: #f0f4f2; }
.lw-schedule { width: 100%; border-collapse: collapse; font-size: .875rem; }
.lw-schedule th { padding: .35rem .6rem; text-align: left; color: #8a9692; font-size: .6875rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; border-bottom: 1px solid var(--cw-border); }
.lw-schedule td { padding: .55rem .6rem; border-bottom: 1px solid #eef1ef; vertical-align: top; }
.lw-schedule tr.lw-editor-row > td { padding: .1rem .6rem .6rem; }
.lw-schedule .lw-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lw-schedule .lw-kind { color: #66736f; }
.lw-schedule .lw-inforce { color: #1f6a45; font-weight: 600; font-size: .75rem; }
.lw-schedule tr.lw-abate td { background: #fafbfa; color: #66736f; }
@media (min-width: 1024px) { .lw-layout { display: flex; align-items: flex-start; gap: 2rem; } }
/* Activity drawer (_activity_drawer.html): the tenant's whole feed over the right edge of
   the tenant page and the lease workspace, open from the header on any tab or section and
   kept open across pages (activity-drawer.js). Closed = off-screen, inert and hidden to
   assistive tech; the visibility delay lets the slide-out finish first. */
.cw-activity-toggle { display: inline-flex; min-height: 2.25rem; align-items: center; gap: .45rem; border: 1px solid #cfd8d4; border-radius: .6rem; background: #fff; padding: 0 .75rem; color: #53615e; font-size: .8125rem; font-weight: 600; }
.cw-activity-toggle:hover { background: #f0f4f2; color: var(--cw-text); }
.cw-activity-toggle[aria-expanded="true"] { border-color: var(--cw-teal); background: var(--cw-teal-soft); color: var(--cw-teal-dark); }
.cw-activity-badge { display: inline-flex; min-width: 1.25rem; height: 1.25rem; align-items: center; justify-content: center; border-radius: 999px; background: var(--cw-teal); color: #fff; padding: 0 .35rem; font-size: .6875rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.cw-activity-badge[hidden] { display: none; }
.cw-activity { position: fixed; top: 0; right: 0; bottom: 0; z-index: 35; display: flex; width: 28rem; max-width: 100vw; flex-direction: column; background: #fff; border-left: 1px solid var(--cw-border); box-shadow: -16px 0 40px rgba(24,39,35,.12); transform: translateX(100%); visibility: hidden; transition: transform .2s ease-out, visibility 0s linear .2s; }
.cw-activity.is-open { transform: none; visibility: visible; transition: transform .2s ease-out, visibility 0s; }
.cw-activity.cw-no-transition { transition: none !important; }
.cw-activity-head { display: flex; align-items: flex-start; gap: .6rem; padding: 1.1rem 1.25rem .85rem; border-bottom: 1px solid #eef1ef; }
.cw-activity-body { display: flex; min-height: 0; flex: 1 1 auto; flex-direction: column; padding: .75rem 1.25rem 1.1rem; }
.cw-activity-body [data-thread-root] { display: flex; min-height: 0; flex: 1 1 auto; flex-direction: column; }
.cw-activity-body [data-thread-scroll] { max-height: none !important; min-height: 0; flex: 1 1 auto; }
.cw-activity-new { display: flex; align-items: center; gap: .6rem; margin: .6rem 0 .1rem 1rem; color: var(--cw-teal); font-size: .6875rem; font-weight: 700; }
.cw-activity-new::before, .cw-activity-new::after { content: ""; height: 1px; flex: 1 1 auto; background: #8dc7cb; }
/* A message that lives on a different record than the feed it shows in (a lease's, in the tenant's feed). */
.cw-scope-tag { margin-left: auto; border-radius: 999px; background: #f0f4f2; color: #66736f; padding: .05rem .45rem; font-size: .625rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 639px) { .cw-activity { width: 100vw; } }
@media (max-width: 639px) {
  .lw-schedule, .lw-schedule tbody, .lw-schedule tr, .lw-schedule td { display: block; }
  .lw-schedule thead { display: none; }
  .lw-schedule tr:not(.lw-editor-row) { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .1rem .75rem; padding: .7rem 0 .15rem; }
  .lw-schedule tr:not(.lw-editor-row) > td { padding: 0; border: 0; }
  .lw-schedule tr:not(.lw-editor-row) > td:nth-child(1) { grid-column: 1 / -1; font-weight: 600; }
  .lw-schedule tr:not(.lw-editor-row) > td:nth-child(2) { grid-column: 1; }
  .lw-schedule tr:not(.lw-editor-row) > td:nth-child(3) { grid-column: 2; text-align: right; font-weight: 600; }
  .lw-schedule tr:not(.lw-editor-row) > td:nth-child(4) { grid-column: 1 / -1; text-align: left; color: #66736f; }
  .lw-schedule tr:not(.lw-editor-row) > td:nth-child(4):empty { display: none; }
  .lw-schedule tr:not(.lw-editor-row) > td:nth-child(4)::after { content: " per SF / year"; }
  .lw-schedule tr:not(.lw-editor-row) > td:nth-child(4):empty::after { content: none; }
  .lw-schedule tr:not(.lw-editor-row) > td:nth-child(5):empty { display: none; }
  .lw-schedule tr:not(.lw-editor-row) > td:nth-child(5) { grid-column: 1 / -1; }
  .lw-schedule tr.lw-editor-row > td { padding: .25rem 0 .7rem; border-bottom: 1px solid #eef1ef; }
}
/* The phone bottom nav is fixed; a sticky Save bar at bottom:0 would sit underneath it. */
@media (max-width: 1023px) {
  .lw-layout .sticky.bottom-0 { bottom: calc(3.9rem + env(safe-area-inset-bottom)); }
  .lw-layout { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
}

/* Thread follower pill and list (_thread.html). Custom classes so the Tailwind build
   needn't know them. */
.fw { position: static; }
.fw-pill { display: inline-flex; align-items: center; gap: .5rem; padding: .15rem .6rem .15rem .4rem; border: 1px solid #d5dcd9; border-radius: 999px; background: #fff; color: var(--cw-text); font-size: .75rem; font-weight: 500; cursor: pointer; list-style: none; }
.fw-pill::-webkit-details-marker { display: none; }
.fw-pill:hover, .fw[open] > .fw-pill { background: #f0f4f2; }
.fw-stack { display: inline-flex; }
.fw-av { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 1.5rem; height: 1.5rem; margin-left: -.3rem; border: 2px solid #fff; border-radius: 999px; font-size: .625rem; font-weight: 600; }
.fw-stack .fw-av:first-child, .fw-row .fw-av { margin-left: 0; }
.fw-row .fw-av { border: 0; }
.fw-c0 { background: #cecbf6; color: #26215c; }
.fw-c1 { background: #9fe1cb; color: #04342c; }
.fw-c2 { background: #f5c4b3; color: #4a1b0c; }
.fw-c3 { background: #b5d4f4; color: #042c53; }
.fw-more { width: auto; min-width: 1.5rem; padding: 0 .35rem; background: #f0f4f2; color: var(--cw-muted); border-color: #d5dcd9; }
.fw-pop { position: absolute; left: 0; right: 0; top: calc(100% + .35rem); z-index: 30; min-width: 15rem; overflow: hidden; border: 1px solid var(--cw-border); border-radius: .75rem; background: #fff; box-shadow: 0 8px 24px rgba(24,39,35,.14); }
.fw-list { max-height: 15rem; overflow-y: auto; padding: .25rem 0; }
.fw-search { display: block; width: calc(100% - 1.25rem); margin: .35rem .625rem; padding: .3rem .6rem; border: 1px solid #d5dcd9; border-radius: .5rem; font-size: .8125rem; }
.fw-sec { padding: .5rem .75rem .15rem; color: #8a9692; font-size: .6875rem; }
.fw-row { display: flex; align-items: center; gap: .6rem; padding: .3rem .75rem; font-size: .8125rem; }
.fw-row:hover { background: #f6f7f5; }
.fw-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fw-why { margin-left: auto; padding: .05rem .5rem; border-radius: 999px; background: #f0f4f2; color: var(--cw-muted); font-size: .6875rem; white-space: nowrap; }
.fw-row form { margin-left: auto; display: flex; }
.fw-why + form { margin-left: 0; }
.fw-x { padding: 0 .35rem; border-radius: .35rem; color: #8a9692; font-size: 1rem; line-height: 1.4; }
.fw-x:hover { background: #fdecea; color: #b42318; }
.fw-foot { padding: .5rem .75rem; border-top: 1px solid var(--cw-border); color: var(--cw-muted); font-size: .6875rem; }
.fw-hint { margin: .25rem 0 0; color: var(--cw-muted); font-size: .6875rem; }
.fw-row.hidden, .fw-sec.hidden { display: none; }

/* Wide screens: an open Activity drawer sits beside the page instead of over it. */
@media (min-width: 1280px) {
  html.cw-activity-docked #app-shell > main { margin-right: 26rem; }
  html.cw-activity-docked .cw-activity { width: 26rem; box-shadow: none; }
}

/* Late fee waivers (late-fee-waivers-plan.md, mockups M1–M5). The Waive dialog (.lfw-*),
   the status chips (.lf-chip-*), the month chips of a trial (.lf-month) and the trial box
   (.lf-trial). Custom classes, so nothing depends on the Tailwind build picking them up. */
.lfw-dialog { width: calc(100% - 2rem); max-width: 37.5rem; max-height: calc(100vh - 2rem); padding: 0; border: 0; border-radius: .9rem; background: #fff; box-shadow: 0 24px 60px rgba(16,32,30,.35); color: var(--cw-text); }
.lfw-dialog::backdrop { background: rgba(24,39,35,.45); }
.lfw-page { max-width: 37.5rem; margin: 1rem auto 0; border: 1px solid var(--cw-border); border-radius: .9rem; background: #fff; box-shadow: var(--cw-shadow); }
.lfw { display: flex; flex-direction: column; }
.lfw-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; padding: 1.25rem 1.5rem .875rem; border-bottom: 1px solid #f0f2f1; }
.lfw-title { margin: 0; font-size: 1.125rem; font-weight: 600; }
.lfw-sub { margin: .2rem 0 0; color: var(--cw-muted); font-size: .8125rem; }
.lfw-close { display: grid; place-items: center; width: 2rem; height: 2rem; flex: none; border-radius: .5rem; color: #8a9692; }
.lfw-close:hover { background: #f0f4f2; color: var(--cw-text); }
.lfw-body { display: flex; flex-direction: column; gap: 1.125rem; padding: 1.125rem 1.5rem; }
.lfw-fees { display: flex; flex-direction: column; gap: .5rem; }
.lfw-fee { display: flex; flex-direction: column; gap: .5rem; padding: .875rem 1rem; border: 1px solid var(--cw-border); border-radius: .625rem; background: #f7f9f8; }
.lfw-fee-top { display: flex; align-items: baseline; gap: .6rem; }
.lfw-fee-top input { align-self: center; accent-color: var(--cw-teal); }
.lfw-fee-name { flex: 1 1 auto; min-width: 0; font-size: .9375rem; font-weight: 600; }
.lfw-fee-amount { font-size: 1.125rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lfw-meta { margin: 0; color: var(--cw-muted); font-size: .75rem; line-height: 1.5; }
.lfw-before { display: flex; align-items: flex-start; gap: .5rem; margin: 0; padding-top: .625rem; border-top: 1px solid #e7ebe9; color: #374151; font-size: .75rem; line-height: 1.5; }
.lfw-before svg { flex: none; margin-top: .1rem; color: var(--cw-teal); }
.lfw-before strong { font-weight: 600; }
.lfw-link { color: var(--cw-teal); font-weight: 500; }
.lfw-link:hover { color: var(--cw-teal-dark); }
.lfw-modes { display: flex; flex-direction: column; gap: .625rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.lfw-label { display: flex; align-items: center; gap: .5rem; margin-bottom: .1rem; padding: 0; font-size: .8125rem; font-weight: 600; }
.lfw-option { display: flex; align-items: flex-start; gap: .75rem; padding: .875rem 1rem; border: 1px solid var(--cw-border); border-radius: .625rem; background: #fff; cursor: pointer; }
.lfw-option > input, .lfw-email > input { flex: none; width: 1.05rem; height: 1.05rem; margin: .15rem 0 0; accent-color: #2f7f88; }
.lfw-option > span, .lfw-email > label { display: flex; flex-direction: column; gap: .2rem; }
.lfw-option-title { font-size: .875rem; font-weight: 600; color: var(--cw-text); }
.lfw-option-text { font-size: .75rem; line-height: 1.5; color: var(--cw-muted); }
.lfw-option:has(> input:checked) { border-color: #2f7f88; box-shadow: 0 0 0 1px #2f7f88; background: #f2f8f8; }
.lfw-option-group { display: flex; flex-direction: column; border-radius: .625rem; }
.lfw-option-group:has(.lfw-option > input:checked) { box-shadow: 0 0 0 1px #2f7f88; border: 1px solid #2f7f88; background: #f2f8f8; }
.lfw-option-group:has(.lfw-option > input:checked) .lfw-option { border-color: transparent; box-shadow: none; background: transparent; }
.lfw-trial { display: none; flex-direction: column; gap: .625rem; padding: 0 1rem .875rem 2.85rem; }
.lfw-option-group:has(.lfw-option > input:checked) .lfw-trial { display: flex; }
.lfw-months { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.lfw-chip { position: relative; }
.lfw-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lfw-chip span { display: inline-flex; align-items: center; height: 2rem; padding: 0 .75rem; border: 1px solid #d9dfdc; border-radius: .5rem; background: #fff; font-size: .8125rem; font-weight: 500; cursor: pointer; }
.lfw-chip input:checked + span { border-color: #2f7f88; background: #2f7f88; color: #fff; }
.lfw-chip input:focus-visible + span { outline: 2px solid var(--cw-teal); outline-offset: 2px; }
.lfw-other { display: inline-flex; align-items: center; gap: .375rem; color: #53615e; font-size: .75rem; }
.lfw-other[hidden] { display: none; }
.lfw-other input { width: 3.5rem; height: 2rem; padding: 0 .5rem; border: 1px solid #d1d5db; border-radius: .5rem; font-size: .8125rem; }
.lfw-range { margin: 0; color: var(--cw-teal-dark); font-size: .75rem; font-weight: 500; }
.lfw-callout { margin: 0; padding: .75rem 1rem; border: 1px solid #fde68a; border-radius: .625rem; background: #fffbeb; color: #78350f; font-size: .8125rem; line-height: 1.5; }
.lfw-field { display: flex; flex-direction: column; gap: .375rem; }
.lfw-field textarea { width: 100%; max-width: none !important; resize: vertical; padding: .625rem .75rem; border: 1px solid #d1d5db; border-radius: .625rem; font: inherit; font-size: .875rem; line-height: 1.5; box-sizing: border-box; }
.lfw-field textarea:focus { border-color: var(--cw-teal); outline: none; box-shadow: 0 0 0 1px var(--cw-teal); }
.lfw-required { padding: .05rem .45rem; border-radius: 999px; background: #fee2e2; color: #991b1b; font-size: .625rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.lfw-help { margin: 0; color: var(--cw-muted); font-size: .75rem; }
.lfw-email { display: flex; align-items: flex-start; gap: .625rem; padding: .75rem .875rem; border: 1px solid var(--cw-border); border-radius: .625rem; }
.lfw-email > label { flex: 1 1 auto; min-width: 0; font-size: .8125rem; cursor: pointer; }
.lfw-email > input:disabled + label { cursor: default; opacity: .75; }
.lfw-email .lfw-link { flex: none; font-size: .75rem; }
.lfw-foot { display: flex; align-items: center; justify-content: flex-end; gap: .625rem; padding: .875rem 1.5rem 1.125rem; border-top: 1px solid #f0f2f1; }
.lfw-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.5rem; padding: 0 1rem; border-radius: .5rem; font-size: .875rem; font-weight: 500; white-space: nowrap; cursor: pointer; }
.lfw-btn-quiet { border: 1px solid #d9dfdc; background: #fff; color: var(--cw-text); }
.lfw-btn-quiet:hover { background: #f6f7f5; }
.lfw-btn-primary { border: 0; background: #2f7f88; color: #fff; font-weight: 600; }
.lfw-btn-primary:hover { background: var(--cw-teal-dark); }
.lfw-btn-primary:disabled { background: #9fb8b5; cursor: not-allowed; }
@media (max-width: 640px) {
  .lfw-head, .lfw-body, .lfw-foot { padding-left: 1rem; padding-right: 1rem; }
  .lfw-trial { padding-left: 1rem; }
}

.lf-chip { display: inline-flex; align-items: center; padding: .1rem .5rem; border-radius: 999px; font-size: .6875rem; font-weight: 600; white-space: nowrap; }
.lf-chip-on_trial { background: #fef3c7; color: #92400e; }
.lf-chip-waived { background: var(--cw-teal-soft); color: var(--cw-teal-dark); }
.lf-chip-paid { background: #ecfdf5; color: #047857; }
.lf-chip-trial_ended { background: #fee2e2; color: #991b1b; }
.lf-chip-unpaid, .lf-chip-partly_paid { background: #fff1e6; color: #9a3412; }
.lf-chip-pending, .lf-chip-voided { background: #f3f4f6; color: #4b5563; }
.lf-months { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.lf-month { display: inline-flex; align-items: center; gap: .25rem; height: 1.625rem; padding: 0 .6rem; border-radius: 999px; font-size: .6875rem; font-weight: 600; }
.lf-month-on_time { background: #047857; color: #fff; }
.lf-month-pending { border: 1px dashed #d6b25e; color: #92400e; }
.lf-month-late { background: #b91c1c; color: #fff; }
.lf-trial { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem 1.25rem; padding: 1rem 1.125rem; border: 1px solid #fde68a; border-radius: .75rem; background: #fffbeb; }
.lf-trial-title { margin: 0; color: #78350f; font-size: .875rem; font-weight: 600; }
.lf-trial-text { margin: .25rem 0 0; color: #92400e; font-size: .8125rem; line-height: 1.5; }
.lf-trial-meta { margin: 0; color: #92400e; font-size: .75rem; }
.lf-trial > :first-child { flex: 1 1 26rem; }
.lf-trial-actions { display: flex; flex: none; flex-direction: column; align-items: flex-end; gap: .375rem; }
.lf-tag-late-fee { margin-left: auto; padding: .05rem .45rem; border-radius: 999px; background: #fef3c7; color: #92400e; font-size: .625rem; font-weight: 700; letter-spacing: .04em; }

/* Ask (templates/assistant/_panel.html, static/js/ask.js — ai-assistant-plan.md §2–3): a
   floating chat box. The pill sits bottom-right of the page; the pop-up opens above it and
   never moves the page. Both shift left of a docked Activity drawer so the two can be open
   at once. Below 768px the pop-up is a full-screen sheet and the pill sits above the bottom
   navigation. Closed = off-screen, inert and hidden to assistive tech. */
.ask-pill { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 34; display: inline-flex; align-items: center; gap: .5rem; height: 2.75rem; padding: 0 1.125rem 0 .875rem; border: 0; border-radius: 999px; background: var(--cw-teal); color: #fff; font-size: .875rem; font-weight: 600; box-shadow: 0 10px 30px rgba(24,39,35,.25); cursor: pointer; transition: transform .15s ease-out, opacity .15s ease-out; }
.ask-pill:hover { background: var(--cw-teal-dark); }
.ask-pill.is-hidden { opacity: 0; transform: translateY(.5rem); pointer-events: none; }
.ask-panel { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 36; display: flex; width: 25rem; max-width: calc(100vw - 3rem); height: 47rem; max-height: calc(100vh - 6rem); flex-direction: column; background: #fff; border: 1px solid var(--cw-border); border-radius: 1rem; box-shadow: 0 20px 60px rgba(24,39,35,.22); overflow: hidden; transform: translateY(1rem); opacity: 0; visibility: hidden; transition: transform .18s ease-out, opacity .18s ease-out, visibility 0s linear .18s; }
.ask-panel.is-open { transform: none; opacity: 1; visibility: visible; transition: transform .18s ease-out, opacity .18s ease-out, visibility 0s; }
.ask-panel.is-expanded { width: 34rem; height: calc(100vh - 3rem); max-height: calc(100vh - 3rem); }
.ask-panel.ask-no-transition, .ask-panel.ask-no-transition * { transition: none !important; }
@media (min-width: 1280px) { html.cw-activity-docked .ask-pill, html.cw-activity-docked .ask-panel { right: calc(26rem + 1.5rem); } }
.ask-head { display: flex; align-items: flex-start; gap: .6rem; padding: 1.1rem 1.25rem .85rem; border-bottom: 1px solid #eef1ef; }
.ask-chip-icon { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; flex: none; border-radius: .5rem; background: var(--cw-teal-soft); color: var(--cw-teal); }
.ask-head-text { min-width: 0; flex: 1; }
.ask-head-text h2 { margin: 0; font-size: 1rem; font-weight: 600; color: var(--cw-text); }
.ask-head-text h2:focus { outline: none; }
.ask-head-text p { margin: .1rem 0 0; font-size: .75rem; color: var(--cw-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ask-head-btn { border: 0; background: transparent; color: #8a9692; cursor: pointer; border-radius: .5rem; }
.ask-head-btn:hover { background: #f0f4f2; color: var(--cw-text); }
.ask-head-new { min-height: 1.875rem; padding: 0 .625rem; border: 1px solid #cfd8d4; background: #fff; color: #53615e; font-size: .75rem; font-weight: 600; }
.ask-head-icon { display: grid; place-items: center; width: 2rem; height: 2rem; flex: none; }
.ask-thread { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
.ask-empty { margin: auto 0; font-size: .875rem; color: var(--cw-muted); text-align: center; padding: 1rem; }
.ask-exchange { display: flex; flex-direction: column; gap: .75rem; }
.ask-q { display: flex; justify-content: flex-end; }
.ask-q-bubble { max-width: 85%; padding: .55rem .8rem; border-radius: .875rem .875rem .25rem .875rem; background: #f0f4f2; color: var(--cw-text); font-size: .875rem; white-space: pre-wrap; word-break: break-word; }
.ask-a { display: flex; flex-direction: column; gap: .6rem; font-size: .875rem; color: var(--cw-text); }
.ask-a p { margin: 0; line-height: 1.5; word-break: break-word; }
.ask-badge { align-self: flex-start; display: inline-flex; align-items: center; gap: .375rem; padding: .2rem .625rem; border-radius: 999px; background: #f0f4f2; color: #53615e; font-size: .75rem; font-weight: 600; }
.ask-badge-not_in_system { background: #fff7e0; color: #7a5b00; }
.ask-badge-error, .ask-badge-limit { background: #fdeaea; color: #a12626; }
.ask-facts { border: 1px solid var(--cw-border); border-radius: var(--cw-radius); background: #fff; box-shadow: var(--cw-shadow); padding: .7rem .875rem; display: flex; flex-direction: column; gap: .4rem; font-size: .8125rem; }
.ask-facts-title { font-size: .6875rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #8a9692; margin-bottom: .1rem; }
.ask-fact { display: flex; justify-content: space-between; gap: .75rem; }
.ask-fact-label { color: var(--cw-muted); flex: none; }
.ask-fact-value { text-align: right; font-variant-numeric: tabular-nums; min-width: 0; word-break: break-word; }
.ask-fact:first-of-type .ask-fact-value { font-weight: 650; }
.ask-sources { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; font-size: .75rem; }
.ask-sources-label { color: #8a9692; font-weight: 600; }
.ask-sources a { display: inline-flex; align-items: center; padding: .2rem .55rem; border: 1px solid #cfe0e0; border-radius: 999px; background: #fff; color: var(--cw-teal-dark); font-weight: 600; text-decoration: none; }
.ask-sources a:hover { background: var(--cw-teal-soft); }
.ask-trace { font-size: .75rem; color: var(--cw-muted); }
.ask-trace summary { cursor: pointer; font-weight: 600; color: #8a9692; }
.ask-trace ul { margin: .375rem 0 0; padding: 0 0 0 .75rem; list-style: none; display: flex; flex-direction: column; gap: .15rem; }
.ask-trace-miss { color: #7a5b00; }
.ask-thinking { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--cw-text); }
.ask-spinner { display: block; width: .875rem; height: .875rem; border-radius: 999px; border: 2px solid #cfe0e0; border-top-color: var(--cw-teal); box-sizing: border-box; animation: ask-spin .8s linear infinite; }
@keyframes ask-spin { to { transform: rotate(360deg); } }
.ask-skeleton { display: flex; flex-direction: column; gap: .5rem; margin-top: .25rem; }
.ask-skeleton span { display: block; height: .625rem; border-radius: 999px; background: #eef1ef; }
.ask-composer { flex: none; padding: .75rem 1.25rem 1rem; border-top: 1px solid #eef1ef; display: flex; flex-direction: column; gap: .6rem; }
.ask-warn { margin: 0; font-size: .75rem; color: #7a5b00; }
.ask-chips { display: flex; flex-wrap: wrap; gap: .375rem; }
.ask-chip { padding: .3rem .625rem; border: 1px solid #cfd8d4; border-radius: 999px; background: #fff; color: #33413e; font-size: .75rem; font-weight: 500; cursor: pointer; }
.ask-chip:hover { background: #f0f4f2; }
.ask-form { display: flex; align-items: flex-end; gap: .5rem; }
.ask-form textarea { flex: 1; min-width: 0; resize: none; border: 1px solid #cfd8d4; border-radius: .625rem; padding: .55rem .75rem; font: inherit; font-size: .875rem; color: var(--cw-text); background: #fff; max-width: none !important; }
.ask-form textarea:disabled { background: #fbfcfb; color: #8a9692; }
.ask-send { min-height: 2.5rem; padding: 0 .875rem; border: 0; border-radius: .625rem; background: var(--cw-teal); color: #fff; font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; }
.ask-send:hover { background: var(--cw-teal-dark); }
.ask-send:disabled { opacity: .5; cursor: not-allowed; }
.ask-note { margin: 0; font-size: .6875rem; color: #8a9692; }
@media (max-width: 767px) {
  .ask-pill { right: 1rem; bottom: calc(4.25rem + env(safe-area-inset-bottom)); }
  /* Room under the page so the last rows scroll clear of the floating Ask pill. */
  .cw-workspace[data-content] { padding-bottom: calc(7.5rem + env(safe-area-inset-bottom)) !important; }
  .ask-panel, .ask-panel.is-expanded { inset: 0; width: auto; max-width: none; height: auto; max-height: none; border-radius: 0; border: 0; transform: translateY(100%); }
  .ask-panel.is-open { transform: none; }
  .ask-head { padding-top: calc(.75rem + env(safe-area-inset-top)); }
  .ask-head-icon[data-ask-expand] { display: none; }
  .ask-composer { padding-bottom: calc(.75rem + env(safe-area-inset-bottom)); }
  .ask-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .125rem; }
  .ask-chip { flex: none; min-height: 2.25rem; font-size: .8125rem; }
  .ask-form textarea { font-size: 1rem; }
}

/* Ask confirmation cards (assistant/_action_card.html): a change Ask prepared, waiting for one click. */
.ask-card { border: 1px solid var(--cw-teal); border-radius: var(--cw-radius); background: #fff; box-shadow: var(--cw-shadow); overflow: hidden; font-size: .8125rem; margin: 0; }
.ask-card.is-quiet { border-color: var(--cw-border); }
.ask-card-top { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .55rem .875rem; background: var(--cw-teal-soft); color: var(--cw-teal-dark); font-size: .6875rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.ask-card.is-quiet .ask-card-top { background: #f0f4f2; color: var(--cw-muted); }
.ask-card-tag { font-weight: 600; letter-spacing: 0; text-transform: none; font-size: .75rem; }
.ask-card-fields { margin: 0; padding: .375rem .875rem; display: flex; flex-direction: column; }
.ask-card-row { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; gap: .5rem; align-items: baseline; padding: .45rem 0; border-bottom: 1px solid #eef1ef; }
.ask-card-row:last-child { border-bottom: 0; }
.ask-card-row dt { color: var(--cw-muted); }
.ask-card-row dd { margin: 0; min-width: 0; word-break: break-word; }
.ask-card-input { width: 100%; max-width: none; min-height: 2rem; padding: .25rem .5rem; border: 1px solid #cfd8d4; border-radius: .5rem; font: inherit; background: #fff; color: var(--cw-text); }
.ask-card .ask-card-input[hidden] { display: none !important; }
.ask-card-text { min-height: 7rem; resize: vertical; }
.ask-card-edit { border: 0; background: none; color: var(--cw-teal); font: inherit; font-size: .75rem; font-weight: 600; cursor: pointer; padding: .1rem .3rem; border-radius: .375rem; }
.ask-card-edit:hover { background: var(--cw-teal-soft); }
.ask-card-preview { margin: 0 .875rem .6rem; padding: .6rem .75rem; background: #f0f4f2; border-radius: .5rem; display: flex; flex-direction: column; gap: .4rem; }
.ask-card-preview p { margin: 0; white-space: pre-wrap; }
.ask-card-preview .ask-card-edit { align-self: flex-start; padding-left: 0; }
.ask-card-problem { margin: 0 .875rem .5rem; padding: .45rem .6rem; border-radius: .5rem; background: #fdeaea; color: #a12626; font-size: .75rem; }
.ask-card-done .ask-card-problem { margin: .4rem 0 0; }
.ask-card-note { padding: .5rem .875rem; border-top: 1px solid #eef1ef; font-size: .75rem; color: var(--cw-muted); }
.ask-card-actions { display: flex; flex-wrap: wrap; gap: .5rem; padding: .7rem .875rem; border-top: 1px solid #eef1ef; }
.ask-card-btn { min-height: 2.25rem; padding: 0 .95rem; border: 1px solid #cfd8d4; border-radius: .5rem; background: #fff; color: var(--cw-text); font: inherit; font-size: .8125rem; font-weight: 600; cursor: pointer; }
.ask-card-btn.is-primary { background: var(--cw-teal); border-color: var(--cw-teal); color: #fff; }
.ask-card-btn.is-primary:hover { background: var(--cw-teal-dark); }
.ask-card-btn:disabled { opacity: .6; cursor: default; }
.ask-card-btn:focus-visible, .ask-card-edit:focus-visible, .ask-card-links button:focus-visible { outline: 2px solid var(--cw-teal); outline-offset: 2px; }
.ask-card-done { display: flex; gap: .6rem; align-items: flex-start; padding: .75rem .875rem; }
.ask-card-mark { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; flex: none; border-radius: 999px; background: #f0f4f2; color: var(--cw-muted); font-size: .75rem; font-weight: 800; }
.ask-card-mark-confirmed { background: #e3f3e8; color: #1d6b3a; }
.ask-card-mark-expired, .ask-card-mark-failed { background: #fff4d6; color: #7a5b00; }
.ask-card-links { display: flex; gap: .75rem; margin-top: .25rem; font-size: .75rem; }
.ask-card-links a, .ask-card-links button { color: var(--cw-teal); font: inherit; font-size: .75rem; font-weight: 600; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 767px) {
  .ask-card-actions { flex-direction: column; }
  .ask-card-btn { min-height: 2.75rem; }
  .ask-card-input { font-size: 1rem; }
}

/* Show / Copy icon buttons beside saved logins, bank numbers and utility passwords are 16px
   glyphs. On a phone they get a roughly 28 x 44 tap area without moving anything: the
   pseudo-element extends the hit box only, and stays clear of the next icon (gap-x-3). */
@media (max-width: 767px) {
  [data-login-show], [data-login-copy], [data-copy-value] { position: relative; }
  [data-login-show]::after, [data-login-copy]::after, [data-copy-value]::after {
    content: ""; position: absolute; top: -14px; bottom: -14px; left: -6px; right: -6px;
  }
}