/* ============================================================
   penplotter example pages - shared showcase layout, taken
   over as it is: nav, demo header, code on the left, canvas on
   the right, footer. Plus the shared "to the pen" panel
   (examples/pen.js). Identical in vanilla.penplotter and
   p5.penplotter.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&family=Inter:wght@400;500&display=swap');

:root { --bg:#f5f5f5; --bg2:#eeeeee; --surface:#ffffff; --paper:#faf8f3; --border:rgba(0,0,0,.1); --border-mid:rgba(0,0,0,.2); --text:#111111; --text-muted:#666666; --text-faint:#999999; }
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-top: 56px;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
}
a:focus-visible, button:focus-visible { outline: 2px solid #000; outline-offset: 3px; }

/* ── NAV ── */
#navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 2.5rem; height: 56px; background: rgba(245,245,245,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-mid); }
.nav-logo { font-family: 'Oswald', sans-serif; font-size: 1.25rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text); text-decoration: none; }
.nav-logo span { color: #000; border-bottom: 2px solid #000; }
.nav-links { display: flex; list-style: none; gap: 2rem; margin: 0; padding: 0; }
.nav-links a { color: var(--text-muted); text-decoration: none; font-family: 'Oswald', sans-serif; font-size: .82rem; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; transition: color .15s; }
.nav-links a:hover { color: #000; }
.nav-links a.active { color: #000; border-bottom: 2px solid #000; padding-bottom: 2px; }
.nav-hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; z-index: 101; }
.nav-hamburger span { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .2s, opacity .2s; }
#navbar.nav-open .nav-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#navbar.nav-open .nav-hamburger span:nth-child(2) { opacity: 0; }
#navbar.nav-open .nav-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── DEMO PAGE ── */
.demo-page { width: 100%; max-width: 1100px; margin: 0 auto; padding: 2.5rem 2rem 4rem; }
.demo-header { margin-bottom: 2rem; }
.demo-number { font-family: 'Oswald', sans-serif; font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 .3rem; }
.demo-header h1 { font-family: 'Oswald', sans-serif; font-size: 2rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 .5rem; }
.demo-header p { color: #555; font-size: .9rem; max-width: 560px; line-height: 1.6; margin: 0; }
.demo-layout { display: grid; grid-template-columns: 1fr 460px; gap: 2rem; align-items: start; }

/* code on the left */
.demo-code { border: 1px solid rgba(0,0,0,.15); background: var(--paper); min-width: 0; }
.code-label { font-family: 'Oswald', sans-serif; font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #777; padding: .6rem 1rem; border-bottom: 1px solid rgba(0,0,0,.1); }
.demo-code pre { margin: 0; padding: 1.25rem; overflow-x: auto; }
.demo-code pre + .code-label { border-top: 1px solid rgba(0,0,0,.1); }
.demo-code code { font-family: 'Courier New', Courier, monospace; font-size: .8rem; line-height: 1.75; color: #111; white-space: pre; }
.demo-note { padding: .9rem 1rem; border-top: 1px solid rgba(0,0,0,.1); color: var(--text-muted); font-size: .85rem; line-height: 1.6; }
.demo-note p { margin: 0 0 .5rem; }
.demo-note p:last-child { margin: 0; }
code { font-family: 'Courier New', Courier, monospace; }
.demo-note code, .demo-header code, .pen code { font-size: .9em; background: #f3f1ec; padding: .1em .35em; }

/* Prism tokens - p5 webeditor (Atom One Light) palette */
.demo-code .token.comment    { color: #A0A1A7; font-style: italic; }
.demo-code .token.keyword    { color: #A626A4; }
.demo-code .token.string     { color: #50A14F; }
.demo-code .token.number,
.demo-code .token.boolean    { color: #986801; }
.demo-code .token.function   { color: #4078F2; }
.demo-code .token.class-name { color: #C18401; }
.demo-code .token.property   { color: #E45649; }
.demo-code .token.operator,
.demo-code .token.punctuation { color: #383A42; }

/* canvas, stats and the pen panel on the right */
.demo-right { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
.demo-canvas { border: 1px solid rgba(0,0,0,.15); background: var(--surface); width: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.demo-canvas canvas { display: block !important; margin: 0 !important; max-width: 100%; height: auto; }
.demo-controls { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; font-size: .85rem; color: var(--text-muted); }
.demo-controls label { display: inline-flex; align-items: center; gap: .4rem; }
.demo-controls select, .demo-controls input[type="text"], .demo-controls input[type="number"] { font: inherit; padding: .35rem .5rem; border: 1px solid var(--border-mid); background: var(--surface); }
.demo-controls button { width: auto; min-height: 36px; padding: 0 1rem; }
dl { margin: 0; }
dl div { display: flex; justify-content: space-between; gap: 12px; padding: .55rem 0; border-top: 1px solid var(--border-mid); font-size: .9rem; }
dl div:last-child { border-bottom: 1px solid var(--border-mid); }
dt { color: var(--text-muted); }
dd { margin: 0; font-family: 'Courier New', monospace; color: var(--text); }
#status, .status { margin: 0; padding: .7rem .9rem; border-left: 3px solid #000; background: var(--bg2); color: var(--text); font-size: .85rem; }
button { width: 100%; min-height: 44px; border: 1px solid #000; background: #000; color: #fff; font-family: 'Oswald', sans-serif; font-size: .85rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
button:hover { background: #333; }
button.secondary { background: transparent; color: #000; }
button.secondary:hover { background: #000; color: #fff; }
textarea { width: 100%; min-height: 120px; padding: .7rem; border: 1px solid var(--border-mid); background: var(--paper); font: .78rem/1.5 'Courier New', monospace; color: #111; }

/* ── THE SHARED "TO THE PEN" PANEL (examples/pen.js) ── */
.pen { margin-top: .5rem; padding-top: 1.2rem; border-top: 2px solid #000; }
.pen p { color: var(--text-muted); font-size: .9rem; line-height: 1.6; }
.pen-title { display: inline-block; margin: 0 0 .8rem; font-family: 'Oswald', sans-serif; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; background: #000; color: #fff; padding: .15em .6em; }
.pen-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 6px; }
.pen-fields label { display: grid; gap: 4px; color: var(--text-muted); font-size: .78rem; }
.pen-fields input, .pen-fields select { min-height: 38px; padding: 0 10px; border: 1px solid var(--border-mid); background: var(--surface); color: var(--text); font: inherit; }
.pen-stats { margin: 6px 0 14px; }
.pen-status { margin: 0 0 12px; padding: .7rem .9rem; border-left: 3px solid #000; background: var(--bg2); color: var(--text); font-size: .85rem; }
.pen button + button { margin-top: 10px; }
.pen button:disabled { opacity: .35; cursor: not-allowed; }
.pen button.stop { background: var(--surface); color: #000; border-color: #000; }
.pen button.stop:not(:disabled):hover { background: #000; color: #fff; }
.pen-side { margin: 16px 0 0; font-size: .8rem; }
.pen-side a { color: #000; }
.pen-log { margin: 14px 0 0; max-height: 160px; overflow: auto; padding: .8rem; border: 1px solid rgba(0,0,0,.15); border-radius: 4px; background: var(--paper); font: .76rem/1.5 'Courier New', monospace; white-space: pre-wrap; color: #111; }

/* ── FOOTER ── */
footer { margin-top: auto; text-align: center; padding: 3rem 2rem; border-top: 1px solid var(--border-mid); color: var(--text-muted); font-size: .85rem; line-height: 1.9; }
footer p { margin: 0; }
footer a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
footer a:hover { color: #000; }
.footer-sub { font-size: .75rem; color: var(--text-faint); }

/* ── Embedded in a gallery (?embed): only the canvas ── */
html.embed #navbar, html.embed .demo-header, html.embed .demo-code, html.embed .demo-right > :not(.demo-canvas), html.embed footer { display: none; }
html.embed body { padding-top: 0; }
html.embed .demo-page { max-width: none; padding: 12px; }
html.embed .demo-layout { grid-template-columns: 1fr; }
html.embed .demo-canvas { border: 0; height: calc(100vh - 24px); }
html.embed .demo-canvas canvas { max-height: 100%; width: auto !important; height: auto !important; }

@media (max-width: 1080px) {
  .demo-layout { grid-template-columns: 1fr; }
  .demo-right { order: -1; }
}
@media (max-width: 900px) {
  .nav-hamburger { display: flex; }
  .nav-links { display: none; position: fixed; top: 56px; left: 0; right: 0; flex-direction: column; gap: 0; background: rgba(245,245,245,.97); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-mid); padding: .5rem 0 1rem; }
  #navbar.nav-open .nav-links { display: flex; }
  .nav-links a { display: block; padding: .75rem 2rem; font-size: .9rem; }
  #navbar { padding-left: 1.25rem; padding-right: 1.25rem; }
  .demo-page { padding: 1.5rem 1.25rem 3rem; }
}

/* the bed: where the canvas lands on the paper, drawn by plot.drawBed() */
.demo-right .bed { display: block; width: 100%; height: auto; margin: 10px 0 0; border: 1px solid rgba(0, 0, 0, 0.15); background: #fff; }

/* Keep the shared example layout; allow its controls to shrink. */
.demo-header h1 { font-weight: 300; }
.pen-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pen-fields label { min-width: 0; }
.pen-fields input, .pen-fields select { width: 100%; min-width: 0; }


.token.tag, .token.attr-name { color: #E45649; }
.token.attr-value { color: #50A14F; }