/* ============================================================================
   msk-ui v1.0.0 — base + components (shared by all msk web apps)
   Load order in every app: ui/tokens.css → ui/components.css → app.css
   Derived from the MyFITContainer design system; every colour is a token
   (tokens.css), so light and dark both work. App-specific styles belong in
   the app's own app.css, never here.
   ============================================================================ */

/* ---------- base ---------- */
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; min-height:100vh;
  font:15px/1.6 var(--font); color:var(--fg);
  background:var(--bg);
  background-image:radial-gradient(1100px 520px at 82% -8%, var(--glow-1), transparent 60%),
                   radial-gradient(900px 500px at 0% 0%, var(--glow-2), transparent 55%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection { background:var(--accent-weak); color:var(--fg); }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
.muted { color:var(--muted); }
.faint { color:var(--faint); }
.error { color:var(--danger); }
.small { font-size:.85rem; }
.right { text-align:right !important; }
hr { border:0; border-top:1px solid var(--line); margin:1.4rem 0; }
summary { cursor:pointer; }
summary:focus-visible { outline:none; box-shadow:var(--ring); border-radius:var(--r-xs); }
code { font-family:var(--mono); font-size:.9em; }

* { scrollbar-width:thin; scrollbar-color:var(--scroll-thumb) transparent; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:var(--scroll-thumb); border-radius:8px;
  border:2px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover { background:var(--scroll-thumb-hover); background-clip:padding-box; }

/* ---------- header / nav (sticky) ---------- */
header {
  position:sticky; top:0; z-index:100;
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  /* iOS standalone (black-translucent): push below the status bar */
  height:calc(var(--header-h) + env(safe-area-inset-top, 0px));
  padding:env(safe-area-inset-top, 0px) 1.25rem 0;
  background:var(--header-bg);
  backdrop-filter:blur(14px) saturate(150%); -webkit-backdrop-filter:blur(14px) saturate(150%);
  border-bottom:1px solid var(--line);
}
.brand { display:flex; align-items:center; gap:.55rem; font-weight:700; font-size:1.02rem;
         letter-spacing:.2px; color:var(--fg); white-space:nowrap; }
.brand:hover { text-decoration:none; }
.brand-logo { width:1.55rem; height:1.55rem; flex:none; display:block;
  filter:drop-shadow(0 0 10px var(--accent-glow)); }
nav { display:flex; align-items:center; gap:.2rem; }
.nav-link { display:inline-flex; align-items:center; gap:.4rem;
            color:var(--muted); padding:.42rem .72rem; border-radius:var(--r-sm); font-size:.9rem;
            font-weight:500; transition:color .15s, background .15s; }
.nav-link:hover { color:var(--fg); background:var(--hover-soft); text-decoration:none; }
.nav-link.active { color:var(--fg); background:var(--accent-weak);
                   box-shadow:inset 0 0 0 1px var(--accent-line); }
.nav-count { min-width:1.3rem; padding:0 .38rem; border-radius:999px; text-align:center;
             font-size:.7rem; font-weight:700; line-height:1.3rem;
             background:var(--danger); color:#fff; }
.nav-count.soft { background:var(--hover-soft); color:var(--muted); }
nav form { margin:0 0 0 .45rem; }
/* user from MyAuth (name · account · log out) */
.nav-user { display:flex; align-items:center; gap:.5rem; margin-left:.6rem; padding-left:.8rem;
            border-left:1px solid var(--line); font-size:.85rem; color:var(--muted); white-space:nowrap; }
.nav-user a { color:var(--muted); }
.nav-user a:hover { color:var(--fg); }

/* ---------- layout ---------- */
main { max-width:900px; margin:2.2rem auto 4rem; padding:0 1.25rem; }
body.wide main { max-width:1180px; }
body.full main { max-width:1460px; }
h1 { font-size:1.55rem; font-weight:700; letter-spacing:-.015em; margin:0 0 1.2rem; }
h2 { font-size:1.08rem; font-weight:650; letter-spacing:-.005em; margin:1.9rem 0 .7rem; }
h3 { font-size:.95rem; font-weight:600; color:var(--fg); margin:1.3rem 0 .5rem; }
footer { margin-top:3rem; padding:1.4rem 1.25rem; border-top:1px solid var(--line);
         color:var(--faint); font-size:.78rem; text-align:center; }
.tablehead { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.tablehead h1, .tablehead h2 { margin-bottom:0; }
.actions { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.actions form { margin:0; }
.row { display:flex; gap:.6rem; align-items:center; }
.row input { flex:1; margin:0; }

/* ---------- cards + notices ---------- */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
        padding:1.15rem 1.3rem; margin:0 0 1.2rem; box-shadow:var(--shadow-sm); }
.card h2.first, .card h2:first-child { margin-top:0; }
.card.narrow { max-width:30rem; }
.flash { border-color:var(--accent-line); background:var(--accent-weak); color:var(--fg); }
.flash-error { border-color:var(--danger); background:var(--danger-weak); color:var(--fg); }
.hint { padding:.6rem .8rem; border-radius:var(--r-sm); background:var(--accent-weak); color:var(--fg); }

/* ---------- form controls ---------- */
input, select, textarea {
  width:100%; padding:.55rem .7rem; border:1px solid var(--line); border-radius:var(--r-sm);
  font:inherit; margin-top:.3rem; background:var(--surface-2); color:var(--fg);
  transition:border-color .15s, box-shadow .15s, background .15s;
}
input::placeholder, textarea::placeholder { color:var(--faint); }
input:hover, select:hover, textarea:hover { border-color:var(--line-hover); }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent); box-shadow:var(--ring); }
input[type=checkbox], input[type=radio] { width:auto; margin:0; accent-color:var(--accent); }
input[type=file] { padding:.45rem .6rem; }
select {
  appearance:none; -webkit-appearance:none; padding-right:1.9rem; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%238b98ab' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M2.5 4.5 6 8l3.5-3.5'/></svg>");
  background-repeat:no-repeat; background-position:right .65rem center;
}
textarea { resize:vertical; min-height:2.6rem; }
form.card label, form.stack label { display:block; margin:0 0 .9rem; font-size:.82rem;
                                    color:var(--muted); font-weight:500; }
form.stack { display:flex; flex-direction:column; gap:.9rem; }
form.stack label { margin:0; }
label.checkbox, label.radio { display:flex; align-items:flex-start; gap:.55rem; font-weight:400;
                              font-size:.92rem; color:var(--fg); margin:.5rem 0; cursor:pointer; }
label.checkbox input, label.radio input { margin-top:.25rem; }
fieldset { border:1px solid var(--line); border-radius:var(--r-sm); padding:.5rem .9rem .3rem; margin:0; }
legend { font-size:.82rem; color:var(--muted); font-weight:500; padding:0 .3rem; }
.hint-inline { display:block; margin-top:.3rem; font-size:.78rem; color:var(--faint); font-weight:400; }
.form-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(11rem,1fr)); gap:.7rem 1rem;
             align-items:end; }

/* ---------- buttons ---------- */
button, .btn, .btn-ghost, .btn-danger, .pager a {
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  padding:.55rem .95rem; border:1px solid transparent; border-radius:var(--r-sm);
  font:inherit; font-weight:600; font-size:.9rem; line-height:1.1; white-space:nowrap;
  cursor:pointer; text-decoration:none;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  transition:filter .15s, background .15s, border-color .15s, color .15s, transform .04s, box-shadow .15s;
}
/* primary (default <button> + .btn) */
button, .btn, .btn-primary {
  background:linear-gradient(180deg, var(--btn-top), var(--btn-bottom)); color:var(--accent-ink);
  box-shadow:var(--btn-shadow);
}
button:hover, .btn:hover, .btn-primary:hover { filter:brightness(1.07); text-decoration:none; }
button:active, .btn:active, .btn-primary:active { transform:translateY(1px) scale(.985);
  filter:brightness(.93); }
button:focus-visible, .btn:focus-visible, a:focus-visible { outline:none; box-shadow:var(--ring); }
/* secondary */
.btn-ghost, button.btn-ghost, .pager a {
  background:transparent; color:var(--fg); border-color:var(--line-strong);
  font-weight:500; box-shadow:none;
}
.btn-ghost:hover, .pager a:hover { background:var(--hover-soft); color:var(--fg); filter:none; text-decoration:none; }
/* danger */
button.danger, .btn-danger {
  background:linear-gradient(180deg, var(--btn-danger-top), var(--btn-danger-bottom)); color:#fff;
  box-shadow:var(--btn-shadow);
}
button.danger:hover, .btn-danger:hover { filter:brightness(1.06); }
.btn-sm, button.btn-sm { padding:.4rem .7rem; font-size:.84rem; }
button.wide, .btn.wide { width:100%; }
/* icon-only button (e.g. close) */
button.icon, .btn-icon { width:2.2rem; height:2.2rem; padding:0; background:transparent; color:var(--muted);
                         border-color:transparent; box-shadow:none; }
button.icon:hover, .btn-icon:hover { background:var(--hover-soft); color:var(--fg); filter:none; }
/* busy submit: spinner, no double click (set .is-busy from JS) */
button.is-busy, .btn.is-busy, .btn-ghost.is-busy { pointer-events:none; opacity:.7; }
button.is-busy::after, .btn.is-busy::after, .btn-ghost.is-busy::after {
  content:""; width:.85em; height:.85em; flex:0 0 auto; border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent;
  animation:msk-busy .7s linear infinite; }
@keyframes msk-busy { to { transform:rotate(360deg); } }
/* quiet buttons in the header (log out) */
nav button { background:transparent; color:var(--muted); border-color:var(--line);
             box-shadow:none; font-weight:500; padding:.4rem .7rem; }
nav button:hover { color:var(--fg); background:var(--hover-soft); filter:none; }

/* ---------- tables ---------- */
table { width:100%; border-collapse:collapse; background:var(--surface-2);
        border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-sm); }
th, td { text-align:left; padding:.62rem .85rem; border-bottom:1px solid var(--line-2);
         font-variant-numeric:tabular-nums; }
th { font-size:.72rem; text-transform:uppercase; letter-spacing:.5px; font-weight:600;
     color:var(--muted); background:var(--thead); }
tbody tr { transition:background .12s; }
tbody tr:nth-child(even) { background:var(--zebra); }
tbody tr:hover { background:var(--hover); }
tbody tr:last-child td { border-bottom:0; }
tfoot td { font-weight:650; border-top:1px solid var(--line); background:var(--thead); }
td.num, th.num { text-align:right; }
.tablewrap { overflow-x:auto; border-radius:var(--r); }
td form { margin:0; }
.pager { display:flex; gap:.6rem; align-items:center; justify-content:center; margin:1.2rem 0; color:var(--muted); }

/* ---------- badges ---------- */
.badge { display:inline-block; padding:.15rem .55rem; border-radius:999px; background:var(--accent-weak);
         color:var(--fg); font-size:.76rem; font-weight:600; border:1px solid var(--accent-line);
         vertical-align:middle; white-space:nowrap; }
.badge.muted { background:var(--line-2); color:var(--muted); border-color:var(--line-2); }
.badge.ok { background:var(--ok-weak); color:var(--ok); border-color:transparent; }
.badge.warn { background:var(--warn-weak); color:var(--warn); border-color:transparent; }
.badge.danger { background:var(--danger-weak); color:var(--danger); border-color:transparent; }

/* ---------- empty state ---------- */
.empty { display:flex; flex-direction:column; align-items:center; gap:.55rem;
  padding:1.8rem 1rem; text-align:center; color:var(--muted); }
.empty svg { width:2.1rem; height:2.1rem; color:var(--faint); }
.empty p { margin:0; }

/* ---------- page load indicator (full navigations) ---------- */
.pageprogress { position:fixed; left:0; right:0; height:3px; z-index:1200;
  top:env(safe-area-inset-top, 0px); pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--accent) 35%, var(--accent-2) 65%, transparent);
  background-size:45% 100%; background-repeat:no-repeat;
  animation:pageprog 1.1s linear infinite; }
@keyframes pageprog { from { background-position:-80% 0; } to { background-position:180% 0; } }

/* ---------- toasts ---------- */
.toasts { position:fixed; z-index:1100; left:50%; bottom:1.2rem;
  transform:translateX(-50%); display:flex; flex-direction:column; gap:.5rem;
  align-items:center; pointer-events:none; width:max-content; max-width:min(92vw, 30rem); }
.toast { pointer-events:auto; display:flex; align-items:center; gap:.8rem;
  background:var(--surface-3); color:var(--fg);
  border:1px solid var(--line); border-radius:var(--r-sm); box-shadow:var(--shadow-md);
  padding:.6rem 1rem; font-size:.9rem; text-align:center;
  opacity:0; transform:translateY(8px); transition:opacity .2s, transform .2s; }
.toast.show { opacity:1; transform:none; }
.toast.ok { border-color:var(--ok); }
.toast.error, .toast.bad { border-color:var(--danger); }

/* ---------- modal ---------- */
.modal { position:fixed; inset:0; z-index:1000; background:var(--backdrop);
         display:flex; align-items:center; justify-content:center; padding:1rem; }
.modal[hidden] { display:none; }
.modal-box { background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
             width:min(540px,100%); max-height:80vh; display:flex; flex-direction:column;
             box-shadow:var(--shadow-lg); }
.modal-head { display:flex; align-items:center; justify-content:space-between;
              padding:.9rem 1.1rem; border-bottom:1px solid var(--line); }
.modal-body { padding:.9rem 1.1rem; overflow:auto; }
.modal-foot { display:flex; gap:.6rem; align-items:center; justify-content:flex-end; padding:.8rem 1.1rem;
              border-top:1px solid var(--line); }

/* ---------- mobile: bottom tab bar + bottom sheet ---------- */
.tabbar-bottom { display:none; }             /* desktop: nav stays in the header */
.sheet[hidden], .sheet-backdrop[hidden] { display:none; }
.sheet-backdrop { position:fixed; inset:0; z-index:890; background:var(--backdrop); }
.sheet {
  display:flex; flex-direction:column; gap:.15rem;
  position:fixed; left:0; right:0; bottom:0; z-index:900;
  max-height:85dvh; overflow-y:auto; overscroll-behavior:contain;
  background:var(--surface); border:1px solid var(--line); border-bottom:0;
  border-radius:var(--r) var(--r) 0 0; box-shadow:var(--shadow-lg);
  padding:.4rem .8rem calc(.9rem + env(safe-area-inset-bottom));
}
.sheet-grip { flex:none; width:2.4rem; height:.28rem; border-radius:999px;
              background:var(--line); margin:.4rem auto .6rem; }
.sheet-link { display:flex; align-items:center; gap:.6rem; min-height:48px; padding:.55rem .7rem;
              border-radius:var(--r-sm); color:var(--fg); font-size:1.02rem; }
.sheet-link:hover { background:var(--hover-soft); text-decoration:none; }
.sheet-link.active { background:var(--accent-weak); }
.sheet-logout { margin:.5rem 0 0; padding-top:.7rem; border-top:1px solid var(--line-2); }
.sheet-logout button, .sheet-logout .btn-ghost { width:100%; }
body.sheet-open { overflow:hidden; }

@media (max-width: 820px) {
  main, body.wide main, body.full main {
    max-width:100%; margin:1.1rem auto 0;
    padding-left:max(.9rem, env(safe-area-inset-left));
    padding-right:max(.9rem, env(safe-area-inset-right));
    padding-bottom:calc(4.6rem + env(safe-area-inset-bottom));   /* room for the tab bar */
  }
  header { padding-left:max(.9rem, env(safe-area-inset-left));
           padding-right:max(.9rem, env(safe-area-inset-right)); }
  h1 { font-size:1.35rem; }
  header nav { display:none; }               /* the tab bar takes over */
  footer { padding-bottom:calc(4.6rem + env(safe-area-inset-bottom)); }

  .tabbar-bottom {
    position:fixed; left:0; right:0; bottom:0; z-index:150;
    display:grid; grid-auto-flow:column; grid-auto-columns:1fr; align-items:stretch;
    background:var(--tabbar-bg);
    -webkit-backdrop-filter:blur(16px) saturate(150%); backdrop-filter:blur(16px) saturate(150%);
    border-top:1px solid var(--line);
    padding:.25rem max(.4rem, env(safe-area-inset-right))
            calc(.25rem + env(safe-area-inset-bottom)) max(.4rem, env(safe-area-inset-left));
  }
  .tabbar-bottom .tab {
    position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:.18rem; min-height:3.2rem; padding:.3rem 0;
    border:0; border-radius:var(--r-sm); background:transparent; box-shadow:none;
    color:var(--muted); font:inherit; font-size:.66rem; font-weight:600;
    letter-spacing:.02em; cursor:pointer; transition:color .15s, background .15s;
  }
  .tabbar-bottom .tab:hover { color:var(--fg); background:var(--hover-soft); filter:none; text-decoration:none; }
  .tabbar-bottom .tab:active { transform:none; }
  .tabbar-bottom .tab svg { width:1.45rem; height:1.45rem; }
  .tabbar-bottom .tab.active { color:var(--accent); }
  .tabbar-bottom .tab.active svg { filter:drop-shadow(0 0 8px var(--accent-glow)); }
  .tabbar-bottom .tab .nav-count { position:absolute; top:.25rem; left:calc(50% + .45rem);
                                   font-size:.62rem; line-height:1.05rem; min-width:1.05rem; }

  .toasts { bottom:calc(4.6rem + env(safe-area-inset-bottom)); }
  .pageprogress { height:4px; box-shadow:0 0 8px var(--accent-glow); }

  /* touch: >= 16px inputs (no iOS auto zoom) + >= 44px tap targets */
  input, select, textarea { font-size:16px; }
  button, .btn, .btn-ghost, .btn-danger, .pager a, .nav-link, summary { min-height:44px; }
  .btn-sm, button.btn-sm, button.icon { min-height:0; }
  .tablehead { gap:.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition:none !important; scroll-behavior:auto !important; }
  .pageprogress { animation:none; background:var(--accent); opacity:.55; }
}