/* The shell's tokens, from web/shell/src/shell.css. */
:root{
  color-scheme:light;
  --font-ui:"Interplae Thai","Interplae Thai Looped",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --font-mono:"Interplae Thai","Interplae Thai Looped",ui-monospace,SFMono-Regular,Menlo,monospace;
  --font-title:"Interplae Thai","Interplae Thai Looped","Newsreader",Georgia,"Times New Roman",serif;
  --size-small:12px;--line-small:16px;
  --size-ui:13px;--line-ui:20px;
  --size-row:14px;--line-row:1.5;
  --size-row-th:16px;--line-row-th:1.7;
  --size-heading:18px;--line-heading:24px;
  --size-title:28px;--line-title:1.2;

  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;

  --page:#f6f5f2;
  --panel:#fbfaf8;
  --raised:#ffffff;
  --border:#dddad3;
  --border-strong:#c9c6be;
  --control-border:#8a8984;
  --text:#1b1b1f;
  --muted:#5f5f66;
  --faint:#6b6b71;
  --disabled:#9a9aa0;
  --accent:#2c4c86;
  --on-accent:#ffffff;
  --accent-text:#25406f;
  --term-mark:rgba(37,64,111,.6);
  --accent-tint:#e4eaf5;
  --focus:#2c4c86;
  --select:#e1e6ee;
  --selection:#b3c8ee;
  --hover:rgba(44,76,134,.08);
  --control-hover:#eeece7;
  --active-row:#edf1f9;
  --active-edge:#c3d0e8;
  --note-edge:#c9c6be;
  --caution-edge:#f0d77a;
  --mark-unreviewed:#b06a00;
  --mark-flag:#cc3333;
  --mark-band:#5f5f66;
  --mark-missing:#cc3333;
  --confirmed:#1a7f45;
  --confirmed-tint:#ebf7ef;
  --approved:#2b6cb0;
  --busy:#2b6cb0;
  --danger:#aa3333;
  --danger-line:#c53030;
  --danger-tint:#fdf0f0;
  --caution:#8a5600;
  --caution-tint:#fff8e1;
  --match-exact:#2b6cb0;
  --match-fuzzy:#8f5c10;
  --match-numbers:#0e7490;
  --match-ref:#596a82;
  --match-context:#1a7f45;
  --on-match:#ffffff;
  --highlight:#fff3a0;
  --hit:#ffe58a;
  --hit-current:#f6ad55;
  --tip:#232329;
  --on-tip:#e8e8ec;
  --on-tip-muted:#b5b5be;
  --scrim:rgba(20,20,30,.35);
  --paper:#ffffff;
  --ink:#1b1b1f;
  --paper-mark:#2c4c86;

  --radius-control:8px;--radius-card:10px;--radius-dialog:14px;
  --shadow-card:0 1px 2px rgba(0,0,0,.06);
  --shadow-card-hover:0 1px 4px rgba(0,0,0,.12);
  --shadow-menu:0 10px 30px rgba(0,0,0,.18);
  --shadow-dialog:0 20px 60px rgba(0,0,0,.3);
  --control-height:28px;--control-height-small:22px;
}
:root[data-theme=dark]{
  color-scheme:dark;
  --page:#131312;
  --panel:#181816;
  --raised:#1f1f1c;
  --border:#2e2d29;
  --border-strong:#3e3c37;
  --control-border:#7d7a72;
  --text:#ecebe6;
  --muted:#a8a59d;
  --faint:#9a978f;
  --disabled:#6e6c66;
  --accent:#93b0e6;
  --on-accent:#0f1728;
  --accent-text:#a9c2ef;
  --term-mark:rgba(169,194,239,.6);
  --accent-tint:#1f2a40;
  --focus:#a9c2ef;
  --select:#27324a;
  --selection:#3a5a94;
  --hover:rgba(169,194,239,.09);
  --control-hover:#2a2925;
  --active-row:#1e2534;
  --active-edge:#34476d;
  --note-edge:#5a5852;
  --caution-edge:#7a6328;
  --mark-unreviewed:#e0a040;
  --mark-flag:#f07a7a;
  --mark-band:#a8a59d;
  --mark-missing:#f07a7a;
  --confirmed:#6cc58f;
  --confirmed-tint:#17301f;
  --approved:#86b4f2;
  --busy:#86b4f2;
  --danger:#f08a8a;
  --danger-line:#e06666;
  --danger-tint:#3a1d1d;
  --caution:#e2b462;
  --caution-tint:#33290f;
  --match-exact:#3f6fb8;
  --match-fuzzy:#966d25;
  --match-numbers:#257f96;
  --match-ref:#66768f;
  --match-context:#2b8451;
  --on-match:#ffffff;
  --highlight:#5a4f12;
  --hit:#6b5a14;
  --hit-current:#8a4a12;
  --tip:#ecebe6;
  --on-tip:#1b1b1f;
  --on-tip-muted:#5f5f66;
  --scrim:rgba(0,0,0,.6);
  --paper:#ffffff;
  --ink:#1b1b1f;
  --paper-mark:#2c4c86;
  --shadow-card:0 1px 2px rgba(0,0,0,.4);
  --shadow-card-hover:0 1px 4px rgba(0,0,0,.5);
  --shadow-menu:0 12px 32px rgba(0,0,0,.55);
  --shadow-dialog:0 20px 60px rgba(0,0,0,.6);
}
/* interplae.com: the home page and the pages beside it, drawn with the shared tokens above (the
   shell's two :root blocks, light and dark; ADR 0028). The mock-ups in
   ~/Desktop/Interplae review/landing-page/round3/ (r2-0 to r2-5) set the layout. Every colour is a
   token, but the Word page pictures, which use the paper and ink tokens in both themes, and
   Google's sign-in button, whose colours its branding guidelines fix. */
/* Thai never falls to a loopless face (ADR 0028 decision 7): the shell's two Thai-only aliases, the
   bundled Sarabun at its two real weights and then the looped faces a machine may have, which lead
   the shell's --font-ui and --font-title above. */
@font-face{font-family:"Interplae Thai";src:url("fonts/Sarabun-Regular.ttf") format("truetype");font-weight:400;font-display:swap;unicode-range:U+0E00-0E7F,U+200B-200D,U+25CC}
@font-face{font-family:"Interplae Thai";src:url("fonts/Sarabun-Bold.ttf") format("truetype");font-weight:700;font-display:swap;unicode-range:U+0E00-0E7F,U+200B-200D,U+25CC}
@font-face{font-family:"Interplae Thai Looped";src:local("Noto Serif Thai"),local("NotoSerifThai-Regular"),local("Thonburi"),local("Tahoma"),local("Ayuthaya");font-weight:400;unicode-range:U+0E00-0E7F,U+200B-200D,U+25CC}
@font-face{font-family:"Interplae Thai Looped";src:local("Noto Serif Thai Bold"),local("NotoSerifThai-Bold"),local("Thonburi-Bold"),local("Thonburi Bold"),local("Tahoma Bold"),local("Tahoma-Bold"),local("Ayuthaya");font-weight:700;unicode-range:U+0E00-0E7F,U+200B-200D,U+25CC}
@font-face{font-family:"Newsreader";src:url("fonts/newsreader/Newsreader%5Bopsz,wght%5D.ttf") format("truetype");font-weight:200 800;font-display:swap}

:root{
  --font-serif:var(--font-title);--font-site:var(--font-ui);
  --h1:clamp(2.25rem,1.4rem + 2.2vw,3.25rem);--h2:clamp(1.5rem,1.2rem + .9vw,1.875rem);--h3:1.125rem;
  --lede:clamp(1.0625rem,1rem + .2vw,1.1875rem);
  --page-max:1200px;--gutter:clamp(1.25rem,4vw,2.5rem);--gap:clamp(3.5rem,6vw,4.5rem);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{font:1.0625rem/1.55 var(--font-site);color:var(--text);background:var(--page);min-height:100vh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased}
:lang(th){line-height:1.85;letter-spacing:0}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
a{color:var(--accent-text);text-underline-offset:.18em}
h1,h2,h3{font-family:var(--font-serif);font-optical-sizing:auto;margin:0;text-wrap:balance}
h1{font-size:2rem;font-weight:420;letter-spacing:-.008em;line-height:1.15}
h2{font-size:var(--h2);font-weight:420;letter-spacing:-.006em;line-height:1.2}
h3{font-size:var(--h3);font-weight:520;line-height:1.3}
:is(h1,h2,h3):lang(th){line-height:1.5;letter-spacing:0}
p{margin:0 0 10px;text-wrap:pretty}
.muted{color:var(--muted)}.faint{color:var(--faint)}
.small{font-size:.9375rem}
.fine{font-size:.875rem;color:var(--faint);margin:0}
.alert{color:var(--danger)}
.label{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);margin:0}
.lede{font-size:var(--lede);color:var(--muted);line-height:1.55}
[hidden]{display:none!important}
.wrap{max-width:var(--page-max);margin-inline:auto;padding-inline:var(--gutter);width:100%}
main{flex:1}

/* The header: 64px with the 32px wordmark on every page but the home page, whose masthead is 104px
   with the 63px wordmark (ADR 0028 decision 6). Interior pages carry no marketing navigation. */
.site-header{border-bottom:1px solid var(--border);background:var(--page)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:64px}
.wordmark{display:block;color:var(--text)}
.wordmark-svg{height:32px;width:auto;display:block}
.site-nav{display:flex;gap:1.6rem}
.site-nav a,.header-actions a,.header-actions .link{color:var(--muted);font-size:.9375rem}
.site-nav a{text-decoration:none}
.site-nav a:hover{color:var(--text);text-decoration:underline}
.header-actions{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;justify-content:flex-end}
.header-actions .who{color:var(--muted);font-size:.9375rem;overflow-wrap:anywhere}
.home .site-header .wrap{height:104px}
.home .wordmark-svg{height:63px}
.home .header-actions .signin{font-size:1rem}

/* Buttons and text actions. A text action is underlined, a button is a box. */
.button{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:42px;padding:.5em 1.1em;border-radius:var(--radius-control);border:1px solid var(--control-border);background:var(--raised);color:var(--text);font:inherit;font-size:.9375rem;font-weight:500;text-decoration:none;cursor:pointer;white-space:nowrap}
.button:hover{background:var(--control-hover)}
.button.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.button.primary:hover{background:var(--accent);filter:brightness(1.1)}
.button.small{min-height:34px;padding:.3em .85em;font-size:.875rem}
.button.wide{width:100%}
.button:disabled,.button[aria-disabled=true]{background:var(--panel);border-color:var(--border-strong);color:var(--disabled);cursor:default;filter:none}
.link{display:inline;border:0;background:none;padding:0;font:inherit;color:var(--accent-text);text-decoration:underline;text-underline-offset:.18em;cursor:pointer}
.actions{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-top:20px}

/* Google's official button (developers.google.com/identity/branding-guidelines): the four-colour G
   at 20px, "Sign in with Google" in Roboto Medium 14px, a 1px edge, a 4px radius, 40px tall. The
   light and dark variants are Google's own neutral values. */
.google-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;height:40px;padding:0 12px;border:1px solid #747775;border-radius:4px;background:#ffffff;color:#1f1f1f;font:500 14px/20px Roboto,Arial,sans-serif;text-decoration:none;cursor:pointer}
.google-button:hover{background:#f0f1f1}
.google-button svg{width:20px;height:20px;flex:none}
:root[data-theme=dark] .google-button{background:#131314;border-color:#8e918f;color:#e3e3e3}
:root[data-theme=dark] .google-button:hover{background:#262628}

/* Fields: the shared control border and the 2px focus ring. */
label,legend{display:block;font-weight:600;font-size:.9375rem;margin:0 0 6px;padding:0}
label .hint{display:block;font-weight:400;color:var(--muted);font-size:.875rem;margin-top:2px}
input[type=email],input[type=text],input[type=url]{width:100%;height:42px;padding:0 12px;border:1px solid var(--control-border);border-radius:var(--radius-control);background:var(--raised);font:inherit;color:var(--text)}
input::placeholder{color:var(--faint);opacity:1}
input:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-color:var(--focus)}
input[type=file]{display:block;width:100%;padding:8px 10px;border:1px solid var(--control-border);border-radius:var(--radius-control);background:var(--raised);font:inherit;font-size:.9375rem;color:var(--muted)}
input[type=file]::file-selector-button{margin-right:12px;min-height:34px;padding:0 .85em;border:1px solid var(--control-border);border-radius:var(--radius-control);background:var(--raised);color:var(--text);font:inherit;font-size:.875rem;font-weight:500;cursor:pointer}
input[type=file]::file-selector-button:hover{background:var(--control-hover)}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:1rem}
.check input{margin-top:5px;accent-color:var(--accent);width:16px;height:16px;flex:none}
fieldset{border:0;padding:0;margin:0;min-width:0}

/* The centered card of the sign-in pages. */
.centered{display:flex;justify-content:center;align-items:flex-start;padding:48px var(--gutter) 64px}
.card{width:440px;max-width:100%;background:var(--raised);border:1px solid var(--border);border-radius:var(--radius-dialog);padding:36px 36px 30px;box-shadow:var(--shadow-card)}
.card .muted{margin-top:8px}
.stack{display:grid;gap:12px;margin-top:22px}
.stack>*{margin:0}
.or{display:flex;align-items:center;gap:10px;color:var(--faint);font-size:.875rem}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--border)}
.challenge{min-height:65px}
.foot{margin-top:22px;padding-top:16px;border-top:1px solid var(--border);font-size:.9375rem;color:var(--muted);display:grid;gap:6px}
.foot p{margin:0}

/* The wider pages: the application, its receipt, the list of organizations. */
.narrow{max-width:680px;margin:0 auto;padding:48px var(--gutter) 64px;width:100%}
.narrow .lede{margin-top:12px}
.ident{margin-top:18px;font-size:.9375rem;color:var(--muted)}
.ident b{color:var(--text)}
.form{display:grid;gap:22px;margin-top:30px;background:var(--raised);border:1px solid var(--border);border-radius:var(--radius-dialog);padding:30px 32px;box-shadow:var(--shadow-card)}
.form .fine{margin-bottom:10px}
.form .or-upload{margin:10px 0 6px}
.status{margin-top:26px;background:var(--raised);border:1px solid var(--border);border-radius:var(--radius-dialog);padding:24px 28px}
.status dl{display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);gap:8px 16px;margin:0;font-size:.9375rem}
.status dt{color:var(--muted)}
.status dd{margin:0;overflow-wrap:anywhere}
.quiet{margin-top:26px;padding-top:18px;border-top:1px solid var(--border);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;font-size:.9375rem;color:var(--muted)}
.quiet>*{margin:0}

.orgs{display:grid;gap:12px;margin-top:26px}
.orgrow{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:16px;align-items:center;padding:18px 20px;background:var(--raised);border:1px solid var(--border);border-radius:var(--radius-dialog);color:var(--text);text-decoration:none}
a.orgrow:hover{background:var(--hover)}
.orgrow .badge{width:44px;height:44px;border-radius:var(--radius-card);background:var(--accent-tint);color:var(--accent-text);display:grid;place-items:center;font-family:var(--font-serif);font-size:1.375rem}
.orgrow b{display:block;font-family:var(--font-serif);font-weight:520;font-size:1.1875rem;line-height:1.3;overflow-wrap:anywhere}
.orgrow .meta{font-size:.875rem;color:var(--muted);overflow-wrap:anywhere}
.orgrow.suspended{background:var(--panel);color:var(--muted)}
.orgrow.suspended .badge{background:var(--border);color:var(--muted)}
.chip{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:11px;font-size:.8125rem;font-weight:600;white-space:nowrap;background:var(--accent-tint);color:var(--accent-text)}
.chip.caution{background:var(--caution-tint);color:var(--caution)}
.chip.danger{background:var(--danger-tint);color:var(--danger)}
.chip.plain{background:var(--select);color:var(--text);font-weight:500}
.empty{color:var(--muted);padding:12px 0}

/* The operator's console. */
.page{max-width:1080px;margin:0 auto;padding:32px var(--gutter) 64px;width:100%}
.page h2{margin-top:28px;margin-bottom:6px}
.page.narrow-text{max-width:680px}
table{border-collapse:collapse;width:100%}
th{font-weight:600;color:var(--muted);font-size:.8125rem;text-align:left;padding:6px 8px;border-bottom:1px solid var(--border-strong);white-space:nowrap}
td{padding:8px;border-bottom:1px solid var(--border);vertical-align:top}
td .fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:6px}
td .fields input{height:34px}
td .actions{margin-top:8px}

.site-footer{border-top:1px solid var(--border);padding-block:2rem;font-size:.875rem;color:var(--faint)}
.site-footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:.75rem 2rem;flex-wrap:wrap}
.site-footer nav{display:flex;gap:.5rem 1.5rem;flex-wrap:wrap}
.site-footer a{color:var(--muted);text-decoration:underline}
.site-footer .colophon{flex-basis:100%;margin:0}

/* The home page. */
.hero{padding-top:44px;display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}
.hero h1{margin-top:12px;font-size:var(--h1);font-weight:380;line-height:1.08;letter-spacing:-.012em}
.hero .lede{margin-top:16px}
.hero .actions{margin-top:24px}
.section{padding-top:var(--gap)}
.pairs{display:grid;gap:18px}
.pair-row{display:grid;grid-template-columns:1fr 22px 1fr;gap:8px;align-items:stretch}
.pg{display:flex;flex-direction:column;min-width:0}
.page-name{display:flex;justify-content:space-between;gap:8px;font-family:var(--font-mono);font-size:.71875rem;color:var(--faint);margin-bottom:5px}
.arrow{align-self:center;font-size:18px;color:var(--accent-text);text-align:center;padding-top:18px}
/* A Word page: the paper and ink tokens in both themes, so it stays white in dark. */
.doc{flex:1;background:var(--paper);color:var(--ink);border:1px solid var(--border-strong);border-radius:4px;box-shadow:var(--shadow-card);padding:18px 20px 12px;font-family:Georgia,"Times New Roman",serif;font-size:12.5px;line-height:1.5;color-scheme:light}
.doc .ch{font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.65}
.doc h4{margin:2px 0 8px;font-size:16.5px;font-weight:600;font-family:Georgia,serif}
.doc p{margin:0 0 5px;text-indent:1.4em}
.doc p.q{text-indent:0;padding-left:1.4em;font-style:italic}
.doc sup{color:var(--paper-mark);font-size:9px}
.doc .fn{border-top:1px solid currentColor;margin-top:8px;padding-top:5px;font-size:10px;text-indent:0;opacity:.7}
.doc.prose p{text-indent:0}
.doc[lang=th]{font-family:"Interplae Thai","Interplae Thai Looped",Tahoma,serif;font-size:14.5px;line-height:1.65}
.doc[lang=th] h4{font-family:"Interplae Thai","Interplae Thai Looped",Tahoma,serif;font-size:17px;line-height:1.5}
.doc[lang=th] .ch{letter-spacing:0;text-transform:none}
.doc[lang=th] .q{font-style:normal}
.callouts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;padding:0;list-style:none}
.callouts li{font-size:.8125rem;padding:3px 10px;border-radius:999px;background:var(--raised);border:1px solid var(--border);color:var(--muted)}
.callouts li::before{content:"\2713\00a0";color:var(--confirmed)}
.real{margin:22px 0 0;border:1px solid var(--border-strong);border-radius:12px;overflow:hidden;box-shadow:var(--shadow-dialog);background:var(--raised)}
.real img{width:100%;height:auto;display:block}
.ed-notes,.strip{list-style:none;padding:0;margin:26px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}
.strip{margin-top:0;padding-top:28px;border-top:1px solid var(--border)}
.ed-notes h3,.strip h3{margin-bottom:4px}
.ed-notes p,.strip p{color:var(--muted);font-size:.9375rem;margin:0}
.access{margin-top:var(--gap);display:grid;grid-template-columns:1fr 1fr;gap:24px}
.door{border:1px solid var(--border);border-radius:var(--radius-dialog);padding:26px 28px;background:var(--raised);display:grid;gap:10px;align-content:start}
.door.ministry{background:var(--accent-tint);border-color:transparent}
.door h2{font-size:1.625rem}
.door p{margin:0}
.door .actions{margin-top:6px}
.home .fine.credit{margin-top:14px}
.home .site-footer{margin-top:var(--gap)}

@media (max-width:960px){
  .hero{grid-template-columns:1fr;gap:40px}
  .ed-notes,.strip{grid-template-columns:1fr;gap:24px}
  .access{grid-template-columns:1fr}
}
@media (max-width:820px){
  .site-nav{display:none}
}
@media (max-width:760px){
  /* The editor stays readable: the picture keeps a width of 720px and the figure scrolls sideways. */
  .real{overflow-x:auto}
  .real img{width:720px;max-width:none}
}
@media (max-width:640px){
  .pair-row{grid-template-columns:1fr}
  .arrow{padding:0;transform:rotate(90deg)}
  .home .site-header .wrap{height:80px}
  .home .wordmark-svg{height:44px}
  .card{padding:28px 22px 24px}
  .form{padding:22px 18px}
  .orgrow{grid-template-columns:44px minmax(0,1fr)}
  .orgrow .button{grid-column:1/-1}
  .status dl{grid-template-columns:1fr}
  .status dt{margin-top:6px}
  td .fields{grid-template-columns:1fr}
}
.card .muted b{color:var(--text)}