/* Calxx suite: shared colors and components (warm paper + sage green, from student.calxx.com).
   Sites link /_suite/suite.css first, then their own style.css. A site can change its accent with
   data-accent on <html> (for example "blue" for VLOOKUP); everything else stays the same. */
:root{
  --bg:#fbf6ee;--paper:#fff;--paper-warm:#fffcf7;--ink:#2f2a25;--ink-soft:#5d554c;--muted:#8d8378;--faint:#b3a99c;
  --line:#efe5d6;--line-strong:#e3d6c3;
  --primary:#2f8a74;--primary-dark:#24705e;--primary-soft:#e8f4ee;--primary-line:#bfe0d1;
  --coral:#d9714f;--coral-soft:#fdeee7;--amber:#b7791f;--amber-soft:#fff3d9;--amber-line:#f3dfae;
  --sky:#3f84ad;--sky-soft:#e7f1f8;--red:#c0524a;--red-soft:#fbeceb;
  --r-lg:20px;--r-md:14px;--r-sm:10px;--shadow:0 1px 2px #6b4f2a0a,0 8px 24px #6b4f2a0d
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{font-size:14px}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.45}
:focus-visible{outline:3px solid color-mix(in srgb,var(--primary) 30%,transparent);outline-offset:2px}
svg{width:20px;height:20px;flex:none;vertical-align:middle}
html[data-accent="blue"]{--primary:#2f6fb0;--primary-dark:#245a91;--primary-soft:#e8f0fa;--primary-line:#c3d6ee}

/* page heading */
.page-heading{margin-bottom:20px}
.eyebrow{display:inline-block;color:var(--primary-dark);background:var(--primary-soft);font-size:12px;font-weight:600;border-radius:999px;padding:3px 12px;margin-bottom:10px}
.page-heading h1{font-size:28px;line-height:1.3;font-weight:700;margin:0 0 6px;letter-spacing:.3px}
.page-heading p{margin:0;color:var(--muted);font-size:13px}

/* cards */
.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:22px}
.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px}
.panel-head h2{font-size:16px;margin:0;font-weight:700}
.panel-head p{margin:3px 0 0;font-size:12px;color:var(--muted)}

/* choices */
.pill-group{display:flex;gap:8px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;border:1px solid var(--line-strong);background:var(--paper);color:var(--ink-soft);padding:7px 18px;border-radius:999px;font-size:13px;transition:all .15s}
.pill:hover:not(.active){border-color:#d8c8b1;background:#fffaf2}
.pill.active{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:600;box-shadow:0 4px 12px color-mix(in srgb,var(--primary) 20%,transparent)}

/* buttons */
.button{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line-strong);border-radius:999px;background:var(--paper);color:var(--ink-soft);padding:9px 18px;white-space:nowrap;line-height:1.4;font-weight:500;transition:background .15s,box-shadow .15s,border-color .15s,transform .1s}
.button:hover:not(:disabled){background:#fffaf2;border-color:#d8c8b1;box-shadow:0 3px 10px #6b4f2a12}
.button:active:not(:disabled){transform:translateY(1px)}
.button.small{font-size:12px;padding:7px 14px}
.button.ghost{border-color:transparent;background:transparent}
.button.ghost:hover:not(:disabled){background:#ffffffb3}
.button.primary{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 6px 16px color-mix(in srgb,var(--primary) 20%,transparent)}
.button.primary:hover:not(:disabled){background:var(--primary-dark);border-color:var(--primary-dark)}
.button svg{width:18px;height:18px}

/* status */
.notice{margin-top:16px;font-size:13px;padding:12px 16px;border-radius:var(--r-md);border:1px solid;line-height:1.75}
.notice.info{background:var(--sky-soft);border-color:#cfe2ef;color:#3f6f8d}
.notice.warn{background:var(--amber-soft);border-color:var(--amber-line);color:#8f5e13}
.notice.success{background:var(--primary-soft);border-color:var(--primary-line);color:var(--primary-dark)}
.notice.error{background:var(--red-soft);border-color:#efc9c4;color:#9a3f37}

.guide-card{display:flex;gap:14px;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper)}
.guide-icon{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;background:var(--sky-soft);color:var(--sky);flex:none}
.guide-icon.warm{background:var(--coral-soft);color:var(--coral)}
.guide-card h3{font-size:14px;font-weight:600;margin:0 0 6px}
.guide-card p{font-size:12px;color:var(--muted);margin:0;line-height:1.9}

#toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#2f2a25;color:#fff;font-size:13px;padding:10px 18px;border-radius:999px;box-shadow:0 10px 30px #2f2a2540;transition:opacity .2s,transform .2s;z-index:50}
#toast.show{opacity:1;transform:translate(-50%,0)}