/* Bit by Bit Pedagogy — shared styles */
:root {
  --bg:#0b1220; --bg-2:#0f1a2e; --card:#112238; --line:#1d2a44; --line-2:#253e58;
  --ink:#d8e3f0; --mute:#8aa0bd; --dim:#5b7393;
  --teal:#2dd49a; --teal-dim:#1c9b71; --teal-bg:rgba(45,212,154,0.08);
  --gold:#f6b552; --gold-bg:rgba(246,181,82,0.08);
  --red:#ff6b78; --red-bg:rgba(255,107,120,0.08);
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --serif:"Source Serif 4",Georgia,serif;
}
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&family=Source+Serif+4:ital,wght@0,400;0,600;0,700;1,400&display=swap');

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:var(--mono);font-size:14px;line-height:1.65}
a{color:var(--teal);text-decoration:none}
a:hover{text-decoration:underline}

/* HEADER + FOOTER */
.site-header{display:flex;justify-content:space-between;align-items:center;padding:16px 28px;border-bottom:1px solid var(--line);background:var(--bg-2);position:sticky;top:0;z-index:50}
.site-header .logo{font-weight:700;color:var(--ink);letter-spacing:0.5px}
.site-header .logo span{color:var(--gold)}
.site-header nav a{margin-left:18px;color:var(--mute);font-size:13px}
.site-header nav a:hover{color:var(--ink);text-decoration:none}
.site-footer{padding:32px 28px;border-top:1px solid var(--line);color:var(--dim);font-size:12px;text-align:center}
.site-footer a{color:var(--mute)}

/* LAYOUT */
.shell{max-width:880px;margin:0 auto;padding:48px 24px 80px}
.shell-wide{max-width:1100px;margin:0 auto;padding:48px 24px 80px}
.kicker{color:var(--gold);text-transform:uppercase;letter-spacing:2px;font-size:11px;margin-bottom:8px}
h1{font-size:32px;margin:0 0 12px;color:var(--ink);font-family:var(--mono);font-weight:700;line-height:1.25}
h2{font-size:20px;margin:36px 0 12px;color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:6px}
h3{font-size:16px;margin:24px 0 8px;color:var(--teal)}
h4{font-size:14px;margin:18px 0 6px;color:var(--gold)}
p{margin:0 0 14px;color:var(--ink)}
.lede{font-size:16px;color:var(--mute);margin:0 0 24px}
ul,ol{padding-left:22px;margin:0 0 16px}
li{margin-bottom:6px;color:var(--ink)}
hr{border:none;border-top:1px solid var(--line);margin:36px 0}
blockquote{border-left:3px solid var(--teal);padding:6px 16px;margin:16px 0;color:var(--mute);background:var(--teal-bg);border-radius:0 4px 4px 0;font-style:italic}
code{background:var(--bg-2);padding:1px 6px;border-radius:3px;border:1px solid var(--line);font-size:12px}

/* CARDS + TILES */
.card{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:22px;margin-bottom:18px}
.card h3{margin-top:0}
.tile-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));margin:18px 0}
.tile{display:block;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:18px;color:var(--ink);transition:border-color .15s,transform .15s}
.tile:hover{border-color:var(--teal);text-decoration:none;transform:translateY(-2px)}
.tile-tag{font-size:10px;color:var(--gold);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:6px}
.tile-title{font-weight:700;font-size:15px;margin-bottom:6px}
.tile-desc{font-size:12px;color:var(--mute);line-height:1.5}

/* TABLES */
table{width:100%;border-collapse:collapse;margin:14px 0;font-size:13px}
th,td{padding:10px 12px;border:1px solid var(--line);text-align:left;vertical-align:top}
th{background:var(--bg-2);color:var(--gold);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:0.5px}
td{color:var(--ink)}

/* CALLOUTS */
.callout{padding:14px 18px;border-radius:6px;margin:16px 0;border-left:3px solid var(--teal);background:var(--teal-bg)}
.callout.gold{border-color:var(--gold);background:var(--gold-bg)}
.callout.red{border-color:var(--red);background:var(--red-bg)}
.callout-label{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:var(--teal);font-weight:700;margin-bottom:6px}
.callout.gold .callout-label{color:var(--gold)}
.callout.red .callout-label{color:var(--red)}

/* FORMS / BUTTONS */
label{display:block;font-size:11px;color:var(--mute);text-transform:uppercase;letter-spacing:0.6px;margin-bottom:6px}
input,select,textarea{width:100%;padding:11px 13px;background:var(--bg-2);color:var(--ink);border:1px solid var(--line);border-radius:6px;font:inherit;font-size:13px}
textarea{min-height:96px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--teal)}
button.primary{padding:13px 18px;background:var(--teal);color:#06231a;border:none;border-radius:6px;font-family:var(--mono);font-weight:700;cursor:pointer;font-size:13px}
button.primary:disabled{opacity:0.55;cursor:progress}
button.ghost{padding:9px 14px;background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:6px;font:inherit;font-size:12px;cursor:pointer}
button.ghost:hover{border-color:var(--teal)}

/* PHASE BLOCKS (habit reset) */
.phase{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:6px;padding:20px 22px;margin-bottom:16px}
.phase h3{margin-top:0;color:var(--gold)}
.phase .days{font-size:11px;color:var(--mute);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:8px}

/* TRAP CARDS */
.trap{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:24px;margin-bottom:18px;border-left:4px solid var(--red)}
.trap-no{color:var(--red);font-weight:700;font-size:12px;letter-spacing:1.5px;margin-bottom:6px}
.trap h3{margin-top:0;color:var(--ink)}
.trap .fix{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.trap .fix-label{font-size:11px;color:var(--teal);letter-spacing:1.5px;text-transform:uppercase;font-weight:700;margin-bottom:6px}

/* CITATIONS */
.refs{font-size:12px;color:var(--mute);background:var(--bg-2);border:1px solid var(--line);border-radius:6px;padding:18px;margin-top:32px}
.refs h3{color:var(--gold);margin-top:0}
.refs ol{padding-left:20px}
.refs li{margin-bottom:8px;line-height:1.5}

/* PRINT */
@media print{
  body{background:#fff;color:#000;font-family:var(--serif)}
  .site-header,.site-footer{display:none}
  .shell,.shell-wide{padding:0;max-width:none}
  .card,.phase,.trap{break-inside:avoid;border-color:#999;background:#fff;color:#000}
  a{color:#000;text-decoration:underline}
  h1,h2,h3,h4{color:#000}
}