/* ハットモ 体験版 /try. V17 (docs/award/DESIGN-V17.md): the look of design 09 (hattomo-flow-20261102/09_ブランド正統_レベル.html), rebuilt here.
   Colours have one job each: orange = only what can be pressed (with dark teal text on it), green = 受講済み / right / 登録, dark teal = text and
   dark buttons, red = a wrong answer only, gold = the level decoration and gauge only. Errors are a teal band with white text and "!".
   Type: the subject of a screen 24-28px, item names and buttons 18px, body 16px (nothing under 16px); the main numbers 1.3x their unit. */
:root{
  color-scheme:light;
  --c-paper:#ffffff;--c-canvas:#ffffff;--c-sunk:#F5F8F7;--c-fill:#EEF5F2;--c-fill-2:#E3E8E8;
  --c-line:#D3E1DC;--c-line-strong:#9DB5AE;--c-line-field:#9DB5AE;
  --c-ink:#0B2D33;--c-ink-2:#22373B;--c-ink-3:#3C575D;--c-ink-4:#4A5E62;
  /* the colours of design 09 */
  --c-act:#FF8A00;--c-act-text:#0B2D33;--c-act-tint:#FFF0DB;
  --c-ok:#00A651;--c-ok-text:#00743A;--c-ok-tint:#E4F5EB;
  --c-ng:#D93025;--c-ng-tint:#FDECEA;
  --c-gold:#DAAF37;--c-gold-l:#F3D77A;--c-stage:#0B2D33;--c-teal-line:#14505A;
  --f-text:"Archivo","Noto Sans JP","Noto Sans Myanmar","Noto Sans Devanagari","Noto Sans Thai","Hiragino Sans","Yu Gothic UI","Meiryo",system-ui,sans-serif;
  --r-sm:8px;--r-md:12px;--r-btn:14px;--r-lg:16px;--r-xl:20px;--r-pill:999px;
  --e-1:0 1px 2px rgba(11,45,51,.08);--e-btn:0 2px 0 rgba(11,45,51,.25);--e-4:0 -4px 24px rgba(11,45,51,.18);
  --page-x:24px;
  --i-globe:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2D33' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c3.5 3.5 3.5 14.5 0 18M12 3c-3.5 3.5-3.5 14.5 0 18'/%3E%3C/svg%3E");
  --i-play:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
  --i-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --i-x:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
  --i-back:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 5-7 7 7 7'/%3E%3C/svg%3E");
  font-family:var(--f-text);
}
@media (max-width:600px){:root{--page-x:16px}}
html[lang="my"]{--lh:1.8}html[lang="th"],html[lang="ne"]{--lh:1.7}
*{box-sizing:border-box}
html{background:var(--c-canvas);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--c-canvas);color:var(--c-ink);font-size:16px;font-weight:500;line-height:var(--lh,1.6);font-variant-numeric:tabular-nums;word-break:keep-all;overflow-wrap:anywhere;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;line-height:1.3;font-weight:900;letter-spacing:-.01em;text-wrap:balance}
/* Japanese breaks between phrases: the phrases are kept whole by try.js (phr: Intl.Segmenter), which works in Safari too; auto-phrase and text-wrap only help where the browser has them */
html[lang="ja"] h1,html[lang="ja"] h2,html[lang="ja"] h3,html[lang="ja"] .m-lead,html[lang="ja"] .m-subline,html[lang="ja"] .m-vid-title,html[lang="ja"] .m-hrow-title,html[lang="ja"] .m-idnote{word-break:auto-phrase}
.m-lead,.m-subline,.m-vid-title,.m-hrow-title,.m-idnote{text-wrap:pretty}
/* a site name and its part in brackets stay whole; Japanese words stay whole; groups of digits (days, times, numbers, codes, Lv4, 2/4人, 3:20) never break */
.m-unit{display:inline-block;max-width:100%}
.m-w,.m-nw{white-space:nowrap}
/* a main number: 1.3 times its unit (あと49日, 2問中2問, 2/4人) */
.m-d{font-size:1.3em;font-weight:900;line-height:1;font-variant-numeric:tabular-nums}
h1{font-size:26px}
h2{font-size:18px}
h3,h4{font-size:18px}
p{margin:0}
small{font-size:16px}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--c-ink);outline-offset:2px}
[hidden]{display:none!important}
.m-ico{width:24px;height:24px;flex:0 0 24px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* header: the brand mark and the wordmark in their colours */
.m-head{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:8px;min-height:68px;padding:6px var(--page-x);background:#fff;border-bottom:1px solid var(--c-line)}
.m-brand{display:flex;align-items:center;flex:0 0 auto;min-width:0}
.m-brand img{display:block;width:auto;height:38px}
.m-logo{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.m-head-tools{display:flex;align-items:center;gap:8px;min-width:0}
.m-langbtn{min-height:48px;max-width:200px;margin-left:auto;padding:0 12px 0 40px;border:2px solid var(--c-line-strong);border-radius:var(--r-btn);background:#fff var(--i-globe) no-repeat 10px 50%/22px;color:var(--c-ink);font-size:16px;font-weight:800;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-trial{min-height:48px;padding:0 12px;border:2px solid var(--c-line-strong);border-radius:var(--r-btn);background:var(--c-fill);color:var(--c-ink);font-size:16px;font-weight:800;line-height:1.2;white-space:nowrap}
@media (max-width:600px){
  .m-head{gap:6px;padding:6px 8px}
  .m-brand img{height:32px}
  .m-langbtn{max-width:140px;padding-left:36px;background-position:8px 50%;background-size:20px}
  .m-trial{padding:0 8px}
}

/* the side switch: a segmented control, the chosen side in dark teal */
.m-side{display:flex;gap:6px;width:min(560px,calc(100% - 2 * var(--page-x)));margin:10px auto 0;padding:6px;border-radius:14px;background:var(--c-fill)}
.m-side .m-choice{flex:1;transition:none;min-height:48px;padding:0 10px;border:0;border-radius:10px;background:transparent;color:var(--c-ink-3);font-size:18px;font-weight:800;justify-content:center;text-align:center}
.m-side .m-choice.is-on{background:var(--c-ink);color:#fff}
.m-side .m-choice.is-on::after{display:none}

/* page */
.m-main{padding:16px var(--page-x) 48px}
.m-wrap{margin:0 auto;padding:4px 0 32px;background:transparent}
.m-admin{max-width:1040px}
@media (max-width:600px){ .m-main{padding:12px var(--page-x) 40px} }
.m-wrap>h1{margin:4px 0 16px}
.m-titlebar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 20px}
.m-back{display:inline-flex;align-items:center;gap:4px;margin:0 0 4px -6px;padding:0 10px 0 4px;min-height:48px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--c-ink);font-size:18px;font-weight:800;text-decoration:underline;text-underline-offset:4px}
.m-back::before{content:"";width:22px;height:22px;background:currentColor;-webkit-mask:var(--i-back) center/contain no-repeat;mask:var(--i-back) center/contain no-repeat}
.m-lead{color:var(--c-ink-3);margin-bottom:16px;max-width:44em;line-height:var(--lh,1.6)}
.m-subline{display:block;font-size:16px;color:var(--c-ink-3);line-height:var(--lh,1.6)}
.m-actions{margin-top:20px}
.m-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
/* an error: a dark teal band, white text and "!" (red is kept for a wrong answer) */
.m-err{position:relative;margin:8px 0 0;padding:10px 12px 10px 48px;border-radius:10px;background:var(--c-ink);color:#fff;font-weight:800;line-height:1.5}
.m-err::before{content:"!";position:absolute;left:12px;top:9px;display:grid;place-items:center;width:26px;height:26px;border:2px solid #fff;border-radius:50%;font-size:16px;font-weight:900;line-height:1}
.m-err:empty{display:none}
.m-okline{color:var(--c-ok-text);font-weight:800;margin:8px 0 0}
.m-okline:empty{display:none}
.m-ok{color:var(--c-ok-text);font-weight:800}
.m-warn{color:var(--c-ink-3);font-weight:700}
.m-sec{margin-top:28px}
.m-tabs+.m-sec{margin-top:0}
.m-sec>h2{margin-bottom:12px}

/* buttons: orange only for what is pressed, dark teal text on it; the second buttons white with a dark teal line */
.m-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:6px 20px;border:2px solid var(--c-ink);border-radius:var(--r-btn);background:#fff;color:var(--c-ink);font-size:18px;font-weight:800;line-height:1.25;text-align:center;transition:background-color 120ms,border-color 120ms}
.m-btn:hover{background:var(--c-sunk)}
.m-btn-primary{background:var(--c-act);border-color:var(--c-act);color:var(--c-act-text);box-shadow:var(--e-btn)}
.m-btn-primary:hover{background:#F07F00;border-color:#F07F00}
.m-btn-primary:disabled{background:var(--c-fill-2);border-color:var(--c-fill-2);color:var(--c-ink-4);box-shadow:none;cursor:default}
.m-btn-wide{display:flex;width:100%}
.m-btn-small{min-height:48px;padding:4px 14px;font-size:16px}
.m-text{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:4px 14px;border:2px solid var(--c-ink);border-radius:var(--r-btn);background:#fff;color:var(--c-ink);font-size:16px;font-weight:800;line-height:1.25;text-align:center}
.m-text:hover{background:var(--c-sunk)}
/* 閉じる: an underlined word */
.m-close{display:inline-flex;align-items:center;justify-content:center;min-height:48px;min-width:48px;padding:0 10px;border:0;background:none;color:var(--c-ink);font-size:18px;font-weight:800;line-height:1;text-decoration:underline;text-underline-offset:4px;white-space:nowrap}
.m-link{padding:0;border:0;background:transparent;color:var(--c-ink);font-size:16px;font-weight:800;text-align:left;min-height:44px;text-decoration:underline;text-underline-offset:4px}
.m-choice{position:relative;display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 14px;border:2px solid var(--c-line);border-radius:var(--r-btn);background:#fff;color:var(--c-ink);font-size:18px;font-weight:800;line-height:1.3;text-align:left;transition:background-color 120ms,border-color 120ms}
.m-choice:hover{border-color:var(--c-line-strong)}
/* the chosen one: pale orange, the orange line and a dot (something pressed) */
.m-choice.is-on{background:var(--c-act-tint);border-color:var(--c-act);color:var(--c-ink)}
.m-choice.is-on::after{content:"";flex:0 0 12px;width:12px;height:12px;margin-left:auto;border-radius:50%;background:var(--c-act)}
.m-choices{display:flex;flex-direction:column;gap:8px}
.m-choices-2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.m-choices-2 .m-choice{font-size:16px}

/* admin tabs: bordered buttons, the open one dark teal with an orange line on top */
.m-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:0 0 24px}
.m-tab{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 8px;border:2px solid var(--c-line);border-radius:var(--r-btn);background:#fff;color:var(--c-ink);font-size:16px;font-weight:800;line-height:1.2;text-align:center}
.m-tab:hover{background:var(--c-sunk)}
.m-tab.is-on{background:var(--c-ink);border-color:var(--c-ink);color:#fff;box-shadow:inset 0 4px 0 var(--c-act)}
@media (max-width:600px){ .m-tabs{grid-template-columns:1fr 1fr} .m-tab{justify-content:flex-start;padding:0 12px;text-align:left} }

/* M2 受講状況 */
.m-today{padding:0}
.m-today h2{margin-bottom:6px}
.m-big{font-size:28px;font-weight:900;line-height:1.3;letter-spacing:-.01em}
.m-big-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;margin:0 0 16px}
.m-today .m-subline{margin:0}
.m-today-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
/* segmented choices (報告書の期間, 用意した／アップロード) */
.m-period{display:flex;gap:6px;padding:6px;border-radius:14px;background:var(--c-fill)}
.m-period .m-choice{flex:1;min-height:48px;padding:0 14px;white-space:nowrap;border:0;border-radius:10px;background:transparent;color:var(--c-ink-3);font-size:18px;justify-content:center;text-align:center}
.m-period .m-choice.is-on{background:var(--c-ink);color:#fff}
.m-period .m-choice.is-on::after{display:none}
.m-two{display:block}
/* 会社別, then 作業員一覧, one under the other at every width (as in design 09): the people table keeps name・number Lv and the state on one line */
.m-id{color:var(--c-ink);margin-left:2px;white-space:nowrap}
.m-counts span{display:block;white-space:nowrap}
.m-started{color:var(--c-ink);font-weight:800}
/* 最新: a tag, not something to press (teal line, no orange) */
/* in Japanese the company (協力会社D（設備）) and the state with 最新 stay on one line; longer words in other languages may wrap so the table fits */
html[lang="ja"] .m-people td.m-time{white-space:nowrap}
@media (min-width:601px){ html[lang="ja"] .m-people td.m-co{white-space:nowrap} html[lang="ja"] .m-people td.m-time{width:1%} }
.m-latest{display:inline-block;margin-left:6px;padding:0 8px;border:2px solid var(--c-teal-line);border-radius:var(--r-pill);background:var(--c-fill);color:var(--c-ink);font-size:16px;font-weight:900;line-height:1.5;white-space:nowrap}
/* the three states as words with a mark: 受講済み green check, 受講中 a half circle, 受講前 a dash */
.m-stx{display:inline-block;font-weight:800;white-space:nowrap}
.m-stx::before{content:"";display:inline-block;width:22px;height:22px;margin-right:6px;vertical-align:-5px}
.m-stx-done{color:var(--c-ok-text)}
.m-stx-done::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%2300A651' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='24' cy='24' r='20' stroke-width='3.5'/%3E%3Cpath d='M14 25l7 7 13-15' stroke-width='4'/%3E%3C/svg%3E") center/contain no-repeat}
.m-stx-started{color:var(--c-ink)}
.m-stx-started::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2D33' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 3a9 9 0 0 0 0 18z' fill='%230B2D33'/%3E%3C/svg%3E") center/contain no-repeat}
.m-stx-before{color:var(--c-ink-3)}
.m-stx-before::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239DB5AE' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E") center/contain no-repeat}
/* a person's level beside the name (M-11): the small mark and Lv4 */
.m-lvs{display:inline-flex;align-items:center;gap:4px;margin-left:6px;font-weight:900;white-space:nowrap;vertical-align:middle}
.m-lvs img{display:block;width:28px;height:28px}

/* tables inside a rounded frame */
.m-table{width:100%;border-collapse:separate;border-spacing:0;border:2px solid var(--c-line);border-radius:var(--r-btn);overflow:hidden;background:#fff}
.m-table th,.m-table td{padding:12px 14px;border-bottom:1px solid var(--c-line);text-align:left;vertical-align:middle;line-height:1.5}
.m-table tbody tr:last-child td{border-bottom:0}
.m-table th{background:var(--c-fill);color:var(--c-ink);font-size:16px;font-weight:900}
.m-table .num{text-align:right;white-space:nowrap}
.m-table .m-end{text-align:right;white-space:nowrap}
.m-row{cursor:pointer}
.m-row:hover td{background:var(--c-sunk)}
.m-code{white-space:nowrap;font-weight:700}
.m-day{white-space:nowrap;font-weight:700}
.m-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:600px){
  .m-table th.num{white-space:normal}
  .m-table th,.m-table td{padding:10px 8px}
  .m-people{border:0;border-radius:0}
  .m-people thead{display:none}
  .m-people tr{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;padding:10px 0;border-bottom:1px solid var(--c-line)}
  .m-people td{display:inline;padding:0;border:0}
  .m-people td.m-name{flex:1 0 100%}
  .m-people td.m-co,.m-people td.m-lang{color:var(--c-ink-3)}
  /* the language always on the third line */
  .m-people td.m-lang{flex:1 0 100%}
  .m-people td.m-lang:empty{display:none}
}

/* video thumbnails */
.m-thumb{width:192px}
.m-th{position:relative;display:block;width:160px;aspect-ratio:16/9;border-radius:var(--r-sm);overflow:hidden;background:#222}
.m-th img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover} /* absolute: in a table cell WebKit ignores height:100% of an aspect-ratio box */
.m-dur{z-index:2;position:absolute;right:4px;bottom:4px;padding:3px 6px;border-radius:4px;background:rgba(0,0,0,.8);color:#fff;font-size:16px;font-weight:800;line-height:1}
.m-vtitle{display:block;font-weight:900;font-size:18px;line-height:1.3}
@media (max-width:600px){
  .m-videos thead{display:none}
  .m-videos tr{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"th th" "vt end";gap:8px;padding:12px;border-bottom:1px solid var(--c-line)}
  .m-videos tbody tr:last-child{border-bottom:0}
  .m-videos td{display:block;padding:0;border:0}
  .m-videos td.m-day{grid-area:day;align-self:center}.m-videos td.m-end{grid-area:end;align-self:center}
  .m-videos td.m-thumb{grid-area:th;width:auto}.m-videos td.m-vt{grid-area:vt}
  .m-videos .m-th{width:100%}
}

/* M5 QR */
.m-qr{display:grid;justify-items:start}
.m-qr img{display:block;width:240px;height:240px;image-rendering:pixelated;border:2px solid var(--c-line);border-radius:var(--r-lg);padding:8px;background:#fff;margin-bottom:16px}
.m-qrcode{font-size:16px;margin-bottom:8px}
.m-qrcode b{font-size:28px;font-weight:900;letter-spacing:.05em}

/* forms */
.m-field{display:block;margin-top:20px}
.m-field>span{display:block;font-size:18px;font-weight:800;line-height:1.3;margin-bottom:8px}
.m-field input{display:block;width:100%;height:52px;padding:0 14px;border:2px solid var(--c-line-field);border-radius:var(--r-md);background:#fff;color:var(--c-ink);font-size:18px}
.m-pin{max-width:180px;letter-spacing:.2em}
.m-group{border:0;padding:0;margin:20px 0 0;min-width:0}
.m-group legend{padding:0;font-size:18px;font-weight:800;margin-bottom:8px}
.m-worker .m-btn-primary{margin-top:24px}
.m-group+.m-lead{margin-top:20px;margin-bottom:0}

/* ================= worker side: white, one text column ================= */
html.is-worker-side,html.is-worker-side body{background:#fff}
.m-main.is-worker{padding:4px 0 40px}
html.has-tabbar .m-main.is-worker{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
.m-worker{max-width:calc(780px + 2 * var(--page-x));margin:0 auto;padding:12px var(--page-x) 0}
.m-w-code>*,.m-w-join>*{max-width:520px}
.m-worker>h1{font-size:26px;margin:4px 0 12px}
.m-worker>h2{font-size:18px;margin:24px 0 4px}
/* the site as a channel: the brand mark on a pale disc */
.m-hello{font-size:16px;color:var(--c-ink);font-weight:700;margin:0 0 10px}
.m-channel{display:flex;align-items:center;gap:12px;margin:0 0 16px}
.m-channel-text{min-width:0}
.m-channel h1{margin:0;font-size:26px;line-height:1.3}
.m-channel-meta{margin-top:2px;font-size:16px;color:var(--c-ink-3)}
.m-av{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:50%;background:var(--c-fill);overflow:hidden}
.m-av img{display:block;height:auto}
.m-av-l{width:68px;height:68px}.m-av-l img{width:56px}
.m-av-person{color:var(--c-ink-3)}.m-av-person .m-ico{width:30px;height:30px;flex-basis:30px}
/* the registration number on the first day: a note (a teal line, no orange) */
.m-idnote{margin:0 0 16px;padding:12px 14px;border:2px solid var(--c-teal-line);border-radius:var(--r-md);background:var(--c-fill);font-size:16px;font-weight:700;line-height:1.6}
.m-idn{font-family:ui-monospace,Menlo,monospace;font-size:20px;font-weight:800;letter-spacing:.04em;white-space:nowrap}
/* the feed: the first video as a large card (16:9 across, title 20px), the others as rows (thumbnail at the left) */
.m-feed{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.m-vid{min-width:0}
.m-vid-btn{display:grid;grid-template-columns:156px minmax(0,1fr);gap:8px 12px;align-items:start;width:100%;padding:10px;border:2px solid var(--c-line);border-radius:var(--r-btn);background:#fff;color:inherit;text-align:left;-webkit-tap-highlight-color:transparent;transition:background-color 120ms,border-color 120ms}
.m-vid-btn:hover{border-color:var(--c-line-strong)}
.m-vid-btn:active{background:var(--c-sunk)}
.m-vid-btn .m-th{width:100%}
.m-th-play{position:absolute;left:50%;top:50%;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;background:var(--c-ink)}
.m-th-play::before{content:"";position:absolute;inset:0;background:#fff;-webkit-mask:var(--i-play) 56% 50%/18px no-repeat;mask:var(--i-play) 56% 50%/18px no-repeat}
/* the play mark of a row that plays: orange with dark teal (on a record that is not pressed it stays dark teal) */
.m-vid-btn .m-th-play{background:var(--c-act)}
.m-vid-btn .m-th-play::before{background:var(--c-act-text)}
.m-vid-info{display:flex;flex-direction:column;gap:3px;min-width:0}
.m-vid-text{display:block;min-width:0}
.m-vid-title{display:block;font-size:18px;font-weight:900;line-height:1.3;color:var(--c-ink)}
.m-vid-meta{display:block;margin-top:3px;font-size:16px;font-weight:500;line-height:var(--lh,1.6);color:var(--c-ink-3)}
.m-vid-state{grid-column:1 / 3;min-width:0}
.m-vid.is-big .m-vid-btn{grid-template-columns:minmax(0,1fr);gap:10px}
/* the small thumbnails (rows after the first, history rows): a 28px play mark in the middle and the length tucked into the corner, so they never overlap */
.m-vid:not(.is-big) .m-th-play,.m-hrow .m-th-play{width:28px;height:28px;margin:-14px 0 0 -14px}
.m-vid:not(.is-big) .m-th-play::before,.m-hrow .m-th-play::before{-webkit-mask-size:14px;mask-size:14px}
.m-vid:not(.is-big) .m-dur,.m-hrow .m-dur{right:2px;bottom:2px;padding:2px 4px;border-radius:3px}
.m-vid.is-big .m-th-play{width:56px;height:56px;margin:-28px 0 0 -28px}
.m-vid.is-big .m-th-play::before{-webkit-mask-size:26px;mask-size:26px}
.m-vid.is-big .m-vid-title{font-size:20px}
.m-vid.is-big .m-vid-state{grid-column:1}
.m-st{white-space:nowrap}
@media (min-width:820px){ .m-feed{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px} .m-vid.is-big{grid-column:1 / 3} }
/* the tab bar at the bottom; the current tab dark and bold with an orange line on top */
.m-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;justify-content:center;padding:0 max(8px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(8px,env(safe-area-inset-left));background:#fff;border-top:1px solid var(--c-line)}
.m-tabbar-btn{position:relative;flex:1 1 0;min-width:0;max-width:200px;min-height:68px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 2px;border:0;background:transparent;color:var(--c-ink-3);font-size:16px;font-weight:700;line-height:1.2;text-align:center;-webkit-tap-highlight-color:transparent}
.m-tabbar-btn span{max-width:100%}
.m-tabbar-btn .m-ico{width:24px;height:24px;flex:0 0 24px}
.m-tabbar-btn:active{background:var(--c-sunk)}
.m-tabbar-btn.is-on{color:var(--c-ink);font-weight:900;box-shadow:inset 0 4px 0 var(--c-act)}
.m-tabbar-btn.is-on .m-ico{color:var(--c-ink);stroke-width:2.4}
html[lang="my"] .m-tabbar-btn,html[lang="ne"] .m-tabbar-btn,html[lang="th"] .m-tabbar-btn{line-height:1.35}
body.m-overlay .m-tabbar{display:none}
html.has-tabbar .m-undo{bottom:calc(80px + env(safe-area-inset-bottom))}
/* history */
.m-profile{display:flex;align-items:center;gap:16px;margin:0 0 8px}
.m-profile .m-kv{flex:1;min-width:0;margin:0}
.m-worker .m-sec{margin-top:24px}
.m-hgroup{padding:12px 0 4px}
.m-hgroup:first-child{padding-top:0}
.m-hgroup-head h2{font-size:18px}
.m-hgroup-meta{margin-top:2px}
.m-hnone{display:flex;align-items:center;gap:10px;margin:8px 0;padding:12px 14px;border:2px dashed var(--c-line-strong);border-radius:var(--r-md);color:var(--c-ink-3);font-weight:700}
.m-hall{display:flex;width:100%;margin:8px 0 4px}
.m-me{padding-top:20px;border-top:2px solid var(--c-line)}
.m-me-label{display:block;font-size:18px;font-weight:800;line-height:1.3;margin-top:12px}
.m-me-label:first-child{margin-top:0}
.m-me-val{display:block;margin:4px 0 8px;font-size:24px;font-weight:800;line-height:1.3}
.m-me-val.num{font-family:ui-monospace,Menlo,monospace;letter-spacing:.08em}
.m-me .m-text{display:flex;width:100%;font-size:18px;min-height:52px}
/* the records of a site */
.m-hlist{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px}
.m-hrow{display:flex;align-items:flex-start;gap:12px;padding:10px;border:2px solid var(--c-line);border-radius:var(--r-btn);background:#fff}
.m-hrow .m-th{width:156px;flex:0 0 156px}
.m-hrow-text{display:block;flex:1;min-width:0}
.m-hrow-title{display:block;font-size:18px;font-weight:900;line-height:1.3}
.m-hrow .m-subline{margin-top:4px;font-weight:500}
.m-hrow-when,.m-hrow-lang{display:block}
.m-hrow-day,.m-hrow-time{white-space:nowrap}
@media (max-width:600px){ .m-hrow .m-th,.m-vid-btn .m-th{width:100%} .m-hrow .m-th{width:128px;flex-basis:128px} .m-vid-btn{grid-template-columns:128px minmax(0,1fr)} }
.m-kv{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0 0 8px;align-items:center}
.m-kv dt{color:var(--c-ink);font-size:18px;font-weight:800}
.m-kv dd{margin:0;font-weight:800;font-size:18px}
.m-kv dd.num{font-family:ui-monospace,Menlo,monospace;letter-spacing:.06em}

/* ================= the level: the certification mark on a round dark teal stage, the days on a gold gauge ================= */
/* the card (W-09A, W-10, the home): no frame, a pale ground only; it is not pressed */
.m-lvc{display:flex;align-items:center;gap:14px;align-self:stretch;padding:10px 14px;border:0;border-radius:var(--r-lg);background:var(--c-fill);text-align:left}
.m-lvt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.m-lvt>b{font-size:30px;line-height:1.1;font-weight:900;letter-spacing:.02em}
.m-lvt>span{font-size:16px;font-weight:700;line-height:1.4;color:var(--c-ink)}
.m-lvt .m-d{font-size:36px;margin:0 1px}
/* the gauge: about 292 degrees, open at the top, one tick per day of the level; the next level's mark sits in the opening */
.m-gg{position:relative;flex:none;display:block;width:180px;aspect-ratio:132/136}
.m-gg svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.m-gg .tk{fill:none;stroke:#C4D3CE;stroke-width:9}
.m-gg .gd{fill:none;stroke:var(--c-gold);stroke-width:9}
.m-gg .today{stroke:var(--c-gold-l);stroke-width:11}
.m-gg .stg{position:absolute;left:50%;top:54.4%;width:57.6%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 50% 36%,#1E6B76 0,#0B2D33 72%);display:grid;place-items:center}
.m-gg .stg img{width:76%;height:76%;display:block}
.m-gg .nx{position:absolute;left:50%;top:16.2%;width:24.4%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:#fff;box-shadow:0 0 0 2px #fff,0 0 0 3px var(--c-line-strong)}
.m-gg .nx img{width:100%;height:100%;display:block}
.m-lvc.is-sm{gap:12px}
.m-lvc.is-sm .m-gg{width:96px}
.m-lvc.is-xs{gap:10px;padding:8px 12px}
.m-lvc.is-xs .m-gg{width:60px}
.m-lvc.is-xs .m-lvt>b{font-size:18px}
.m-lvc.is-xs .m-lvt .m-d{font-size:28px}
.m-lvday{display:inline-block;margin-left:auto;font-weight:800;white-space:nowrap}
.m-lvday::before{content:"";display:inline-block;width:22px;height:22px;margin-right:6px;vertical-align:-5px;box-sizing:border-box}
.m-lvday.is-done{color:var(--c-ok-text)}
.m-lvday.is-done::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%2300A651' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='24' cy='24' r='20' stroke-width='3.5'/%3E%3Cpath d='M14 25l7 7 13-15' stroke-width='4'/%3E%3C/svg%3E") center/contain no-repeat}
.m-lvday.is-not{color:var(--c-ink-3)}
.m-lvday.is-not::before{border:2.5px solid var(--c-line-strong);border-radius:50%;width:18px;height:18px;margin:0 8px 0 2px;vertical-align:-3px}
.m-home-lv{margin:0 0 16px}
.m-home-lv .m-lvt{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:0 12px}
.m-w-my .m-lvc{margin:0 0 12px}
/* the level-up day (W-09B): a large stage with a gold ring, the full gauge, light rays, dots and a pale teal disc */
.m-lvb{position:relative;width:340px;max-width:100%;aspect-ratio:1;flex:none;align-self:center;display:grid;place-items:center;margin:-4px auto}
.m-lvb::before{content:"";position:absolute;left:2.9%;top:2.9%;width:94.1%;height:94.1%;border-radius:50%;background:#D3E7E4}
.m-lvb .rays{position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(218,175,55,.3) 0 6deg,rgba(218,175,55,0) 6deg 18deg);-webkit-mask-image:radial-gradient(circle,#000 36%,rgba(0,0,0,0) 72%);mask-image:radial-gradient(circle,#000 36%,rgba(0,0,0,0) 72%)}
.m-lvb .stg{position:relative;z-index:2;width:74%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 36%,#1E6B76 0,#0B2D33 72%);border:7px solid var(--c-gold);box-shadow:0 0 0 9px rgba(218,175,55,.28),0 0 44px rgba(243,215,122,.6);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.m-lvb .stg::after{content:"";position:absolute;inset:12px;border-radius:50%;border:2px solid rgba(243,215,122,.5)}
.m-lvb .stg img{width:62%;height:auto;position:relative;z-index:1}
.m-lvb .stg b{position:relative;z-index:1;font-size:42px;line-height:1;font-weight:900;letter-spacing:.03em;color:var(--c-gold-l)}
.m-lvb .ring{position:absolute;left:0;top:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible}
.m-lvb .ring path{fill:none;stroke:var(--c-gold);stroke-width:12}
.m-lvb .cf{position:absolute;inset:0;z-index:3;pointer-events:none}
.m-lvb .c{position:absolute;display:block;border-radius:50%}
.m-lvb .c.rect{border-radius:2px}
.m-lvb .c.g{background:var(--c-gold)}.m-lvb .c.gl{background:var(--c-gold-l)}.m-lvb .c.t{background:#17606B}.m-lvb .c.ink{background:#0B2D33}
.m-seal{align-self:stretch;margin:-6px 0 0;padding:10px 14px;border:2px solid var(--c-gold);border-radius:var(--r-md);background:#FBF5DF;color:var(--c-ink);font-weight:800;text-align:center;line-height:1.6}
@keyframes m-gdraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes m-lvpop{0%{transform:scale(.25);opacity:0}65%{transform:scale(1.07);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes m-rayin{0%{opacity:0;transform:rotate(-40deg) scale(.55)}100%{opacity:1;transform:none}}
@keyframes m-cfin{0%{opacity:0;transform:translateY(-46px) scale(.2)}100%{opacity:1;transform:none}}
/* moves once, and only when the device allows motion; without it the picture is the last state */
@media (prefers-reduced-motion:no-preference){
  .m-gg.is-grow .today{stroke-dasharray:1;animation:m-gdraw .9s ease-out .35s 1 backwards}
  .m-lvb.is-play .stg{animation:m-lvpop .9s cubic-bezier(.2,1.2,.4,1) 1 backwards}
  .m-lvb.is-play .rays{animation:m-rayin 1.2s ease-out .35s 1 backwards}
  .m-lvb.is-play .c{animation:m-cfin .8s ease-out 1 backwards;animation-delay:calc(var(--d) * 1ms)}
  .m-lvb.is-play .ring path{stroke-dasharray:1;animation:m-gdraw .28s ease-out 1 backwards;animation-delay:calc(var(--i) * 34ms + 350ms)}
}

/* sheet */
.m-sheet{width:min(580px,calc(100vw - 32px));max-height:calc(100vh - 32px);padding:0;border:0;border-radius:22px;background:#fff;color:var(--c-ink);box-shadow:var(--e-4);overflow:auto}
.m-sheet::backdrop{background:rgba(11,45,51,.55)}
.m-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px 8px 16px;position:sticky;top:0;background:#fff;z-index:3}
.m-sheet-head h2{font-size:24px;line-height:1.3}
.m-sheet-body{padding:6px 16px 20px}
.m-sheet-body>p{margin-bottom:8px}
.m-sheet-body>.m-btn{margin-top:16px}
.m-sheet-body>.m-field:first-child{margin-top:0}
.m-sheet-body h3{margin:24px 0 8px}
.m-hist{display:flex;flex-direction:column;gap:2px;margin-top:10px;padding:12px 14px;border:2px solid var(--c-line);border-radius:var(--r-btn)}
.m-hist h4{font-size:18px}
.m-hist .m-subline{margin-top:2px;color:var(--c-ink)}

/* undo bar after 最初に戻す */
.m-undo{position:fixed;left:12px;right:12px;bottom:12px;max-width:560px;margin:0 auto;display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--c-ink);color:#fff;border-radius:14px;box-shadow:var(--e-1);z-index:60}
.m-undo span{flex:1;font-weight:700}
.m-undo .m-btn{background:#fff;color:var(--c-ink);border-color:#fff}

/* ================= 掲示板 ================= */
.m-board-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:4px 0 12px}
.m-board-head h1{margin:0;font-size:26px}
.m-board-head .m-channel-meta{margin-top:2px}
.m-worker .m-btn-primary.m-write{margin-top:0;flex:0 0 auto;min-width:96px}
.m-board-lead{margin-bottom:4px}
.m-board-who{margin-bottom:16px}
.m-posts{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.m-post{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:2px solid var(--c-line);border-radius:var(--r-btn);background:#fff}
.m-post-place{font-size:18px;font-weight:900;line-height:1.3;color:var(--c-ink)}
.m-post-text{margin-top:2px;font-size:16px;line-height:var(--lh,1.6);color:var(--c-ink);white-space:pre-line}
.m-post-meta{margin-top:4px}
.m-post-by{font-weight:700;color:var(--c-ink)}
.m-post-by.is-anon{font-weight:500;color:var(--c-ink-3)}
.m-post-none{padding:14px 0}
html[lang="ja"] .m-post-text,html[lang="ja"] .m-post-place{word-break:auto-phrase}
.m-field textarea{display:block;width:100%;min-height:128px;padding:12px 14px;border:2px solid var(--c-line-field);border-radius:var(--r-md);background:#fff;color:var(--c-ink);font-size:18px;line-height:1.5;resize:vertical}
.m-count{margin:4px 0 0;text-align:right;font-size:16px;color:var(--c-ink-3)}
/* 匿名で書く: on in green (as in design 09) */
.m-switch{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:52px;margin-top:12px;padding:8px 0;border:0;border-top:1px solid var(--c-line);background:transparent;color:var(--c-ink);font-size:18px;font-weight:800;text-align:left;-webkit-tap-highlight-color:transparent}
.m-switch-track{position:relative;flex:0 0 56px;width:56px;height:32px;border-radius:16px;background:#9aa9ac;transition:background-color 120ms}
.m-switch-track::after{content:"";position:absolute;top:4px;left:4px;width:24px;height:24px;border-radius:50%;background:#fff;transition:transform 120ms}
.m-switch.is-on .m-switch-track{background:var(--c-ok)}
.m-switch.is-on .m-switch-track::after{transform:translateX(24px)}
.m-switch+.m-subline{margin-top:-2px}

/* ================= 動画を追加: 用意した動画から選ぶ / 動画をアップロード ================= */
.m-addmode{display:flex;margin:0 0 16px}
.m-addmode .m-choice{white-space:normal;line-height:1.3;padding:6px 10px}
.m-upform>.m-field:first-child{margin-top:4px}
.m-filerow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.m-file{position:relative;overflow:hidden;cursor:pointer}
.m-field .m-file input{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;opacity:0;cursor:pointer}
.m-file:focus-within{outline:3px solid var(--c-ink);outline-offset:2px}
.m-filerow .m-subline{min-width:0}
.m-field input.m-num{max-width:150px}
/* the place of the questions: the preview, a strip of the video's frames with the orange flag, the buttons and the time; the number field stays under it */
.m-place{margin-top:16px}
.m-prev{display:block;width:100%;max-width:520px;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#222}
.m-prev video{display:block;width:100%;height:100%;object-fit:contain;background:#222}
.m-tl{position:relative;margin-top:52px;height:60px;touch-action:none;cursor:pointer}
.m-strip{display:flex;height:100%;border:2px solid var(--c-line);border-radius:var(--r-sm);overflow:hidden;background:#2b2b2b}
.m-strip i{flex:1;background-size:cover;background-position:center}
.m-head-line{position:absolute;top:2px;bottom:2px;left:0;width:4px;border-radius:2px;background:#fff;box-shadow:0 0 0 1px #111;pointer-events:none}
.m-flag{position:absolute;top:-52px;left:0;width:48px;height:48px;padding:0;border:2px solid var(--c-ink);border-radius:50%;background:var(--c-act);color:var(--c-act-text);display:grid;place-items:center;cursor:grab;touch-action:none}
.m-flag::before{content:"";position:absolute;left:50%;top:100%;width:4px;height:14px;margin-left:-2px;background:#111}
.m-flag .m-ico{width:24px;height:24px}
.m-markrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:12px}
.m-markrow .m-btn{padding:6px 12px}
.m-tmv{min-width:72px;font-size:28px;font-weight:900;line-height:1;text-align:center;white-space:nowrap}
.m-atrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.m-atrow>span{margin:0;font-size:18px;font-weight:800}
.m-atrow input{width:150px}
.m-qset{margin:24px 0 0;padding:0;border:0;min-width:0}
.m-qset legend{padding:0;font-size:18px;font-weight:900}
.m-qset>.m-field{margin-top:8px}
.m-qopts-head{margin:16px 0 0;font-size:18px;font-weight:800}
.m-opt-row{display:flex;align-items:center;gap:8px;margin-top:8px}
.m-opt-ok{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:0 0 auto;min-width:64px;height:52px;padding:0 10px;border:2px solid var(--c-line-strong);border-radius:var(--r-md);background:#fff;color:var(--c-ink);font-weight:900;cursor:pointer}
.m-opt-ok input{width:20px;height:20px;margin:0;accent-color:var(--c-ok)}
/* the right answer: green (登録・正解) */
.m-opt-ok:has(input:checked){background:var(--c-ok-tint);border-color:var(--c-ok);color:var(--c-ink)}
.m-opt-ok:focus-within{outline:3px solid var(--c-ink);outline-offset:2px}
.m-input{flex:1 1 auto;min-width:0;height:52px;padding:0 14px;border:2px solid var(--c-line-field);border-radius:var(--r-md);background:#fff;color:var(--c-ink);font-size:18px}
.m-upnote{margin-top:20px}
.m-upform .m-btn-wide{margin-top:12px}
.m-uphint{margin-top:8px;text-align:center}
.m-th-blank{position:absolute;inset:0;background:linear-gradient(135deg,#2b2b2b,#121212)}