/* Tips — a manager's worksheet, not a document. One column, three cards, then the payout table
   as the centrepiece with a sticky approval bar. Exceptions (unapproved hours, exclusions,
   auto-excluded salaried staff) surface above the numbers they affect. */

/* The workspace .main is a clipped grid (overflow:hidden); each module scrolls its own content
   row, the way Ad Studio's sheet does. min-height:0 is what lets a grid child shrink and scroll.
   The harness had its own body styles, which is exactly why this never showed there. */
.tips-main .module-shell{max-width:920px;width:100%;margin:0 auto;padding:20px 20px 24px;overflow-y:auto;min-height:0;height:100%}

.tips-card{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin-bottom:16px}
.tips-card h2{font-family:Georgia,serif;color:var(--brown);font-size:1.05rem;margin:0 0 4px}
.tips-card .tips-hint{color:var(--muted);font-size:.85rem;margin:0 0 14px}

.tips-controls{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.tips-field{display:flex;flex-direction:column;gap:6px;min-width:150px}
.tips-field label{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.tips-field input,.tips-field select{border:1px solid var(--line);border-radius:10px;padding:9px 12px;font:inherit;background:var(--cream);color:var(--ink);font-variant-numeric:tabular-nums}
.tips-field input:focus-visible,.tips-field select:focus-visible,.tips-main button:focus-visible{outline:2px solid var(--terracotta);outline-offset:2px}

.tips-load{border:none;border-radius:10px;background:var(--brown);color:var(--paper);padding:10px 20px;font:inherit;font-weight:600;cursor:pointer}
.tips-load:disabled{opacity:.5;cursor:default}

.tips-split-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
/* The split is the organisation's rule, so it reads as a statement. The control to move it exists
   only for the people who may, and saying so takes two presses. */
.tips-split-fixed{margin:0;font-size:1rem;color:var(--ink);font-variant-numeric:tabular-nums}
.tips-split-fixed strong{font-size:1.15rem;color:var(--brown)}
.tips-split-edit{border:1px solid var(--line);background:var(--cream);border-radius:999px;padding:6px 14px;font:inherit;font-size:.82rem;cursor:pointer;color:var(--brown);font-weight:600}
.tips-split-save{border:none;border-radius:10px;background:var(--brown);color:var(--paper);padding:8px 16px;font:inherit;font-weight:600;cursor:pointer}
.tips-split-cancel{border:1px solid var(--line);border-radius:10px;background:none;padding:8px 14px;font:inherit;cursor:pointer;color:var(--muted)}
.tips-split-warning{flex-basis:100%;margin:0;padding:10px 14px;background:#fdf3e4;border:1px solid #e8c990;border-radius:10px;color:#6b4c12;font-size:.88rem}
/* Which store the figure belongs to, said beside it: a split is one store's rule now, and a
   manager reading 60/40 has to be able to tell whose it is before changing it. */
.tips-split-source{flex-basis:100%;margin:0;color:var(--muted);font-size:.82rem}

/* The tabs ----------------------------------------------------------------------------------
   Three jobs on one screen: building a sheet, deciding the splits sheets are built on, and
   emailing a sheet already approved. Tip splits is not drawn at all for anyone who may not use
   it, so nobody is offered a tab that opens onto a refusal. */
.tips-tabs{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 16px;border-bottom:1px solid var(--line)}
.tips-tabs button{border:0;border-bottom:2px solid transparent;background:none;color:var(--muted);padding:11px 16px;font:inherit;font-size:.82rem;font-weight:700;cursor:pointer}
.tips-tabs button.active{color:var(--ink);border-bottom-color:var(--brown)}

/* The Tip splits tab ------------------------------------------------------------------------
   The default as a statement, then every store in one table: what it pays, whether that is its
   own answer or the default it inherits, and who last moved it. */
.tips-splits-table .tips-splits-store{font-weight:600}
.tips-splits-table .tips-splits-percent{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.tips-splits-follows{color:var(--muted);font-size:.85rem}
.tips-splits-follows .tips-was{display:block;margin-top:2px;color:var(--muted)}
.tips-splits-actions{text-align:right;white-space:nowrap}
.tips-splits-change,.tips-splits-follow{border:1px solid var(--line);background:var(--cream);border-radius:999px;padding:6px 14px;font:inherit;font-size:.8rem;cursor:pointer;color:var(--brown);font-weight:600;margin-left:6px}
/* A pressed Follow is asking a question, not reporting a state, so it wears the warning colour
   the rest of the module asks with rather than one of its own. */
.tips-splits-follow.tips-confirming{background:#fdf3e4;border-color:#e8c990;color:#6b4c12}

/* One number, what it will reach, and two presses. */
.tips-split-dialog{border:1px solid var(--line);border-radius:16px;padding:0;max-width:480px;width:calc(100vw - 32px);background:var(--paper)}
.tips-split-dialog::backdrop{background:color-mix(in srgb, var(--ink) 35%, transparent)}
.tips-split-dialog-inner{padding:20px 22px;display:grid;gap:12px}
.tips-split-dialog h2{font-family:Georgia,serif;color:var(--brown);margin:0;font-size:1.05rem}
.tips-split-dialog-target{margin:0;color:var(--muted);font-size:.85rem}
.tips-split-dialog .tips-split-fields{display:flex;gap:12px;align-items:flex-end}
.tips-split-dialog .tips-field{flex:1 1 0;min-width:0}
.tips-split-dialog .tips-field input{width:100%;text-align:right}
.tips-split-everywhere{display:flex;gap:10px;align-items:flex-start;font-size:.85rem;color:var(--ink);cursor:pointer}
/* The box is pressed through its label, so the box itself stays a box: a touch-size rule in the
   shell had stretched it into a 44px square. */
.tips-split-everywhere input{flex:none;width:18px;height:18px;min-height:0;margin:2px 0 0;accent-color:var(--brown)}
.tips-split-dialog-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}

/* The Emails tab ----------------------------------------------------------------------------
   The sheet, the addresses, Send. The addresses are a list on this screen and nowhere else. */
.tips-email-unavailable{margin:0 0 14px;padding:10px 14px;background:#fdf3e4;border:1px solid #e8c990;border-radius:10px;color:#6b4c12;font-size:.88rem}
.tips-email-sheet{width:100%}
.tips-email-sheet select{width:100%}
.tips-email-recipients{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-top:14px}
.tips-email-field{flex:1 1 240px}
.tips-email-add{border:1px solid var(--line);border-radius:10px;background:var(--cream);color:var(--brown);padding:9px 18px;font:inherit;font-weight:600;cursor:pointer}
.tips-email-me{border:1px solid var(--line);background:var(--cream);border-radius:999px;padding:8px 14px;font:inherit;font-size:.82rem;font-weight:600;color:var(--brown);cursor:pointer}
.tips-email-add:disabled,.tips-email-me:disabled,.tips-email-send:disabled{opacity:.5;cursor:default}
.tips-email-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0;padding:0}
.tips-email-chips li{display:flex;align-items:center;gap:6px;background:var(--blush-soft);border-radius:999px;padding:4px 6px 4px 12px;font-size:.82rem;color:var(--ink)}
.tips-email-chips button{border:none;background:none;color:var(--muted);font:inherit;font-size:1rem;line-height:1;cursor:pointer;padding:2px 8px;border-radius:999px}
.tips-email-error{margin:12px 0 0;padding:10px 14px;background:#fdf3e4;border:1px solid #e8c990;border-radius:10px;color:#6b4c12;font-size:.88rem}
.tips-email-send-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:16px}
.tips-email-send{border:none;border-radius:10px;background:var(--brown);color:var(--paper);padding:11px 22px;font:inherit;font-weight:600;cursor:pointer}
.tips-email-status{color:var(--muted);font-size:.85rem}

.tips-pool-figures{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}
.tips-figure{flex:1;min-width:140px;background:var(--blush-soft);border-radius:12px;padding:12px 14px}
.tips-figure .tips-figure-label{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.tips-figure strong{display:block;font-size:1.35rem;font-variant-numeric:tabular-nums;color:var(--ink);margin-top:2px}
.tips-figure input{width:100%;border:1px solid var(--line);border-radius:8px;background:var(--paper);padding:7px 10px;font:inherit;font-size:1.1rem;text-align:right;font-variant-numeric:tabular-nums;margin-top:4px}
/* An approved sheet's cash figures read like the card figure beside them, not like a box still
   waiting to be typed in. */
.tips-figure input:read-only{background:transparent;border-color:transparent;font-weight:600;color:var(--ink);cursor:default}
/* The bank run is not part of the pool; it is how the pool gets funded. Set apart by a rule rather
   than by a colour, so it reads as the next question and not as another tip figure. */
.tips-bank-figures{margin-top:12px;padding-top:14px;border-top:1px dashed var(--line)}
.tips-bank-draw strong{color:var(--brown)}
.tips-editing{display:flex;gap:10px;align-items:flex-start;background:var(--blush-soft);border:1px solid var(--terracotta);border-radius:10px;padding:10px 14px;margin:0 0 14px;color:var(--ink);font-size:.88rem}

.tips-warning{display:flex;gap:10px;align-items:flex-start;background:#fdf3e4;border:1px solid #e8c990;border-radius:10px;padding:10px 14px;margin:0 0 14px;color:#6b4c12;font-size:.88rem}
.tips-note{color:var(--muted);font-size:.85rem;margin:10px 0 0}

.tips-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.tips-table th{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
.tips-table th.tips-num,.tips-table td.tips-num{text-align:right}
.tips-table td{padding:10px;border-bottom:1px solid var(--blush-soft);color:var(--ink)}
.tips-table tr:last-child td{border-bottom:none}
.tips-table .tips-name{font-weight:600}
.tips-table .tips-basis{color:var(--muted);font-size:.75rem;display:block;font-weight:400}

.tips-pool-chip{border:1px solid var(--line);border-radius:999px;background:var(--cream);padding:4px 12px;font:inherit;font-size:.78rem;font-weight:600;cursor:pointer;color:var(--ink)}
.tips-pool-chip[data-pool="FOH"]{background:var(--blush);border-color:var(--rose)}
.tips-pool-chip[data-pool="BOH"]{background:var(--cream)}
.tips-exclude{border:1px solid var(--line);border-radius:999px;background:none;padding:4px 12px;font:inherit;font-size:.78rem;cursor:pointer;color:var(--muted)}
.tips-exclude[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}

.tips-edit-toggle{border:1px solid var(--line);border-radius:999px;background:var(--cream);padding:7px 16px;font:inherit;font-size:.85rem;font-weight:600;color:var(--brown);cursor:pointer;margin:0 0 12px}
.tips-edit-toggle[aria-pressed="true"]{background:var(--brown);border-color:var(--brown);color:var(--paper)}
.tips-hours-input{width:84px;border:1px solid var(--terracotta);border-radius:8px;background:var(--paper);padding:6px 8px;font:inherit;text-align:right;font-variant-numeric:tabular-nums}
/* The amount box carries the figure it shows, like the hours box beside it: a number a manager can
   select, backspace and retype. A placeholder here instead read as a dead field -- the figure was
   not in the box, so backspacing it did nothing. Dashed while the figure is still the calculated
   one, solid and bold once the manager has set it, and the line beneath says which. */
.tips-amount-input{width:96px;border:1px dashed var(--line);border-radius:8px;background:var(--paper);padding:6px 8px;font:inherit;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
.tips-amount-input::placeholder{color:var(--muted);opacity:1}
.tips-amount-input.tips-amount-set{border:1px solid var(--terracotta);border-style:solid;font-weight:700}
/* A figure the field has refused is marked as it is typed; the bubble that says why waits until
   the field is left, so "7." mid-keystroke is a red edge and not a pop-up on every row. */
.tips-hours-input:invalid,.tips-amount-input:invalid{border-color:#8f2f1f;box-shadow:0 0 0 1px #8f2f1f}
.tips-was{display:block;color:var(--terracotta);font-size:.72rem;font-weight:600}
/* Somebody who worked in both pools. The chip does not flip, because there is nothing to flip to:
   the row is already in both, and moving them is done by moving hours between the two boxes. */
.tips-pool-split{background:var(--blush-soft,var(--cream));border-style:dashed;cursor:default}
.tips-pool-hours{display:block;font-variant-numeric:tabular-nums}
.tips-pool-hour{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin-bottom:4px}
.tips-pool-hour>span{color:var(--muted);font-size:.72rem;font-weight:600;letter-spacing:.04em}
.tips-pool-hour .tips-hours-input{width:72px}
.tips-pool-confirm{background:var(--ink) !important;border-color:var(--ink) !important;color:var(--paper) !important}
.tips-remove{border:1px solid var(--line);border-radius:999px;background:none;padding:4px 12px;font:inherit;font-size:.78rem;cursor:pointer;color:#8f2f1f}
/* The add form sits inside the payout card, below the table it feeds, and only while adjusting. */
.tips-add{border-top:1px solid var(--line);margin-top:16px;padding-top:14px}
.tips-add h3{font-family:Georgia,serif;color:var(--brown);font-size:.95rem;margin:0 0 4px}
.tips-add .tips-hint{margin:0 0 12px}
.tips-add-row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.tips-add-row .tips-field:first-child{flex:1;min-width:180px}
.tips-add-row .tips-field:nth-child(2){min-width:96px}
.tips-add-row .tips-field:nth-child(2) input{width:96px;text-align:right}
.tips-add-row .tips-field:nth-child(3){min-width:110px}
.tips-add-button{border:1px solid var(--brown);border-radius:10px;background:var(--brown);color:var(--paper);padding:10px 18px;font:inherit;font-weight:600;cursor:pointer}
.tips-add-error{color:#8f2f1f;font-size:.85rem;margin:10px 0 0}
tr.tips-excluded td{color:var(--muted)}
tr.tips-excluded .tips-name{text-decoration:line-through;text-decoration-color:var(--terracotta)}
tr.tips-excluded td.tips-amount{color:var(--muted)}

.tips-total-row td{border-top:2px solid var(--line);font-weight:700;padding-top:12px}

/* Sticky inside the scrolling shell. The bar sits in the DOM between the payout table and the
   history card, so bottom:0 keeps it pinned to the shell's lower edge while both scroll past;
   the shell's own bottom padding is what previously floated it high, so the bar opts out of it. */
.tips-approve-bar{position:sticky;bottom:8px;z-index:3;display:flex;flex-wrap:wrap;gap:12px;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:14px 18px;box-shadow:0 -6px 24px color-mix(in srgb, var(--ink) 12%, transparent);margin-bottom:16px}
.tips-approve-bar .tips-approve-summary{font-variant-numeric:tabular-nums;color:var(--ink)}
.tips-approve-bar .tips-approve-summary strong{font-size:1.2rem}
.tips-approve{margin-left:auto;border:none;border-radius:10px;background:var(--brown);color:var(--paper);padding:12px 24px;font:inherit;font-weight:700;cursor:pointer}
.tips-approve:disabled{opacity:.5;cursor:default}
.tips-approved-stamp{display:inline-flex;align-items:center;gap:8px;background:#e8f3e4;border:1px solid #a9cf9e;color:#2c5e1f;border-radius:999px;padding:7px 16px;font-weight:600}

.tips-history-open{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;width:100%;text-align:left;border:none;background:none;padding:10px 6px;font:inherit;font-variant-numeric:tabular-nums;border-radius:8px;color:var(--ink)}
.tips-sheet-dialog{border:1px solid var(--line);border-radius:16px;padding:0;max-width:640px;width:calc(100vw - 32px);background:var(--paper)}
.tips-sheet-dialog::backdrop{background:color-mix(in srgb, var(--ink) 35%, transparent)}
.tips-sheet-dialog-inner{padding:20px 22px}
.tips-sheet-dialog h2{font-family:Georgia,serif;color:var(--brown);margin:0 0 4px;font-size:1.05rem}
.tips-sheet-dialog-meta{color:var(--muted);font-size:.85rem;margin:0 0 14px}
.tips-sheet-eyebrow{font-size:.68rem;letter-spacing:.14em;color:var(--terracotta);font-weight:700;margin:0 0 2px}
/* The figures a manager checks before handing envelopes out, above the names rather than buried in
   a sentence: card, cash, pool, each pool's share, and who was left out. */
.tips-sheet-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:0 0 16px}
.tips-sheet-summary>div{background:var(--blush-soft);padding:9px 12px}
.tips-sheet-summary dt{font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
.tips-sheet-summary dd{margin:2px 0 0;font-size:1.05rem;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.tips-sheet-dialog-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}
.tips-sheet-print{border:1px solid var(--brown);border-radius:10px;background:var(--brown);color:var(--paper);padding:9px 16px;font:inherit;font-weight:600;cursor:pointer;margin-right:auto}
.tips-sheet-close{border:1px solid var(--line);border-radius:10px;background:var(--cream);padding:9px 16px;font:inherit;cursor:pointer}
.tips-sheet-edit{border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);padding:9px 16px;font:inherit;font-weight:600;cursor:pointer}
.tips-sheet-delete{border:none;border-radius:10px;background:#8f2f1f;color:var(--paper);padding:9px 16px;font:inherit;font-weight:600;cursor:pointer}
.tips-history li{display:block;padding:0;border-bottom:1px solid var(--blush-soft);list-style:none}
.tips-history li:last-child{border-bottom:none}
.tips-history .tips-history-store{font-weight:600}
.tips-history .tips-history-total{margin-left:auto;font-weight:700}
.tips-history ul{margin:0;padding:0}
.tips-error{color:#8f2f1f;background:color-mix(in srgb, var(--rose) 18%, var(--cream));border:1px solid color-mix(in srgb, var(--rose) 68%, var(--blush));border-radius:10px;padding:10px 14px;margin:0 0 14px;font-size:.9rem}
[hidden]{display:none !important}

@media (max-width:640px){
  .tips-main .module-shell{padding:12px 12px 24px}
  .tips-table thead{display:none}
  .tips-table tr{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:10px 0;border-bottom:1px solid var(--blush-soft)}
  .tips-table td{border:none;padding:2px 0}
  .tips-table td.tips-num{text-align:left}
  .tips-table td.tips-amount{grid-column:2;grid-row:1;text-align:right;font-weight:700}
  /* The Total row's pool figure carries no .tips-amount class, so it flowed into the card grid as
     a fourth cell: a second line, left-aligned, under the hours. It sits top-right like every
     other row's amount. */
  .tips-table .tips-total-row td:last-child{grid-column:2;grid-row:1;text-align:right}
  .tips-table td.tips-actions{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:8px}
}

/* The printed sheet -------------------------------------------------------------------------
   A document rather than a screenshot of an app: a masthead, the figures the payout rests on,
   the names, and a footer saying where every number came from. Ink is expensive and photocopies
   are grey, so it is dark type on white with hairline rules, no filled panels, and no colour
   carrying meaning on its own. */
.tips-print{display:none}

@media print{
  /* Everything except the sheet, including an open dialog and its backdrop. */
  body>*{display:none !important}
  body>.tips-print{display:block !important}
  dialog,dialog::backdrop{display:none !important}
  /* The workspace clips itself to the viewport; a printed page has to be allowed to run on. */
  html,body{height:auto !important;overflow:visible !important;background:#fff !important;color:#111 !important}
  @page{margin:14mm}

  .tips-print{font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-size:10.5pt;line-height:1.45;color:#111}
  .tips-print-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;border-bottom:2px solid #111;padding-bottom:10px;margin-bottom:14px}
  .tips-print-eyebrow{font-size:8pt;letter-spacing:.16em;font-weight:700;color:#555;margin:0 0 2px}
  .tips-print h1{font-family:Georgia,serif;font-size:19pt;margin:0;line-height:1.15}
  .tips-print-period{margin:2px 0 0;font-size:11pt;color:#333;font-variant-numeric:tabular-nums}
  .tips-print-logo{height:34px;width:auto}

  .tips-print-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 18px;margin:0 0 16px;break-inside:avoid}
  .tips-print-summary>div{border-bottom:1px solid #ddd;padding-bottom:5px}
  .tips-print-summary dt{font-size:7.5pt;letter-spacing:.07em;text-transform:uppercase;color:#666;font-weight:600}
  .tips-print-summary dd{margin:1px 0 0;font-size:12pt;font-weight:700;font-variant-numeric:tabular-nums}

  .tips-print-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
  /* Repeat the header on every page, and never split a person across two of them. */
  .tips-print-table thead{display:table-header-group}
  .tips-print-table tr{break-inside:avoid}
  .tips-print-table th{text-align:left;font-size:7.5pt;letter-spacing:.08em;text-transform:uppercase;color:#555;border-bottom:1.5px solid #111;padding:0 8px 5px}
  .tips-print-table td{padding:6px 8px;border-bottom:1px solid color-mix(in srgb, var(--ink) 11%, var(--paper));vertical-align:top}
  .tips-print-table .tips-num{text-align:right}
  .tips-print-table .tips-name{font-weight:600}
  /* Provenance prints as words. A line-through alone does not survive a photocopier. */
  .tips-print-table .tips-was{display:block;font-size:8pt;color:#666;font-style:italic}
  .tips-print-table tr.tips-excluded .tips-name{text-decoration:line-through}
  .tips-print-table tr.tips-excluded td{color:#666}
  .tips-print-table tfoot .tips-total-row td{border-top:1.5px solid #111;border-bottom:none;font-weight:700;font-size:11.5pt;padding-top:8px}

  .tips-print .tips-note{font-size:9pt;color:#444;margin:10px 0 0;padding-left:10px;border-left:2px solid #bbb}
  .tips-print-footer{margin-top:18px;padding-top:8px;border-top:1px solid #ddd;font-size:8pt;color:#666;line-height:1.5}
}

.tips-history-filter{margin:0 0 12px;max-width:280px}
.tips-history .tips-history-other{color:var(--muted);font-size:.78rem;font-style:italic}
.tips-history .tips-history-who{color:var(--muted);font-size:.78rem}

/* ── Phone and iPad pass ─────────────────────────────────────────────────────────────────────
   Fixes from the September 2026 responsive audit, one comment per finding. They sit at the end so
   they win at equal specificity, and each stays inside the band it was judged in. */

/* tips-5: The page declares viewport-fit=cover and .main is 100dvh, so the module shell's scrollport ends at the physical bottom of the screen. The sticky approval bar pi */
.tips-main .module-shell{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
/* tips-7: The provenance note that says an hours figure was changed is 11.5px bold terracotta on paper, which measures 2.76:1 (2.36:1 on the blush-soft figure panels), we */
.tips-was{color:var(--brown)}

@media (hover:hover) {
  /* tips-4: Nine hover rules are unwrapped, and iOS/Android keep :hover applied after a tap until the user touches something else. On an iPad, 'Pull hours & card tips' stay */
  .tips-load:hover{background:var(--terracotta)}
  .tips-split-edit:hover{background:var(--blush-soft)}
  .tips-split-save:hover{background:var(--terracotta)}
  .tips-remove:hover{background:#8f2f1f;border-color:#8f2f1f;color:var(--paper)}
  .tips-add-button:hover{background:var(--terracotta);border-color:var(--terracotta)}
  .tips-approve:hover{background:var(--terracotta)}
  .tips-history-open:hover{background:var(--blush-soft)}
  .tips-sheet-print:hover{background:var(--terracotta);border-color:var(--terracotta)}
  .tips-sheet-edit:hover{border-color:var(--brown);background:var(--blush-soft)}
}

@media (max-width:1199px) {
  /* tips-1: Nearly every control in the module is below the 44px touch minimum on phones and iPads. The visible screen already shows it: the date inputs and store select ar */
  .tips-field input,.tips-field select,.tips-figure input,.tips-hours-input,.tips-amount-input,.tips-load,.tips-split-edit,.tips-split-save,.tips-split-cancel,.tips-splits-change,.tips-splits-follow,.tips-email-add,.tips-email-me,.tips-email-send,.tips-tabs button,.tips-edit-toggle,.tips-add-button,.tips-approve,.tips-history-open,.tips-sheet-close,.tips-sheet-print,.tips-sheet-edit,.tips-sheet-delete{min-height:44px}
  /* A checkbox is pressed by its label, so the label is what has to be 44 tall. */
  .tips-split-everywhere{min-height:44px;align-items:center}
  .tips-email-chips button{min-width:32px;min-height:32px}
  .tips-pool-chip,.tips-exclude,.tips-remove{position:relative;min-height:32px;padding:6px 14px}
  .tips-pool-chip::after,.tips-exclude::after,.tips-remove::after{content:"";position:absolute;inset:-6px 0}
  .tips-table td.tips-actions{padding-top:12px;padding-bottom:12px}
}

@media (max-width:640px) {
  /* tips-2: When a manager with split permission taps 'Change the split', the editor (two labels, two 64px inputs, a separator, 'Save for everyone' and 'Cancel') opens as a */
  /* The dialog's buttons take the width rather than crowding into a corner, and 16px on the
     address field because iOS zooms the page into anything smaller. */
  .tips-split-dialog-actions{justify-content:stretch}
  .tips-split-dialog-actions button{flex:1 1 auto}
  .tips-email-field input{font-size:16px}
  .tips-email-recipients>*{flex:1 1 100%}
  .tips-email-send{width:100%}
  /* Four columns do not fit a phone, so each store becomes a block: its name, what it pays, what
     it follows, and its buttons on a line of their own. */
  .tips-splits-table tbody tr{display:grid;grid-template-columns:1fr auto;gap:2px 10px}
  .tips-splits-table .tips-splits-percent{grid-column:2;grid-row:1;text-align:right}
  .tips-splits-table .tips-splits-follows{grid-column:1 / -1}
  .tips-splits-table .tips-splits-actions{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:8px;text-align:left}
  .tips-splits-change,.tips-splits-follow{margin-left:0;flex:1 1 auto}
  /* tips-3: On phones the period form half-fills its card and its layout depends on a 3px accident. At 375 the From and To fields stack in a single 165px-wide column with ~ */
  .tips-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:end}
  .tips-controls .tips-field{min-width:0}
  .tips-controls .tips-field input,.tips-controls .tips-field select{width:100%;min-width:0;padding-left:10px;padding-right:10px}
  .tips-controls .tips-field:nth-child(3),.tips-load{grid-column:1 / -1}
  /* tips-6: The approved-sheet dialog reuses the phone card-row layout of .tips-table, but that layout keys the top-right bold amount off a .tips-amount class that sheetRow */
  .tips-sheet-dialog .tips-table td:last-child{grid-column:2;grid-row:1;text-align:right;font-weight:700}
  .tips-sheet-dialog-actions{flex-direction:column;align-items:stretch}
  .tips-sheet-dialog-actions button{width:100%;margin:0}
  .tips-sheet-print{order:-2}
  .tips-sheet-edit{order:-1}
  .tips-sheet-delete{order:1}
}

/* From the second-pass review of Tips. */
/* The approved-sheets list is a section with an id, never a class, so its five rules had never matched:
   bullets, the agent's 40px indent, no separators, and the approver's name at full size. */
#tips-history ul{margin:0;padding:0;list-style:none}
#tips-history li{border-bottom:1px solid var(--blush-soft)}
#tips-history li:last-child{border-bottom:none}
#tips-history .tips-history-store{font-weight:600}
#tips-history .tips-history-total{margin-left:auto;font-weight:700}
#tips-history .tips-history-who,#tips-history .tips-history-other{color:var(--muted);font-size:.78rem}
/* The title takes focus when the sheet opens, so the dialog opens at its top rather than at the Close button. */
.tips-sheet-dialog h2:focus{outline:none}
@media (max-width:640px){
  /* A phone row leads with the store and the total, the figure a manager is looking for. */
  .tips-history-open{gap:4px 10px}
  .tips-history-open .tips-history-store{order:-2}
  .tips-history-open .tips-history-total{order:-1}
  /* auto-fit could not seat two 148px cells in a phone dialog and stacked eight figures in one column. */
  .tips-sheet-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* How fresh the hours on screen are, and the button that makes them fresher. The stamp sits beside
   the control rather than in the warnings block: it is a standing fact about the period, not an
   exception, and a manager glances at it every time they open the screen. */
.tips-sync-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid var(--blush-soft)}
.tips-sync-stamp{font-size:.82rem;color:var(--muted);font-variant-numeric:tabular-nums}
/* A day old on a period somebody is about to pay out earns a colour. */
.tips-sync-stale{color:#8a5a12;font-weight:600}
.tips-refresh{border:1px solid var(--line);background:var(--cream);border-radius:999px;padding:6px 14px;font:inherit;font-size:.82rem;cursor:pointer;color:var(--brown);font-weight:600}
.tips-refresh:disabled{opacity:.5;cursor:default}
/* The wait while a pull re-reads Push: a bar that fills on the estimate and a sentence that says
   how long. Motion is the whole point of it, so it is kept under reduced-motion as a bar that
   still fills, only without the easing. */
.tips-pull-progress{margin-top:12px}
.tips-pull-bar{position:relative;height:6px;border-radius:999px;background:var(--blush-soft);overflow:hidden}
.tips-pull-bar span{display:block;height:100%;width:0;border-radius:inherit;background:var(--brown);transition:width .25s linear}
.tips-pull-progress.is-active .tips-pull-bar::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:translateX(-100%);animation:tips-pull-shimmer 1.4s ease-in-out infinite}
.tips-pull-text{margin:6px 0 0;font-size:.82rem;color:var(--muted);font-variant-numeric:tabular-nums}
@keyframes tips-pull-shimmer{to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){
  .tips-pull-bar span{transition:none}
  .tips-pull-progress.is-active .tips-pull-bar::after{animation:none}
}

/* Push's hours moved between pulling a period and approving it. Louder than a warning, because it
   is a refusal with two ways out rather than something to read past. */
.tips-reconcile,.tips-drift{background:#fdf3e4;border:1px solid #e8c990;border-radius:12px;padding:14px 16px;margin:0 0 14px;color:#6b4c12;font-size:.88rem}
.tips-reconcile-head,.tips-drift-head{display:flex;gap:10px;align-items:flex-start;margin:0 0 10px;font-weight:600}
.tips-reconcile-list,.tips-drift-list{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:4px}
.tips-reconcile-list li,.tips-drift-list li{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tips-reconcile-move,.tips-drift-move{font-variant-numeric:tabular-nums;font-weight:600}
.tips-reconcile-total,.tips-drift-total{margin:0 0 12px;font-variant-numeric:tabular-nums;font-weight:600}
.tips-reconcile-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tips-reconcile-reason{flex-basis:100%;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600}
/* 16px, not the panel's 14: iOS zooms the page into any field under sixteen, which it did at the
   moment a manager was writing why hours Push no longer agrees with should stand. */
.tips-reconcile-actions input{flex:1 1 220px;border:1px solid #e8c990;border-radius:10px;padding:8px 12px;font:inherit;font-size:16px;background:var(--paper);color:var(--ink)}
.tips-reconcile-reload{border:1px solid #e8c990;background:var(--paper);border-radius:10px;padding:8px 14px;font:inherit;font-weight:600;cursor:pointer;color:#6b4c12}
.tips-reconcile-force,.tips-drift-accept{border:none;border-radius:10px;background:var(--brown);color:var(--paper);padding:8px 16px;font:inherit;font-weight:600;cursor:pointer}
.tips-drift-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.tips-drift-actions .tips-hint{margin:0}
/* A flagged sheet has to be findable in the list without opening each one. */
.tips-history-flag{background:#fdf3e4;border:1px solid #e8c990;border-radius:999px;padding:2px 10px;font-size:.72rem;font-weight:600;color:#6b4c12}

/* ══ Tips: the Lovable-derived skin ════════════════════════════════════════════════════════════════
   The one Loss Prevention, Instagram and Kitchen Prep wear, read from the --lp-* tokens in
   web/styles.css: Fraunces titles and figures, Karla for the rest, one card surface, small-caps
   labels, a terracotta primary action and the dark-brown pill for what is selected. Last in the
   file so it wins at equal specificity; screen only, so the printed sheet keeps its own rules.
   Colours that carry meaning are unchanged: the amber warnings, the green approved stamp and the
   red of a delete. */
@media screen {
  .tips-main { background:var(--lp-ground); font-family:var(--lp-body); color:var(--lp-ink); -webkit-font-smoothing:antialiased; }
  .tips-main button,.tips-main input,.tips-main select,.tips-sheet-dialog button,.tips-sheet-dialog input { font-family:inherit; }
  .tips-main .module-shell { max-width:1040px; padding-top:28px; }
  .tips-page-title { margin:0 0 20px; font-family:var(--lp-display); font-size:34px; font-weight:600; letter-spacing:-.015em; line-height:1.1; color:var(--lp-ink); }

  /* One card. */
  .tips-card { background:var(--lp-card); border:1px solid var(--lp-line); border-radius:12px; box-shadow:var(--lp-shadow); padding:22px 22px 20px; margin-bottom:18px; }
  .tips-card h2 { margin:0 0 16px; font-family:var(--lp-display); font-size:19px; font-weight:600; letter-spacing:-.01em; color:var(--lp-ink); }
  .tips-card .tips-hint { color:var(--lp-muted); font-size:13px; }
  .tips-add h3 { font-family:var(--lp-display); font-size:16px; font-weight:600; color:var(--lp-ink); margin:0 0 12px; }

  /* Labels over fields, fields on the card. */
  .tips-field label,.tips-figure .tips-figure-label,.tips-table th,.tips-sheet-summary dt,.tips-reconcile-reason { font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--lp-muted); }
  .tips-field input,.tips-field select { min-height:40px; padding:0 12px; border:1px solid var(--lp-line); border-radius:8px; background:var(--lp-card); color:var(--lp-ink); font-size:14px; }
  .tips-field input:focus,.tips-field select:focus,.tips-figure input:focus,.tips-hours-input:focus,.tips-amount-input:focus,.tips-add-row input:focus { outline:none; border-color:var(--lp-accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--lp-accent) 18%, transparent); }
  .tips-main button:focus-visible,.tips-sheet-dialog button:focus-visible { outline:2px solid var(--lp-accent); outline-offset:2px; }

  /* The primary action is terracotta; everything secondary is a quiet outlined button. */
  .tips-load,.tips-approve,.tips-add-button,.tips-split-save,.tips-email-send,.tips-sheet-print,.tips-reconcile-force,.tips-drift-accept { border:0; border-radius:8px; background:var(--lp-accent); color:#fff; font-weight:600; box-shadow:none; transition:filter .15s ease; }
  .tips-load { min-height:40px; padding:0 18px; }
  .tips-approve { padding:12px 24px; font-size:15px; }
  .tips-split-edit,.tips-refresh,.tips-edit-toggle,.tips-split-cancel,.tips-splits-change,.tips-splits-follow,.tips-email-me,.tips-email-add,.tips-sheet-close,.tips-sheet-edit,.tips-reconcile-reload { border:1px solid var(--lp-line); border-radius:8px; background:var(--lp-card); color:var(--lp-ink); font-weight:600; }
  .tips-edit-toggle[aria-pressed="true"] { background:var(--lp-primary); border-color:var(--lp-primary); color:var(--lp-primary-ink); }
  .tips-sheet-delete { border-radius:8px; background:var(--lp-high); }
  .tips-remove { border-radius:8px; border-color:color-mix(in srgb, var(--lp-high) 35%, var(--lp-line)); color:var(--lp-high); }

  /* The split and the pool: figures in the display face. */
  .tips-split-source { font-size:12px; color:var(--lp-muted); }
  .tips-split-dialog-target { color:var(--lp-muted); font-size:14px; }

  /* The tabs: the pill the rest of the platform wears for what is selected. */
  .tips-tabs { gap:4px; border-bottom:0; margin-bottom:20px; }
  .tips-tabs button { border:0; border-radius:10px; padding:9px 14px; color:color-mix(in srgb, var(--lp-ink) 88%, var(--lp-muted)); font-size:14px; font-weight:500; }
  .tips-tabs button.active { background:var(--lp-primary); color:var(--lp-primary-ink); font-weight:600; }

  /* Every store's split: the figure in the display face, like every other figure here. */
  .tips-splits-table .tips-splits-store { color:var(--lp-ink); font-size:15px; font-weight:600; }
  .tips-splits-table .tips-splits-percent { font-family:var(--lp-display); font-size:16px; font-weight:600; color:var(--lp-ink); }
  .tips-splits-follows { color:var(--lp-muted); font-size:13px; }
  .tips-splits-follows .tips-was { color:var(--lp-muted); }
  .tips-split-dialog { border:1px solid var(--lp-line); border-radius:12px; background:var(--lp-card); box-shadow:var(--lp-shadow); }
  .tips-split-dialog h2 { font-family:var(--lp-display); font-size:20px; font-weight:600; color:var(--lp-ink); }
  .tips-split-dialog .tips-field input { min-height:44px; border:1px solid var(--lp-line); border-radius:8px; background:var(--lp-card); font-family:var(--lp-display); font-size:1.2rem; font-weight:600; color:var(--lp-ink); }
  .tips-split-everywhere { color:var(--lp-ink); font-size:14px; }

  /* Emailing a sheet: one coloured action on the row, as everywhere else in the module. */
  .tips-email-sheet select,.tips-email-field input { min-height:44px; }
  .tips-email-chips li { background:var(--lp-ground); border:1px solid var(--lp-line); color:var(--lp-ink); font-size:13px; }
  .tips-email-status { color:var(--lp-muted); font-size:13px; }
  .tips-split-fixed { font-size:15px; color:var(--lp-ink); }
  .tips-split-fixed strong { font-family:var(--lp-display); font-size:22px; font-weight:600; color:var(--lp-ink); }
  .tips-pool-figures { gap:14px; margin-top:18px; }
  .tips-figure { background:var(--lp-ground); border:1px solid var(--lp-line); border-radius:10px; padding:14px 16px; }
  .tips-figure strong { font-family:var(--lp-display); font-size:1.75rem; font-weight:600; color:var(--lp-ink); margin-top:4px; }
  .tips-figure input { min-height:44px; border:1px solid var(--lp-line); border-radius:8px; background:var(--lp-card); font-family:var(--lp-display); font-size:1.4rem; font-weight:600; color:var(--lp-ink); margin-top:6px; }
  .tips-bank-figures { border-top:1px solid var(--lp-line); padding-top:16px; margin-top:16px; }
  .tips-bank-draw { background:color-mix(in srgb, var(--lp-accent) 8%, var(--lp-card)); border-color:color-mix(in srgb, var(--lp-accent) 30%, var(--lp-line)); }
  .tips-bank-draw strong { color:var(--lp-accent); }
  #tips-bank-note:empty { display:none; }
  #tips-bank-note { margin:10px 0 0; font-variant-numeric:tabular-nums; }

  /* The payout table. */
  .tips-table td { color:var(--lp-ink); }
  .tips-table .tips-name { font-weight:600; }
  .tips-table td.tips-amount,.tips-table .tips-total-row td { font-family:var(--lp-display); font-weight:600; font-size:16px; }
  .tips-total-row td { border-top:1.5px solid var(--lp-ink); }
  /* The two pools wear two colours, kept apart as the discount groups are. */
  .tips-pool-chip { border-radius:999px; font-weight:600; }
  .tips-pool-chip[data-pool="FOH"] { background:color-mix(in srgb, var(--lp-accent) 14%, var(--lp-card)); border-color:color-mix(in srgb, var(--lp-accent) 40%, var(--lp-line)); color:color-mix(in srgb, var(--lp-accent) 70%, var(--lp-ink)); }
  .tips-pool-chip[data-pool="BOH"] { background:color-mix(in srgb, var(--lp-primary) 10%, var(--lp-card)); border-color:color-mix(in srgb, var(--lp-primary) 30%, var(--lp-line)); color:var(--lp-primary); }
  .tips-exclude { border-color:var(--lp-line); color:var(--lp-muted); }
  .tips-exclude[aria-pressed="true"] { background:var(--lp-primary); border-color:var(--lp-primary); color:var(--lp-primary-ink); }
  .tips-hours-input,.tips-amount-input.tips-amount-set { border-color:var(--lp-accent); }
  .tips-editing { background:color-mix(in srgb, var(--lp-accent) 8%, var(--lp-card)); border-color:color-mix(in srgb, var(--lp-accent) 40%, var(--lp-line)); color:var(--lp-ink); }

  /* The approval bar floats on the card surface, lifted. */
  .tips-approve-bar { background:var(--lp-card); border:1px solid var(--lp-line); border-radius:12px; box-shadow:var(--lp-shadow-lifted); padding:14px 18px; }
  .tips-approve-bar .tips-approve-summary strong { font-family:var(--lp-display); font-size:22px; font-weight:600; }

  /* Sync and progress. */
  .tips-sync-row { border-top:1px solid var(--lp-line); }
  .tips-sync-stamp,.tips-pull-text { color:var(--lp-muted); }
  .tips-pull-bar { background:var(--lp-soft); }
  .tips-pull-bar span { background:var(--lp-accent); }

  /* Approved sheets and the sheet itself. */
  #tips-history li { border-bottom:1px solid color-mix(in srgb, var(--lp-line) 70%, transparent); }
  .tips-history-open { padding:12px 8px; border-radius:8px; }
  #tips-history .tips-history-total { font-family:var(--lp-display); font-size:16px; font-weight:600; }
  .tips-sheet-dialog { background:var(--lp-card); border:1px solid var(--lp-line); border-radius:12px; box-shadow:var(--lp-shadow-lifted); font-family:var(--lp-body); color:var(--lp-ink); }
  .tips-sheet-dialog h2 { font-family:var(--lp-display); font-size:24px; font-weight:600; color:var(--lp-ink); }
  .tips-sheet-eyebrow { color:var(--lp-muted); font-size:11px; letter-spacing:.09em; font-weight:600; }
  .tips-sheet-summary { background:var(--lp-line); border-color:var(--lp-line); border-radius:10px; }
  .tips-sheet-summary > div { background:var(--lp-ground); }
  .tips-sheet-summary dd { font-family:var(--lp-display); font-size:18px; font-weight:600; }
  .tips-error { border-radius:10px; }
}
@media screen and (hover:hover) {
  .tips-load:hover,.tips-approve:hover,.tips-add-button:hover,.tips-split-save:hover,.tips-sheet-print:hover,.tips-reconcile-force:hover,.tips-drift-accept:hover { background:var(--lp-accent); filter:brightness(.94); }
  .tips-split-edit:hover,.tips-refresh:hover,.tips-edit-toggle:hover,.tips-split-cancel:hover,.tips-sheet-close:hover,.tips-sheet-edit:hover,.tips-reconcile-reload:hover { background:var(--lp-sidebar-hover); border-color:var(--lp-line); }
  .tips-edit-toggle[aria-pressed="true"]:hover { background:var(--lp-primary); }
  .tips-history-open:hover { background:var(--lp-soft); }
}
/* Rows and hover only where the table is a table: on a phone each person is a stacked card. */
@media screen and (min-width:641px) {
  .tips-table th { padding:10px 12px; border-bottom:1px solid var(--lp-line); }
  .tips-table td { padding:12px; border-bottom:1px solid color-mix(in srgb, var(--lp-line) 70%, transparent); }
}
@media screen and (min-width:641px) and (hover:hover) {
  .tips-table tbody tr:hover td { background:color-mix(in srgb, var(--lp-soft) 55%, transparent); }
}
@media screen and (max-width:640px) {
  .tips-table tr { border-bottom:1px solid var(--lp-line); }
  .tips-page-title { font-size:28px; margin-bottom:14px; }
  .tips-card { padding:18px 16px; }
}