/* MiSalon look-and-feel round 1 (27 Sept 2026). The critic measured the frame and the shared parts below the bar
   Leon set ("above 9"): labels at 11-11.5px, grey text under 4.5:1 contrast, buttons and chips under 44px to tap,
   tabs that give no sign of a press. These rules only change size, colour and feedback; the designer's layout,
   colours and components stay as they are. Loaded last (index.html) so it wins; n5.css is generated, so the fixes
   live here and not in it. */

/* Grey text that passes 4.5:1 on white and on the warm canvas (was #7A8187, 3.95:1). */
#scApp{--c-text-3:#5F666C}

/* The phone bar: 12px labels, a press you can feel, and a pulse while a screen is still arriving. */
#scApp>.tabs button{font-size:12px;transition:transform .1s ease-out}
#scApp>.tabs button:active{transform:scale(.94)}
#scApp>.tabs button.busy .ic{animation:mi7busy .9s ease-in-out infinite}
.side button.busy svg{animation:mi7busy .9s ease-in-out infinite}
@keyframes mi7busy{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){
  #scApp>.tabs button:active{transform:none}
  #scApp>.tabs button.busy .ic,.side button.busy svg{animation:none;opacity:.5}
}

/* The person's name and role at the top, and the Ctrl K hint: 12px, readable grey. */
#scApp>.top .user .uwho small{font-size:12px}
#scApp .kbd{font-size:12px}

/* Figure labels on Today, Money and the rest (TAKEN TODAY ...): 12px, not 11.5. */
.n5 .kpi label{font-size:12px}

/* Signed in already: the login card stays hidden while the app opens (index.html sets mi-waking). */
html.mi-waking #scLogin{visibility:hidden}

/* Quicker pop-ins: 0.2s, as app motion should be. */
.n5 .livepop{animation-duration:.2s}
.n5 .celecard{animation-duration:.24s}

/* The switch slides with transform, not by moving "left" (no layout work on each frame). */
#scApp .ob7sw::after{transition:transform .15s ease-out}
#scApp .ob7sw.on::after{left:3px;transform:translateX(22px)}

/* On a touch screen every button, chip and link in a header is at least 44px to tap. */
@media (pointer:coarse),(max-width:640px){
  .n5 .btn{min-height:44px;height:auto}
  .n5 .btn.sm{min-height:44px;height:auto;font-size:13.5px}
  #scApp .btn.sm{min-height:44px}
  .n5 .stychip{height:44px}
  #scApp>.top .user{min-height:44px}
  .n5 .panel>header .acts>a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
  .n5 .td7more{min-height:44px;display:flex;align-items:center}
}

/* Phones: row text and the small grey line under it big enough to read in a salon (14px). */
@media (max-width:640px){
  .n5 li small,.n5 .it .sub,.n5 .list .sub,.n5 .sub2,.n5 td small{font-size:14px;line-height:1.4}
  .n5 .faint{font-size:max(13.5px,1em)}
}

/* Phones: a section header's buttons wrap under its title instead of being cut off (the roster's week switch). */
@media (max-width:640px){
  .n5 .panel>header{flex-wrap:wrap;row-gap:8px}
  .n5 .panel>header .acts{flex-wrap:wrap;max-width:100%}
}

/* The Back bar on More's pages: 14px, like the rest of the reading text. */
#scApp .mbar .btn{font-size:14px}

/* ---- Round 3 (critic round 2, 27 Sept) ---- */
/* Small labels across the new-look pages: 12px and the readable grey. */
.n5 .kick{font-size:12px}
.n5 .board .tcol div{font-size:12px;color:#5F666C}
.n5 .nowline span{font-size:12px;min-width:46px;text-align:end;padding:0 6px 0 2px;z-index:1}
.n5 .ap.done{opacity:.78}
/* The person's chip at the top: a full 44 x 44. */
#scApp>.top .user{min-width:44px}
/* Settings: the small text buttons at the end of each line are 44px wide at least. */
.n5 .set .linkbtn{min-width:44px;justify-content:center}
/* Team: the access pills, 12px and dark enough to read (Owner was 4.38:1). */
#scApp .tm-access{font-size:12px;letter-spacing:.04em;color:#3E4449}
#scApp .tm-access.owner{color:#7A3E24}
/* Till: the brand chips are 44px tall. */
#scApp .tbtn{min-height:44px}
/* Refer: the share buttons wrap instead of being cut off on a phone. */
.n5 .share7{display:flex;flex-wrap:wrap;gap:8px}
.n5 .share7>*{flex:1 1 auto}
/* Who makes money (Insight): 12px labels in the readable grey, 44px period buttons. */
#mp_insight .lbl,#mp_insight .inhr{font-size:12px;color:#5F666C}
#mp_insight small{font-size:12px}
#mp_insight button,#mp_insight .seg a{min-height:44px}
@media (max-width:560px){#mp_insight .inhr{font-size:12px}}
/* Phones: the last small grey lines (under figures, under names, in panel bodies) at 14px. */
@media (max-width:640px){
  .n5 span>small,.n5 .k>small,.n5 .kpi small{font-size:14px}
  .n5 .body.faint{font-size:14px!important}
}

/* ---- Round 4 (critic round 3, 27 Sept) ---- */
/* Switches: the button itself is 44px tall; the pill is drawn inside it, so it looks exactly as before. */
#scApp .tog{box-sizing:border-box;height:44px;min-height:44px;width:44px;border:0;margin:-9px 0;padding:0;background:none!important;position:relative}
#scApp .tog::before{content:"";position:absolute;left:0;right:0;top:9px;height:26px;border-radius:13px;background:var(--line-strong,#D3CFC4)}
#scApp .tog.on::before{background:var(--ok,#1E7A4F)}
#scApp .tog::after{top:12px;z-index:1}
/* 12px floor for the last small labels (Insight figures, Marketing, Bookings, roster table). */
#mp_insight .k .l,#mp_marketing small,#mp_roster th,#mp_roster small{font-size:12px}
.n5 .nday,.n5 .ap .tm,.n5 .stychip .nav{font-size:12px}
/* Till: the product Add button is never squeezed. */
#pTill .row>.btn.sm{flex:0 0 auto!important;min-width:64px}
/* Phones: every small grey line under a name or figure at 14px (chips and pills keep their own size). */
@media (max-width:640px){
  .n5 small,.n5 .fine8{font-size:14px}
  .n5 .chip small,.n5 .pill small,.n5 .nav small{font-size:inherit}
}

/* ---- Round 5 (critic round 4, 27 Sept) ---- */
/* Phones: every small grey line in the app at 14px, wherever it sits (chips, pills and the top bar keep theirs). */
@media (max-width:640px){
  #scApp .wrap small:not(.chip):not(.pill){font-size:14px}
  #scApp .wrap .chip small,#scApp .wrap .pill small{font-size:inherit}
}
/* The "now" time on the Bookings board: a darker coral that passes 4.5:1 on white. */
.n5 .nowline span{color:#B5452A}
/* Choose what you use: the phone-bar preview captions at 14px on phones. */
@media (max-width:640px){ #scApp .wrap .bar7p~small,#scApp .wrap div>small.faint{font-size:14px!important} }

/* The MiSalon logo (Leon, 27 Sept: "very small"): the picture is mostly the face, so the name was about 12px tall.
   Bigger in the phone's top bar and the desktop side list; both have room. */
#scApp>.top .brand img{height:42px}
@media (min-width:1024px){
  #scApp>.side .brand{height:76px}
  #scApp>.side .brand img{height:48px}
}