/* Vuorolista — iOS-style interface. Colours follow Apple's system palette in light and dark. */
@font-face { font-family: "Sansita"; font-style: normal; font-weight: 900; font-display: swap; src: url("/fonts/sansita-latin-900-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Sansita"; font-style: normal; font-weight: 900; font-display: swap; src: url("/fonts/sansita-latin-ext-900-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/archivo-latin-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/archivo-latin-ext-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Kalaneuvos palette (navy, brand blue, warm gold) on an iOS layout */
:root {
  --navy: #052141;
  --navy2: #0A3566;
  --gold: #998463;
  --bg: #F1F3F6;
  --cell: #FFFFFF;
  --fill: rgba(5,33,65,.07);
  --fill2: rgba(5,33,65,.16);
  --label: #10192A;
  --title: #052141;
  --label2: rgba(16,25,42,.6);
  --label3: rgba(16,25,42,.28);
  --sep: rgba(5,33,65,.16);
  --bar: rgba(247,248,250,.84);
  --tint: #054E9E;
  --btn: #052141;
  --red: #D7263D;
  --green: #2E9E5B;
  --orange: #E08600;
  --indigo: #3D5BC9;
  --teal: #1E95B0;
  --purple: #8E4FC7;
  --today: rgba(5,78,158,.08);
  --dim: rgba(5,15,30,.45);
  --font: "Archivo", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Sansita", "Archivo", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --nums: "Sansita", "Archivo", -apple-system, system-ui, sans-serif;
  --round: var(--font);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #040B15; --cell: #0D1A2B; --fill: rgba(170,195,230,.12); --fill2: rgba(170,195,230,.22);
    --label: #EEF2F7; --title: #FFFFFF; --label2: rgba(225,233,245,.62); --label3: rgba(225,233,245,.3); --sep: rgba(170,195,230,.18);
    --bar: rgba(8,18,32,.84); --tint: #5B9FE8; --btn: #2B6CC4; --gold: #CDB48A; --red: #FF5A6A; --green: #3FC57A; --orange: #FFAA33;
    --indigo: #7C93F2; --teal: #4CC3DD; --purple: #B98AEB; --today: rgba(91,159,232,.14); --dim: rgba(0,0,0,.6);
    --navy: #0B2A4F; --navy2: #123F75;
    color-scheme: dark;
  }
}
/* Sansita has no Cyrillic: Russian and Ukrainian headings use the body face */
html:lang(ru), html:lang(uk) { --display: var(--font); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--label); font-family: var(--font); font-size: 17px; line-height: 1.29; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--tint); outline-offset: 2px; border-radius: 6px; }
.b-early { --c: var(--indigo); } .b-morning { --c: var(--teal); } .b-day { --c: var(--orange); } .b-evening { --c: var(--purple); } .b-none { --c: var(--label3); }

/* boot */
.boot { min-height: 100vh; display: grid; place-items: center; }
.spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--fill2); border-top-color: var(--label2); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* screen + nav bar */
.screen { min-height: 100vh; padding-bottom: calc(49px + env(safe-area-inset-bottom, 0px) + 28px); }
.navbar { position: sticky; top: 0; z-index: 20; padding-top: env(safe-area-inset-top, 0px); background: transparent; transition: background .2s; }
.navbar.solid { background: var(--bar); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 .5px 0 var(--sep); }
.navrow { height: 44px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 max(8px, env(safe-area-inset-right, 0px)) 0 max(8px, env(safe-area-inset-left, 0px)); }
.navrow .ttl { font-weight: 600; opacity: 0; transition: opacity .15s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60vw; }
.navbar.solid .ttl { opacity: 1; }
.navrow .r { justify-self: end; display: flex; gap: 2px; }
.navrow .l { justify-self: start; }
.navbtn { color: var(--tint); height: 44px; min-width: 44px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; gap: 2px; font-size: 17px; }
.navbtn:disabled { color: var(--label3); cursor: default; }
.navbtn svg { width: 22px; height: 22px; }
.large { padding: 2px max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px)); }
.large h1 { font-family: var(--display); color: var(--title); font-size: 34px; line-height: 41px; font-weight: 900; letter-spacing: .2px; margin: 0; text-wrap: balance; }
html:lang(ru) .large h1, html:lang(uk) .large h1 { font-weight: 800; letter-spacing: -.2px; }
.large .sub { color: var(--label2); font-size: 15px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.content { max-width: 680px; margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); display: grid; gap: 0; }
.large-wrap { max-width: 680px; margin: 0 auto; }

/* week switcher */
.weekpill { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--fill); border-radius: 10px; padding: 2px; margin: 8px 0 4px; }
.weekpill button { width: 40px; height: 34px; display: grid; place-items: center; color: var(--tint); border-radius: 8px; }
.weekpill button:disabled { color: var(--label3); }
.weekpill button svg { width: 18px; height: 18px; }
.weekpill .mid { text-align: center; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.weekpill .mid span { display: block; font-size: 12px; font-weight: 400; color: var(--label2); }

/* grouped lists */
.sec { margin-top: 22px; }
.sec:first-child { margin-top: 10px; }
.sec-h { font-size: 13px; color: var(--label2); text-transform: uppercase; letter-spacing: -.08px; padding: 0 16px 7px; display: flex; justify-content: space-between; gap: 8px; }
.sec-f { font-size: 13px; color: var(--label2); padding: 7px 16px 0; line-height: 1.35; }
.group { background: var(--cell); border-radius: 10px; overflow: hidden; }
.cell { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 11px 16px; width: 100%; text-align: left; }
.cell + .cell::before { content: ""; position: absolute; top: 0; left: var(--sepx, 16px); right: 0; height: .5px; background: var(--sep); }
button.cell:active, label.cell:active { background: var(--fill); }
.cell .main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cell .t { overflow-wrap: anywhere; }
.cell .s { font-size: 15px; color: var(--label2); overflow-wrap: anywhere; }
.cell .v { color: var(--label2); text-align: right; flex: none; max-width: 55%; overflow-wrap: anywhere; }
.cell .chev { color: var(--label3); flex: none; width: 8px; height: 13px; }
.cell.tint { color: var(--tint); }
.cell.destructive { color: var(--red); justify-content: center; }
.cell.center { justify-content: center; }
.ic { width: 29px; height: 29px; border-radius: 7px; display: grid; place-items: center; flex: none; color: #fff; background: var(--c, var(--tint)); }
.ic svg { width: 18px; height: 18px; }
.ic.blue { --c: #054E9E; } .ic.green { --c: #2E9E5B; } .ic.orange { --c: #998463; } .ic.gray { --c: #5E6B7D; } .ic.indigo { --c: #052141; } .ic.red { --c: #D7263D; }
.withic { --sepx: 57px; }

/* today hero */
.hero { background: linear-gradient(160deg, var(--navy) 0%, var(--navy2) 100%); color: #FFFFFF; border-radius: 16px; padding: 16px 18px 18px 20px; display: grid; gap: 6px; margin-top: 10px; position: relative; overflow: hidden; box-shadow: 0 8px 24px rgba(5,33,65,.18); }
.hero::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--c); }
.hero .row1 { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tag { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--fill); color: var(--label2); }
.tag.live { background: var(--green); color: #fff; }
.hero .tag { background: rgba(255,255,255,.14); color: rgba(255,255,255,.9); }
.hero .tag.live { background: var(--green); color: #fff; }
.hero .tag.chg { background: rgba(205,180,138,.22); color: #F1DDB8; }
.tag.chg { background: rgba(255,149,0,.16); color: var(--orange); font-weight: 600; }
.hero .time { font-family: var(--nums); font-size: 52px; line-height: 1.05; font-weight: 900; letter-spacing: .5px; }
.hero .time .dash { color: rgba(255,255,255,.45); padding: 0 2px; }
.hero .job { font-size: 20px; font-weight: 600; }
.hero .when { font-size: 15px; color: rgba(255,255,255,.72); }

/* day rows */
.day { align-items: stretch; --sepx: 16px; }
.day .dot { width: 4px; border-radius: 2px; background: var(--c); flex: none; }
.day .dname { width: 46px; flex: none; display: grid; align-content: center; }
.day .dname b { font-size: 15px; font-weight: 600; }
.day .dname span { font-size: 13px; color: var(--label2); font-variant-numeric: tabular-nums; }
.day .tm { font-size: 19px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--title); }
.day.off .tm { color: var(--label2); font-weight: 500; }
.day.today { background: var(--today); }
.day.today .dname b { color: var(--tint); }

/* segmented control */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--fill); border-radius: 9px; padding: 2px; gap: 0; }
.seg button { padding: 6px 2px; border-radius: 7px; font-size: 13px; font-weight: 500; line-height: 1.2; display: grid; justify-items: center; }
.seg button span { font-size: 11px; color: var(--label2); font-variant-numeric: tabular-nums; }
.seg button[aria-pressed="true"] { background: var(--cell); box-shadow: 0 3px 8px rgba(0,0,0,.12), 0 3px 1px rgba(0,0,0,.04); font-weight: 600; }
@media (prefers-color-scheme: dark) { .seg button[aria-pressed="true"] { background: #636366; } .seg button[aria-pressed="true"] span { color: var(--label); } }
.seg button.istoday b { color: var(--tint); }
.seg-wrap { margin-top: 10px; }

/* people list */
.person .nm { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.person.me { background: var(--today); }
.person.me .nm { font-weight: 600; }
.shead { display: flex; align-items: center; gap: 8px; }
.shead i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); display: inline-block; }
.shead b { font-family: var(--font); font-size: 13px; color: var(--label); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0; }

/* empty / banners */
.empty { text-align: center; padding: 48px 24px; display: grid; gap: 8px; justify-items: center; color: var(--label2); }
.empty svg { width: 56px; height: 56px; color: var(--label3); }
.empty h2 { color: var(--label); font-size: 22px; font-weight: 700; margin: 6px 0 0; }
.note { margin-top: 12px; background: var(--cell); border-radius: 10px; padding: 11px 14px; font-size: 15px; color: var(--label2); display: flex; gap: 10px; align-items: center; }
.note svg { width: 20px; height: 20px; color: var(--orange); flex: none; }

/* tab bar */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--bar); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 -.5px 0 var(--sep); padding-bottom: env(safe-area-inset-bottom, 0px); padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
.tabbar nav { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; height: 49px; max-width: 680px; margin: 0 auto; }
.tabbar button { display: grid; justify-items: center; align-content: center; gap: 1px; color: #999999; font-size: 10px; font-weight: 500; }
.tabbar button svg { width: 26px; height: 26px; }
.tabbar button[aria-selected="true"] { color: var(--tint); }

/* login */
.login { min-height: 100vh; display: grid; align-content: center; justify-items: center; padding: calc(env(safe-area-inset-top, 0px) + 32px) max(20px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 32px) max(20px, env(safe-area-inset-left, 0px)); gap: 6px; }
.login .appicon { width: 88px; height: 88px; border-radius: 20px; box-shadow: 0 6px 18px rgba(0,0,0,.14); }
.login h1 { font-family: var(--display); color: var(--title); font-size: 34px; font-weight: 900; margin: 2px 0 0; letter-spacing: .3px; text-align: center; text-wrap: balance; }
.login .brandline { margin-top: 16px; font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.login p { color: var(--label2); margin: 0 0 18px; text-align: center; font-size: 15px; max-width: 320px; }
.login form { width: 100%; max-width: 380px; display: grid; gap: 14px; }
.field-cell { padding: 0 16px; min-height: 50px; display: flex; align-items: center; gap: 12px; position: relative; }
.field-cell + .field-cell::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: .5px; background: var(--sep); }
.field-cell label { width: 110px; flex: none; }
.field-cell input, .field-cell select { flex: 1; min-width: 0; border: 0; background: none; padding: 14px 0; outline: none; font-size: 17px; }
.field-cell input::placeholder { color: var(--label3); }
.field-cell select { appearance: none; -webkit-appearance: none; color: var(--label2); text-align: right; text-align-last: right; }
.field-cell input[type="time"] { text-align: right; color: var(--tint); }
.bigbtn { height: 50px; border-radius: 12px; background: var(--btn); color: #fff; font-weight: 600; font-size: 17px; width: 100%; }
.bigbtn:disabled { opacity: .45; }
.bigbtn.plain { background: var(--fill); color: var(--tint); }
.err { color: var(--red); font-size: 15px; text-align: center; min-height: 20px; }
.langrow { margin-top: 18px; width: 100%; max-width: 380px; }

/* switch */
.switch { position: relative; width: 51px; height: 31px; flex: none; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; border-radius: 31px; background: var(--fill2); transition: background .2s; }
.switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.15), 0 3px 1px rgba(0,0,0,.06); transition: transform .2s; }
.switch input:checked + span { background: var(--green); }
.switch input:checked + span::after { transform: translateX(20px); }
.switch input:focus-visible + span { outline: 2px solid var(--tint); outline-offset: 2px; }

/* sheets */
.sheet-bg { position: fixed; inset: 0; z-index: 50; background: var(--dim); display: flex; align-items: flex-end; justify-content: center; animation: fade .2s ease-out; }
.sheet { width: 100%; max-width: 680px; max-height: calc(100vh - env(safe-area-inset-top, 0px) - 12px); background: var(--bg); border-radius: 12px 12px 0 0; display: flex; flex-direction: column; animation: up .3s cubic-bezier(.2,.9,.3,1); overflow: hidden; }
.sheet.full { height: calc(100vh - env(safe-area-inset-top, 0px) - 12px); }
.sheet .grab { width: 36px; height: 5px; border-radius: 3px; background: var(--label3); margin: 6px auto 0; flex: none; }
.sheet .navrow { flex: none; padding: 0 8px; }
.sheet .navrow .ttl { opacity: 1; }
.sheet .navbtn.bold { font-weight: 600; }
.sheet .body { overflow-y: auto; padding: 0 16px calc(24px + env(safe-area-inset-bottom, 0px)); -webkit-overflow-scrolling: touch; }
@keyframes up { from { transform: translateY(100%); } }
@keyframes fade { from { opacity: 0; } }
@media (min-width: 700px) { .sheet-bg { align-items: center; } .sheet { border-radius: 14px; max-height: 86vh; } .sheet.full { height: 86vh; } }

/* action sheet */
.actions { width: 100%; max-width: 420px; padding: 0 8px calc(8px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 8px; animation: up .3s cubic-bezier(.2,.9,.3,1); }
.actions .group { background: var(--bar); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-radius: 14px; }
.actions .msg { padding: 14px 16px; text-align: center; font-size: 13px; color: var(--label2); }
.actions .act { width: 100%; height: 57px; font-size: 20px; color: var(--tint); position: relative; }
.actions .act::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: .5px; background: var(--sep); }
.actions .act.red { color: var(--red); }
.actions .cancel { background: var(--cell); border-radius: 14px; height: 57px; font-size: 20px; font-weight: 600; color: var(--tint); width: 100%; }
@media (min-width: 700px) { .sheet-bg.center { align-items: center; } }

/* preview table */
.tablewrap { overflow-x: auto; background: var(--cell); border-radius: 10px; }
table.prev { border-collapse: collapse; font-size: 13px; width: max-content; min-width: 100%; }
table.prev th, table.prev td { padding: 8px 10px; text-align: left; white-space: nowrap; font-variant-numeric: tabular-nums; border-bottom: .5px solid var(--sep); }
table.prev th { color: var(--label2); font-weight: 600; }
table.prev td:first-child, table.prev th:first-child { position: sticky; left: 0; background: var(--cell); font-weight: 600; }
table.prev td.chg { color: var(--orange); font-weight: 600; }
table.prev td.offc { color: var(--label2); }
.warn { color: var(--orange); }

/* credentials card */
.cred { background: var(--cell); border-radius: 12px; padding: 18px; display: grid; gap: 12px; text-align: center; margin-top: 10px; }
.cred .k { font-size: 13px; color: var(--label2); text-transform: uppercase; }
.cred .val { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 22px; font-weight: 600; user-select: all; -webkit-user-select: all; }

/* profile */
.avatar { width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(160deg, var(--navy), var(--navy2)); color: #fff; display: grid; place-items: center; font-size: 24px; font-weight: 600; flex: none; }
.profile { gap: 14px; padding-block: 14px; }
.profile .t { font-size: 20px; font-weight: 650; color: var(--title); }
.check { width: 20px; height: 20px; color: var(--tint); flex: none; }

/* HUD */
.hud { position: fixed; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 80; background: var(--bar); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-radius: 14px; padding: 18px 22px; min-width: 150px; max-width: 80vw; display: grid; justify-items: center; gap: 8px; font-size: 15px; font-weight: 600; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,.15); animation: fade .15s; }
.hud svg { width: 40px; height: 40px; color: var(--label2); }

.offline { text-align: center; font-size: 13px; color: var(--label2); padding: 4px 0 0; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--label2); padding: 10px 16px 0; }
.legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c); margin-right: 5px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* invite links, calendar export, join screen */
.cred .val.link { font-size: 14px; font-weight: 500; word-break: break-all; line-height: 1.4; color: var(--tint); }
.calbtn { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; }
.calbtn svg { width: 20px; height: 20px; }
.linkbtn { color: var(--tint); font-weight: 600; padding: 0; background: none; }
.login .spinner { margin-top: 18px; }