/* ============================================================
   public/app/polish.css: what the better-ui skill found across the dashboard (13 October 2026)

   The owner: "fix all the issue skill find in our dashboard". Loaded right after app.css and before colour.css
   and the screens' own sheets, so they still have the last word. app.css is shared between sessions and is not
   edited for these: each rule here takes the place of the one named beside it. The theme switch itself is in
   app.js (setTheme). Values are the skill's own where it gives one (0.96, 0.25, 4px, cubic-bezier(0.2,0,0,1)).
   ============================================================ */

/* ---------- 1. An icon that changes with a state (the sun and moon on the theme button) ----------
   The skill's values, exactly: scale 0.25 to 1, opacity 0 to 1, blur 4px to 0, cubic-bezier(0.2,0,0,1), 300ms.
   Was: blur 2px, ease-in-out, 250ms (app.css :root). */
:root{--icon-swap-dur:300ms;--icon-swap-blur:4px;--icon-swap-ease:cubic-bezier(0.2,0,0,1);
  /* ---------- 2. Motion restraint: a tab is pressed all day, so its pill arrives in 150ms (was 250) ---------- */
  --tabs-dur:150ms}
.nav-pill{transition-duration:var(--duration-quick)} /* the side menu's pill, the same (was 250ms) */

/* ---------- 3. Interruptible: the switch moves on a transition, not on a keyframe ----------
   A keyframe restarts from its start when the switch is pressed again mid-way; a transition turns round where it is.
   .is-init is added on the first press (app.js toggleSet), so nothing moves when the page loads. */
.t-toggle.is-init[data-on="true"] .t-toggle-thumb,.t-toggle.is-init[data-on="false"] .t-toggle-thumb{animation:none}
.t-toggle.is-init .t-toggle-thumb{transition:translate var(--duration-quick) var(--ease-out)}
@media (prefers-reduced-motion: reduce){.t-toggle.is-init .t-toggle-thumb{transition:none}}

/* ---------- 4. will-change, sparingly ----------
   Width cannot be composited; and a hint on every field, every digit and every badge keeps a layer in memory for
   something that moves once in a while. What opens in order to move (menus, the drawer, a dialog, a toast) keeps its hint. */
.t-tabs-pill{will-change:transform}
.t-input,.t-digit,.t-badge,.t-badge-dot,.t-text-swap,.t-stagger-line{will-change:auto}

/* ---------- 5. An icon carries the weight of the words beside it (strokes on the 24 grid) ----------
   1.5 beside regular text and on its own; 2 beside medium or semibold; 2.5 for a tick that stands for "done".
   Was: 1.75 everywhere, 2.25 in chips, 2.75 and 3 for two of the ticks. */
svg.i{stroke-width:1.5}
.btn svg.i,.chip svg.i,.nav a.cur svg.i,.t-tab[aria-selected="true"] svg.i,h1 svg.i,h2 svg.i,h3 svg.i,b svg.i,strong svg.i{stroke-width:2}
.progress-steps li.done .c svg.i,.toast .tk svg.i{stroke-width:2.5}

/* ---------- 6. A press answers under the finger: 0.96, as every other button here already does ---------- */
.icon-btn{transition:background-color var(--duration-quick) var(--ease-out),color var(--duration-quick) var(--ease-out),border-color var(--duration-quick) var(--ease-out),scale var(--duration-quick) var(--ease-out)}
.icon-btn:active{scale:.96}
@media (prefers-reduced-motion: reduce){.icon-btn:active{scale:1}}

/* ---------- 7. Concentric corners: outer radius = inner radius + the padding between them ---------- */
.menu{border-radius:calc(var(--r-chip) + 4px)}                              /* its rows are 6 round and sit 4 inside: 10 (was 8) */
.tbl thead th:first-child{border-radius:var(--r-chip) 0 0 var(--r-chip)}    /* the heading strip sits 8 inside a 14 card: 6 (was 8) */
.tbl thead th:last-child{border-radius:0 var(--r-chip) var(--r-chip) 0}
.ask-log,.ask .mic{border-radius:calc(var(--r-ctl) - 4px)}                  /* 4 inside an 8 field: 4 (was 6) */
.toast{border-radius:var(--r-card)}                                         /* its buttons are 6 round and sit 6 to 8 inside: 14 (was 8) */

/* ---------- 8. A picture gets a hairline so its edge holds on any background ----------
   Pure white at 10% on dark, pure black at 10% on light, drawn just inside the edge (never a tinted grey). */
.pic-prev img{outline:1px solid rgba(255,255,255,.1);outline-offset:-1px}
:root[data-theme="light"] .pic-prev img{outline-color:rgba(0,0,0,.1)}

/* =====================================================================
   What the better-accessibility skill found across the dashboard (13 October 2026)
   The hover rules themselves are in app.css: each of its 47 is now inside @media (hover:hover), so a tap on a touch
   screen no longer leaves a control looking pressed (three that shared a rule with :focus-visible were split).
   ===================================================================== */

/* ---------- 9. A text field shows where the keyboard is ----------
   It had outline:none and a ring at 8% (dark) or 14% (light): about 1.1:1 against the field, and nothing at all in
   Windows' high-contrast colours, where a shadow is not drawn. Now the same 2px ring every other control has. */
.input:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
/* the account menu's rows only changed their background, the same as under a mouse */
.menu a:focus-visible,.menu button:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}

/* ---------- 10. Skip to content: the first stop of the keyboard, hidden until it has focus (menu.js puts it there) ---------- */
.skip{position:absolute;inset-inline-start:-999px;top:8px;z-index:100;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:var(--r-ctl);background:var(--strong);color:var(--on-strong);font-size:var(--fs-sm);font-weight:500;text-decoration:none;white-space:nowrap}
.skip:focus{inset-inline-start:8px}
#content{scroll-margin-top:16px}
#content:focus{outline:none} /* focus is moved here by the link, not by the keyboard: main is not a control */

/* ---------- 11. Hit areas: the visible thing may be small, the place that takes the press may not ----------
   Under 24px was: the logo (19), the "more" links and the login's two text links (20), the words inside a search
   box (23, with a dead strip above and below). On touch the aim is 44: small buttons (36) and the Answering pill
   (32) get the difference around them, without moving anything. No two of these areas overlap. */
.search input{height:100%}
.more,.logo,.status,.icon-btn,#send-link,#to-forgot{position:relative}
.more::after{content:"";position:absolute;inset:-12px -8px}
.logo::after{content:"";position:absolute;inset:-12px -4px}
#send-link::after,#to-forgot::after{content:"";position:absolute;inset:-12px 0}
/* a switch is 18 high: with a mouse the press reaches 32 around it (a finger already gets 44, app.css) */
@media (pointer:fine){.t-toggle::after{content:"";position:absolute;inset:-7px -4px}}
@media (pointer:coarse){
  /* the assistant's suggestions are 30 high and sit 8 apart: 4 more on each side is as far as they go without meeting */
  .as-sug button{position:relative}
  .as-sug button::after{content:"";position:absolute;inset:-4px 0}
  .btn-sm{position:relative} /* a button is not positioned by default: without this its ::after would measure itself against the page */
  .btn-sm::after{content:"";position:absolute;inset:calc(50% - 22px) 0} /* 44 to press whatever its border (the old -5 made 36 + 8); it stays 28 to see, Solid Glass's small size */
  .status::after{content:"";position:absolute;inset:-7px 0}
  /* a small icon button (the calendar's arrows are 28): 44 tall, and only 36 wide so two side by side do not share a strip */
  .icon-btn::after{content:"";position:absolute;top:50%;left:50%;width:36px;height:44px;translate:-50% -50%}
}

/* =====================================================================
   The five skills over every section (13 October 2026): better-ui, better-colors, better-accessibility,
   better-layout, better-typography. The owner: "run all those skills on every section of dashboard".
   Measured on 104 screen states (every section, 1280 and 375, dark and light); what follows is what was found.
   ===================================================================== */

/* ---------- 12. A field's edge can be seen (better-colors, WCAG 1.4.11: 3:1) ----------
   The edge itself is the token --field-line, raised in colour.css (dark 1.3:1 before, light 2.6 to 3.0:1).
   With a brighter edge at rest, the edge under the mouse and with the keyboard in it must not be dimmer than it. */
@media (hover:hover){.input:hover{border-color:var(--ink-3)}}
.as-comp:focus-within{border-color:var(--ink-3)}
/* "Chat plan" under the business's name was 4.2:1 while the account menu is open (light): the second ink, 9:1 */
.acct-t small{color:var(--ink-2)}

/* ---------- 13. Icons beside heavier words (better-ui) ----------
   The account button's arrows sit beside the name (500): 2. The assistant's "Rules and recent changes" row (500): 2. */
.acct-btn svg.i,.as-more svg{stroke-width:2}

/* ---------- 14. Type (better-typography) ---------- */
body{-moz-osx-font-smoothing:grayscale} /* Firefox on a Mac drew every word a little heavier than Safari and Chrome */
.code code{font-size:var(--fs-meta)} /* was 12.5px, a size of its own: the scale's 12 */
/* a chat's second line in the Inbox ("Phone call · 0:03 · Number withheld · Sep 21, 1:41 AM") was cut at 260px with
   the rest of the bar empty and no way to read it: it has the bar's width, and a second line on a phone */
.cv-h .c2{flex:1 1 auto}
.cv-h .c2 small{max-width:none;white-space:normal;overflow:visible;text-wrap:pretty}
.cal-range{text-wrap:balance}

/* ---------- 15. Layout (better-layout) ---------- */
/* Home's "Recent leads" at 1280 with the menu open: the table was 55px wider than its card, so it scrolled sideways
   with nothing to show it and the Call buttons were cut. The name and what they asked give way (they already end in
   an ellipsis, and the row opens the person); the date, the status and the button keep their size. */
@media (min-width:761px){
  #recent .tbl{width:100%}
  #recent .tbl td.c2td{width:44%;max-width:0}
  #recent .tbl td.c2td .c2 b,#recent .tbl td.c2td .c2 small{max-width:100%}
  #recent .tbl td.asked{width:30%;max-width:0;min-width:0}
}
/* a button whose name is longer than the button ("Call Bartholomew"): centred, it lost its icon off the left edge.
   "safe" centring starts from the left when the words do not fit, so the icon and the start of the name stay. */
.acts2 .btn{justify-content:safe center}
/* a strip that scrolls sideways says there is more: its far edge fades while something is hidden past it (menu.js
   keeps data-fade in step). The Receptionist's tabs on a phone hid "Messages" and "Booking" with the fourth tab
   ending exactly at the screen's edge; the install code hid its end the same way. */
[data-fade="end"]{-webkit-mask-image:linear-gradient(to right,black calc(100% - 32px),transparent);mask-image:linear-gradient(to right,black calc(100% - 32px),transparent)}
[data-fade="start"]{-webkit-mask-image:linear-gradient(to left,black calc(100% - 32px),transparent);mask-image:linear-gradient(to left,black calc(100% - 32px),transparent)}
[data-fade="both"]{-webkit-mask-image:linear-gradient(to right,transparent,black 32px,black calc(100% - 32px),transparent);mask-image:linear-gradient(to right,transparent,black 32px,black calc(100% - 32px),transparent)}
/* the Calendar's bar on a phone: the week had 137px beside the buttons and broke as "October 11 - 17, / 2026".
   The week takes a line of its own, the buttons the next, with the arrows at the far end. */
@media (max-width:720px){
  .cal-bar{flex-wrap:wrap;row-gap:10px}
  .cal-bar .cal-range{flex:1 1 100%}
  .cal-bar .cal-nav{flex:1 1 100%;margin-left:0;flex-wrap:nowrap}
  .cal-bar .cal-nav .icon-btn:nth-last-child(2){margin-inline-start:auto}
}

/* ---------- 16. Places a thumb presses: the ones left under 44 last time (better-accessibility) ---------- */
@media (pointer:coarse){
  /* the calendar's two arrows: 44 wide each, grown away from each other, so the two areas meet and never overlap */
  .cal-nav .icon-btn:nth-last-child(2)::after{left:auto;right:-1px;width:44px;translate:0 -50%}
  .cal-nav .icon-btn:last-child::after{left:-1px;width:44px;translate:0 -50%}
  .cal-bar .cal-nav .icon-btn:nth-last-child(2){margin-inline-start:16px} /* clear of "Today" beside it */
  /* the assistant's suggestions are 30 high in a strip that clips what leaves it: the strip is given 7 under them
     and takes it back from the gap below, so nothing moves and each one is 44 */
  .as-sug{padding-bottom:8px;margin-bottom:-8px}
  .as-sug button::after{inset:-8px 0}
  .kv-add::after{inset:-11px -8px} /* "Add" beside a detail that is not set: 41 tall, as far as two rows allow */
  .bm-h .logo::after{inset:-12px -7px} /* the mark at the top of the phone's menu: 30 wide, 44 to press */
}
@media (max-width:720px){
  .ib-tools .t-tabs .t-tab{height:var(--h-touch)} /* the Inbox's tabs were 36: 44, as on Customers */
  .ib-tools .t-tabs-pill{height:var(--h-touch)}
  .as-more{min-height:var(--h-touch)}
  /* the assistant's field was 36 high inside a 54 box whose padding did not take a tap: the field itself is 44 now,
     the box stays 54 and the send button stays where it was */
  .as-comp{padding-block:4px}
  .as-comp textarea{min-height:var(--h-touch);padding-block:11px}
  .as-comp .btn,.as-comp .icon-btn{margin-bottom:2px}
}