:root {
  color-scheme: light;
  /* PhysioMIND: navy wordmark, teal Hebrew, coral sun */
  --ink: #2c3a49; --teal: #76aab8; --link: #3c7c8f;
  --bg: #f2f7f8; --surface: #ffffff; --line: #d7e3e7; --dim: #66788a;
  --accent: #e8926f; --on-accent: #24313f; --danger: #c2473d;
  --display: 'Rubik', 'Assistant', system-ui, sans-serif;
  --body: 'Assistant', system-ui, 'Segoe UI', Arial, sans-serif;
  --shadow: 0 6px 20px rgba(44, 58, 73, .12);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.55 var(--body); }
a { color: var(--link); }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

/* header */
header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px clamp(16px, 4vw, 40px); background: var(--surface); border-bottom: 1px solid var(--line); }
header form { display: flex; gap: 18px; align-items: center; margin: 0; }
.brand { color: var(--ink); text-decoration: none; font: 700 22px/1.2 var(--display); display: flex; align-items: center; }
.brand .logo { height: 58px; width: auto; max-width: 180px; object-fit: contain; display: block; }
.brand.big { justify-content: center; font-size: 30px; margin-bottom: 28px; }
.brand.big .logo { height: 150px; max-width: 80%; }
.who { color: var(--dim); font-size: 15px; }
.nav { text-decoration: none; font-weight: 600; }
a.who { text-decoration: none; }
a.who:hover { color: var(--link); }
.masked { -webkit-text-security: disc; font-family: system-ui, sans-serif; letter-spacing: .08em; }
.note2 { background: color-mix(in srgb, var(--accent) 16%, transparent); border-radius: 10px; padding: 12px 16px; margin: 0 0 18px; }
.center { text-align: center; }
.tag.warn { background: color-mix(in srgb, var(--accent) 30%, transparent); }
.login .hint { margin: -8px 0 0; }

/* type */
main { max-width: 1120px; margin: 0 auto; padding: 30px clamp(16px, 4vw, 40px) 64px; }
h1 { font: 700 30px/1.2 var(--display); margin: 0 0 6px; }
h2 { font: 500 21px/1.25 var(--display); margin: 0 0 16px; }
.meta { color: var(--dim); margin: 0 0 20px; display: flex; gap: 18px; flex-wrap: wrap; font-size: 15px; }
.back { display: inline-block; margin-bottom: 14px; text-decoration: none; font-size: 15px; font-weight: 600; }
.back::before { content: '›'; margin-inline-end: 6px; }
.d, .hint { color: var(--dim); }
.hint { font-size: 14px; margin: -6px 0 0; }
.err { color: var(--danger); }
.empty { color: var(--dim); padding: 28px 0; }

/* controls */
button { background: var(--accent); color: var(--on-accent); border: 0; border-radius: 999px; padding: 11px 26px; font: 600 16px var(--body); cursor: pointer; }
button:hover { filter: brightness(.95); }
button:disabled { opacity: .55; cursor: default; }
button.link { background: none; color: var(--link); padding: 0; border-radius: 0; font-weight: 600; font-size: 15px; }
button.danger { color: var(--danger); }
label { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; color: var(--dim); font-size: 15px; }
input, textarea { width: 100%; min-width: 0; }
input[type=checkbox] { width: auto; }
[role=status]:empty { display: none; }
input, textarea { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; color: var(--ink); font: 16px var(--body); }
textarea { resize: vertical; line-height: 1.5; }
input:focus, textarea:focus { outline: 2px solid var(--teal); outline-offset: 0; border-color: transparent; }
input[type=color] { height: 46px; padding: 4px; width: 84px; }
input[type=file] { padding: 9px; }
progress { width: 100%; accent-color: var(--accent); }
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 480px; }
.stack + .stack { margin-top: 28px; }

/* login + statement */
.login { max-width: 400px; padding-top: 7vh; position: relative; }
.login h1 { text-align: center; margin-bottom: 20px; }
.login form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
/* the logo's sun, rising behind the login form */
.login::after { content: ''; position: fixed; z-index: -1; pointer-events: none; left: 50%; bottom: -36vmin; width: 72vmin; height: 72vmin; transform: translateX(-50%); border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 20px, color-mix(in srgb, var(--accent) 26%, transparent) 20px 25px); }
.terms { max-width: 560px; padding-top: 3vh; }
.terms::after { display: none; }
.terms .brand.big .logo { height: 96px; }
.terms h1 { text-align: start; }
.termsText { white-space: pre-line; background: var(--surface); border: 1px solid var(--line); border-inline-start: 4px solid var(--teal); border-radius: 6px; padding: 20px 22px; margin: 0 0 20px; max-height: 44vh; overflow: auto; }
.check { display: flex; gap: 10px; align-items: flex-start; color: var(--ink); font-size: 16px; }
.check input { width: 20px; height: 20px; margin-top: 3px; flex: none; accent-color: var(--accent); }
.terms form + form { margin-top: 16px; text-align: center; }

/* library */
.tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--line); margin-bottom: 28px; }
.tabs a { padding: 6px 0 12px; color: var(--dim); text-decoration: none; font: 500 21px/1.2 var(--display); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tabs a.on { color: var(--ink); border-color: var(--accent); }
.tabs .n { font: 400 14px var(--body); color: var(--dim); margin-inline-start: 8px; }
.grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px 22px; }
.grid + .grid { margin-top: 36px; }
.grid a { display: block; color: var(--ink); text-decoration: none; }
.grid .thumb { display: block; position: relative; overflow: hidden; box-shadow: var(--shadow); }
.grid .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.grid .len { position: absolute; bottom: 8px; left: 8px; background: rgba(36, 49, 63, .85); color: #fff; font-size: 13px; padding: 1px 9px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.grid .t { display: block; margin-top: 12px; font-weight: 600; line-height: 1.35; }
.grid .when { display: block; color: var(--dim); font-size: 14px; }
.grid a:hover .t { color: var(--link); }
/* videos are frames, documents are sheets of paper */
.grid.videos { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.grid.videos .thumb { aspect-ratio: 16 / 9; border-radius: 14px; background: var(--ink); }
.grid.videos a:hover .thumb { box-shadow: 0 0 0 3px var(--accent), var(--shadow); }
.grid.docs { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.grid.docs .thumb { aspect-ratio: 210 / 297; border-radius: 3px; background: #fff; border: 1px solid var(--line); transition: transform .15s; }
.grid.docs .thumb img { object-position: top; }
.grid.docs a:hover .thumb { transform: translateY(-4px); }
.grid.docs .len { background: var(--teal); color: #16232e; font-weight: 600; }
.note { margin: -12px 0 24px; }
.admin .note { margin: -8px 0 14px; }

/* player */
#stage { position: relative; background: #000; border-radius: 14px; overflow: hidden; user-select: none; -webkit-user-select: none; box-shadow: 0 16px 40px rgba(44, 58, 73, .25); }
#stage video { display: block; width: 100%; max-height: 80vh; }
.wm { position: absolute; pointer-events: none; color: rgba(255, 255, 255, .28); font-size: clamp(11px, 1.6vw, 16px); text-shadow: 0 0 2px rgba(0, 0, 0, .6); white-space: nowrap; direction: ltr; }
.wm.p0 { top: 6%; left: 4%; }
.wm.p1 { top: 6%; right: 4%; }
.wm.p2 { top: 45%; left: 30%; }
.wm.p3 { bottom: 18%; left: 4%; }
.wm.p4 { bottom: 18%; right: 4%; }
.wm.p5 { top: 28%; right: 22%; }

/* document reader */
.reader { max-width: 860px; user-select: none; -webkit-user-select: none; }
.pg { position: relative; margin: 0 0 22px; background: #fff; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; box-shadow: var(--shadow); }
.pg img { display: block; width: 100%; height: auto; pointer-events: none; -webkit-touch-callout: none; }
.pn { position: absolute; bottom: 6px; left: 10px; font-size: 12px; color: #6b7377; direction: ltr; }

/* admin */
.admin { max-width: 860px; }
.admin h1 { margin-bottom: 24px; }
.admin section { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 24px clamp(16px, 3vw, 28px); margin-bottom: 18px; }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.rows li:last-child { border-bottom: 0; }
.rows .t { flex: 1 1 220px; }
.rows form { margin: 0; }
.rows .d { font-size: 14px; font-variant-numeric: tabular-nums; }
.rename { flex: 1 1 260px; display: flex; gap: 12px; align-items: center; }
.rename input { flex: 1; min-width: 0; padding: 8px 10px; background: transparent; border-color: transparent; font-weight: 600; }
.rename input:hover { border-color: var(--line); }
.rename input:focus { background: var(--surface); }
.ltr { direction: ltr; }

.admin .tabs { margin-bottom: 22px; }
.admin h1 { margin-bottom: 14px; }
h2 .n { font: 400 14px var(--body); color: var(--dim); margin-inline-start: 8px; }
.ok { color: #2f7d5b; font-weight: 600; }
.tag { font-size: 13px; padding: 1px 10px; border-radius: 999px; background: color-mix(in srgb, var(--teal) 30%, transparent); color: var(--ink); white-space: nowrap; }
.tag.off { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
.tag.me { background: color-mix(in srgb, var(--accent) 30%, transparent); }
.users li { display: block; padding: 0; }
.users summary { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 12px 0; cursor: pointer; list-style: none; }
.users summary::-webkit-details-marker { display: none; }
.users summary::before { content: '‹'; color: var(--dim); font-size: 20px; line-height: 1; transition: transform .15s; }
.users details[open] summary::before { transform: rotate(-90deg); }
.users summary .t { font-weight: 600; flex: 1 1 160px; }
.users summary .t .d { font-weight: 400; margin-inline-start: 6px; }
.users details > .stack, .users details > .hint { margin: 6px 0 22px; padding-inline-start: 22px; }
.users details > .stack + .stack { margin-top: 0; }
.acts { display: flex; gap: 22px; flex-wrap: wrap; padding: 0 22px 18px 0; }

@media (max-width: 520px) {
  body { font-size: 16px; }
  h1 { font-size: 25px; }
  .tabs { gap: 22px; }
  .tabs a { font-size: 19px; }
  .brand .logo { height: 50px; }
  .brand.big .logo { height: 130px; }
  .grid.videos { grid-template-columns: 1fr; }
  .grid.docs { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media print { body { display: none !important; } }

/* ---- icons, sticky header, proportions ---- */
.ic { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
button, .nav, a.who, .tabs a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
header { position: sticky; top: 0; z-index: 20; min-height: 64px; padding-block: 6px; box-shadow: 0 2px 12px rgba(44, 58, 73, .07); }
header form { gap: 6px; }
header .nav, header a.who, header button.link { padding: 8px 12px; border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--ink); }
header .nav:hover, header a.who:hover, header button.link:hover { background: var(--bg); color: var(--link); filter: none; }
header a.who { font-weight: 400; color: var(--dim); }
.brand .logo { height: 50px; }
main { padding-top: 34px; }
h1 { font-size: 32px; margin-bottom: 8px; }
.tabs { gap: 8px; }
.tabs a { padding: 10px 16px 13px; font-size: 19px; }
.tabs .n { margin-inline-start: 0; }
button { padding: 11px 24px; min-height: 46px; }
button.link { min-height: 0; padding: 4px 0; gap: 6px; }
.stack > button { justify-self: start; min-width: 190px; }
.login form > button, .terms form > button { width: 100%; }
.login form button.link { width: auto; }
.grid.videos { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 32px 26px; }
.grid.docs { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 32px 26px; }
.grid .t { font-size: 17px; }
.admin { max-width: 920px; }
.admin section { padding: 26px clamp(18px, 3vw, 32px) 28px; }
.rows li { gap: 8px 20px; padding: 12px 0; }
.panel { display: grid; gap: 4px 40px; padding: 8px 22px 6px 0; }
.users details .panel > .stack { margin: 0 0 22px; padding: 0; }
.acts { padding: 0 0 14px; }
@media (min-width: 760px) {
  .stack.cols { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; align-items: start; }
  .stack.cols > .check, .stack.cols > .hint, .stack.cols > button, .stack.cols > progress, .stack.cols > [role=status] { grid-column: 1 / -1; }
  .panel { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .panel > .acts { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  header { min-height: 56px; }
  .brand .logo { height: 44px; }
  header .nav, header a.who, header button.link { padding: 8px 9px; }
  header a.who span { display: none; }
  h1 { font-size: 26px; }
  .tabs { gap: 0; }
  .tabs a { padding: 8px 10px 12px; font-size: 17px; gap: 6px; }
  .stack > button { width: 100%; }
  .grid.videos { grid-template-columns: 1fr; }
  .grid.docs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .panel { padding-inline-start: 0; }
}
.tabs { overflow-x: auto; scrollbar-width: none; }
.tabs a { white-space: nowrap; flex: none; }
@media (max-width: 380px) {
  header { padding-inline: 10px; gap: 6px; }
  header form { gap: 0; }
  header .nav span, header button.link span { display: none; }
  .tabs .ic { display: none; }
  .tabs a { padding-inline: 8px; }
}