/* work. worker, learning and entry surfaces. This sheet changes presentation only. */
body.work-design:not(.admin) {
  --ink: var(--work-text, #18212f);
  --sub: var(--work-muted, #748098);
  --line: var(--work-border, #e5e9f1);
  --bg: var(--work-surface, #fff);
  --soft: var(--work-bg, #f7f8fb);
  --accent: var(--work-brand, #635bff);
  --accent-soft: var(--work-brand-soft, #efedff);
  --accent-ink: #fff;
  --radius: var(--work-radius, 12px);
  --shadow: var(--work-shadow, 0 4px 24px rgba(24, 33, 47, .04));
  background: var(--soft);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;
  font-size: 14px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

body.work-design:not(.admin) :is(button, input, select, textarea) { font-family: inherit; }
body.work-design:not(.admin) :is(.wrap, .panel, .card, .box, .ca-rc) { min-width: 0; }
body.work-design:not(.admin):not(.callmode) .wrap { padding-top: 30px; }
body.work-design:not(.admin) h1 { color: var(--ink); letter-spacing: -.035em; font-weight: 750; }
body.work-design:not(.admin) h2 { color: var(--ink); letter-spacing: -.018em; }
body.work-design:not(.admin) :is(.sub, .muted) { color: var(--sub); }
body.work-design:not(.admin) :is(.panel, .card, .box) {
  background: var(--bg);
  border-color: var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
body.work-design:not(.admin) :is(.btn, .altbtn, .linkbtn) {
  border-radius: 9px;
  font-weight: 650;
  letter-spacing: -.015em;
}
body.work-design:not(.admin) .btn:not(.ghost):not(.gray):not(:disabled) {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  box-shadow: 0 2px 3px rgba(24, 33, 47, .08);
}
body.work-design:not(.admin) .btn:not(.ghost):not(.gray):not(:disabled):hover { background: #2b3546; }
body.work-design:not(.admin) .btn.ghost { background: #fff; border-color: var(--line); color: var(--ink); }
body.work-design:not(.admin) .btn.ghost:hover { background: var(--soft); border-color: #cdd3df; }
body.work-design:not(.admin) .btn:disabled { box-shadow: none; }
body.work-design:not(.admin) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]), select, textarea) {
  border-color: var(--line);
  border-radius: 9px;
  background-color: var(--bg);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(24, 33, 47, .025);
}
body.work-design:not(.admin) :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
}
body.work-design:not(.admin) :is(input[type=checkbox], input[type=radio], input[type=range]) { accent-color: var(--accent); }
body.work-design:not(.admin) :is(input, textarea)::placeholder { color: #8c96a8; opacity: 1; }
body.work-design:not(.admin) :is(details, .card, .panel) > summary { cursor: pointer; }
body.work-design:not(.admin) :is(a, button, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
body.work-design:not(.admin) :is(.panel, .card) > :last-child { margin-bottom: 0; }

/* Account entry and setup retain the original controls, messages and progression. */
body.work-design:not(.admin) .wrap.tight {
  width: min(440px, calc(100% - 32px));
  max-width: 440px;
  margin: clamp(28px, 7vh, 84px) auto 40px;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--bg);
  box-shadow: 0 12px 48px rgba(24, 33, 47, .055);
}
body.work-design:not(.admin) .wrap.tight h1 { margin-bottom: 12px; font-size: 25px; line-height: 1.4; }
body.work-design:not(.admin) .wrap.tight :is(.sub, .cm-lead) { font-size: 13px; line-height: 1.85; }
body.work-design:not(.admin) .wrap.tight label { color: #535f74; letter-spacing: 0; font-size: 12px; }
body.work-design:not(.admin) .wrap.tight :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]), .btn) { min-height: 46px; }
body.work-design:not(.admin) .wrap.tight .foot { border-top: 1px solid var(--line); padding-top: 18px; }
body.work-design:not(.admin) .wrap.tight :is(.altbtn, .pcq-o) { border-color: var(--line); background: var(--bg); }
body.work-design:not(.admin) .wrap.tight .altbtn:hover { border-color: var(--accent); background: var(--accent-soft); }
body.work-design:not(.admin) .cm-to { background: var(--soft); border-color: var(--line); border-radius: 10px; }
body.work-design:not(.admin) :is(.ag-head, .nx-card, .zc, .su-prep) { border-color: var(--line); border-radius: 16px; }
body.work-design:not(.admin) :is(.terms, .doc) { color: var(--ink); }
body.work-design:not(.admin) .ag-kicker { color: var(--accent); }

/* Calling uses the existing grid, phone lane, scripts and result panels. */
body.work-design.callmode { background: var(--soft); }
body.work-design.callmode .callbar { background: #fff; border-bottom-color: var(--line); box-shadow: 0 2px 14px rgba(24, 33, 47, .035); }
body.work-design.callmode :is(.cb-name, .c-name) { letter-spacing: -.025em; }
body.work-design.callmode :is(.cb-meta, .cb-k, .c-meta) { color: var(--sub); }
body.work-design.callmode .cb-pay { padding-inline: 10px; border-radius: 8px; background: var(--soft); }
body.work-design.callmode :is(.cb-exit, .cb-mini) { background: #fff; border-color: var(--line); color: var(--ink); border-radius: 8px; }
body.work-design.callmode :is(.cb-exit, .cb-mini):hover { background: var(--soft); border-color: #cdd3df; }
body.work-design.callmode .call-grid { background: var(--soft); }
body.work-design.callmode :is(.call-right, .call-search) .card { border-color: var(--line); border-radius: 12px; box-shadow: var(--shadow); }
body.work-design.callmode :is(.cb-go, .cb-dialchip) { background: var(--accent); border-color: var(--accent); color: #fff; }
body.work-design.callmode .dial:not(.calling):not(.second):not(:disabled) { background: var(--accent); border-color: var(--accent); color: #fff; }
body.work-design.callmode .dial:not(.calling):not(.second):not(:disabled) :is(.d-num, .d-tap) { color: #fff; }
body.work-design.callmode .call-search :is(.gtools, .head-util) { border-color: var(--line); }
body.work-design.callmode :is(.sheet, .mt-box, .dmodal-in) { border-color: var(--line); border-radius: 16px; box-shadow: 0 24px 90px rgba(24, 33, 47, .2); }
body.work-design.callmode :is(.sheet-title, .mt-eyebrow) { color: var(--sub); }
body.work-design.callmode :is(.lnk, .fl-btn) { border-radius: 8px; }
body.work-design.callmode .tch { border-color: var(--line); background: #fff; border-radius: 10px; }
body.work-design.callmode .touch-k { color: var(--accent); }

/* Personal account, earnings and reports keep their existing financial meaning. */
body.work-design:not(.admin) :is(.mp, .egrid) { gap: 24px; }
body.work-design:not(.admin) .mp-top { padding-bottom: 26px; }
body.work-design:not(.admin) .mp-av { background: var(--accent-soft); color: var(--accent); border-radius: 16px; }
body.work-design:not(.admin) :is(.mp-card, .mp-r, .cur, .stm, .how, .rw:not(.gap), .rw-sum) { background: #fff; border-color: var(--line); border-radius: 12px; }
body.work-design:not(.admin) .ev { background: #fff; border-radius: 12px; }
body.work-design:not(.admin) .rj-out .box.yes { border-color: var(--accent); background: var(--accent-soft); }
body.work-design:not(.admin) .rj-out .box.no { border-color: #e0b070; background: #fff8ee; }
body.work-design:not(.admin) :is(.mp-card, .cur, .stm, .rw-sum) { box-shadow: var(--shadow); }
body.work-design:not(.admin) .mp-sec { border-color: var(--line); }
body.work-design:not(.admin) .mp-l h2 { font-weight: 700; }
body.work-design:not(.admin) .pay { background: var(--ink); border-color: var(--ink); color: #fff; border-radius: 16px; text-align: left; padding: 26px; box-shadow: 0 8px 26px rgba(24, 33, 47, .1); }
body.work-design:not(.admin) .pay :is(.pay-lb, .pay-sub) { color: #bfc9da; }
body.work-design:not(.admin) .pay-yen { color: #fff; font-size: clamp(34px, 4vw, 44px); letter-spacing: -.04em; margin-block: 8px; }
body.work-design:not(.admin) .pay-note { border-color: #3c4556; color: #dce1eb; }
body.work-design:not(.admin) :is(.cur-lb, .stm-lb, .rw-h) { color: #536078; font-weight: 650; }
body.work-design:not(.admin) .brk td { border-color: var(--line); }
body.work-design:not(.admin) .rw-c { background: var(--soft); border-color: var(--line); border-radius: 10px; }
body.work-design:not(.admin) .rw-c b { color: var(--ink); letter-spacing: -.035em; }
body.work-design:not(.admin) :is(.pl-total, .pl-b, .rw-t, .firsts) { border-color: var(--line); }
body.work-design:not(.admin) .rw-none { background: var(--soft); color: var(--sub); border-radius: 9px; }

/* Lessons and practice share the same restrained surfaces and spacing. */
body.work-design:not(.admin) :is(.su-next, .su-i, .gd-i, .pd-card, .sm-pt, .tk-i, .help-panel, .help-search, .ts-hero) { border-color: var(--line); border-radius: 12px; }
body.work-design:not(.admin) :is(.su-i, .gd-i, .pd-card, .sm-pt, .tk-i, .help-panel) { background: #fff; box-shadow: var(--shadow); }
body.work-design:not(.admin) :is(.su-next, .su-call, .gd-n) { background: var(--accent-soft); color: var(--accent); border-color: #dedafa; }
body.work-design:not(.admin) .su-next:hover { border-color: var(--accent); }
body.work-design:not(.admin) :is(.su-h1, .gd-top h1, .lw h1, .pd-top h1, .ts-hero h1) { letter-spacing: -.04em; }
body.work-design:not(.admin) :is(.su-eyebrow, .so-crumb, .lw .eyebrow, .lw .num, .lw .mid-h) { color: var(--accent); }
body.work-design:not(.admin) .lw :is(.hero, .rule) { background: var(--accent-soft); border-radius: 14px; }
body.work-design:not(.admin) .lw .hero .big { color: var(--accent); }
body.work-design:not(.admin) .lw .foot { border-color: var(--line); background: rgba(247, 248, 251, .96); }
body.work-design:not(.admin) .lw :is(.card, .box) { border-color: var(--line); background: #fff; }
body.work-design:not(.admin) :is(.pk-head, .kn-top, .sc-head, .gd-bar) { background: #fff; border-color: var(--line); }
body.work-design:not(.admin) :is(.pk-script, .kn-body, .kn-set, .s1-main, .r-box, .tk-body) { background: #fff; border-color: var(--line); border-radius: 12px; }
body.work-design:not(.admin) :is(.pk-scroll, .kn-scroll) { background: var(--soft); }
body.work-design:not(.admin) :is(.pk-scr, .kn-out, .s1-h) { color: var(--ink); }
body.work-design:not(.admin) :is(.gd-list, .gd-grp, .howto, .cp-panel) { border-color: var(--line); }
body.work-design:not(.admin) :is(.help-note, .pd-note) { border-radius: 10px; }
body.work-design:not(.admin) .hsec { border-color: var(--line); }

/* Practice has its own flex shell rather than the shared .wrap. Reserve both app rails once. */
body.work-design:not(.admin):not(.callmode) > :is(.pk-page, .kn-page) {
  flex: 0 0 auto;
  width: calc(100% - var(--work-sidebar, 224px));
  height: calc(100dvh - var(--work-header, 72px));
  min-width: 0;
  min-height: 0;
  margin-left: var(--work-sidebar, 224px);
}
body.work-design:not(.admin):not(.callmode) .pk-page > .pk-head { padding-top: 14px; }
body.work-design:not(.admin):not(.callmode) .pk-page > :is(.pk-head, .pk-body, .pk-bar) { min-width: 0; }
body.work-design:not(.admin):not(.callmode) .kn-page > :is(#vChooser, #vDrill, #vDone) { min-width: 0; min-height: 0; }

/* Messaging retains split panes, stable conversations, unread marks and attachments. */
body.work-design:not(.admin) .ca { gap: 16px; height: calc(100dvh - var(--work-header, 72px) - 48px); min-height: 320px; }
body.work-design:not(.admin) .wrap:has(>.ca) { padding-bottom: 16px; }
body.work-design:not(.admin) :is(.ca-rail, .ca-pane, .ca-th) { border-color: var(--line); border-radius: 12px; }
body.work-design:not(.admin) .ca-rail { background: #fff; padding-block: 10px; box-shadow: var(--shadow); }
body.work-design:not(.admin) .ca-pane { background: #fff; padding: 14px 16px; border: 1px solid var(--line); box-shadow: var(--shadow); }
body.work-design:not(.admin) .ca-th { background: #fff; }
body.work-design:not(.admin) .ca-sec { color: var(--sub); font-size: 11px; letter-spacing: .04em; padding-top: 15px; }
body.work-design:not(.admin) .ca-row { margin-inline: 6px; }
body.work-design:not(.admin) .ca-row .ca-i { min-height: 38px; border-radius: 8px; }
body.work-design:not(.admin) .ca-row .ca-i.on { background: var(--accent-soft); color: var(--accent); }
body.work-design:not(.admin) .ca-row .ca-i.on :is(.ca-k, .ca-hash, .ca-t) { color: var(--accent); }
body.work-design:not(.admin) .ca-phead { padding-bottom: 13px; border-color: var(--line); }
body.work-design:not(.admin) :is(.ca-av, .ca-rav) { background: var(--soft); color: #5e6b82; border: 1px solid var(--line); }
body.work-design:not(.admin) .ca-m { border-radius: 7px; }
body.work-design:not(.admin) .ca-m.me { background: #f8f7ff; box-shadow: inset 2px 0 0 var(--accent); }
body.work-design:not(.admin) :is(.ca-day span, .ca-pchip, .ca-chip) { background: #fff; border-color: var(--line); }
body.work-design:not(.admin) .ca-chip.on { background: var(--accent-soft); border-color: #d5d0ff; }
body.work-design:not(.admin) :is(.ca-form, .dm-form) { border-top-color: var(--line); }
body.work-design:not(.admin) :is(.ca-tools, .ca-pend) { border-color: var(--line); }
body.work-design:not(.admin) .ca-input { border-radius: 12px; }
body.work-design:not(.admin) .dm-log { border-color: var(--line); background: #fff; border-radius: 14px; }
body.work-design:not(.admin) .dm-m.me { background: var(--accent-soft); }

/* Legacy audio pages now reserve the left navigation, rather than a right rail. */
body.work-design:not(.admin):not(.callmode):not(.s1p) .np {
  left: var(--work-sidebar, 224px);
  right: 0;
}
body.work-design.s1p {
  --s1side: 0px;
  --s1-left: var(--work-sidebar, 224px);
  --s1-comment-width: clamp(300px, 30vw, 372px);
  --s1-player-space: 108px;
  overflow: hidden;
}
body.work-design.s1p.cmt-open { --s1r: var(--s1-comment-width); }
body.work-design.s1p .s1-main {
  position: fixed;
  top: var(--work-header, 72px);
  left: var(--s1-left);
  right: var(--s1r, 0px);
  bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 0;
  scroll-padding-block: 20px;
}
body.work-design.s1p.np-on .s1-main { bottom: var(--s1-player-space); }
/* The outer fixed surface already accounts for the shared sidebar offset. */
body.work-design.s1p .s1-main > .wrap.ad-wrap {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 24px 28px 40px;
}
body.work-design.s1p .np {
  left: var(--s1-left);
  right: var(--s1r, 0px);
}
body.work-design.s1p .s1-col {
  top: var(--work-header, 72px);
  left: auto;
  right: 0;
  width: var(--s1-comment-width);
}
body.work-design.s1p :is(.s1-cbtn, .s1-now) { right: calc(var(--s1r, 0px) + 24px); }
body.work-design.s1p .s1-cbtn { bottom: 24px; }
body.work-design.s1p .s1-now { bottom: 76px; }
body.work-design.s1p.np-on .s1-cbtn { bottom: calc(var(--s1-player-space) + 24px); }
body.work-design.s1p.np-on .s1-now { bottom: calc(var(--s1-player-space) + 76px); }
body.work-design.s1p .np-l { min-width: 0; }
body.work-design.s1p .np-l b { min-width: 0; overflow-wrap: anywhere; }

/* The full-page editor scrolls beneath the header. In-call panes keep their own scroll origin. */
@media (min-width: 701px) {
  body.work-design:not(.admin):not(.callmode) :is(.pv-left, .pv-right, .sw-rail) {
    position: sticky;
    top: calc(var(--work-header, 72px) + 16px);
    max-height: calc(100dvh - var(--work-header, 72px) - 32px);
  }
}

/* The comment column can leave less room than the viewport-based player breakpoint. */
@media (min-width: 901px) and (max-width: 1180px) {
  body.work-design.s1p.cmt-open { --s1-player-space: 176px; }
  body.work-design.s1p.cmt-open .np .pl { flex-wrap: wrap; }
  body.work-design.s1p.cmt-open .np .pl .pl-bar { order: 9; flex-basis: 100%; }
}

@media (max-width: 900px) {
  body.work-design:not(.admin):not(.callmode) > :is(.pk-page, .kn-page) {
    width: 100%;
    height: calc(100dvh - var(--work-header, 62px));
    margin-left: 0;
  }
  body.work-design:not(.admin):not(.callmode):not(.s1p) .np { left: 0; right: 0; }
  body.work-design.s1p { --s1-left: 0px; --s1-player-space: 190px; }
  body.work-design.s1p.cmt-open { --s1r: 0px; }
  body.work-design.s1p .s1-main { top: var(--work-header, 62px); left: 0; right: 0; }
  body.work-design.s1p .s1-main > .wrap.ad-wrap { padding: 22px 16px 40px; }
  body.work-design.s1p .s1-col {
    top: auto;
    left: 0;
    right: 0;
    width: auto;
    max-height: min(76dvh, calc(100dvh - var(--work-header, 62px)));
    z-index: 64;
    border-left: 0;
    border-top: 1px solid var(--line);
    box-shadow: 0 -10px 30px rgba(24, 33, 47, .12);
  }
  body.work-design.s1p :is(.s1-cbtn, .s1-now) { right: 16px; }
}

@media (max-width: 600px) {
  /* Keep the script readable while every stage and script choice remains reachable. */
  body.work-design .pk-head :is(.pk-steps,.pk-mats){flex-wrap:nowrap;overflow-x:auto;max-width:100%;padding-bottom:5px;scrollbar-width:thin}
  body.work-design .pk-head :is(.pk-steps,.pk-mats)>a{flex:0 0 auto;white-space:nowrap}
  /* Put the chooser actions on their own row instead of over the heading or explanation. */
  body.work-design:not(.admin):not(.callmode) .kn-page .kn-top { padding-top: 48px; }
  body.work-design:not(.admin):not(.callmode) .kn-page .kn-takes { top: 12px; }
  body.work-design:not(.admin) .head-row:has(.head-acts) { flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-bottom: 16px; }
  body.work-design:not(.admin) .head-row:has(.head-acts) > h1 { flex-basis: 100%; margin: 0; }
  body.work-design.s1p .s1-h {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 6px 12px;
  }
  body.work-design.s1p .s1-h > .s1-w {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.55;
  }
  body.work-design.s1p .s1-h > .s1-m {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    line-height: 1.7;
  }
  body.work-design.s1p .s1-h > .s1-star {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: start;
    margin-left: 0;
  }
}

/* Standalone entry documents load this same sheet after their own local styles. */
body.work-design.work-public .layout { max-width: 1160px; column-gap: 56px; }
body.work-design.work-public header { padding-block: 68px 46px; }
body.work-design.work-public h1 { font-size: clamp(30px, 4vw, 43px); line-height: 1.4; }
body.work-design.work-public h2 { font-size: clamp(21px, 2.8vw, 26px); font-weight: 750; }
body.work-design.work-public :is(.lead, .h2sub) { color: #66728a; }
body.work-design.work-public .eyebrow { border-color: #e0dcff; background: var(--accent-soft); }
body.work-design.work-public :is(.pay-card, .card, .tbl, .apply-card, .tags li) { background: #fff; border-color: var(--line); box-shadow: var(--shadow); }
body.work-design.work-public :is(.pay-card, .card, .tbl, .apply-card) { border-radius: 16px; }
body.work-design.work-public :is(.btn, .btn2) { border-radius: 10px; min-height: 46px; }
body.work-design.work-public .btn2 { border-color: var(--line); color: var(--ink); }
body.work-design.work-public .sidenav a { border-radius: 9px; }
body.work-design.work-public .sidenav a.on { background: var(--accent-soft); border-left-color: var(--accent); }
body.work-design.work-public .sidenav a .no { border-radius: 6px; background: #e3e6ee; color: #657188; }
body.work-design.work-public .sidenav a.on .no { background: var(--accent); color: #fff; }
body.work-design.work-public section { border-color: var(--line); }
body.work-design.work-public .chipbar { background: rgba(247, 248, 251, .96); border-color: var(--line); }
body.work-design.work-public .chipbar a.on { background: var(--accent); border-color: var(--accent); color: #fff; }
body.work-design.work-connect #ccp { border-color: var(--line); border-radius: 12px; box-shadow: var(--shadow); }
body.work-design.work-connect .panel { padding: 24px; }
body.work-design.work-connect #log { background: var(--soft); border-radius: 10px; }

@media (max-width: 760px) {
  body.work-design:not(.admin):not(.callmode) .wrap:not(.tight) { padding-top: 24px; padding-inline: 16px; }
  body.work-design:not(.admin) .wrap.tight { padding: 25px 22px; margin-top: 28px; }
  body.work-design:not(.admin) .wrap.tight h1 { font-size: 23px; }
  body.work-design:not(.admin) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not(.code), select, textarea) { font-size: 16px; }
  body.work-design:not(.admin) .pay { padding: 22px; }
  body.work-design:not(.admin) .ca { gap: 0; }
  body.work-design:not(.admin) .ca-pane { padding: 12px; }
  body.work-design:not(.admin) :is(.ca-rail, .ca-pane) { border-radius: 10px; }
  body.work-design.work-public .layout { padding-inline: 20px; }
  body.work-design.work-public header { padding-block: 36px 34px; }
  body.work-design.work-public section { padding-block: 36px; }
  body.work-design.work-public .tags { gap: 6px; }
  body.work-design.work-public .tags li { padding: 6px 10px; font-size: 12px; }
  body.work-design.work-connect .wrap { padding: 12px; }
  body.work-design.work-connect .panel { min-width: 0; width: 100%; padding: 18px; }
  body.work-design.work-connect #ccp { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  body.work-design:not(.admin) :is(.btn, .altbtn, .su-next, .ca-row .ca-i) { transition: none; }
}

@media print {
  body.work-design:not(.admin) { background: #fff; }
  body.work-design:not(.admin) :is(.panel, .card, .box, .mp-card, .pay, .ca-pane) { box-shadow: none; }
}