/* ======================================================================
   Event Organizer — application UI
   ----------------------------------------------------------------------
   Two distinct registers, on purpose:

   SCREEN   a business application. Neutral canvas, white cards, one dark
            brand bar, Inter throughout, dense readable data tables.
   PAPER    a formal contract. The letterhead (hidden on screen, and kept
            in <thead> so it repeats on every page) plus serif document
            body. Section 18 strips the screen decoration back to ink.
   ====================================================================== */

/* ======================================================================
   1. Tokens
   ====================================================================== */
:root{
  /* Canvas & surfaces */
  --canvas:#F3F5F4;
  --surface:#FFFFFF;
  --surface-2:#F8FAF9;
  --surface-3:#EDF1EF;

  /* Ink */
  --ink:#141A18;
  --ink-2:#4A554F;
  --ink-3:#77837C;
  --ink-inv:#FFFFFF;

  /* Brand */
  --brand:#1B4A40;
  --brand-dark:#12332C;
  --brand-darker:#0C241F;
  --brand-light:#2A6B5C;
  --brand-tint:#E8F0ED;

  /* Accent — used sparingly: active markers, focus, key figures */
  --accent:#C08A2E;
  --accent-light:#D9A94F;
  --accent-tint:#FBF3E4;

  /* Borders */
  --line:#DDE3E0;
  --line-2:#E9EDEB;
  --line-strong:#C4CEC9;

  /* Status */
  --ok:#17693F;        --ok-bg:#E6F2EB;    --ok-bd:#B5D8C4;
  --warn:#9A6B12;      --warn-bg:#FBF1DE;  --warn-bd:#E6CF9E;
  --danger:#A63A2B;    --danger-bg:#FAEAE7; --danger-bd:#E8BDB4;
  --neutral:#41525C;   --neutral-bg:#EBEFF2; --neutral-bd:#C6D2D9;

  /* Shape & depth — restrained; this is software, not a brochure */
  --r-xs:4px;
  --r-sm:6px;
  --r:8px;
  --r-lg:12px;
  --sh-1:0 1px 2px rgba(20,26,24,.05);
  --sh-2:0 1px 3px rgba(20,26,24,.07), 0 4px 12px -4px rgba(20,26,24,.09);
  --sh-3:0 12px 32px -8px rgba(12,36,31,.28), 0 4px 10px -4px rgba(12,36,31,.16);
  --ring:0 0 0 3px rgba(27,74,64,.18);

  /* Type */
  --f-ui:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --f-doc:"Source Serif 4",Georgia,"Times New Roman",serif;
  --f-num:"Inter",-apple-system,"Segoe UI",sans-serif;

  --t:.15s cubic-bezier(.4,0,.2,1);

  /* Layout */
  --shell:1180px;
  --gutter:24px;

  font-size:16px;
}

*{box-sizing:border-box;}

html{-webkit-text-size-adjust:100%;}

body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--f-ui);
  font-size:.9375rem;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{color:var(--brand);text-decoration:none;}
a:hover{text-decoration:underline;text-underline-offset:2px;}

h1,h2,h3,h4{font-weight:600;letter-spacing:-.011em;}

:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
  border-radius:var(--r-xs);
}

.hidden{display:none!important;}
/* The `hidden` attribute must beat any author `display` — .btn sets inline-flex, which would
   otherwise keep a hidden button (Back on the first step, Continue on the last) on screen. */
[hidden]{display:none!important;}
.muted{color:var(--ink-2);font-size:.875rem;}
.hint{color:var(--ink-3);font-size:.75rem;}
.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;}
.table-scroll{overflow-x:auto;}
/* The registry is both a card and a scroller. `.card` sets `overflow` later in this file, which
   would win and clip the wide columns away with no way to reach them — so restate the axes. */
.card.table-scroll{overflow-x:auto;overflow-y:clip;}
.label-font{font-variant-numeric:tabular-nums;letter-spacing:.01em;}
form.inline{display:inline;margin:0;}

/* The print wrapper: plain blocks on screen, a real table on paper.
   Scoped to this table's OWN rows with `>`. As a descendant selector it also flattened every
   nested table on the page — charges, furniture, totals, the registry — into stacked blocks. */
.page-table{width:100%;border-collapse:collapse;display:block;}
.page-table > thead,.page-table > tbody,
.page-table > thead > tr,.page-table > tbody > tr,
.page-table > thead > tr > td,.page-table > tbody > tr > td{
  display:block;padding:0;border:none;
}

/* ======================================================================
   2. Letterhead — paper only
   ====================================================================== */
.letterhead,.letterhead-rule{display:none;}

/* ======================================================================
   3. Application bar
   ====================================================================== */
.appbar{
  position:sticky;top:0;z-index:50;
  background:linear-gradient(180deg,var(--brand-dark),var(--brand-darker));
  border-bottom:1px solid rgba(0,0,0,.3);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, var(--sh-1);
}
.appbar-inner{
  max-width:var(--shell);
  margin:0 auto;
  padding:0 var(--gutter);
  display:flex;align-items:stretch;gap:8px;
  min-height:58px;
}

/* -- Brand -- */
.brand{
  display:flex;align-items:center;gap:11px;
  padding:9px 18px 9px 0;
  margin-right:6px;
  border-right:1px solid rgba(255,255,255,.12);
  color:var(--ink-inv);
  text-decoration:none;
  flex:none;
}
.brand:hover{text-decoration:none;}
.brand-mark{
  height:34px;width:34px;object-fit:contain;
  background:#FFFFFF;
  border-radius:var(--r-sm);
  padding:3px;
  flex:none;
}
.brand-text{display:flex;flex-direction:column;line-height:1.15;}
.brand-text strong{
  font-size:.95rem;font-weight:600;letter-spacing:-.01em;color:#FFFFFF;
}
.brand-text span{
  font-size:.7rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.52);
}

/* -- Nav -- */
.appnav{display:flex;align-items:stretch;gap:1px;flex:1;min-width:0;flex-wrap:wrap;}
.appnav a{
  position:relative;
  display:inline-flex;align-items:center;
  padding:0 15px;
  font-size:.875rem;font-weight:500;
  color:rgba(255,255,255,.74);
  text-decoration:none;
  border-radius:var(--r-sm) var(--r-sm) 0 0;
  transition:color var(--t),background var(--t);
  white-space:nowrap;
}
.appnav a:hover{color:#FFFFFF;background:rgba(255,255,255,.07);text-decoration:none;}
.appnav a.active{color:#FFFFFF;font-weight:600;}
/* How many items are waiting on the Approvals tab. */
.nav-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;margin-left:7px;padding:0 5px;
  border-radius:100px;
  background:var(--accent);color:var(--brand-darker);
  font-size:.6875rem;font-weight:700;font-variant-numeric:tabular-nums;
}
.appnav a.active::after{
  content:"";
  position:absolute;left:11px;right:11px;bottom:0;height:2px;
  background:var(--accent-light);
  border-radius:2px 2px 0 0;
}

/* An admin has eight tabs, which do not fit beside the brand and the account at the normal size.
   The bar must stay one row — the sticky table heads and the step rail sit 58px under it — so the
   tabs tighten, and as the window narrows the account name and then the brand text give way. */
@media (min-width:1001px){
  .many-tabs .appnav a{padding:0 9px;font-size:.8125rem;}
  .many-tabs .brand{padding-right:12px;margin-right:2px;}
  .many-tabs .appbar-user{padding-left:12px;gap:9px;}
  .many-tabs .who-name{max-width:96px;}
}
@media (min-width:1001px) and (max-width:1215px){
  .many-tabs .who{display:none;}
}
@media (min-width:1001px) and (max-width:1110px){
  .many-tabs .brand-text{display:none;}
}

/* -- Account cluster -- */
.appbar-user{
  display:flex;align-items:center;gap:11px;
  padding:9px 0 9px 18px;
  margin-left:auto;
  border-left:1px solid rgba(255,255,255,.12);
  flex:none;
  font-size:.8125rem;
}
.avatar{
  width:31px;height:31px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);
  color:#FFFFFF;
  font-size:.72rem;font-weight:600;letter-spacing:.02em;
  flex:none;
}
.who{display:flex;flex-direction:column;line-height:1.2;min-width:0;}
.who-name{
  color:#FFFFFF;font-weight:500;font-size:.8125rem;
  max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.role-tag{
  font-size:.65rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase;
  color:var(--accent-light);
}
.appbar-user .navlink,
.appbar-user .linkbtn{
  color:rgba(255,255,255,.7);
  font-family:inherit;font-size:.8125rem;font-weight:500;
  background:none;border:none;padding:0;cursor:pointer;text-decoration:none;
  transition:color var(--t);
}
.appbar-user .navlink:hover,
.appbar-user .linkbtn:hover{color:#FFFFFF;text-decoration:underline;text-underline-offset:2px;}
.linkbtn{
  background:none;border:none;padding:0;cursor:pointer;
  font:inherit;color:var(--brand);text-decoration:underline;text-underline-offset:2px;
}
.linkbtn.signout-dark{color:var(--brand);}

/* ======================================================================
   4. Shell, page header, cards
   ====================================================================== */
main{
  max-width:var(--shell);
  margin:0 auto;
  padding:26px var(--gutter) 48px;
}

/* Copyright footer at the foot of every page (screen only). */
.site-footer{
  max-width:var(--shell);margin:0 auto;
  padding:16px var(--gutter) 22px;
  border-top:1px solid var(--line);
  text-align:center;font-size:.8125rem;color:var(--neutral);
}
.site-footer strong{color:var(--brand);font-weight:600;}
.site-footer a:hover strong{text-decoration:underline;text-underline-offset:2px;}
.site-footer.on-dark{
  position:absolute;left:0;right:0;bottom:0;
  max-width:none;border-top:none;
  color:rgba(255,255,255,.6);
}
.site-footer.on-dark strong{color:var(--accent-light);}

.page-head{
  display:flex;justify-content:space-between;align-items:center;
  gap:14px;flex-wrap:wrap;
  margin:0 0 20px;
}
.page-head h2{
  margin:0;
  font-size:1.375rem;font-weight:600;
  color:var(--ink);letter-spacing:-.018em;
}

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  /* `clip` keeps the rounded corners without making the card a scroll container — `hidden` does,
     and that silently disables position:sticky inside it (the action bar, the step rail, the
     registry's table head). Browsers without `clip` fall back to the line above. */
  overflow:hidden;
  overflow:clip;
}
.card.pad{padding:22px 24px;}
.card + .card{margin-top:18px;}
.card h3{
  margin:0 0 16px;
  font-size:.8125rem;font-weight:600;
  letter-spacing:.02em;
  color:var(--ink);
  padding-bottom:10px;
  border-bottom:1px solid var(--line-2);
}
.card.narrow{max-width:480px;}
.card.narrow .field{margin-bottom:16px;}
.card.narrow input[type=password]{width:100%;}

.list-title{
  font-size:.8125rem;font-weight:600;letter-spacing:.02em;
  color:var(--ink-2);margin:24px 0 10px;
}

/* ======================================================================
   5. Buttons
   ====================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-family:var(--f-ui);
  font-size:.875rem;font-weight:500;line-height:1.2;
  padding:9px 15px;
  border-radius:var(--r-sm);
  border:1px solid var(--line-strong);
  background:var(--surface);
  color:var(--ink);
  cursor:pointer;text-decoration:none;white-space:nowrap;
  box-shadow:var(--sh-1);
  transition:background var(--t),border-color var(--t),color var(--t),box-shadow var(--t);
}
a.btn{display:inline-flex;}
.btn:hover{background:var(--surface-2);border-color:var(--ink-3);text-decoration:none;}
.btn:active{background:var(--surface-3);box-shadow:none;}

.btn.primary{
  background:var(--brand);
  border-color:var(--brand);
  color:var(--ink-inv);
  font-weight:600;
}
.btn.primary:hover{background:var(--brand-light);border-color:var(--brand-light);}
.btn.primary:active{background:var(--brand-dark);}

.btn.danger{
  background:var(--surface);
  border-color:var(--danger-bd);
  color:var(--danger);
  font-weight:500;
}
.btn.danger:hover{background:var(--danger-bg);border-color:var(--danger);}

.btn.small{padding:6px 11px;font-size:.8125rem;}
/* Quiet button: navigation and cancels, which must not compete with the action that saves. */
.btn.ghost{background:transparent;border-color:var(--line-strong);color:var(--ink-2);box-shadow:none;}
.btn.ghost:hover{background:var(--surface-2);border-color:var(--ink-3);color:var(--ink);}
.btn:disabled,.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed;}

/* The action bar sits on a dark strip; its buttons invert. */
.actionbar .btn{
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.22);
  color:#FFFFFF;
  box-shadow:none;
}
.actionbar .btn:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.4);}
.actionbar .btn.primary{background:var(--accent);border-color:var(--accent);color:#1A1207;font-weight:600;}
.actionbar .btn.primary:hover{background:var(--accent-light);border-color:var(--accent-light);}
.actionbar .btn.danger{background:rgba(166,58,43,.22);border-color:rgba(232,189,180,.45);color:#F3C8C0;}
.actionbar .btn.danger:hover{background:rgba(166,58,43,.36);border-color:#E8BDB4;}
.actionbar a.btn{color:#FFFFFF;}
.actionbar .btn.ghost{background:transparent;border-color:rgba(255,255,255,.28);color:rgba(255,255,255,.82);}
.actionbar .btn.ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5);color:#FFFFFF;}

/* ======================================================================
   6. Forms
   ====================================================================== */
input[type=text],input[type=number],input[type=date],input[type=time],
input[type=password],input[type=email],select,textarea{
  font-family:var(--f-ui);
  font-size:.875rem;
  color:var(--ink);
  padding:9px 11px;
  min-height:40px;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:var(--surface);
  width:100%;
  transition:border-color var(--t),box-shadow var(--t),background var(--t);
}
input::placeholder,textarea::placeholder{color:var(--ink-3);}
input[type=text]:hover,input[type=number]:hover,input[type=date]:hover,input[type=time]:hover,
input[type=password]:hover,input[type=email]:hover,select:hover,textarea:hover{border-color:var(--line-strong);}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--brand);
  box-shadow:var(--ring);
}
/* A field the server complained about carries the red on the control, not only on the message. */
.field:has(.field-error) :is(input,select,textarea){border-color:var(--danger);background:var(--danger-bg);}
.field:has(.field-error) :is(input,select,textarea):focus{box-shadow:0 0 0 3px rgba(166,58,43,.16);}
input[type=date],input[type=time],input[type=number]{width:100%;}
textarea{resize:vertical;min-height:62px;line-height:1.5;}
select{
  cursor:pointer;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%234A554F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 11px center;
  padding-right:32px;
}
select:open{border-color:var(--brand);box-shadow:var(--ring);}   /* on its own: older browsers drop the rule */

/* Customizable select (Chrome / Edge 135+): the open list is styled too. Every other browser keeps
   its own list under the styled box above, so nothing depends on this. */
@supports (appearance: base-select){
  select,::picker(select){appearance:base-select;}
  select{
    display:flex;align-items:center;gap:8px;
    background-image:none;padding-right:11px;   /* the picker icon below draws the arrow */
  }
  select::picker-icon{
    content:"";flex:none;width:12px;height:8px;margin-left:auto;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%234A554F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E") no-repeat center;
    transition:transform var(--t);
  }
  select:open::picker-icon{transform:rotate(180deg);}
  select:disabled::picker-icon{opacity:.35;}

  ::picker(select){
    margin-top:4px;padding:4px;
    max-height:min(360px,60vh);overflow-y:auto;
    background:var(--surface);
    border:1px solid var(--line);border-radius:var(--r);
    box-shadow:var(--sh-3);
  }
  select option{
    display:flex;align-items:center;gap:10px;
    padding:8px 10px;border-radius:var(--r-xs);
    font-size:.875rem;font-weight:400;color:var(--ink);line-height:1.35;
    letter-spacing:normal;text-transform:none;   /* not the group heading's */
    cursor:pointer;
  }
  select option:hover,select option:focus-visible{background:var(--surface-3);outline:none;}
  select option:checked{background:var(--brand-tint);color:var(--brand-dark);font-weight:600;}
  select option::checkmark{order:1;margin-left:auto;content:"\2713";color:var(--brand);font-weight:700;}
  select option:disabled{color:var(--ink-3);cursor:default;background:none;}

  /* Groups (dishes by category): the optgroup's own text is its heading, small and quiet; the
     options inside reset their type above. */
  select optgroup{
    padding:6px 0 2px 10px;
    font-size:.6875rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
  }
  select optgroup option{margin-left:-10px;}
  select optgroup + optgroup{margin-top:4px;border-top:1px solid var(--line-2);}
}
input[type=checkbox],input[type=radio]{
  width:16px;height:16px;accent-color:var(--brand);cursor:pointer;flex:none;margin:0;
}
input[type=file]{
  font-family:var(--f-ui);font-size:.875rem;
  padding:9px 11px;border:1px dashed var(--line-strong);
  border-radius:var(--r-sm);background:var(--surface-2);width:100%;
}

.field{display:flex;flex-direction:column;gap:6px;min-width:0;}
.field label{
  font-size:.8125rem;font-weight:500;
  color:var(--ink-2);
}
.field.span2{grid-column:span 2;}
.field.span3{grid-column:span 3;}
.field.money input,.field.count input{text-align:right;font-variant-numeric:tabular-nums;}

.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 20px;}
.grid.g3{grid-template-columns:repeat(3,1fr);}

.radio-row{display:flex;flex-wrap:wrap;gap:8px;padding-top:2px;}
.radio-row label{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.875rem;color:var(--ink);
  padding:7px 13px 7px 11px;
  border:1px solid var(--line-strong);
  border-radius:100px;
  background:var(--surface);
  cursor:pointer;
  transition:border-color var(--t),background var(--t);
}
.radio-row label:hover{border-color:var(--brand);background:var(--brand-tint);}
label.check{display:flex;gap:9px;align-items:flex-start;font-size:.875rem;cursor:pointer;}

/* A readout is computed, never typed. It is deliberately not shaped like an input, so nobody
   reads "Day" or "Total Staff" as a box they forgot to fill in. */
.readout{
  display:flex;align-items:center;
  min-height:40px;padding:0 12px;
  font-size:.875rem;font-weight:600;
  color:var(--ink-2);
  background:var(--surface-3);
  border:1px solid var(--line-2);
  border-radius:var(--r-sm);
}
.readout.money{font-variant-numeric:tabular-nums;justify-content:flex-end;color:var(--brand);}
.field-error{
  display:flex;align-items:baseline;gap:5px;
  color:var(--danger);font-size:.8125rem;font-weight:500;
}
.field-error::before{content:"!";
  flex:none;width:14px;height:14px;border-radius:50%;
  background:var(--danger);color:#FFFFFF;
  font-size:.625rem;font-weight:700;line-height:14px;text-align:center;
  transform:translateY(2px);
}
.error-list{margin:6px 0 0;padding-left:20px;font-size:.8125rem;}

/* Event slots: one card per slot the admin configured for the venue. A booked slot stays visible
   (so it's clear why it can't be picked) but is greyed out and can't be selected. */
.slot-field{gap:10px;}
.slot-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;}
.slot-title{font-size:.8125rem;font-weight:500;color:var(--ink-2);}
.slot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;transition:opacity var(--t);}
.slot-grid[hidden]{display:none;}
.slot-field.is-loading .slot-grid{opacity:.5;pointer-events:none;}
.slot-card{
  display:grid;grid-template-columns:16px auto 1fr;
  grid-template-areas:"radio icon body" ". . state";
  align-items:center;gap:8px 10px;
  padding:14px 16px;
  border:1px solid var(--line-strong);border-radius:var(--r);
  background:var(--surface);
  cursor:pointer;
  transition:border-color var(--t),background var(--t),box-shadow var(--t);
}
.slot-card input{grid-area:radio;}
.slot-icon{grid-area:icon;font-size:1.25rem;line-height:1;}
.slot-icon:empty{display:none;}
.slot-card:has(.slot-icon:empty){grid-template-columns:16px 1fr;grid-template-areas:"radio body" ". state";}
.slot-body{grid-area:body;display:flex;flex-direction:column;gap:2px;min-width:0;}
.slot-name{font-size:.9375rem;font-weight:600;color:var(--ink);}
.slot-time{font-size:.8125rem;color:var(--ink-2);font-variant-numeric:tabular-nums;}
.slot-state{
  grid-area:state;justify-self:start;
  display:inline-flex;align-items:center;gap:5px;
  font-size:.75rem;font-weight:500;
  padding:2px 9px;border-radius:100px;
  border:1px solid var(--ok-bd);background:var(--ok-bg);color:var(--ok);
}
.slot-state::before{content:"\2713";font-weight:700;}
.slot-card:not(.is-booked):hover{border-color:var(--brand);background:var(--brand-tint);}
.slot-card:has(input:checked){border-color:var(--brand);background:var(--brand-tint);box-shadow:var(--ring);}
.slot-card:has(input:focus-visible){box-shadow:var(--ring);}
.slot-card.is-booked{cursor:not-allowed;background:var(--surface-3);border-color:var(--line-2);}
.slot-card.is-booked :is(.slot-name,.slot-time,.slot-icon){opacity:.55;}
.slot-card.is-booked .slot-state{border-color:var(--danger-bd);background:var(--danger-bg);color:var(--danger);}
.slot-card.is-booked .slot-state::before{content:"\2715";}
.slot-message{
  margin:0;padding:12px 14px;
  font-size:.875rem;color:var(--neutral);
  background:var(--neutral-bg);border:1px solid var(--neutral-bd);border-radius:var(--r-sm);
}
.slot-message.is-error{color:var(--danger);background:var(--danger-bg);border-color:var(--danger-bd);}
.slot-readout{font-weight:600;gap:8px;}
.policy-note{font-size:.8125rem;color:var(--ink-2);margin:12px 0 0;}

/* Locked records stay legible — they are the record, not a dead control. */
input:disabled,select:disabled,textarea:disabled{
  color:var(--ink);opacity:1;
  background:var(--surface-3);border-color:var(--line);
  -webkit-text-fill-color:var(--ink);cursor:default;
}
input[readonly]{background:var(--surface-3);color:var(--ink-2);}

/* ======================================================================
   7. Messages
   ====================================================================== */
.flash{
  position:relative;
  padding:12px 16px 12px 15px;
  margin:0 0 16px;
  border:1px solid var(--line);
  border-left:3px solid var(--ink-3);
  border-radius:var(--r-sm);
  background:var(--surface);
  box-shadow:var(--sh-1);
  font-size:.875rem;
}
.flash a{font-weight:500;}
.flash.ok{background:var(--ok-bg);border-color:var(--ok-bd);border-left-color:var(--ok);color:#0E4A2C;}
.flash.error{background:var(--danger-bg);border-color:var(--danger-bd);border-left-color:var(--danger);color:#7E2A1E;}
.flash.info{background:var(--warn-bg);border-color:var(--warn-bd);border-left-color:var(--accent);color:#6F4D0D;}
.flash.ok a,.flash.error a,.flash.info a{color:inherit;text-decoration:underline;}

.errors{
  margin:0 0 16px;padding:12px 16px 12px 32px;
  border:1px solid var(--danger-bd);border-left:3px solid var(--danger);
  border-radius:var(--r-sm);
  background:var(--danger-bg);color:#7E2A1E;font-size:.875rem;
}
.errors li{margin:3px 0;}

.empty-note{
  padding:56px 24px;text-align:center;
  color:var(--ink-3);font-size:.9375rem;
}
.readonly-note{
  margin:0;padding:11px 24px;
  background:var(--warn-bg);
  border-bottom:1px solid var(--warn-bd);
  font-size:.875rem;color:#6F4D0D;
}

/* ======================================================================
   8. Badges
   ====================================================================== */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.75rem;font-weight:500;
  padding:3px 9px;
  border-radius:100px;
  border:1px solid var(--neutral-bd);
  background:var(--neutral-bg);
  color:var(--neutral);
  letter-spacing:.01em;white-space:nowrap;
  text-transform:capitalize;
}
.badge::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:currentColor;flex:none;
}
.badge.pending,.badge.status-draft,.badge.state-warn{
  background:var(--warn-bg);border-color:var(--warn-bd);color:var(--warn);
}
.badge.active,.badge.status-confirmed,.badge.state-pass{
  background:var(--ok-bg);border-color:var(--ok-bd);color:var(--ok);
}
.badge.disabled,.badge.status-cancelled,.badge.state-fail{
  background:var(--danger-bg);border-color:var(--danger-bd);color:var(--danger);
}
.badge.status-completed{
  background:var(--brand-tint);border-color:#BCD4CC;color:var(--brand);
}
.preflight-state{width:78px;}

.secret-box{
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  font-size:1rem;letter-spacing:.1em;
  background:var(--surface-3);border:1px solid var(--line-strong);
  border-radius:var(--r-sm);padding:10px 14px;
  display:inline-block;margin:8px 0;color:var(--ink);
}

/* ======================================================================
   9. Booking sheet
   ====================================================================== */
.form-sheet{padding:0;}
.sheet-head{
  padding:22px 24px 20px;
  background:linear-gradient(180deg,var(--surface) 0%,var(--surface-2) 100%);
  border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:flex-start;
  flex-wrap:wrap;gap:12px;
}
.sheet-title{min-width:0;}
.sheet-head h2{
  margin:0;font-size:1.3125rem;font-weight:600;
  color:var(--ink);letter-spacing:-.02em;line-height:1.25;
}
.sheet-sub{
  margin:5px 0 0;font-size:.8125rem;color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}

/* Who, when, where, how many, how much — the five answers that must survive every step change. */
.sheet-summary{
  margin:0;padding:14px 24px;
  background:var(--brand-tint);
  border-bottom:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:6px 34px;
}
.sheet-summary > div{min-width:0;}
.sheet-summary dt{
  font-size:.6875rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--brand);opacity:.72;
}
.sheet-summary dd{
  margin:2px 0 0;font-size:.9375rem;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:24ch;
}
.sheet-summary .sum-net{margin-left:auto;text-align:right;}
.sheet-summary .sum-net dd{
  font-family:var(--f-num);font-size:1.125rem;color:var(--brand);
  font-variant-numeric:tabular-nums;max-width:none;
}
.sheet-ids{display:flex;gap:9px;align-items:center;flex-wrap:wrap;}
.sheet-head .rec-id{
  font-size:.8125rem;font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
  color:var(--brand);
  background:var(--brand-tint);
  padding:4px 11px;border-radius:100px;
  border:1px solid #BCD4CC;
  transition:background var(--t),transform var(--t);
}
.sheet-head .rec-id.id-flash{animation:idPulse .8s ease-out;}
@keyframes idPulse{
  0%{background:var(--accent);color:#1A1207;border-color:var(--accent);transform:scale(1.06);}
  100%{background:var(--brand-tint);color:var(--brand);border-color:#BCD4CC;transform:scale(1);}
}

section.block{padding:22px 24px;border-bottom:1px solid var(--line-2);}
section.block:last-of-type{border-bottom:none;}
section.block h3{
  margin:0 0 16px;
  font-size:.75rem;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);
  display:flex;align-items:center;gap:12px;
}
section.block h3::after{content:"";flex:1;border-bottom:1px solid var(--line-2);}

/* Items to provide: one list, one fold-out group per kind of item. */
.item-group{border:1px solid var(--line-2);border-radius:var(--r-sm);margin:0 0 10px;background:var(--surface);}
.item-group > summary{
  display:flex;align-items:center;gap:10px;
  padding:11px 14px;cursor:pointer;list-style:none;
  font-size:.875rem;font-weight:600;color:var(--ink-2);
}
.item-group > summary::-webkit-details-marker{display:none;}
.item-group > summary::before{content:"\25B8";font-size:.75rem;color:var(--ink-3);transition:transform var(--t);}
.item-group[open] > summary::before{transform:rotate(90deg);}
.item-group > summary:hover{background:var(--surface-2);}
.item-group-count{margin-left:auto;font-size:.75rem;font-weight:600;color:var(--brand);}
.item-group table.lines-table{margin:0;}
.item-group .table-scroll{padding:0 8px 6px;border-top:1px solid var(--line-2);}

/* Menu: the chosen package's dishes, extra dishes, and the copy the booking holds. */
.menu-package{margin:4px 0 14px;padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface-2);}
.menu-package-head{margin:0 0 8px;font-size:.875rem;}
.menu-courses{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px 18px;}
.menu-extras .menu-courses{padding:10px 14px;border-top:1px solid var(--line-2);}
.menu-course h4{margin:0 0 4px;font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);}
.menu-course ul{margin:0;padding-left:18px;font-size:.875rem;line-height:1.6;}
.menu-course > .check{display:flex;margin:2px 0;font-size:.875rem;}
.menu-choice{list-style:none;margin-left:-18px;padding:4px 0;}
.menu-choice .check{display:flex;margin:2px 0 2px 4px;}
.menu-extra-count{margin-left:auto;font-size:.75rem;font-weight:600;color:var(--brand);}
.menu-saved{margin:6px 0 4px;}
.menu-saved .sub-head{margin-top:8px;}
.menu-saved-list{margin:0;font-size:.875rem;}
.menu-saved-list > div{display:flex;gap:10px;padding:3px 0;}
.menu-saved-list dt{flex:0 0 110px;font-weight:600;color:var(--ink-2);}
.menu-saved-list dd{margin:0;}
.menu-jump{font-size:.875rem;}
.menu-section-title{margin:26px 0 10px;font-size:.8125rem;letter-spacing:.07em;color:var(--ink-3);}
/* Package card: the menu as it reads and its card side by side, the dish editor folded underneath */
.pkg-card + .pkg-card{margin-top:22px;}
.pkg-card.is-retired .pkg-head,.pkg-card.is-retired .menu-admin-body{opacity:.7;}
.pkg-head{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:10px 24px;
  padding:18px 24px;background:var(--surface-2);border-bottom:1px solid var(--line);
  border-left:4px solid var(--brand);
}
.pkg-card.is-retired .pkg-head{border-left-color:var(--line-strong);}
.pkg-title{min-width:0;flex:1 1 280px;}
.pkg-card .pkg-head h3{margin:0;padding:0;border:0;font-size:1.125rem;font-weight:600;letter-spacing:-.01em;color:var(--ink);}
.pkg-desc{margin:4px 0 0;font-size:.875rem;color:var(--ink-3);}
.pkg-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px 12px;}
.pkg-price{font-size:1rem;font-weight:600;color:var(--brand);font-variant-numeric:tabular-nums;}
.pkg-meta .hint{flex-basis:100%;text-align:right;}

.pkg-settings{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px 16px;
  padding:18px 24px;border-bottom:1px solid var(--line-2);
}
.pkg-settings .field.span4{grid-column:span 4;}
.pkg-settings .field :is(input,select){width:100%;}
.pkg-settings .field .hint{font-size:.75rem;}
.pkg-settings-foot{
  grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;
}

.menu-admin-body{
  display:grid;grid-template-columns:minmax(0,1fr) 240px;
  grid-template-areas:"reads card" "items items";
  gap:20px 28px;padding:20px 24px 22px;
}
.menu-admin-reads{grid-area:reads;min-width:0;}
.menu-admin-card{
  grid-area:card;min-width:0;display:flex;flex-direction:column;align-items:stretch;gap:10px;
  padding:14px;background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r);align-self:start;
}
.menu-admin-items{grid-area:items;min-width:0;padding-top:16px;border-top:1px solid var(--line-2);}
.menu-admin-body .sub-head{margin:0 0 10px;}
.menu-admin-card .sub-head{margin:0;}
.menu-admin-card .muted{margin:0;font-size:.875rem;}
.menu-admin-card .hint{font-size:.75rem;line-height:1.4;}
.menu-admin-card .inline-form .btn{width:100%;justify-content:center;}
.menu-admin-card .inline-form{display:flex;}

.pkg-menu{margin:0;}
.pkg-menu > div{display:flex;gap:14px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line-2);}
.pkg-menu > div:last-child{border-bottom:0;}
.pkg-menu dt{flex:0 0 150px;font-size:.8125rem;font-weight:600;color:var(--ink-2);}
.pkg-menu dd{margin:0;display:flex;flex-wrap:wrap;gap:6px;min-width:0;}
.dish-chip,.dish-choice{
  display:inline-flex;align-items:center;gap:6px;padding:3px 10px;
  font-size:.8125rem;line-height:1.5;border-radius:999px;
}
.dish-chip{background:var(--surface-3);color:var(--ink);}
.dish-choice{background:var(--accent-tint);color:var(--ink);border:1px dashed var(--accent-light);}
.dish-choice em{font-style:normal;font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--accent);}

.menu-card-thumb{display:block;width:100%;max-height:280px;object-fit:contain;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-sm);}
.menu-card-upload{display:flex;flex-direction:column;gap:8px;width:100%;}
.menu-card-upload input[type=file]{min-width:0;font-size:.75rem;padding:7px 8px;background:var(--surface);}
.menu-card-upload .btn{justify-content:center;}
.inline-form{display:inline-flex;gap:6px;margin:0;}
.nowrap{white-space:nowrap;}
tr.is-retired{opacity:.6;}
@media (max-width:900px){.pkg-settings{grid-template-columns:repeat(3,minmax(0,1fr));}.pkg-settings .field.span2,.pkg-settings .field.span4{grid-column:1 / -1;}}
@media (max-width:760px){
  .menu-admin-body{grid-template-columns:1fr;grid-template-areas:"reads" "card" "items";padding:16px;}
  .pkg-head,.pkg-settings{padding:16px;}
  .pkg-settings{grid-template-columns:repeat(2,minmax(0,1fr));}
  .pkg-meta{justify-content:flex-start;}.pkg-meta .hint{text-align:left;}
  .pkg-menu > div{flex-direction:column;gap:6px;}.pkg-menu dt{flex-basis:auto;}
}
.sub-head{
  margin:24px 0 10px;font-size:.75rem;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);
}
.terms-list{margin:0;padding-left:20px;font-size:.875rem;line-height:1.7;}
.check-row{
  display:flex;align-items:center;gap:10px;
  padding:5px 9px;margin:0 -9px;
  border-radius:var(--r-sm);
  flex-wrap:wrap;
  transition:background var(--t);
}
.check-row:hover{background:var(--surface-2);}
.check-row label{display:flex;align-items:center;gap:9px;font-size:.875rem;flex:1;min-width:150px;cursor:pointer;}
.check-row input[type=checkbox]{width:17px;height:17px;}
/* The note stays quiet until it is wanted, so a long checklist reads as labels, not as a form. */
.check-row input.note{
  flex:1;min-width:110px;width:auto;
  font-size:.8125rem;padding:5px 9px;min-height:30px;
  background:transparent;border-color:transparent;
}
.check-row input.note:hover{border-color:var(--line);background:var(--surface);}
.check-row input.note:focus{background:var(--surface);}
.check-row input.note:not(:placeholder-shown){background:var(--surface);border-color:var(--line);}
/* Priced decor rows: rate, quantity and amount sit between the label and the note. */
.check-row input.rate{width:96px;text-align:right;font-size:.8125rem;padding:5px 9px;min-height:30px;}
.check-row input.qty{width:64px;font-size:.8125rem;padding:5px 9px;min-height:30px;}
/* Vendor service picker: a category's services as checkboxes, each with its unit and rate. */
.service-picker{margin:4px 0 14px;}
.service-picker-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 8px;}
.service-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:2px 28px;}
.service-list .check-row select{width:auto;font-size:.8125rem;padding:5px 9px;min-height:30px;}
@media (max-width:480px){.service-list{grid-template-columns:1fr;}}
.check-row .line-amount{min-width:80px;text-align:right;font-size:.8125rem;font-variant-numeric:tabular-nums;}

table.lines-table{width:100%;border-collapse:collapse;margin:14px 0 0;}
table.lines-table th{
  text-align:left;
  font-size:.75rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-3);
  border-bottom:1px solid var(--line-strong);
  padding:9px 8px;
}
table.lines-table td{
  padding:9px 8px;border-bottom:1px solid var(--line-2);
  font-size:.875rem;vertical-align:middle;
}
table.lines-table tr:last-child td{border-bottom:none;}
table.lines-table tbody tr{transition:background var(--t);}
table.lines-table tbody tr:hover{background:var(--surface-2);}
table.lines-table input{min-height:34px;padding:6px 10px;}
table.lines-table input.rate{width:118px;text-align:right;}
table.lines-table input.qty{width:80px;text-align:right;}
table.lines-table input.note{width:100%;min-width:130px;font-size:.8125rem;}
/* A charge line that is not ticked is not in the total — say so before the amount column does. */
table.lines-table tr.charge-line:not(:has(input[type=checkbox]:checked)) td:not(:first-child){opacity:.55;}
td.line-amount{text-align:right;font-variant-numeric:tabular-nums;font-weight:500;white-space:nowrap;}

table.totals-table{
  margin:18px 0 0 auto;border-collapse:collapse;min-width:380px;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--sh-1);
}
table.totals-table td{
  padding:10px 16px;font-size:.875rem;
  border-bottom:1px solid var(--line-2);
  font-variant-numeric:tabular-nums;
}
table.totals-table td:first-child{color:var(--ink-2);}
table.totals-table td:last-child{text-align:right;font-weight:500;}
table.totals-table input{width:150px;text-align:right;min-height:34px;padding:6px 10px;}
table.totals-table tr.grand td{
  font-weight:700;font-size:1.125rem;color:var(--brand);
  background:var(--brand-tint);
  border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);
}
table.totals-table tr.grand td:first-child{color:var(--brand);letter-spacing:.01em;}

.actionbar{
  position:sticky;bottom:0;z-index:10;
  background:var(--brand-dark);
  padding:13px 24px;
  display:flex;gap:9px;align-items:center;flex-wrap:wrap;
  box-shadow:0 -4px 14px -6px rgba(12,36,31,.35);
}
.actionbar .status{
  margin-left:auto;color:rgba(255,255,255,.62);
  font-size:.8125rem;font-variant-numeric:tabular-nums;
}
/* "Step 2 of 5 · Event" — also the flexible gap that keeps the save controls on the right. */
.step-position{
  flex:1 1 auto;text-align:right;padding-right:6px;
  color:rgba(255,255,255,.66);
  font-size:.8125rem;font-weight:500;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ======================================================================
   10. Registry
   ====================================================================== */
.list-toolbar{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  padding:12px 14px;margin:0 0 16px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
}
.list-toolbar input[type=text]{flex:1;min-width:220px;width:auto;}
.list-toolbar select{width:auto;min-width:160px;}
.registry-count{margin:0 2px 12px;}

table.registry{width:100%;border-collapse:collapse;background:var(--surface);}
table.registry thead th{
  text-align:left;
  font-size:.75rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-2);
  background:var(--surface-2);
  padding:11px 14px;
  border-bottom:1px solid var(--line);
  position:sticky;top:58px;z-index:2;
  white-space:nowrap;
}
/* 58px assumes the page is the scrollport, so the head clears the app bar. Inside a horizontal
   scroller (Users) the scrollport is that container instead, and the offset pushes the head
   down over the first row — hiding it. There, pin the head to the container's own top. */
.table-scroll table.registry thead th{top:0;}
table.registry thead th.num{text-align:right;}
table.registry tbody td{
  padding:13px 14px;
  border-bottom:1px solid var(--line-2);
  font-size:.875rem;vertical-align:middle;
}
table.registry tbody tr{transition:background var(--t);}
table.registry tbody tr:hover{background:var(--surface-2);}
table.registry tbody tr:last-child td{border-bottom:none;}
table.registry .id-cell{
  font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:.01em;white-space:nowrap;
}
table.registry td.actions{white-space:nowrap;text-align:right;}
table.registry td.actions form{display:inline;}
table.registry .rowbtn{
  display:inline-block;
  font-family:var(--f-ui);font-size:.8125rem;font-weight:500;
  padding:6px 12px;border-radius:var(--r-sm);
  border:1px solid var(--line-strong);background:var(--surface);
  color:var(--ink);cursor:pointer;text-decoration:none;
  margin-left:5px;
  transition:border-color var(--t),background var(--t);
}
table.registry .rowbtn:hover{border-color:var(--brand);background:var(--brand-tint);color:var(--brand);text-decoration:none;}
table.registry .rowbtn.del{border-color:var(--danger-bd);color:var(--danger);}
table.registry .rowbtn.del:hover{border-color:var(--danger);background:var(--danger-bg);color:var(--danger);}

.pager{display:flex;gap:14px;align-items:center;justify-content:center;margin:20px 0 0;}

/* Commercial terms flagged at the moment of confirming. */
.terms-check{
  margin:0 0 12px;padding:10px 13px;
  background:var(--warn-bg);
  border:1px solid var(--warn-bd);border-left:3px solid var(--warn);
  border-radius:var(--r-sm);
}
.terms-check-head{
  margin:0 0 6px;
  font-size:.6875rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--warn);
}
.terms-check ul{margin:0;padding-left:17px;}
.terms-check li{font-size:.8125rem;line-height:1.5;color:var(--ink-2);margin:2px 0;}
.terms-check .hint{margin:7px 0 0;}
/* --- Registry: summary strip, status tabs, grouped rows ---------------------------------- */
.reg-summary{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;margin:0 0 16px;box-shadow:var(--sh-1);
}
.reg-stat{background:var(--surface);padding:13px 16px;display:flex;flex-direction:column;gap:2px;}
.reg-stat-n{
  font-family:var(--f-num);font-size:1.375rem;font-weight:600;
  color:var(--ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.reg-stat-l{font-size:.6875rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);}
.reg-stat-money .reg-stat-n{font-size:1.125rem;color:var(--brand);}

.reg-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px;}
.reg-tab{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;border-radius:100px;
  border:1px solid var(--line);background:var(--surface);
  font-size:.8125rem;font-weight:500;color:var(--ink-2);text-decoration:none;
  transition:border-color var(--t),background var(--t),color var(--t);
}
.reg-tab:hover{border-color:var(--line-strong);color:var(--ink);text-decoration:none;}
.reg-tab-n{
  font-family:var(--f-num);font-size:.6875rem;font-weight:700;
  color:var(--ink-3);font-variant-numeric:tabular-nums;
}
.reg-tab.current{background:var(--brand);border-color:var(--brand);color:#fff;}
.reg-tab.current .reg-tab-n{color:rgba(255,255,255,.75);}
.reg-tab.empty{opacity:.5;}

/* Rows carry a status stripe, so the register is readable at a glance. */
.reg-table td{vertical-align:middle;}
.reg-row > td:first-child{box-shadow:inset 3px 0 0 var(--neutral-bd);}
.reg-row.status-draft     > td:first-child{box-shadow:inset 3px 0 0 var(--warn);}
.reg-row.status-confirmed > td:first-child{box-shadow:inset 3px 0 0 var(--ok);}
.reg-row.status-completed > td:first-child{box-shadow:inset 3px 0 0 var(--brand);}
.reg-row.status-cancelled > td:first-child{box-shadow:inset 3px 0 0 var(--danger);}
.reg-row.status-cancelled .reg-primary{text-decoration:line-through;color:var(--ink-3);}
.reg-table .id-cell{display:block;margin-bottom:4px;}
.reg-primary{font-weight:500;color:var(--ink);}
.reg-table .owing{font-weight:600;color:var(--danger);}
.reg-table .settled{font-size:.8125rem;color:var(--ok);}
.due-chip{
  display:inline-block;margin-left:5px;padding:1px 7px;border-radius:100px;
  font-family:var(--f-ui);font-size:.6875rem;font-weight:600;
  vertical-align:middle;
}
.due-chip.now{background:var(--danger-bg);border:1px solid var(--danger-bd);color:var(--danger);}
.due-chip.soon{background:var(--warn-bg);border:1px solid var(--warn-bd);color:var(--warn);}


/* Why a draft booking can't be confirmed yet (Approvals). */
.blocker-list{
  margin:0;padding:0 0 0 16px;
  font-size:.8125rem;color:var(--ink-2);
}
.blocker-list li{margin:1px 0;}

/* ======================================================================
   11. Lifecycle
   ====================================================================== */
.card.lifecycle{margin-top:18px;}
.action-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;}
.action-box{
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:16px;
  background:var(--surface-2);
  display:flex;flex-direction:column;gap:11px;align-items:flex-start;
}
.action-box h4{
  margin:0;font-size:.875rem;font-weight:600;color:var(--ink);
}
.action-box p{margin:0;font-size:.8125rem;color:var(--ink-2);}
.action-box .field,.action-box textarea{width:100%;}
.amend-panel{background:var(--warn-bg);border-color:var(--warn-bd);}
.amend-panel textarea{width:100%;}

/* ======================================================================
   12. Payments
   ====================================================================== */
.card.payments{margin-top:18px;}
.money-summary{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  gap:1px;margin:0 0 18px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
}
.money-summary div{
  display:flex;flex-direction:column;gap:4px;
  padding:13px 15px;background:var(--surface);
}
.money-summary span{
  font-size:.75rem;font-weight:500;color:var(--ink-3);
  letter-spacing:.02em;
}
.money-summary strong{
  font-size:1.0625rem;font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
.money-summary .emph{background:var(--brand-tint);}
.money-summary .emph strong{font-size:1.25rem;color:var(--brand);}

table.payment-table tr.voided td{color:var(--ink-3);text-decoration:line-through;}
table.payment-table tr.voided td:last-child,
table.payment-table tr.voided td:last-child *{text-decoration:none;}
table.payment-table tr.refund td.num{color:var(--danger);font-weight:500;}
.void-form{display:flex;gap:7px;align-items:center;}
.void-form input{font-size:.8125rem;padding:5px 9px;width:165px;}
.payment-form{
  margin-top:18px;padding:18px;
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface-2);
}
.payment-form h4{
  margin:0 0 14px;font-size:.875rem;font-weight:600;color:var(--ink);
}
.payment-form .grid{margin-bottom:14px;}
.charge-line td{font-size:.875rem;}

/* Vendors on a booking: one block per vendor. */
.vendor-group{margin-top:18px;padding-top:14px;border-top:1px solid var(--line-2);}
.vendor-group:first-of-type{border-top:none;padding-top:0;}
.vendor-group h4{margin:0;font-size:.9375rem;font-weight:600;}
.vendor-group h4 .muted{font-weight:400;}
.vendors > h4{margin:22px 0 0;font-size:.875rem;font-weight:600;}

/* ======================================================================
   13. Admin rows & attachments
   ====================================================================== */
.admin-row{
  display:flex;gap:12px 16px;align-items:flex-end;flex-wrap:wrap;
  padding:14px 0;border-bottom:1px solid var(--line-2);
}
.admin-row:last-of-type{border-bottom:none;}
.admin-row .field{margin:0;}
.admin-row .field.grow{flex:1;min-width:200px;}
.admin-row .field.grow input{width:100%;}
.admin-row .field.narrow input,.admin-row .field.narrow select{width:126px;}
.catalog-group .page-head{margin-bottom:6px;}
.catalog-group h3 .muted{font-weight:400;}
.catalog-filter{max-width:240px;width:100%;}
.catalog-row[hidden]{display:none;}
.catalog-row.is-retired{opacity:.6;}
.catalog-chip{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;background:var(--line-2);
  font-size:.7rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;}
.admin-row-extra{padding:0 0 14px;border-bottom:1px solid var(--line-2);}

/* Event Slot Management */
.venue-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px;}
.venue-tabs a{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 12px 7px 14px;
  font-size:.875rem;font-weight:500;color:var(--ink-2);text-decoration:none;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:100px;
  transition:border-color var(--t),background var(--t),color var(--t);
}
.venue-tabs a:hover{border-color:var(--brand);background:var(--brand-tint);color:var(--brand);}
.venue-tabs a.current{background:var(--brand);border-color:var(--brand);color:var(--ink-inv);}
.venue-tab-count{
  min-width:20px;padding:1px 6px;border-radius:100px;
  font-size:.6875rem;font-weight:700;text-align:center;
  background:var(--surface-3);color:var(--ink-2);
}
.venue-tabs a.current .venue-tab-count{background:rgba(255,255,255,.2);color:var(--ink-inv);}
.slot-form .check{margin-top:4px;}
.slot-form-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;}
.slot-form-card .flash{margin:0 0 16px;}
.slot-cell{display:inline-flex;align-items:center;gap:6px;}
table.slot-table td.num,table.slot-table th.num{text-align:right;font-variant-numeric:tabular-nums;}
table.slot-table tr.is-inactive td:not(.actions){color:var(--ink-3);}
table.registry .rowbtn.is-locked{opacity:.45;cursor:not-allowed;}
.slot-footnote{margin:12px 0 0;}
.card.attachments{margin-top:18px;}
.card.attachments input[type=file]{font-size:.875rem;}

/* ======================================================================
   14. Sign-in pages
   ====================================================================== */
body.bare{
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(42,107,92,.55), transparent 70%),
    linear-gradient(170deg,var(--brand-dark) 0%,var(--brand-darker) 55%,#071A17 100%);
  background-color:var(--brand-darker);
  min-height:100vh;
}
body.bare::before{
  content:"";position:fixed;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:52px 52px;
}
.auth-page{
  position:relative;z-index:1;
  min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:16px 20px;gap:12px;
}
.auth-page{padding-bottom:52px;}
.auth-page .flash{width:100%;max-width:410px;}
.auth-card,.login-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:24px 30px 20px;
  width:100%;max-width:410px;
  box-shadow:var(--sh-3);
}
.login-card{text-align:center;}
.login-logo{height:60px;width:auto;margin-bottom:10px;}
.auth-card .login-logo{display:block;margin:0 auto 10px;}
.auth-card h2,.login-card h2{
  margin:0 0 4px;font-size:1.25rem;font-weight:600;
  color:var(--ink);text-align:center;letter-spacing:-.018em;
}
.login-sub{margin:0 0 16px;font-size:.875rem;color:var(--ink-2);text-align:center;}
.auth-card .field,.login-card .field{margin-bottom:12px;text-align:left;}
.auth-card input[type=text],.auth-card input[type=password],.login-card input{width:100%;}
.loginbtn{width:100%;margin-top:4px;padding:10px;font-size:.9375rem;}
.login-switch{font-size:.875rem;margin:14px 0 0;color:var(--ink-2);text-align:center;}
.login-switch a{color:var(--brand);font-weight:500;}
.login-error{color:var(--danger);font-size:.8125rem;min-height:1.1em;margin:10px 0 0;text-align:center;}
.login-error:empty{display:none;}
.login-note{
  font-size:.75rem;color:var(--ink-3);margin:20px 0 0;
  border-top:1px solid var(--line-2);padding-top:14px;text-align:center;
}
.login-overlay{
  position:fixed;inset:0;z-index:9999;
  background:linear-gradient(170deg,var(--brand-dark),var(--brand-darker));
  display:flex;align-items:center;justify-content:center;padding:20px;
}

/* ======================================================================
   15. Documents — serif, formal, print-first
   ====================================================================== */
.doc-toolbar{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 16px;}
.doc{
  position:relative;
  padding:40px 44px 46px;
  overflow:hidden;
  font-family:var(--f-doc);
  font-size:.9375rem;
  line-height:1.6;
  color:#1A1F1D;
}
.doc-head{
  display:flex;justify-content:space-between;align-items:flex-start;
  flex-wrap:wrap;gap:18px;
  border-bottom:2px solid var(--ink);padding-bottom:16px;margin-bottom:22px;
}
.doc-head h2{
  margin:0;font-family:var(--f-doc);font-weight:600;
  color:var(--ink);font-size:1.5rem;letter-spacing:0;
}
.doc-meta{
  text-align:right;font-family:var(--f-ui);
  font-size:.8125rem;color:var(--ink-2);font-variant-numeric:tabular-nums;
}
.doc-meta div{margin-bottom:4px;display:flex;gap:12px;justify-content:flex-end;}
.doc-meta span{color:var(--ink-3);}
.doc-meta strong{color:var(--ink);font-weight:600;}
.doc-amend{
  border:1px solid var(--warn-bd);background:var(--warn-bg);
  border-radius:var(--r-sm);padding:11px 15px;font-size:.875rem;color:#6F4D0D;
}
.doc-intro{font-size:.9375rem;}
.doc-parties{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px;}
.doc-box{
  padding:15px 17px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface-2);
}
.doc-box h4{
  margin:0 0 9px;font-family:var(--f-ui);
  font-size:.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);
}
.doc-box p{margin:3px 0;font-size:.9375rem;}
.doc-block{margin-bottom:24px;break-inside:avoid;}
.doc-block h3{
  margin:0 0 11px;font-family:var(--f-ui);
  font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);
  padding-bottom:7px;border-bottom:1px solid var(--line-2);
}
.doc-sub{
  margin:20px 0 9px;font-family:var(--f-ui);
  font-size:.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);
}
table.doc-table{width:100%;border-collapse:collapse;margin-bottom:14px;font-size:.9375rem;}
table.doc-table th,table.doc-table td{
  border:1px solid var(--line-strong);padding:9px 11px;vertical-align:top;text-align:left;
}
table.doc-table.kv th{
  background:var(--surface-2);font-family:var(--f-ui);
  font-size:.75rem;font-weight:600;color:var(--ink-2);width:16%;
}
table.doc-table.money thead th{
  background:var(--surface-3);color:var(--ink);
  font-family:var(--f-ui);font-size:.75rem;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;
}
table.doc-table.money tfoot td{background:var(--surface-2);font-variant-numeric:tabular-nums;}
table.doc-table tfoot tr.grand td,table.doc-table tr.grand td{
  font-weight:700;color:var(--ink);background:var(--surface-3);
}
table.doc-table.compact{width:auto;min-width:360px;margin-left:auto;}
table.doc-table.ops td.sn,table.doc-table.ops th.sn{width:56px;text-align:center;}
table.doc-table.ops td.tick,table.doc-table.ops th.tick{width:64px;}
.doc-checklist{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px 24px;margin-bottom:14px;}
.doc-checklist ul{margin:6px 0 0;padding-left:20px;font-size:.9375rem;}
.doc-checklist strong{font-family:var(--f-ui);font-size:.75rem;font-weight:600;color:var(--ink-2);}
.doc-list{font-size:.9375rem;margin:0 0 11px;padding-left:22px;}
.doc-policy,.doc-note{font-size:.875rem;color:var(--ink-2);}
.doc-words{font-size:.9375rem;margin:8px 0;font-style:italic;}
/* The due date shares the line with the amount in words. */
.doc-due{font-style:normal;margin-left:18px;white-space:nowrap;}
.doc-balance{
  font-size:1.0625rem;font-weight:600;color:var(--ink);
  border-top:2px solid var(--ink);padding-top:11px;margin-top:14px;
  font-variant-numeric:tabular-nums;
}
.doc-review{font-size:.875rem;color:var(--ink-2);font-style:italic;}
.doc-signs{display:flex;justify-content:space-between;gap:36px;margin-top:48px;flex-wrap:wrap;break-inside:avoid;}
.doc-signs > div{flex:1;min-width:210px;display:flex;flex-direction:column;}
.sign-line{border-bottom:1px solid var(--ink);min-height:40px;padding:12px 2px 3px;font-size:.9375rem;}
.doc-signs span{font-family:var(--f-ui);font-size:.75rem;color:var(--ink-2);margin-top:6px;}
.doc-received{margin-top:28px;}
.doc-footer{
  margin-top:30px;font-family:var(--f-ui);
  font-size:.75rem;color:var(--ink-3);text-align:center;
  border-top:1px solid var(--line-2);padding-top:14px;
}
.watermark{
  position:absolute;top:46%;left:50%;
  transform:translate(-50%,-50%) rotate(-28deg);
  font-family:var(--f-ui);
  font-size:6rem;font-weight:700;letter-spacing:.18em;
  color:rgba(166,58,43,.08);
  pointer-events:none;white-space:nowrap;
}

/* Legacy invoice classes retained from the original mockup. */
.invoice-sheet{padding:36px 40px 42px;font-family:var(--f-doc);}
.inv-head{
  display:flex;justify-content:space-between;align-items:flex-start;
  flex-wrap:wrap;gap:18px;border-bottom:2px solid var(--ink);
  padding-bottom:16px;margin-bottom:22px;
}
.inv-head h2{margin:0;font-family:var(--f-doc);font-weight:600;color:var(--ink);font-size:1.5rem;}
.inv-meta{text-align:right;font-family:var(--f-ui);font-size:.8125rem;color:var(--ink-2);}
.inv-meta div{margin-bottom:4px;display:flex;gap:10px;justify-content:flex-end;}
.inv-meta span{color:var(--ink-3);}
.inv-meta strong{color:var(--ink);}
.inv-parties{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px;}
.inv-box h4{
  margin:0 0 8px;font-family:var(--f-ui);font-size:.6875rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
}
.inv-box p{margin:3px 0;font-size:.9375rem;}
table.inv-table{width:100%;border-collapse:collapse;margin-bottom:14px;}
table.inv-table thead th{
  text-align:left;font-family:var(--f-ui);font-size:.75rem;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink);background:var(--surface-3);padding:10px 11px;
}
table.inv-table tbody td{padding:12px 11px;border-bottom:1px solid var(--line-2);font-size:.9375rem;vertical-align:top;}
table.inv-table tfoot td{padding:8px 11px;font-size:.9375rem;border-top:1px solid var(--line-2);}
table.inv-table tfoot tr.inv-balance td{
  font-weight:700;font-size:1.0625rem;color:var(--ink);border-top:2px solid var(--ink);
}
.inv-note{color:var(--ink-2);font-size:.875rem;}
.inv-words{font-size:.9375rem;margin:4px 0;font-style:italic;}
.inv-sign{display:flex;justify-content:space-between;gap:36px;margin-top:44px;flex-wrap:wrap;}
.inv-sign > div{flex:1;min-width:210px;}
.inv-line{border-bottom:1px solid var(--ink);height:40px;}
.inv-sign span{font-family:var(--f-ui);font-size:.75rem;color:var(--ink-2);}
.inv-footer{
  margin-top:28px;font-family:var(--f-ui);font-size:.75rem;color:var(--ink-3);
  text-align:center;border-top:1px solid var(--line-2);padding-top:14px;
}

/* ======================================================================
   16. Calendar
   ====================================================================== */
.cal-card{padding-top:14px;}
.cal-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin:0 0 6px;
}
.cal-month{margin:0;font-size:1.125rem;letter-spacing:.01em;}
.cal-today-link{margin:0 0 12px;font-size:.8125rem;}
.cal-legend{
  display:flex;gap:18px;flex-wrap:wrap;
  margin:0 0 14px;font-size:.75rem;color:var(--ink-2);
}
.cal-legend span{display:inline-flex;align-items:center;gap:6px;}
.cal-dot{
  width:8px;height:8px;border-radius:50%;flex:none;
  background:var(--neutral);border:1px solid var(--neutral-bd);
}
.cal-dot.status-draft{background:var(--warn);border-color:var(--warn-bd);}
.cal-dot.status-confirmed{background:var(--ok);border-color:var(--ok-bd);}
.cal-dot.status-completed{background:var(--brand);border-color:#BCD4CC;}
.cal-dot.lead{background:transparent;border-color:var(--warn);}
.cal-entry.lead{opacity:.7;}

.cal-grid{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
}
.cal-head{
  background:var(--surface-3);color:var(--ink-2);
  font-size:.6875rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:7px 8px;text-align:center;
}
.cal-cell{background:var(--surface);min-height:104px;padding:6px 7px;}
.cal-cell.blank{background:var(--surface-2);}
.cal-cell.past{background:var(--surface-2);}
.cal-cell.past .cal-date{color:var(--ink-3);}
.cal-cell.today{box-shadow:inset 0 0 0 2px var(--accent);}
.cal-cell.booked{background:var(--brand-tint);}
.cal-cell.booked.past{background:var(--surface-3);}
.cal-date{
  font-family:var(--f-num);font-size:.8125rem;font-weight:600;
  color:var(--ink-2);margin-bottom:4px;
  display:flex;align-items:center;gap:6px;
}
.cal-today-tag{
  font-size:.5625rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent);
}
.cal-free{font-size:.75rem;color:var(--ink-3);}
.cal-entries{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px;}
.cal-entry{
  display:flex;align-items:baseline;gap:5px;
  font-size:.75rem;line-height:1.35;
}
.cal-entry .cal-dot{align-self:center;}
.cal-entry a{color:var(--brand);text-decoration:none;font-weight:500;}
.cal-entry a:hover{text-decoration:underline;}
.cal-taken{font-weight:500;color:var(--ink-2);}
.cal-who{
  color:var(--ink-3);font-size:.6875rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}

.avail-table .avail-bar-col{width:38%;}
.avail-bar{
  height:9px;border-radius:100px;
  background:var(--surface-3);border:1px solid var(--line-2);
  overflow:hidden;
}
.avail-bar > span{
  display:block;height:100%;
  background:var(--brand-light);
  border-radius:100px;
}

/* ======================================================================
   17. Alert dialog
   ====================================================================== */
body.dialog-open{overflow:hidden;}
.dialog-overlay{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:rgba(12,36,31,.55);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  animation:dialog-fade .16s ease-out;
}
.dialog{
  width:100%;max-width:460px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-3);
  overflow:hidden;
  animation:dialog-rise .18s cubic-bezier(.4,0,.2,1);
}
.dialog-head{
  display:flex;align-items:center;gap:11px;
  padding:17px 22px 0;
}
.dialog-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;flex:none;
  border-radius:50%;
  background:var(--warn-bg);border:1px solid var(--warn-bd);
  color:var(--warn);
  font-family:var(--f-ui);font-size:.9375rem;font-weight:700;line-height:1;
}
.dialog-title{
  margin:0;
  font-family:var(--f-ui);font-size:1.0625rem;font-weight:600;
  color:var(--ink);letter-spacing:-.01em;
}
.dialog-body{padding:11px 22px 4px;}
.dialog-body p{
  margin:0 0 10px;
  font-size:.875rem;line-height:1.55;color:var(--ink-2);
}
.dialog-foot{
  display:flex;justify-content:flex-end;gap:9px;
  padding:14px 22px 18px;
}
@keyframes dialog-fade{from{opacity:0;} to{opacity:1;}}
@keyframes dialog-rise{from{opacity:0;transform:translateY(8px) scale(.98);} to{opacity:1;transform:none;}}

/* ======================================================================
   18. Booking sheet — wizard steps & collapsible sections
   ====================================================================== */
/* The panels are visible by default. app.js adds .is-wizard once it is running, and only then does
   anything hide — so a browser without JavaScript, and every printer, gets the whole agreement. */
.step-panel{display:block;}
.step-panel:focus{outline:none;}
.is-wizard .step-panel{display:none;}
.is-wizard .step-panel.active{display:block;}

.wizard-steps{
  /* Sticks directly under the app bar (58px), so the step you are on is always on screen. */
  position:sticky;top:58px;z-index:9;
  padding:14px 24px 0;
  background:var(--surface);
  border-bottom:1px solid var(--line);
}
.wizard-steps ol{
  list-style:none;margin:0;padding:0 0 14px;
  display:flex;gap:4px;
}
.wizard-steps li{flex:1 1 0;min-width:0;display:flex;}

.step{
  position:relative;
  flex:1;min-width:0;
  display:flex;align-items:center;gap:10px;
  padding:9px 11px;
  background:none;border:0;border-radius:var(--r);
  font:inherit;color:var(--ink-3);text-align:left;
  cursor:pointer;
  transition:background var(--t),color var(--t);
}
.step:hover{background:var(--surface-3);color:var(--ink-2);}
.step:focus-visible{outline:2px solid var(--brand);outline-offset:-2px;}

/* The connector takes the room left over after the label, as a flex item — never across it.
   It keeps a minimum width, so a long label shrinks rather than swallowing the line. */
.wizard-steps li:not(:last-child) .step::after{
  content:"";
  flex:1 1 14px;min-width:14px;
  margin-left:4px;
  border-top:2px dotted var(--line-strong);
}
.step.is-done::after{border-top-color:var(--ok);}
.step-num{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;flex:none;border-radius:50%;
  background:var(--surface);
  border:1.5px solid var(--line-strong);
  color:var(--ink-3);
  font-family:var(--f-num);font-size:.8125rem;font-weight:700;
  transition:background var(--t),border-color var(--t),color var(--t);
}
.step-body{display:flex;flex-direction:column;min-width:0;gap:1px;overflow:hidden;}
.step-name{
  font-size:.8125rem;font-weight:600;color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:color var(--t);
}
.step-meta{
  font-size:.6875rem;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.step.is-done .step-num{background:var(--ok);border-color:var(--ok);color:#FFFFFF;font-size:0;}
.step.is-done .step-num::after{
  content:"";width:10px;height:6px;
  border-left:2px solid #FFFFFF;border-bottom:2px solid #FFFFFF;
  transform:rotate(-45deg);margin-top:-3px;
}
.step.has-error .step-num{background:var(--danger);border-color:var(--danger);color:#FFFFFF;}
.step.has-error .step-name{color:var(--danger);}
.step.has-error .step-meta{color:var(--danger);}

.step.current{background:var(--brand-tint);}
.step.current .step-num{background:var(--brand);border-color:var(--brand);color:var(--ink-inv);}
.step.current .step-name{color:var(--brand);}
.step.current.has-error .step-num{background:var(--danger);border-color:var(--danger);}

/* Section headings become toggles. */
.block-head{margin:0;}
.block-toggle{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:0;margin:0;
  background:none;border:0;cursor:pointer;text-align:left;
  font:inherit;color:inherit;
}
.block-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:21px;height:21px;flex:none;border-radius:50%;
  background:var(--surface-3);color:var(--ink-3);
  font-family:var(--f-num);font-size:.6875rem;font-weight:700;
}
.block-label{flex:1;min-width:0;}
.block-count{
  font-family:var(--f-ui);font-size:.6875rem;font-weight:500;
  letter-spacing:0;text-transform:none;color:var(--ink-3);white-space:nowrap;
}
.block-count.has-value{color:var(--ok);}
.block-count.has-error{color:var(--danger);font-weight:600;}
.block-chevron{
  width:8px;height:8px;flex:none;
  border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);
  transform:rotate(45deg);margin-bottom:3px;
  transition:transform var(--t);
}
.block.collapsed .block-chevron{transform:rotate(-135deg);margin-bottom:0;margin-top:3px;}
.block.collapsed > *:not(.block-head){display:none;}
.block.collapsed .block-head{margin:0;}
.block-toggle:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:var(--r-xs);}


/* ======================================================================
   19. Dashboard
   ====================================================================== */
:root{
  /* Chart series. Checked with a palette validator against the white card surface: booked and
     collected as a pair, the four statuses in the order they stack, the four payment methods round
     their ring. The status hues keep the badge colours' families but are re-stepped, so neighbours
     in a stack stay apart for colour-blind readers — which is also why "completed" is blue here
     and not a second green. Booked is blue and collected is green wherever they appear, tiles included. */
  --viz-booked:#2472B8;
  --viz-collected:#1F8A52;
  --viz-completed:#2F6FA8;
  --viz-confirmed:#35A574;
  --viz-draft:#C99328;
  --viz-cancelled:#B13C2C;
  --viz-cash:#2472B8;
  --viz-bank:#EB6834;
  --viz-cheque:#1A9FB0;
  --viz-online:#EDA100;

  /* Headline tiles: solid colour under white text, each at 4:1 or better. */
  --tile-blue:#2472B8;
  --tile-green:#1F8A52;
  --tile-rose:#CC2F66;
  --tile-teal:#14879A;
}
.sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.dash-head{align-items:flex-end;margin-bottom:14px;}
.dash-controls{
  display:flex;justify-content:space-between;align-items:center;
  gap:10px 16px;flex-wrap:wrap;margin:0 0 16px;
}
.dash-controls .reg-tabs{margin:0;}
/* The custom range: two month fields and Apply, on one line. */
.dash-custom{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0;}
.dash-custom label{font-size:.8125rem;font-weight:500;color:var(--ink-2);}
.dash-custom input[type=month]{
  width:auto;min-height:32px;padding:4px 9px;
  font-family:var(--f-ui);font-size:.8125rem;color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);
}
.dash-custom.current input[type=month]{border-color:var(--brand);}
.panel-more{margin:10px 0 0;font-size:.75rem;color:var(--ink-3);}

.icon{
  display:block;width:100%;height:100%;
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}

/* -- Headline tiles: the four figures the page leads with, each a block of solid colour -- */
.hero-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;
  margin:0 0 14px;
}
.hero{
  display:flex;flex-direction:column;min-width:0;
  background:var(--tile);color:#FFFFFF;
  border-radius:var(--r-lg);
  box-shadow:var(--sh-2);
  overflow:hidden;
}
.hero-blue{--tile:var(--tile-blue);}
.hero-green{--tile:var(--tile-green);}
.hero-rose{--tile:var(--tile-rose);}
.hero-teal{--tile:var(--tile-teal);}
.hero-main{display:flex;align-items:center;gap:14px;padding:16px 18px 14px;flex:1;}
.hero-icon{
  flex:none;width:44px;height:44px;padding:9px;
  border-radius:var(--r);
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.28);
}
.hero-text{display:flex;flex-direction:column;min-width:0;}
.hero-label{font-size:.8125rem;font-weight:500;color:rgba(255,255,255,.88);}
/* Proportional figures: tabular digits look loose at this size. */
.hero-value{
  font-size:1.625rem;font-weight:700;line-height:1.2;letter-spacing:-.022em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hero-foot{
  padding:7px 18px 8px;
  background:rgba(0,0,0,.16);
  font-size:.75rem;font-weight:500;color:rgba(255,255,255,.94);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* -- Count tiles: a figure, where it leads, and an icon to find it by -- */
.stat-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;
  margin:0 0 18px;
}
.stat{
  display:flex;justify-content:space-between;align-items:flex-start;gap:12px;min-width:0;
  padding:14px 16px 13px;
  background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
}
.stat-body{display:flex;flex-direction:column;gap:2px;min-width:0;}
.stat-label{font-size:.75rem;font-weight:500;color:var(--ink-2);}
.stat-value{
  font-size:1.375rem;font-weight:600;line-height:1.3;letter-spacing:-.02em;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.stat-link,.stat-note{font-size:.75rem;line-height:1.4;color:var(--ink-3);}
.stat-link{color:var(--brand);font-weight:500;}
.stat-icon{
  flex:none;width:34px;height:34px;padding:7px;
  border-radius:var(--r);
  background:var(--brand-tint);color:var(--brand);
}
.stat-attention{box-shadow:inset 3px 0 0 var(--accent),var(--sh-1);}
.stat-attention .stat-icon{background:var(--accent-tint);color:var(--warn);}

/* -- Panels -- */
.dash-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px;}
.dash-grid > .card{margin-top:0;min-width:0;}
.dash-grid > .span-12{grid-column:span 12;}
.dash-grid > .span-4{grid-column:span 4;}
.dash-grid > .span-5{grid-column:span 5;}
.dash-grid > .span-6{grid-column:span 6;}
.dash-grid > .span-7{grid-column:span 7;}
.dash-grid > .span-8{grid-column:span 8;}
.panel-head{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:8px 16px;flex-wrap:wrap;margin:0 0 14px;
}
.dash-panel h3{
  margin:0;padding:0;border:none;
  font-size:.9375rem;font-weight:600;letter-spacing:-.008em;color:var(--ink);
}
.panel-sub{margin:2px 0 0;font-size:.8125rem;color:var(--ink-3);}
.panel-link{font-size:.8125rem;font-weight:500;white-space:nowrap;}
.dash-note{margin:18px 2px 0;max-width:100ch;font-size:.75rem;line-height:1.55;color:var(--ink-3);}
.dash-note strong{font-weight:600;color:var(--ink-2);}

/* -- Series colour: one custom property, read as a fill by marks and as a background by keys -- */
.s-booked{--s:var(--viz-booked);}
.s-collected{--s:var(--viz-collected);}
.s-completed{--s:var(--viz-completed);}
.s-confirmed{--s:var(--viz-confirmed);}
.s-draft{--s:var(--viz-draft);}
.s-cancelled{--s:var(--viz-cancelled);}
.s-cash{--s:var(--viz-cash);}
.s-bank-transfer{--s:var(--viz-bank);}
.s-cheque{--s:var(--viz-cheque);}
.s-online{--s:var(--viz-online);}
.chart-mark,.rank-bar rect,.chart-dot{fill:var(--s,var(--ink-3));}
.swatch,.tip-key{background:var(--s,transparent);}

/* -- Area chart: a 2px line, a light wash under it, a ringed dot on every period -- */
.chart-line{fill:none;stroke:var(--s,var(--ink-3));stroke-width:2;stroke-linejoin:round;stroke-linecap:round;}
.chart-area{fill:var(--s,var(--ink-3));opacity:.11;}
.chart-dot{stroke:var(--surface);stroke-width:2;}
.chart.chart-wide{min-width:680px;}

/* -- Donut and gauge -- */
.donut-wrap,.gauge-wrap{display:flex;justify-content:center;margin:2px 0 14px;}
.donut{display:block;width:180px;max-width:100%;height:auto;}
.donut-track,.donut-seg,.gauge-track,.gauge-fill{fill:none;stroke-width:22;}
.donut-track{stroke:var(--surface-3);}
.donut-seg,.gauge-fill{stroke:var(--s,var(--ink-3));}
.donut-centre{font-size:19px;font-weight:700;fill:var(--ink);letter-spacing:-.02em;}
.donut-label{font-size:11px;fill:var(--ink-3);}
.gauge{display:block;width:230px;max-width:100%;height:auto;}
/* The unfilled part is a lighter step of the same colour, so the whole arch reads as one measure. */
.gauge-track{stroke:var(--s,var(--ink-3));opacity:.18;}
.gauge-value{font-size:30px;font-weight:700;fill:var(--ink);letter-spacing:-.02em;}
.swatch-track{opacity:.28;}

/* The figures beside a donut or gauge: nothing on the ring has to be hovered to be read. */
.key-list{list-style:none;margin:0;padding:0;font-size:.8125rem;}
.key-list li{
  display:flex;align-items:center;gap:8px;
  padding:7px 0;border-top:1px solid var(--line-2);
}
.key-name{flex:1;min-width:0;color:var(--ink-2);}
.key-share{color:var(--ink-3);font-variant-numeric:tabular-nums;}
.key-value{min-width:96px;text-align:right;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;}
.key-total .key-name{color:var(--ink);font-weight:500;}

/* -- Latest payments -- */
.feed{list-style:none;margin:0;padding:0;}
.feed li{
  display:flex;align-items:center;gap:10px;
  padding:10px 0;border-top:1px solid var(--line-2);
}
.feed li:first-child{border-top:none;padding-top:2px;}
.feed-dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--viz-collected);}
.feed-dot.refund{background:var(--danger);}
.feed-dot.neutral{background:var(--line-strong);}
.feed-body{flex:1;min-width:0;}
.feed-title{font-size:.875rem;font-weight:500;color:var(--ink);}
.feed-meta{font-size:.75rem;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.feed-open{flex:none;}

.chart-legend{
  list-style:none;margin:2px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:4px 14px;
  font-size:.75rem;color:var(--ink-2);
}
.chart-legend li{display:inline-flex;align-items:center;gap:6px;}
.swatch{width:10px;height:10px;border-radius:2px;flex:none;}

/* -- Column charts. Below the width where the labels would crowd, the chart scrolls sideways
      rather than shrinking its type past reading size. -- */
.chart-scroll{overflow-x:auto;}
.chart{display:block;width:100%;min-width:540px;height:auto;}
.chart-grid{stroke:var(--line-2);stroke-width:1;}
.chart-axis{stroke:var(--line-strong);stroke-width:1;}
.chart-tick{font-size:11px;fill:var(--ink-3);font-variant-numeric:tabular-nums;}
.chart-xlabel{font-size:11px;fill:var(--ink-2);}
.chart-xsub{fill:var(--ink-3);}
.chart-hit{fill:transparent;}
.chart-hit:hover,.chart-hit:focus{fill:rgba(20,26,24,.06);}
.chart-hit:focus{outline:none;}
.chart-hit:focus-visible{stroke:var(--brand);stroke-width:1.5;}
.chart-empty{margin:0;padding:34px 12px;text-align:center;font-size:.875rem;color:var(--ink-3);}

.chart-table{margin:10px 0 0;}
.chart-table summary{
  display:inline-block;cursor:pointer;
  font-size:.8125rem;font-weight:500;color:var(--brand);
}
.chart-table summary:hover{text-decoration:underline;text-underline-offset:2px;}
.chart-table .table-scroll{margin-top:10px;border:1px solid var(--line-2);border-radius:var(--r);}
.chart-table table.registry tbody td{padding:8px 14px;}

.chart-tip{
  position:fixed;z-index:60;left:0;top:0;
  min-width:168px;max-width:280px;padding:9px 12px 10px;
  background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-2);
  font-size:.8125rem;line-height:1.45;
  pointer-events:none;
}
.tip-title{margin:0 0 5px;font-size:.75rem;font-weight:600;color:var(--ink-2);}
.tip-row{display:flex;align-items:center;gap:8px;}
.tip-key{width:10px;height:3px;border-radius:2px;flex:none;}
.tip-name{flex:1;color:var(--ink-2);white-space:nowrap;}
.tip-value{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;padding-left:10px;}

/* -- Ranked tables: the name, a bar, the figure the bar shows, a second figure for context -- */
.rank-table{width:100%;border-collapse:collapse;}
.rank-table th,.rank-table td{padding:9px 6px;border-bottom:1px solid var(--line-2);vertical-align:middle;}
.rank-table th:first-child{padding-left:0;}
.rank-table td:last-child,.rank-table thead th:last-child{padding-right:0;}
.rank-table tbody tr:last-child th,.rank-table tbody tr:last-child td{border-bottom:none;}
.rank-table thead th{
  padding-top:0;padding-bottom:7px;
  text-align:left;font-size:.6875rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-3);border-bottom-color:var(--line);white-space:nowrap;
}
.rank-table thead th.num{text-align:right;}
.rank-table tbody th{
  text-align:left;font-size:.875rem;font-weight:500;color:var(--ink);
  overflow-wrap:break-word;
}
.rank-table .rank-bar-col{width:34%;min-width:56px;}
.rank-table td.num{white-space:nowrap;}
.rank-bar{display:block;}
.rank-main{font-size:.875rem;font-weight:600;color:var(--ink);}
.rank-side{font-size:.8125rem;color:var(--ink-3);}

/* -- Action lists -- */
.dash-list tbody td{padding:10px 12px;}
.dash-list thead th{padding:9px 12px;}
.dash-list .owing{font-weight:600;color:var(--danger);}
.dash-list .due-chip{margin-left:0;}

/* ======================================================================
   20. Responsive
   ====================================================================== */
@media (max-width:1000px){
  .appbar-inner{flex-wrap:wrap;min-height:0;padding:0 16px;}
  .brand{order:1;border-right:none;padding-right:0;}
  .appbar-user{order:2;margin-left:auto;border-left:none;padding-left:0;}
  .appnav{
    order:3;width:100%;
    border-top:1px solid rgba(255,255,255,.1);
    overflow-x:auto;flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .appnav::-webkit-scrollbar{display:none;}
  .appnav a{padding:11px 13px;}
  table.registry thead th{top:0;}
  /* The app bar wraps to two rows here, so pinning the stepper under it would need a guess.
     It scrolls away instead — on a short screen that is the better trade anyway. */
  .wizard-steps{position:static;}
  /* Too narrow for five labelled steps side by side: only the current one keeps its text. */
  .wizard-steps ol{gap:2px;}
  .wizard-steps li{flex:0 0 auto;}
  .wizard-steps li:has(.step.current){flex:1 1 auto;min-width:0;}
  .step-body{display:none;}
  .step.current .step-body{display:flex;}
  .hero-grid,.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .dash-grid > .card{grid-column:1 / -1;}
}
@media (max-width:760px){
  :root{--gutter:16px;}
  .grid,.grid.g3{grid-template-columns:1fr;}
  .reg-summary{grid-template-columns:repeat(2,minmax(0,1fr));}
  .field.span2,.field.span3{grid-column:span 1;}
  .inv-parties,.doc-parties{grid-template-columns:1fr;}
  .doc{padding:22px 18px;}
  .sheet-head,section.block,.actionbar,.readonly-note,.sheet-summary,.wizard-steps{padding-left:18px;padding-right:18px;}
  .card.pad{padding:18px;}
  table.totals-table{min-width:0;width:100%;margin-left:0;}
  .watermark{font-size:3.2rem;}
  .page-head h2{font-size:1.1875rem;}
  .hero-grid,.stat-grid{gap:10px;}
  .hero-main{gap:10px;padding:13px 13px 11px;}
  .hero-icon{width:36px;height:36px;padding:7px;}
  .hero-value{font-size:1.25rem;}
  .hero-foot{padding:6px 13px 7px;}
  .stat-icon{display:none;}
  .dash-head{align-items:flex-start;}
  .who-name{max-width:110px;}
  .actionbar{gap:7px;}
  .actionbar .btn{flex:1 1 auto;}
  .actionbar .status{width:100%;margin-left:0;order:-1;}
  .step-position{flex:1 1 100%;order:-1;text-align:left;padding-right:0;}
  .sheet-head h2{font-size:1.125rem;}
  /* The strip wraps to two rows; the money keeps its own row so it stays the thing you see. */
  .sheet-summary{gap:10px 22px;}
  .sheet-summary dd{max-width:16ch;font-size:.875rem;}
  .sheet-summary .sum-net{flex:1 1 100%;margin-left:0;text-align:left;
    padding-top:10px;border-top:1px solid rgba(27,74,64,.14);}
}
@media (max-width:480px){
  .list-toolbar{padding:11px;}
  .list-toolbar input[type=text],.list-toolbar select{min-width:0;width:100%;flex:1 1 100%;}
  .list-toolbar .btn{flex:1;}
  .page-head{align-items:stretch;}
  .page-head .btn{width:100%;}
  .brand-text span{display:none;}
  /* The month must stay a month: keep seven columns, drop what does not fit. */
  .cal-cell{min-height:62px;padding:4px;}
  .cal-who{display:none;}
  .cal-free{display:none;}
  .cal-entry{font-size:.6875rem;}
  .cal-toolbar{justify-content:center;}
  .avail-table .avail-bar-col{display:none;}
  .dialog-overlay{padding:16px;align-items:flex-end;}
  .dialog{max-width:none;}
  .dialog-foot .btn{flex:1;}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}
}

/* ======================================================================
   21. Print — the letterhead returns, the application disappears
   ====================================================================== */
@media print{
  :root{
    --surface:#fff;--surface-2:#fff;--surface-3:#fff;--canvas:#fff;
    --brand-tint:#fff;--ok-bg:#fff;--warn-bg:#fff;--danger-bg:#fff;--neutral-bg:#fff;
  }
  body{background:#fff!important;color:#000;font-size:10.5pt;}
  body::before{display:none!important;}

  /* Letterhead in <thead> repeats on every printed page. Child-scoped, as on screen. */
  .page-table{display:table;}
  .page-table > thead{display:table-header-group;}
  .page-table > tbody{display:table-row-group;}
  .page-table > thead > tr,.page-table > tbody > tr{display:table-row;}
  .page-table > thead > tr > td,.page-table > tbody > tr > td{display:table-cell;}

  .letterhead{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:0 0 12px;border-bottom:2px solid #000;
  }
  .letterhead-logo{height:74px;width:auto;}
  .letterhead-meta{text-align:right;font-family:var(--f-ui);color:#333;}
  .letterhead-line1{font-size:10pt;font-weight:600;color:#000;letter-spacing:.04em;text-transform:uppercase;}
  .letterhead-line2{font-size:8pt;margin-top:2px;}
  .letterhead-rule{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:6px 0 14px;font-family:var(--f-ui);
  }
  .letterhead-title{font-size:9.5pt;font-weight:600;letter-spacing:.03em;color:#000;}
  .schedule-tag{
    font-size:8pt;font-weight:600;letter-spacing:.12em;
    border:1px solid #000;padding:2px 8px;color:#000;
  }

  /* The application chrome is not part of the document. */
  .appbar,.doc-toolbar,.actionbar,.list-toolbar,.pager,
  .flash,.errors,.readonly-note,.hint,
  .card.lifecycle,.amend-panel,.void-form,.payment-form,
  .card.attachments,.login-overlay,.page-head .btn,.btn,.no-print{display:none!important;}

  main{padding:0;max-width:none;}
  .card{border:none;box-shadow:none;border-radius:0;overflow:visible;}
  .card.pad{padding:0;}
  .card h3{border-bottom:1px solid #999;}
  section.block{break-inside:avoid;padding:10px 0;}
  .sheet-head{padding:0 0 10px;border-bottom:1px solid #000;}
  .doc{padding:0;border:none;box-shadow:none;}
  .doc-box,.action-box,.money-summary div,.doc-amend{background:#fff!important;}

  /* The type selectors are repeated on purpose: the screen rule is `input[type=text]` (0,1,1),
     so a bare `input` here loses to it and the boxes survive onto paper. */
  input,select,textarea,
  input[type=text],input[type=number],input[type=date],input[type=time],
  input[type=password],input[type=email]{
    border:none;border-bottom:1px solid #999;border-radius:0;
    background:transparent!important;box-shadow:none!important;padding:2px 0;min-height:0;
  }
  /* The date/time pickers are controls, not content. */
  input::-webkit-calendar-picker-indicator{display:none;}
  select{background-image:none;padding-right:0;}
  select::picker-icon{display:none;}
  /* A readout prints as the value it is, on the same rule as the fields around it. */
  .readout{
    display:block;border:none;border-bottom:1px solid #999;border-radius:0;
    background:transparent!important;padding:2px 0;min-height:0;
    font-weight:400;color:#000;
  }
  /* A validation message belongs to the unsaved screen, never to the agreement. */
  .field-error{display:none!important;}

  .badge{border:1px solid #666;background:transparent!important;color:#000!important;}
  .badge::before{display:none;}
  /* A printed month sheet: keep the grid, lose the screen tints. */
  .cal-grid{background:#666;border-color:#666;}
  .cal-cell{min-height:78px;background:#fff!important;}
  .cal-cell.today{box-shadow:inset 0 0 0 2px #000;}
  .cal-dot{border-color:#000;}
  .avail-bar{border-color:#666;}
  .avail-bar > span{background:#666;}
  /* A dialog is a screen control; it must never reach paper. */
  .dialog-overlay{display:none!important;}
  /* Paper gets the whole agreement: every step, nothing collapsed, no toggle furniture. */
  .wizard-steps,.sheet-summary,.step-position,.sheet-sub,
  [data-wizard=prev],[data-wizard=next]{display:none!important;}
  .step-panel,.is-wizard .step-panel{display:block!important;}
  .block.collapsed > *{display:revert!important;}
  .block-num,.block-count,.block-chevron{display:none!important;}
  .block-toggle{display:block;padding:0;}
  .reg-summary,.reg-tabs,.due-chip{display:none!important;}
  /* The dashboard prints as a report: figures and charts, none of the screen controls. */
  .chart-tip,.panel-link,.chart-table summary,.dash-controls{display:none!important;}
  .hero{background:#fff;color:#000;border:1px solid #666;box-shadow:none;}
  .hero-label,.hero-foot{color:#000;}
  .hero-foot{background:#fff;border-top:1px solid #ccc;}
  .hero-icon,.stat-icon,.stat-link,.feed-open{display:none!important;}
  .stat{border:1px solid #999;box-shadow:none;}
  .dash-panel{break-inside:avoid;border:1px solid #ccc!important;padding:10px!important;}
  .chart-mark,.rank-bar rect,.chart-line,.chart-area,.chart-dot,.donut-seg,.gauge-fill,.gauge-track,.swatch{
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
  .reg-row > td:first-child{box-shadow:none!important;}

  table.registry thead th,
  table.doc-table.money thead th,
  table.inv-table thead th{
    background:#fff!important;color:#000!important;border-bottom:1.5px solid #000;
  }
  table.registry tbody td{border-bottom:1px solid #ccc;}
  table.totals-table{border:1px solid #000;}
  table.totals-table tr.grand td{background:#fff!important;border-top:1.5px solid #000;}

  .watermark{
    position:fixed;color:rgba(166,58,43,.12);
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
  table.doc-table{break-inside:auto;}
  table.doc-table tr{break-inside:avoid;}
  .doc-block,.doc-parties,.doc-signs{break-inside:avoid;}
  a{text-decoration:none;color:#000;}
}

/* ======================================================================
   22. Print page setup, and the one-page documents
   ====================================================================== */
/* The paper margin is drawn by the page itself (padding on the wrapper's cells, and a spacer in
   its repeating header and footer), not by @page. A print dialog set to "Margins: None" throws
   @page margins away and ran the text off both edges of the sheet. */
@page{size:A4 portrait;margin:0;}
.page-table > tfoot{display:none;}
@media print{
  html,body{width:auto;margin:0;}
  /* Fixed layout keeps the wrapper at the paper's width, whatever is inside it. */
  .page-table{width:100%;table-layout:fixed;}
  .page-table > tfoot{display:table-footer-group;}
  .page-table > tfoot > tr{display:table-row;}
  .page-table > thead > tr > td,.page-table > tbody > tr > td,.page-table > tfoot > tr > td{
    display:table-cell;width:100%;padding:0 12mm;border:none;overflow:hidden;
  }
  .page-table > thead > tr > td{padding-top:8mm;}
  .page-table > tfoot > tr > td{height:8mm;}
  .doc{width:100%;max-width:100%;overflow:visible;}
  table.doc-table th,table.doc-table td{overflow-wrap:break-word;}
  /* A4 is narrower than the phone breakpoint, so the small-screen stacking would reach paper. */
  .doc-parties,.inv-parties{grid-template-columns:1fr 1fr;}
  .watermark{font-size:5rem;}

  /* ---- Agreement, invoice and operations sheet: one A4 sheet each ---- */
  /* The letterhead cell has a fixed height so the sheet below it has a known one: A4 less the
     letterhead, the bottom margin and a millimetre of slack. The sheet is enlarged by --z (set
     per agreement) and its tables take up the rest, so the page is filled top to bottom. */
  .doc-sheet-page .page-table > thead > tr > td{height:28mm;vertical-align:top;}
  .doc-sheet-page .doc{
    zoom:var(--z,1);
    display:flex;flex-direction:column;
    min-height:calc((100vh - 39mm) / var(--z,1));
  }
  .doc-sheet-page .doc > *{flex:0 0 auto;}
  .doc-sheet-page .doc > .doc-block{display:flex;flex-direction:column;flex-basis:auto;}
  .doc-sheet-page .doc-block > *{flex:0 0 auto;}
  .doc-sheet-page .doc-block > table.doc-table,
  .doc-sheet-page .doc > table.doc-table{flex:1 0 auto;}
  .doc-sheet-page .doc > table.doc-received,
  .doc-sheet-page .doc > table.doc-table.compact{flex-grow:0;}
  .doc-sheet-page table.doc-table th,
  .doc-sheet-page table.doc-table td{vertical-align:middle;}
  body.doc-sheet-page{font-size:8pt;}
  .doc-sheet-page .letterhead{padding-bottom:4px;border-bottom-width:1.5px;}
  .doc-sheet-page .letterhead-logo{height:32px;}
  .doc-sheet-page .letterhead-meta{line-height:1.25;}
  .doc-sheet-page .letterhead-line1{font-size:8.5pt;}
  .doc-sheet-page .letterhead-line2{font-size:7.5pt;margin-top:1px;}
  .doc-sheet-page .letterhead-rule{padding:3px 0 4px;}
  .doc-sheet-page .letterhead-title{font-size:8pt;}
  .doc-sheet-page .schedule-tag{font-size:7pt;padding:1px 6px;}

  .doc-sheet-page .doc{font-size:8pt;line-height:1.22;color:#000;}
  .doc-sheet-page .doc-head{
    display:block;border-bottom:1.5px solid #000;padding-bottom:4px;margin-bottom:5px;
  }
  .doc-sheet-page .doc-head h2{font-size:13pt;line-height:1.2;text-align:center;margin:0 0 4px;}
  .doc-sheet-page .doc-meta{
    display:flex;flex-wrap:wrap;justify-content:space-between;gap:1px 16px;
    text-align:left;font-size:8pt;color:#000;
  }
  .doc-sheet-page .doc-meta div{margin:0;gap:5px;white-space:nowrap;justify-content:flex-start;}
  .doc-sheet-page .doc-meta span{color:#444;}
  .doc-sheet-page .doc-amend{
    border:1px solid #666;border-radius:0;color:#000;
    padding:3px 7px;font-size:8pt;margin:0 0 6px;
  }
  .doc-sheet-page .doc-intro{font-size:8pt;margin:0 0 4px;}

  .doc-sheet-page .doc-parties{gap:10px;margin-bottom:6px;align-items:stretch;}
  .doc-sheet-page .doc-box{padding:4px 8px;border:1px solid #666;border-radius:0;}
  .doc-sheet-page .doc-box h4{font-size:7pt;margin:0 0 2px;color:#444;}
  .doc-sheet-page .doc-box p{font-size:8pt;margin:0;}

  .doc-sheet-page .doc-block{margin-bottom:3px;break-inside:auto;}
  .doc-sheet-page .doc-block h3{
    font-size:7.5pt;color:#000;margin:0 0 3px;padding-bottom:2px;border-bottom:1px solid #000;
  }
  .doc-sheet-page .doc-sub{font-size:7pt;color:#444;margin:4px 0 2px;}
  .doc-sheet-page .doc-block p{margin:2px 0;}

  .doc-sheet-page table.doc-table{table-layout:fixed;font-size:8pt;margin-bottom:0;}
  .doc-sheet-page table.doc-table th,
  .doc-sheet-page table.doc-table td{padding:1.5px 6px;border-color:#666;}
  .doc-sheet-page table.doc-table.kv th{width:17%;font-size:7pt;color:#000;}
  .doc-sheet-page table.doc-table.kv td{width:33%;}
  .doc-sheet-page table.doc-table.doc-items td{width:83%;}
  .doc-sheet-page table.doc-table.money th.num,
  .doc-sheet-page table.doc-table.money td.num{width:26%;text-align:right;}
  .doc-sheet-page table.doc-table.money thead th{font-size:7.5pt;border-bottom:1px solid #000;}
  .doc-sheet-page .doc-words{font-size:8pt;margin:2px 0 0;}

  .doc-sheet-page .doc-list{font-size:8pt;margin:0 0 2px;padding-left:16px;}
  .doc-sheet-page .doc-policy,
  .doc-sheet-page .doc-note{font-size:7.5pt;color:#000;margin:2px 0;}
  .doc-sheet-page .doc-review{font-size:7pt;color:#444;margin:3px 0 0;}

  .doc-sheet-page .doc-signs{margin-top:6px;gap:40px;flex-wrap:nowrap;}
  .doc-sheet-page .doc-signs > div{min-width:0;}
  .doc-sheet-page .sign-line{min-height:20px;padding:4px 2px 2px;font-size:8pt;border-bottom:1px solid #000;}
  .doc-sheet-page .doc-signs span{font-size:7pt;color:#000;margin-top:1px;}

  /* Invoice and operations sheet pieces. */
  .doc-sheet-page .doc > table.doc-table{margin-bottom:3px;}
  .doc-sheet-page table.doc-table.ops th.sn,.doc-sheet-page table.doc-table.ops td.sn{width:10%;text-align:center;white-space:nowrap;}
  .doc-sheet-page table.doc-table.ops th.num,.doc-sheet-page table.doc-table.ops td.num{width:10%;}
  .doc-sheet-page table.doc-table.ops th.tick,.doc-sheet-page table.doc-table.ops td.tick{width:9%;}
  .doc-sheet-page table.doc-table.ops th:nth-child(2){width:38%;}
  .doc-sheet-page table.doc-table.ops thead th{
    font-family:var(--f-ui);font-size:7.5pt;text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid #000;
  }
  .doc-sheet-page table.doc-table.compact{width:50%;min-width:0;margin-left:auto;}
  .doc-sheet-page table.doc-table.compact td{width:55%;}
  .doc-sheet-page table.doc-table.compact td.num{width:45%;}
  /* An invoice's description box is tall when there is little to bill; its text stays at the top. */
  .doc-sheet-page .doc > table.doc-table.money tbody td{vertical-align:top;padding-top:4px;}
  .doc-sheet-page .doc-text{font-size:8pt;margin:1px 0;}
  .doc-sheet-page .doc-balance{
    font-size:10pt;color:#000;border-top:1.5px solid #000;padding-top:4px;margin:5px 0 0;
  }
  .doc-sheet-page .doc-footer{
    font-size:7pt;color:#444;margin:8px 0 0;padding-top:4px;border-top:1px solid #999;
  }

  .doc-sheet-page .doc > table.doc-received{margin-top:5px;margin-bottom:0;}
  .doc-sheet-page table.doc-received th{width:auto;}
  .doc-sheet-page table.doc-received th:nth-child(1){width:25%;}
  .doc-sheet-page table.doc-received td:nth-child(2){width:27%;}
  .doc-sheet-page table.doc-received th:nth-child(3),
  .doc-sheet-page table.doc-received th:nth-child(5){width:8%;}
  .doc-sheet-page table.doc-received td:nth-child(4),
  .doc-sheet-page table.doc-received td:nth-child(6){width:16%;}
}

/* ---- Finance ---- */
.finance-nav{margin:0 0 14px;}
.finance-band{
  margin:22px 0 10px;padding:0;border:none;
  font-size:.8125rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);
}
.finance-vendor{margin:0;padding:0;border:none;font-size:1rem;}
table.registry tr.row-overdue td:first-child,table.lines-table tr.row-overdue td:first-child{box-shadow:inset 3px 0 0 var(--danger);}
.overdue-tag{color:var(--danger);font-weight:600;}
table.registry tr.voided td{color:var(--ink-3);text-decoration:line-through;}
table.registry tr.voided td:last-child,table.registry tr.voided td:last-child *{text-decoration:none;}
table.registry.ledger tr.money-out td.num{color:var(--danger);}
table.registry.ledger tr.money-in td.num{color:var(--ok);}
.row-links{white-space:nowrap;font-size:.8125rem;}
.inline-label{font-size:.8125rem;font-weight:500;color:var(--ink-2);align-self:center;}
.list-toolbar input[type=date]{width:auto;}
.refund-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px 20px;flex-wrap:wrap;}
.money-summary.compact{margin:0;}
.money-summary.compact strong{font-size:1rem;}
.inline-refund{margin-top:8px;}
.event-profit{margin:0 0 16px;}
.event-profit span a{font-weight:500;}
.report-table th.group{text-align:center;border-bottom:1px solid var(--line);}
.report-table tfoot th,.report-table tfoot td{border-top:2px solid var(--line-strong);font-weight:600;}
.neg{color:var(--danger);}
.print-only{display:none;}
.receipt{max-width:860px;}
@media print{
  .print-only{display:block;font-size:13pt;margin:0 0 8px;}
  .finance-report{break-inside:auto;margin:0 0 14px;}
  .finance-report .page-head{margin:0;}
  .report-table{font-size:8.5pt;}
  .table-scroll{overflow:visible!important;}
  .neg{color:#000;}
  table.registry.ledger tr.money-out td.num,table.registry.ledger tr.money-in td.num{color:#000;}
}

/* ---- Finance overview: header band, money flow, open items ---- */
.fin-hero{
  display:flex;justify-content:space-between;align-items:center;gap:16px 28px;flex-wrap:wrap;
  margin:0 0 16px;padding:24px 28px;
  background:var(--brand);color:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-2);
}
.fin-hero h2{margin:0;color:#fff;font-size:1.75rem;font-weight:700;letter-spacing:-.02em;}
.fin-hero p{margin:6px 0 0;max-width:62ch;font-size:.9375rem;color:rgba(255,255,255,.86);}
.fin-hero-meta{display:flex;flex-direction:column;align-items:flex-end;gap:6px;font-size:.8125rem;color:rgba(255,255,255,.8);}
.fin-hero-period{
  font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#fff;
  border:1px solid rgba(255,255,255,.45);border-radius:999px;padding:4px 12px;
}
.fin-hero .btn{background:#fff;border-color:#fff;color:var(--brand);}

.fin-flow{display:flex;align-items:stretch;gap:0;padding:18px;margin:0;}
.fin-node{
  flex:1;display:flex;flex-direction:column;gap:3px;min-width:0;
  padding:16px 18px;border-radius:var(--r-lg);
}
.fin-node-icon{width:38px;height:38px;padding:8px;border-radius:var(--r);background:rgba(255,255,255,.7);margin-bottom:6px;}
.fin-node-label{font-size:.8125rem;font-weight:600;color:var(--ink-2);}
.fin-node-value{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fin-node-sub{font-size:.75rem;color:var(--ink-3);}
.fin-node-cash{
  margin-top:auto;padding-top:8px;border-top:1px dashed rgba(0,0,0,.12);
  font-size:.75rem;font-weight:500;color:var(--ink-2);
}
.fin-in{background:var(--ok-bg);} .fin-in .fin-node-value,.fin-in .fin-node-icon{color:var(--ok);}
.fin-out{background:var(--danger-bg);padding:12px 16px;} .fin-out .fin-node-value,.fin-out .fin-node-icon{color:var(--danger);}
.fin-out .fin-node-icon{width:32px;height:32px;padding:6px;margin-bottom:2px;}
.fin-out .fin-node-value{font-size:1.25rem;}
.fin-outs{flex:1.1;display:flex;flex-direction:column;gap:10px;min-width:0;}
.fin-profit{background:var(--brand);color:#fff;}
.fin-profit .fin-node-icon{background:rgba(255,255,255,.16);color:#9BE3BC;}
.fin-profit .fin-node-label,.fin-profit .fin-node-cash{color:rgba(255,255,255,.88);}
.fin-profit .fin-node-sub{color:rgba(255,255,255,.75);}
.fin-profit .fin-node-value{color:#9BE3BC;}
.fin-profit .fin-node-cash{border-top-color:rgba(255,255,255,.25);}
.fin-arrow{flex:none;width:40px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:var(--ink-3);}
.fin-flow-note{margin:8px 2px 0;font-size:.75rem;color:var(--ink-3);}

.fin-open{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0 0 18px;}
.fin-open-card{
  display:flex;flex-direction:column;gap:3px;margin:0;padding:16px 18px 14px;
  border-left:6px solid var(--c);color:var(--ink);text-decoration:none;
  transition:box-shadow .15s,transform .15s;
}
.fin-open-card:hover{text-decoration:none;box-shadow:var(--sh-2);transform:translateY(-1px);}
.fin-open-label{font-size:.75rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);}
.fin-open-value{font-size:1.375rem;font-weight:700;letter-spacing:-.02em;color:var(--c);}
.fin-open-sub{font-size:.75rem;color:var(--ink-3);}
.c-green{--c:var(--ok);} .c-red{--c:var(--danger);} .c-amber{--c:var(--warn);} .c-blue{--c:var(--viz-booked);}

@media (max-width:1000px){
  .fin-open{grid-template-columns:repeat(2,minmax(0,1fr));}
  .fin-flow{flex-direction:column;}
  .fin-arrow{width:auto;height:28px;transform:rotate(90deg);}
  .fin-outs{flex-direction:row;}
  .fin-outs .fin-node{flex:1;}
}
@media (max-width:480px){
  .fin-open{grid-template-columns:1fr;}
  .fin-outs{flex-direction:column;}
  .fin-hero-meta{align-items:flex-start;}
}
.fin-open > .card.fin-open-card,.card.fin-flow{margin:0;}

/* Menus admin: a package's dish table stays folded away until asked for */
.menu-edit-dishes > summary{cursor:pointer;display:inline-block;padding:6px 12px;border:1px solid var(--line, #ddd);border-radius:6px;font-size:.875rem;color:var(--brand);}
.menu-edit-dishes > summary:hover{background:var(--surface-2);}
.menu-edit-dishes[open] > summary{margin-bottom:10px;}

/* Reminders (public/reminders/index.php) */
.btn.whatsapp{background:#1F8F4E;border-color:#1F8F4E;color:#fff;}
.btn.whatsapp:hover{background:#17693F;border-color:#17693F;color:#fff;}
.reminder-preview summary{cursor:pointer;color:var(--brand);font-size:.8125rem;}
.reminder-preview textarea{display:block;width:min(420px,70vw);margin-top:6px;font-size:.8125rem;line-height:1.4;resize:vertical;}
table.reminder-list tr.is-sent{opacity:.5;}
.reminder-sent-text{display:block;width:100%;max-width:560px;font-size:.8125rem;line-height:1.4;}