/*
  Title:      Zen OODA styles
  File:       app/static/zo_style.css
  Version:    1.1.0
  Date:       2026-10-12
  Sections:   1 tokens (China Gold fallbacks; /theme.css sets the theme), 2 base, 3 page head and the Admin hub row, 4 cards, pills, notes,
              5 tiles, 6 Home banner, 7 What OODA means, 8 the board placeholder, 9 help, This app, coming pages, 10 the sign-in door,
              11 tablets and phones
  Depends on: Google Fonts Cormorant Garamond, Figtree, Pinyon Script, Noto Sans SC, Noto Serif SC (zo_base.html, zo_login.html);
              theme variables from /theme.css (zo_themes.css)
  Used by:    every page
  Purpose:    The Zen look (owner, Zentelle Master SRD section 11): easy to read first, decoration second; ivory paper, the header colour,
              the theme metal for rules and buttons, red only for real problems. Colours come only from the theme variables; the values
              below are China Gold's and only matter if /theme.css cannot load. The header and the Admin hub row and tiles are in the
              shared zen_header.css (copied from /home/wang/tools/zen_nav). Class names follow Zen HQ's (head, tiles, tile, pill, card, group-h, ooda-col) so the apps read as one.
  Revisions:  1.1.0 2026-10-12 Claude Code: inspector round 1: the Admin hub row (.hub-tab) is gone; the shared zen_header.css draws
              the header, the row of sections and the hub tiles, as in every Zen app.
              1.0.0 2026-10-12 Claude Code: first version.
*/

/* 1. tokens */
:root{
  --page:#F3EEE3; --card:#FBF8F2; --ink:#1D1913; --mu:#6A5F50; --line:#D6CAB4; --line-2:#E6DCC8;
  --black:#12100E; --on-dark:#F4EEE4; --on-dark-2:#CFC6B8; --on-dark-acc:#C9B27C;
  --gold:#B08A3E; --gold-lt:#E9CF8F; --gold-ink:#7A5A22; --gold-bg:#F6EBCF;
  --ok:#2F5A1F; --ok-bg:#E3EFD9; --warn:#8A5A12; --warn-bg:#F7E7C6; --bad:#9B3A2E; --bad-bg:#F6DCD6; --info:#2E4F6B; --info-bg:#DCE7F0;
  --foil:linear-gradient(115deg,#8C6A2F 0%,#E9CF8F 42%,#A57C35 70%,#D9B872 100%);
  --bar-rgb:233,207,143; --focus:#7A5A22; --on-accent:#12100E;
  --display:"Cormorant Garamond","Iowan Old Style",Georgia,serif,"Noto Sans SC","Noto Sans Thai";
  --body:"Figtree","Segoe UI",system-ui,"PingFang SC","Noto Sans SC","Microsoft YaHei","Noto Sans Thai","Leelawadee UI",sans-serif;
  --zh:"Noto Serif SC","Songti SC","Noto Sans SC",serif;
  --radius:12px;
}

/* 2. base */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);font:16px/1.55 var(--body);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:var(--gold-ink)}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.15}
.zh{color:var(--mu);font-size:.85em;margin-left:6px;font-weight:500}
.muted{color:var(--mu)}
.m0{margin:0}
main{width:min(1440px,100% - 40px);margin:0 auto;padding:18px 0 64px}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.suite-ver{position:fixed;right:10px;bottom:6px;z-index:5;font:11px/1.2 system-ui,sans-serif;opacity:.55;pointer-events:none}
.flash{border-radius:10px;padding:10px 14px;margin:0 0 10px;font-size:15px}
.flash.ok{background:var(--ok-bg);color:var(--ok)}
.flash.gold{background:var(--warn-bg);color:var(--warn)}
.flash.err{background:var(--bad-bg);color:var(--bad)}

/* 3. page head and the Admin hub row (the same pattern in every Zen app) */
.head{padding:10px 0 14px;border-bottom:1px solid var(--line-2);margin-bottom:18px}
.head h1{font-size:36px;margin:0}
.head .sub{margin:2px 0 0;color:var(--mu)}
.sec-intro{margin:0 0 16px;color:var(--mu);max-width:760px}
.group-h{margin:26px 0 10px;font:600 15px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)}
.group-h .zh{letter-spacing:.06em}

/* 4. cards, pills, notes */
.card{background:var(--card);border:1px solid var(--line-2);border-radius:var(--radius);padding:18px 20px;position:relative}
.card h2{font-size:26px;margin:0 0 10px}
.narrow-card{max-width:820px}
.note-card{max-width:820px;border-left:4px solid var(--gold)}
.pill{display:inline-block;border-radius:999px;padding:2px 10px;font-size:13px;font-weight:500;background:var(--line-2);color:var(--mu)}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.info{background:var(--info-bg);color:var(--info)}
.pill.gold{background:var(--gold-bg);color:var(--gold-ink)}
.note{background:var(--gold-bg);border-left:4px solid var(--gold);border-radius:8px;padding:10px 14px;margin:0 0 14px}
.ic{width:26px;height:26px;color:var(--gold-ink);flex:none}

/* 5. tiles */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tile{display:flex;flex-direction:column;gap:8px;background:var(--card);border:1px solid var(--line-2);border-radius:14px;padding:18px 20px 18px 22px;
  text-decoration:none;color:var(--ink);position:relative;overflow:hidden;box-shadow:0 8px 22px rgba(0,0,0,.06);transition:border-color .2s,transform .2s}
.tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--foil)}
a.tile:hover{border-color:var(--gold);transform:translateY(-1px)}
.tile-top{display:flex;align-items:center;gap:10px}
.tile-top b{font:600 23px var(--display)}
.tile-d{font-size:14.5px;color:var(--mu)}
.tile .pill{align-self:flex-start}
.tiles.big .tile{min-height:150px;padding:22px 24px 20px 26px}
.tiles.big .tile-top b{font-size:26px}
.tiles.big .ic{width:30px;height:30px}

/* 6. Home banner */
.hb{position:relative;overflow:hidden;background:var(--black);color:var(--on-dark);min-height:460px;margin:-18px calc(50% - 50vw) 0}
/* the artwork is sized by the banner's height (the whole scene shows, the crane and the moon included) and its sides melt into the
   header colour, so it never looks cut on a wide screen */
.hb-art{position:absolute;left:50%;bottom:0;transform:translateX(-50%);height:calc(100% + 20px);width:auto;max-width:none;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
.hb-fade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,color-mix(in srgb,var(--black) 94%,transparent) 0,
  color-mix(in srgb,var(--black) 64%,transparent) 36%,color-mix(in srgb,var(--black) 0%,transparent) 58%,color-mix(in srgb,var(--black) 40%,transparent) 100%)}
.hb-in{position:relative;z-index:2;width:min(1440px,100% - 40px);margin:0 auto;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
  gap:24px;align-items:center;min-height:460px;padding:30px 0}
.hb-words{max-width:min(500px,calc(42vw - 40px))}
.hb-eb{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-lt);opacity:.9;margin:0 0 12px}
.hb-date{display:block;margin-top:5px}
.hb h1{font:500 clamp(36px,4.4vw,56px)/1.05 var(--display);color:var(--on-dark);margin:0 0 6px}
.hb-zh{margin:0 0 12px}
.hb-zh .zh{margin:0;font:600 clamp(18px,2vw,25px) var(--zh);letter-spacing:.18em;background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent}
.hb-lede{max-width:46ch;color:var(--on-dark-2);margin:0 0 16px;font-size:17px}
.hb-lede em{font-style:italic;font-family:var(--display);font-size:1.18em;background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent}
.hb-sum{margin:0;display:flex;gap:8px;flex-wrap:wrap}
.hb-pic{justify-self:end;margin:0 4% 0 0;text-align:center}
.hb-pic img{display:block;width:min(240px,100%);height:auto;border-radius:16px;box-shadow:0 18px 40px rgba(0,0,0,.5)}
.hb-sig{font:400 32px "Pinyon Script",cursive;background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent;margin:6px 0 0}
.hb + .group-h{margin-top:28px}

/* 7. What OODA means */
.ooda-what{margin-top:22px}
.ooda-what h2 .zh{font-family:var(--zh);font-size:.62em;letter-spacing:.12em}
.ooda-steps{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;counter-reset:s}
.ooda-steps li{display:grid;grid-template-columns:auto 1fr;column-gap:10px;row-gap:2px;align-items:center;padding:12px 14px;border-radius:10px;background:var(--page);border:1px solid var(--line-2)}
.ooda-steps .ic{grid-row:span 2}
.ooda-steps b{font:600 21px var(--display)}
.ooda-steps span{font-size:14px;color:var(--mu)}

/* 8. the board placeholder (columns drawn like Zen HQ's SEO and marketing plan board) */
.soon{display:flex;align-items:center;gap:26px;background:var(--card);border:1px solid var(--line-2);border-top:3px solid var(--gold);border-radius:var(--radius);
  padding:24px 28px;margin-bottom:18px}
.soon-mark{width:88px;height:88px;border-radius:18px;flex:none;box-shadow:0 10px 24px rgba(0,0,0,.18)}
.soon h2{font:600 clamp(30px,3.4vw,42px)/1.1 var(--display);margin:0 0 8px;color:var(--gold-ink)}
.soon p{margin:0 0 8px;max-width:74ch}
.ooda{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:start}
.ooda-col{background:var(--card);border:1px solid var(--line-2);border-top:3px solid var(--gold);border-radius:var(--radius);padding:12px 12px 14px}
.ooda-col h2{font-size:23px;margin:0;display:flex;align-items:center;gap:8px}
.ooda-col h2 .zh{margin-left:0}
.ooda-n{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--foil);color:var(--on-accent);font:600 13px var(--body)}
.ooda-d{margin:2px 0 10px;font-size:13px;color:var(--mu)}
.ooda-ghost{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:190px;border:1.5px dashed var(--line);border-radius:10px;
  color:var(--mu);font-size:14px;background:var(--page)}
.ooda-ghost .ic{opacity:.7}

/* 9. help, This app, coming pages, Tasks */
.help-wrap{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:18px;align-items:start}
.help{max-width:820px;padding:22px 28px}
.help h3{font-size:24px;margin:20px 0 6px}
.help h3:first-child{margin-top:0}
.help p,.help li{max-width:70ch}
.help ul{padding-left:20px}
.help li{margin:4px 0}
.help-side{display:grid;gap:4px;position:sticky;top:84px}
.help-side .group-h{margin:0 0 6px}
.help-side a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;border:1px solid transparent;color:var(--ink);text-decoration:none;font-weight:500}
.help-side a:hover{border-color:var(--line)}
.help-side a[aria-current="page"]{background:var(--card);border-color:var(--gold)}
.help-side .ic{width:22px;height:22px}
table.facts{border-collapse:collapse;width:100%}
table.facts th,table.facts td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--line-2)}
table.facts tr:last-child th,table.facts tr:last-child td{border-bottom:0}
table.facts th{width:150px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--mu);font-weight:600}
.coming-k{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.doors{list-style:none;padding:0;margin:10px 0 14px;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.doors a{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line-2);border-radius:10px;background:var(--page);color:var(--ink);text-decoration:none}
.doors a:hover{border-color:var(--gold)}
.doors .muted{margin-left:auto;font-size:13px}

/* 10. the sign-in door */
body.door{background:var(--black);color:var(--on-dark);min-height:100vh;display:flex;flex-direction:column}
.door .brand{display:flex;align-items:center;gap:10px;color:var(--on-dark);text-decoration:none}
.door .brand img{width:42px;height:42px;border-radius:10px}
.door .brand b{display:block;font:600 28px/1.05 var(--display);color:var(--gold-lt);letter-spacing:.02em}
.door .brand small{display:block;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--on-dark-acc);margin-top:3px}
.door .brand small .zh{margin:0;color:inherit}
.door-top{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;padding:16px clamp(16px,4vw,44px);
  border-bottom:3px solid transparent;border-image:var(--foil) 1}
.door-note{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-2)}
.door-stage{position:relative;flex:1;overflow:hidden;display:flex;align-items:center}
.door-art{position:absolute;left:50%;bottom:0;transform:translateX(-50%);height:100%;min-height:520px;width:auto;max-width:none;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
.door-fade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,color-mix(in srgb,var(--black) 92%,transparent) 0,
  color-mix(in srgb,var(--black) 55%,transparent) 34%,color-mix(in srgb,var(--black) 30%,transparent) 62%,color-mix(in srgb,var(--black) 70%,transparent) 100%)}
.door-grid{position:relative;z-index:2;width:min(1320px,100% - 40px);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 400px minmax(0,.8fr);
  gap:36px;align-items:center;padding:44px 0 56px}
.door-eb{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-lt);margin:0 0 12px}
.door-eb .zh{display:block;margin:0 0 6px;font:600 22px var(--zh);letter-spacing:.24em;color:var(--gold-lt)}
.door-left h1{font:500 clamp(36px,4vw,54px)/1.06 var(--display);margin:0 0 14px;color:var(--on-dark)}
.door-left h1 em{background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent}
.door-left p{color:var(--on-dark-2);max-width:40ch;margin:0}
.door-card{background:color-mix(in srgb,var(--card) 97%,transparent);color:var(--ink);border-radius:16px;padding:28px 26px 22px;position:relative;
  box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 0 1px rgba(var(--bar-rgb),.5)}
.door-card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;border-radius:16px 16px 0 0;background:var(--foil)}
.door-card h2{font-size:32px;margin:0;text-align:center}
.door-card .sub{text-align:center;color:var(--mu);margin:2px 0 18px;font-size:14px}
.door-card label{display:grid;gap:5px;font-weight:600;font-size:14px;margin-bottom:12px}
.door-card input{font:inherit;font-weight:400;height:46px;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink)}
.door-card input:focus{outline:2px solid var(--gold);outline-offset:1px}
.door-card button{width:100%;height:48px;border:1px solid var(--gold);border-radius:10px;background:var(--foil);color:var(--on-accent);font:600 16px var(--body);cursor:pointer;margin-top:4px}
.door-card .err{background:var(--bad-bg);color:var(--bad);border-radius:8px;padding:8px 12px;font-size:14px;margin:0 0 12px}
.door-card .ok{background:var(--ok-bg);color:var(--ok);border-radius:8px;padding:8px 12px;font-size:14px;margin:0 0 12px}
.door-card .forgot{text-align:center;font-size:14px;margin:12px 0 0}
.door-card .fine{text-align:center;font-size:12px;color:var(--mu);margin:12px 0 0}
.door-right{margin:0;justify-self:center;text-align:center}
.door-right img{display:block;width:min(240px,100%);height:auto;margin:0 auto;border-radius:16px;box-shadow:0 18px 40px rgba(0,0,0,.5)}
.door-right .q{display:block;margin:12px 0 0;font:italic 500 19px var(--display);color:var(--on-dark-2)}
.door-right .sig{display:block;font:400 30px "Pinyon Script",cursive;background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent}
.door-foot{position:relative;z-index:3;text-align:center;font-size:12.5px;color:var(--on-dark-2);padding:14px;border-top:1px solid rgba(var(--bar-rgb),.18)}

/* 11. tablets and phones */
@media (max-width:1100px){
  .ooda,.ooda-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .door-grid{grid-template-columns:minmax(0,1fr) 380px}
  .door-right{display:none}
}
@media (max-width:1000px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hb-in{grid-template-columns:1fr;align-items:start;padding:26px 0 230px}
  .hb-words{max-width:none}
  .hb-pic{display:none}
  .help-wrap{grid-template-columns:1fr}
  .help-side{position:static;order:-1;display:flex;flex-wrap:wrap}
  .help-side .group-h{width:100%}
}
@media (max-width:760px){
  .door-grid{grid-template-columns:1fr;gap:20px;padding:26px 0 200px}
  .door-left h1{font-size:34px}
  .door-left p{display:none}
  .door-card{width:min(420px,100%);justify-self:center}
}
@media (max-width:700px){
  main{width:calc(100% - 24px);padding-top:12px}
  .head h1{font-size:30px}
  .tiles,.ooda,.ooda-steps{grid-template-columns:1fr}
  .tiles.big .tile{min-height:0}
  .hb{min-height:0;margin-top:-12px}
  .hb-in{width:calc(100% - 28px);min-height:0;padding:20px 0 270px}
  .hb-fade{background:linear-gradient(180deg,color-mix(in srgb,var(--black) 96%,transparent) 0,color-mix(in srgb,var(--black) 88%,transparent) 48%,color-mix(in srgb,var(--black) 0%,transparent) 72%)}
  .hb-art{height:auto;width:780px;-webkit-mask-image:none;mask-image:none}
  .hb h1{font-size:34px}
  .hb-lede{font-size:16px}
  .soon{flex-direction:column;align-items:flex-start;gap:14px;padding:20px}
  .soon-mark{width:64px;height:64px}
  .ooda-ghost{min-height:110px}
  .help{padding:18px}
  table.facts th{width:96px}
  .door-art{height:auto;min-height:0;width:860px;-webkit-mask-image:none;mask-image:none}
}