/* Components of the "Bright" direction. Each rule is copied from the mockups' style blocks (the board is named where it came from) with its
   literal values replaced by the tokens of tokens.css. The brand is one variable and every flat colour is a token (the literals left are white inside shadows, sheens and color-mix). Values that a screen
   changes per element (a bar's height, a meter's width, an animation delay) are read from custom properties with a fallback
   (--h, --p, --delay), which a script sets with style.setProperty: the page CSP allows that and forbids the style attribute. */

/* ---- Buttons (Desk, Queue, Upload, Settings, SignIn) ---------------------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--r-lg); background: transparent; color: var(--ink); font: 600 14px var(--font-body); text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform var(--t-press), box-shadow var(--t-ui), background var(--t-ui); }
.btn:active { transform: scale(.97); }
.btn.sm { min-height: 40px; padding: 0 14px; border-radius: var(--r-md); font-size: 13px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn:disabled:active, .btn[aria-disabled="true"]:active { transform: none; }
.iconbtn { width: 44px; min-height: 44px; padding: 0; border-radius: var(--r-md); color: var(--ink-3); }
.primary { background: linear-gradient(180deg, var(--brand-top), var(--brand)); box-shadow: var(--sh-primary); }
.primary, .primary:hover { color: var(--surface); }
.primary:hover { box-shadow: var(--sh-primary-hover); }
.ghost { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-ghost); }
.ghost, .ghost:hover { color: var(--ink); }
.ghost:hover { background: var(--surface-2); box-shadow: var(--sh-ghost-hover); }
.ghostOn, .ghostOn:hover { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand); }

/* ---- Segmented control (Desk, Rules) and the filter tab (Queue) ----------------------------------------------------------------- */
.segs { display: flex; gap: 4px; padding: 3px; border-radius: var(--r-md); background: var(--seg-track); }
.seg { flex: 1; padding: 5px 4px; border-radius: var(--r-sm); color: var(--ink-3); font-size: var(--fs-sm-2); font-weight: 600; text-align: center; cursor: pointer; transition: background var(--t-hover), color var(--t-hover), box-shadow var(--t-hover); }
.segOn { background: var(--surface); color: var(--ink); box-shadow: var(--sh-seg); }
.seg .n { font-weight: 500; }
.tab { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--ink); font: 500 14px var(--font-body); cursor: pointer; transition: background var(--t-ui), color var(--t-ui), box-shadow var(--t-ui), transform .15s; }
.tab:hover { transform: translateY(-1px); box-shadow: var(--sh-ghost-hover); }
.tabOn { border-color: transparent; background: linear-gradient(180deg, var(--tab-from), var(--tab-to)); color: var(--surface); font-weight: 600; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 6px 16px rgba(22, 24, 29, .22); }

/* ---- Navigation item (Upload, Rules, Settings: the 44px version) ---------------------------------------------------------------- */
.nav { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: var(--r-md); color: var(--ink-2); font-weight: 500; text-decoration: none; cursor: pointer; transition: background var(--t-hover), color var(--t-hover), transform var(--t-hover); }
.nav:hover { background: var(--nav-hover); color: var(--ink); transform: translateX(2px); }
.navOn, .navOn:hover { background: var(--surface); color: var(--ink); transform: none; box-shadow: var(--sh-nav); }

/* ---- Card (Desk 16px; the sign-in card is the large one) ------------------------------------------------------------------------ */
.card { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-2xl); box-shadow: var(--sh-card); transition: box-shadow var(--t-lift); animation: rise var(--t-enter) var(--ease-out) both; }
.card:hover { box-shadow: var(--sh-card-hover); }
.card.still:hover { box-shadow: var(--sh-card); }
.cardLg { border-radius: var(--r-3xl); box-shadow: var(--sh-card-lg); }
.cardLg:hover { box-shadow: var(--sh-card-lg); }
.cardLg { animation-duration: var(--t-rise); }

/* ---- Tile: one measure on a soft tint (Desk). The tint is a class; the first follows the brand. ------------------------------------ */
.tile { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px 14px; border-radius: var(--r-lg); box-shadow: var(--sh-inset); transition: transform .22s var(--ease-out), box-shadow .22s; }
.tile::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .65), transparent); transform: skewX(-12deg); pointer-events: none; opacity: 0; }
.tile:hover { transform: translateY(-2px); box-shadow: var(--sh-tile-hover); }
.tile:hover::after { animation: sheen .8s ease; opacity: 1; }
.tileLabel { color: var(--tile-ink, var(--ink-2)); font-size: var(--fs-sm); font-weight: 500; }
.tileValue { font: 600 var(--fs-num) var(--font-head); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.tileNote { color: var(--ink-3); font-size: var(--fs-xs); }
.tintBrand { --tile-ink: var(--tint-brand-ink); background: linear-gradient(180deg, var(--tint-brand-from), var(--tint-brand-to)); }
.tintGreen { --tile-ink: var(--tint-green-ink); background: linear-gradient(180deg, var(--tint-green-from), var(--tint-green-to)); }
.tintViolet { --tile-ink: var(--tint-violet-ink); background: linear-gradient(180deg, var(--tint-violet-from), var(--tint-violet-to)); }
.tintOrange { --tile-ink: var(--tint-orange-ink); background: linear-gradient(180deg, var(--tint-orange-from), var(--tint-orange-to)); }
.tintAmber { --tile-ink: var(--tint-amber-ink); background: linear-gradient(180deg, var(--tint-amber-from), var(--tint-amber-to)); }

/* ---- Chip: a status, a rule result, a count (Desk). The default is plain information. ------------------------------------------- */
.chip { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--r-pill); background: var(--info-bg); color: var(--info-ink); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }
.chip.lg { padding: 3px 10px; font-size: var(--fs-sm-2); }
.chip.sm { justify-content: center; min-width: 50px; padding: 1px 7px; font-size: var(--fs-xs); }
.chip.pass { background: var(--pass-bg); color: var(--pass-ink); }
.chip.fail { background: var(--fail-bg); color: var(--fail-ink); }
.chip.unknown { background: var(--unknown-bg); color: var(--unknown-ink); }
.chip.info { background: var(--info-bg); color: var(--info-ink); }

/* ---- Field (Upload, Settings: 44px) --------------------------------------------------------------------------------------------- */
.fld { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--line-field); border-radius: var(--r-md); background: var(--surface); color: var(--ink); font: 14px var(--font-body); transition: border-color var(--t-ui), box-shadow var(--t-ui); }
.fld:focus { outline: none; border-color: var(--brand); box-shadow: var(--sh-ring); }
.fld:disabled { background: var(--field-off); color: var(--ink-3); }
.fld[readonly] { background: var(--surface-3); color: var(--ink); }
.code { transition: border-color var(--t-ui), box-shadow var(--t-ui); }
.code:focus { outline: none; border-color: var(--brand); box-shadow: var(--sh-ring); }

/* ---- Switch (Rules, Settings): label.sw > input[type=checkbox] + span.track > span.knob ----------------------------------------- */
.sw { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 44px; min-height: 44px; cursor: pointer; }
.sw input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sw > .track { position: relative; width: 38px; height: 22px; border-radius: var(--r-pill); background: var(--ink-4); transition: background var(--t-ui); }
.sw > .track > .knob { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: var(--r-pill); background: var(--surface); box-shadow: 0 1px 3px rgba(22, 24, 29, .25); transition: transform var(--t-ui) var(--ease-out); }
.sw input:checked + .track { background: var(--brand); }
.sw input:checked + .track .knob { transform: translateX(16px); }
.sw input:focus-visible + .track { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---- Toast with its undo bar (Desk) --------------------------------------------------------------------------------------------- */
.toast { position: fixed; left: 0; right: 0; bottom: 26px; z-index: 30; display: flex; align-items: center; gap: 10px; width: min(360px, calc(100vw - 24px)); margin: 0 auto; padding: 12px 16px 12px 12px; overflow: hidden; border-radius: var(--r-xl); background: var(--toast-bg); color: var(--surface); font-size: 13.5px; box-shadow: var(--sh-toast); animation: toast .35s var(--ease-grow) both; }
.toast .msg { flex: 1; font-variant-numeric: tabular-nums; }
.toast .act { border: 0; background: transparent; color: var(--brand-light); font: 600 13.5px var(--font-body); cursor: pointer; }
.toastSeal { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; border-radius: var(--r-pill); background: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 30%, transparent); }
.seal { animation: seal .4s var(--ease-pop) both; }
.draw { stroke-dasharray: 24; stroke-dashoffset: 24; animation: draw .45s var(--ease-draw) .15s forwards; }
.undoBar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--brand-light); transform-origin: left; animation: drain var(--drain, 5s) linear both; }
.step { animation: rise .4s var(--ease-out) both; }

/* ---- Drop zone and file meter (Upload) ------------------------------------------------------------------------------------------ */
.drop { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 34px 20px; border: 1.5px dashed var(--brand-line); border-radius: var(--r-xl); background: var(--surface-4); text-align: center; transition: background var(--t-ui), border-color var(--t-ui); }
.dropOn { border-color: var(--brand); background: var(--brand-soft); }
.pick:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.meterTrack { display: block; max-width: 320px; height: 4px; overflow: hidden; border-radius: var(--r-pill); background: var(--info-bg); }
.meter { display: block; width: var(--p, 0%); height: 100%; border-radius: var(--r-pill); background: var(--brand); transition: width .2s linear; }

/* ---- Month bars (Desk): .bcol holds a .bar; its height is --h ------------------------------------------------------------------- */
.bcol { display: flex; flex: 1 1 0; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; height: 100%; }
.bar { width: 58%; max-width: 72px; height: var(--h, 0%); border-radius: 10px 10px 3px 3px; background: linear-gradient(180deg, var(--brand-tint), color-mix(in srgb, var(--brand) 26%, #fff)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7); transform-origin: bottom; animation: grow var(--t-grow) var(--ease-grow) both; animation-delay: var(--delay, 0s); transition: filter var(--t-ui); }
.barNeg { background: linear-gradient(180deg, var(--bar-neg-from), var(--bar-neg-to)); }
.bcol:hover .bar { filter: saturate(1.7) brightness(.96); }

/* ---- Overlay and dialog (StepUp, Duplicate, Invite) ----------------------------------------------------------------------------- */
.scrim { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--scrim); animation: fadeIn .25s ease both; }
/* The <dialog> element (ui/dialog.js) is a card in the middle of the page over the scrim; the platform centres it and traps the focus. */
.dialog { width: min(420px, calc(100vw - 32px)); padding: 24px; border: 1px solid var(--hair); border-radius: var(--r-3xl); background: var(--surface); color: var(--ink); box-shadow: var(--sh-dialog); animation: rise .4s var(--ease-out) both; }
.dialog::backdrop { background: var(--scrim); animation: fadeIn .25s ease both; }
.dialogBody { margin-top: 8px; color: var(--ink-2); font-size: 14px; }
.dialogActions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }

/* ---- Motion helpers ------------------------------------------------------------------------------------------------------------- */
.rowIn { animation: rowIn var(--t-enter) var(--ease-out) both; animation-delay: var(--delay, 0s); }
.fade { animation: rise .35s var(--ease-out) both; }
.spin { animation: spin .9s linear infinite; }

@keyframes rowIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes sheen { from { left: -60%; } to { left: 130%; } }
@keyframes seal { from { transform: scale(.5); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes toast { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }