@import url("../layout.css");

/* Shared visual system for every tool page. Tool-specific CSS owns the work area. */
:root{
  --kmb-bg:#f4f6f5;
  --kmb-surface:#fff;
  --kmb-surface-2:#f0f3f1;
  --kmb-border:#ccd4cf;
  --kmb-border-strong:#aebbb3;
  --kmb-text:#18201b;
  --kmb-muted:#59645d;
  --kmb-accent:#216744;
  --kmb-accent-soft:#e4f1e9;
  --kmb-danger:#a63732;
  --kmb-shadow:0 1px 2px rgba(24,32,27,.07);
  --kmb-radius:6px;
  --tool-page-gutter:16px;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--kmb-bg)}
body{
  margin:0;
  background:var(--kmb-bg) !important;
  color:var(--kmb-text) !important;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif !important;
  letter-spacing:0 !important;
}

/* Site navigation */
.site-nav{
  position:relative;
  z-index:100;
  background:#f0edda !important;
  border-top:2px solid #9a9a8a !important;
  border-bottom:2px solid #9a9a8a !important;
  font-family:"Times New Roman","ＭＳ Ｐ明朝","Hiragino Mincho ProN",serif !important;
  line-height:1.6 !important;
}
.site-nav > ul{
  margin:0 !important;
  padding:8px var(--tool-page-gutter) !important;
  display:flex;
  flex-wrap:wrap !important;
  justify-content:flex-start !important;
  gap:4px 0 !important;
  overflow:visible;
  font-size:15px !important;
}
.site-nav > ul > li{display:flex;align-items:center;position:relative;flex:0 0 auto !important}
.site-nav > ul > li + li::before{content:"｜" !important;color:#9a9a8a;margin:0 10px}
.site-nav a{
  padding:0;
  border-radius:0;
  color:#0000ee !important;
  text-decoration:underline;
}
.site-nav a:visited{color:#551a8b !important}
.site-nav a[aria-current="page"]{color:#000 !important;font-weight:700;text-decoration:none}
.site-nav .submenu{
  top:100% !important;
  left:50% !important;
  min-width:15em !important;
  padding:6px 0 !important;
  background:#fff !important;
  border:1px solid #9a9a8a !important;
  border-radius:0 !important;
  box-shadow:2px 2px 0 #d0cdb9 !important;
  transform:translateX(-50%) !important;
}
.site-nav .submenu a{display:block;padding:5px 12px !important;white-space:nowrap}
.site-nav .submenu a:hover,.site-nav .submenu a:focus{background:#f0edda !important}

/* Page identity */
.tool-page-heading,
body > header,
body > main > header,
.wrap > header,
.title{
  width:min(1200px,calc(100% - (var(--tool-page-gutter) * 2)));
  margin-left:var(--tool-page-gutter) !important;
  margin-right:0 !important;
  padding:22px 0 12px !important;
  color:var(--kmb-text) !important;
  background:transparent !important;
  border:0 !important;
  text-align:left !important;
}
/* Full-width tools align their heading with the shared outer gutter. */
body > .tool-page-heading--full{
  width:auto;
  margin-left:var(--tool-page-gutter) !important;
  margin-right:var(--tool-page-gutter) !important;
}
.tool-frame{
  width:min(var(--layout-tool-max, 1200px), 100%) !important;
  margin-left:0 !important;
  margin-right:0 !important;
  padding-left:var(--tool-page-gutter) !important;
  padding-right:var(--tool-page-gutter) !important;
  box-sizing:border-box;
}
.frame-wrap,
body > .tool-page-heading--frame{
  width:min(var(--tool-frame-max, var(--layout-tool-max, 1200px)), 100%) !important;
  margin-left:0 !important;
  margin-right:0 !important;
  padding-left:var(--tool-page-gutter) !important;
  padding-right:var(--tool-page-gutter) !important;
  box-sizing:border-box;
}
.tool-page-heading h1,
body > header h1,
body > main > header h1,
.wrap header h1,
.title h1,
.app h1{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 !important;
  color:var(--kmb-text) !important;
  font-size:clamp(22px,3vw,28px) !important;
  font-weight:750 !important;
  line-height:1.25 !important;
  letter-spacing:0 !important;
}
.tool-page-heading h1::before,
body > header h1::before,
body > main > header h1::before,
.wrap header h1::before,
.title h1::before,
.app h1::before{
  content:"";
  width:5px;
  height:24px;
  flex:0 0 auto;
  border-radius:2px;
  background:var(--kmb-accent);
}
.tool-page-heading.tool-page-heading--flush{
  width:100%;
}
.wrap > header,
.wrap > .title,
body > main > header{
  width:100%;
  margin-left:0 !important;
  margin-right:0 !important;
}

.wrap,.app,body > main{background:transparent}
body > main,
body > .wrap,
body > .app,
body > .frame-wrap,
body > .page-wrapper{
  margin-left:0 !important;
  margin-right:0 !important;
  padding-left:var(--tool-page-gutter) !important;
  padding-right:var(--tool-page-gutter) !important;
  box-sizing:border-box;
}
body.zoomed > main{padding-left:0 !important;padding-right:0 !important}

/* Panels and repeated content */
.panel,.card,.grid-wrap,.statement,#stage-wrap,aside,.result-card,.text-controls-container{
  color:var(--kmb-text) !important;
  border-color:var(--kmb-border) !important;
  box-shadow:var(--kmb-shadow) !important;
}
.panel,.card,.grid-wrap,#stage-wrap,.result-card{
  background:var(--kmb-surface) !important;
  border:1px solid var(--kmb-border) !important;
  border-radius:var(--kmb-radius) !important;
}
.panel h2,.card h2,.marked-title,.field label,label,.note,.subtitle,.muted,.footer,.hint,footer{
  color:var(--kmb-muted) !important;
  letter-spacing:0 !important;
}

/* Controls */
input,textarea,select,button,.btn,label.btn{font:inherit}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),textarea,select{
  background:#fff !important;
  color:var(--kmb-text) !important;
  border:1px solid var(--kmb-border) !important;
  border-radius:var(--kmb-radius) !important;
  box-shadow:none !important;
}
input[type="checkbox"],input[type="radio"]{accent-color:var(--kmb-accent)}
input:focus-visible,textarea:focus-visible,select:focus-visible,button:focus-visible,.btn:focus-visible,a:focus-visible{
  outline:3px solid rgba(33,103,68,.2) !important;
  outline-offset:1px;
}
input:focus,textarea:focus,select:focus{border-color:var(--kmb-accent) !important}
button,.btn,label.btn{
  background:var(--kmb-surface-2) !important;
  color:var(--kmb-text) !important;
  border:1px solid var(--kmb-border-strong) !important;
  border-radius:var(--kmb-radius) !important;
  box-shadow:none !important;
  letter-spacing:0 !important;
  cursor:pointer;
}
button:hover,.btn:hover,label.btn:hover{background:#e4e9e6 !important;filter:none !important}
button:active,.btn:active{transform:translateY(1px)}
button:disabled,.btn:disabled{cursor:not-allowed;opacity:.5}
.primary,.btn.primary,button.primary,.accent,.ok,.btn.ok{
  background:var(--kmb-accent-soft) !important;
  color:#174a31 !important;
  border-color:#90b9a0 !important;
}
.danger,.btn.danger{background:#f8e9e7 !important;color:#7a211d !important;border-color:#dba7a2 !important}

a{color:#155f92}
a:visited{color:#59468a}
pre,code,textarea{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace}
.site-signature{
  width:100%;
  margin:24px 0 0 !important;
  padding:16px var(--tool-page-gutter) !important;
  color:var(--kmb-muted) !important;
  background:transparent !important;
  border:0 !important;
  text-align:left;
}
.copyright{color:inherit !important;font-size:11px;line-height:1.4}

/* Interactive work surfaces retain the contrast required by each tool. */
.editor,.viewport,#work,#navigator,#board{border-color:var(--kmb-border)}
.cell.black{background:#2b2d30 !important;color:#2b2d30 !important}
.cell.white{background:#fff !important;color:#1b1b1b !important;box-shadow:inset 0 0 0 1px var(--kmb-border) !important}
.cell.wild{background:#fff0a8 !important;color:#1b1b1b !important}

@media(max-width:640px){
  :root{--tool-page-gutter:8px}
  .tool-page-heading,body > header,body > main > header,.wrap > header,.title{width:calc(100% - (var(--tool-page-gutter) * 2));padding-top:18px !important}
  body > main > header,.wrap > header,.wrap > .title{width:100%}
  .wrap > header,.wrap > .title{width:100%}
  body > .tool-page-heading--full{width:auto}
  .tool-page-heading h1,body > header h1,body > main > header h1,.wrap header h1,.title h1,.app h1{font-size:22px !important}
  button,.btn,label.btn{min-height:40px}
}

/* The map uses the same 12px outer gutter before reaching its 1200px cap. */
.page-wrapper{width:calc(100% - 24px) !important}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto !important;transition:none !important}}