/* boulevard.css · Builderhood Blvd revision 2 (D-007, 18 Sept 2026)
   The chrome imitates grantgarden.fundamental.fans (and design.fundamental.fans, which share the same banner):
   a composition-book cover as the banner, a taped EmbossT1 title, PixelGamer arcade buttons, a Chalkduster version
   post-it, and a lined-paper body. Values are copied from grant-garden/index.html (.tab-nav, .nav-title-label, .tab-btn,
   .version-postit, body) so the imitation is real. Inside the pages, the vendored Universes kit supplies the postcards,
   tapes, foam stickers, plinths and pencil tabs. Each build is a different style of building (his words); the two
   house styles live at the end. Brand tokens only; no dark mode. */

/* ---------- the page: lined paper ---------- */
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: Avenir, 'Avenir Next', 'Segoe UI', system-ui, sans-serif; font-size: 15px; line-height: 1.65;
  color: var(--ink); background: #EDEAE4;
  background-image: repeating-linear-gradient(0deg, transparent, transparent 27px, #DCD8CF 27px, #DCD8CF 28px);
  min-height: 100vh; -webkit-font-smoothing: antialiased;
}
.skip { position: absolute; left: -999px; top: 0; background: var(--gold-cream); color: var(--ink); padding: .5rem .8rem; border-radius: 8px; }
.skip:focus { left: 12px; top: 12px; z-index: 300; }

/* ---------- the banner: composition-book cover (grant-garden .tab-nav) ---------- */
.blvd-nav {
  background: #1a1a1a url('assets/comp-book-bg.jpg') 85% 90% / 340% auto; padding: 0; position: sticky; top: 0; z-index: 100;
  box-shadow: 0 6px 18px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.2); display: flex; flex-direction: column;
}
.nav-title-row { display: flex; align-items: center; justify-content: center; padding: .7rem 1rem .35rem; position: relative; user-select: none; }
.nav-title-label {
  display: inline-flex; align-items: center; padding: 7px 26px; border-radius: 0; margin: 0 1.6rem;
  filter: drop-shadow(0 2px 3px rgba(58,58,58,.3)) drop-shadow(0 4px 8px rgba(58,58,58,.15)); position: relative; z-index: 1;
}
/* the paper plate is a layer under the wordmark so the crane and the house can hang off its edges (a clip-path on the plate itself would cut them) */
.nav-title-label::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #fff, #F0EDE8); clip-path: polygon(1% 0%, 100% 4%, 99% 100%, 0% 96%); }
.nav-title { font-family: 'EmbossT1', monospace; font-size: 1.5rem; letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 1px 0 rgba(0,0,0,.06); line-height: 1; white-space: nowrap; }
.nav-emoji-left, .nav-emoji-right { font-size: 2.2em; display: inline-block; position: relative; z-index: 2; }
.nav-emoji-left { transform: rotate(-12deg); margin-right: -18px; }
.nav-emoji-right { transform: rotate(12deg); margin-left: -18px; }
.nav-btn-row { display: flex; gap: 6px; padding: 0 .8rem 0; margin-bottom: -19px; flex-wrap: wrap; justify-content: center; position: relative; z-index: 2; }   /* the cover ends about halfway down the buttons; they hug its lower edge and float off it (MSG-20260919-0050) */
.tab-btn {
  font-family: 'PixelGamer', monospace; font-size: .85rem; letter-spacing: .03em; text-transform: uppercase; color: #fff; border: 2.5px solid;
  padding: 8px 20px; cursor: pointer; border-radius: 3px; box-shadow: 0 4px 0 rgba(0,0,0,.22); text-shadow: 0 1px 1px rgba(0,0,0,.3);
  transition: transform .1s, box-shadow .1s; white-space: nowrap; position: relative; display: inline-flex; align-items: center; gap: .45em;
}
.tab-btn .tab-emoji { font-size: 1.15em; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif; }
.tab-btn:hover { transform: translateY(1px); box-shadow: 0 3px 0 rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.1); }
.tab-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.22); }
.tab-btn[aria-current="page"] { box-shadow: 0 4px 0 rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.15); outline: 2px solid rgba(255,255,255,.55); outline-offset: 1px; }
.tab-btn:focus-visible { outline: 3px solid #FFF9CC; outline-offset: 2px; }
.tab-btn.t-boulevard { background: linear-gradient(180deg, #65AC50, #559C40); border-color: #3A6A28; }
.tab-btn.t-builds    { background: linear-gradient(180deg, #D4A548, #C49538); border-color: #8A7028; }
.tab-btn.t-resources { background: linear-gradient(180deg, #C54545, #B53535); border-color: #8A2525; }
.tab-btn.t-about     { background: linear-gradient(180deg, #6AA0C0, #5A90C0); border-color: #406592; }
.tab-btn.t-workshop  { background: linear-gradient(180deg, #3A8888, #307878); border-color: #1F5A5F; }

.version-postit { position: absolute; left: 18px; top: 14px; width: 190px; padding: 14px 16px 12px; background: linear-gradient(rgba(207,168,70,.082), rgba(0,0,0,0) 35px), #FFF1BF; color: #695424; font-family: 'Chalkduster', cursive; font-size: .72rem; line-height: 1.5; box-shadow: 2px 6px 14px rgba(65,68,63,.2); transform: rotate(-2deg); z-index: 3; }
.version-postit .vp-line1 { font-weight: 700; }
.version-postit .vp-line2 { font-size: .6rem; opacity: .6; }
.version-postit .vp-line3 { font-size: .7rem; margin-top: 2px; color: var(--teal); font-weight: 700; }

/* ---------- pages ---------- */
main.blvd { max-width: 1180px; margin: 0 auto; padding: 40px 16px 80px; }   /* room under the floating buttons */
.page { display: none; }
.page.is-open { display: block; }
.sheet { background: var(--card); border-radius: 12px; box-shadow: 0 2px 10px rgba(58,58,58,.08); padding: 22px 24px; }
.welcome { display: flex; gap: 20px; align-items: center; justify-content: center; }
.welcome img { width: 150px; height: auto; flex: 0 0 auto; align-self: center; }   /* Brain Buddy a little larger, beside the bubble at every width (MSG-0145) */
.welcome-words { flex: 1 1 auto; min-width: 0; max-width: 640px; }
.welcome .bubble-welcome { margin: 4px 0 26px; max-width: 560px; font-size: 19px; text-align: left; padding: 18px 22px 20px; }
.welcome-line { margin: 0; color: var(--ink-md); font-size: .95rem; }
@media (max-width: 860px) { .welcome { flex-direction: row; text-align: left; align-items: center; gap: 10px; } .welcome img { width: 104px; } .welcome .bubble-welcome { font-size: 15px; padding: 14px 16px 16px; } }
.note-yellow {
  background: linear-gradient(175deg, #FFF9CC 0%, #F5ECA0 100%); border-radius: 2px 2px 2px 12px; padding: 14px 18px; font-family: 'Chalkduster', cursive;
  font-size: 1.02rem; line-height: 1.55; color: #3A3A3A; box-shadow: 2px 3px 10px rgba(58,58,58,.15); transform: rotate(-.6deg); max-width: 760px;
}
.cite { display: block; font-family: Avenir, 'Avenir Next', sans-serif; font-size: .74rem; color: var(--ink-lt); margin-top: .5rem; font-style: normal; }
.cite::before { content: '📎 '; }
.needs-copy { display: inline-block; background: var(--gold-cream); color: #7a5c3e; border: 1px dashed #C49538; padding: .35rem .7rem; border-radius: 6px; font-size: .85rem; }
.needs-copy::before { content: '✍️ NEEDS COPY · '; font-family: 'EmbossT1', monospace; letter-spacing: .06em; }

.two-col { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; margin-top: 22px; align-items: start; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } .welcome { flex-direction: column; text-align: center; } .version-postit { display: none; } .nav-btn-row { gap: 4px; padding: 0 .4rem .5rem; } .tab-btn { padding: 7px 12px; font-size: .74rem; } .nav-title { font-size: 1.05rem; } .nav-emoji-left, .nav-emoji-right { font-size: 1.5em; } }

/* section title as the Garden does it: EmbossT1 in a colour */
.h-tape { font-family: 'EmbossT1', monospace; letter-spacing: .1em; text-transform: uppercase; font-size: 1.05rem; color: var(--teal-dk); margin: 0 0 .8rem; display: flex; align-items: center; gap: .55em; }
.h-tape .tape { font-size: .92em; padding: 6px 14px 5px; --tape-color: var(--h-tape, #307878); }   /* the heading text on the Universes tape (d05): the foam hugs it from the left */
.h-tape .foam { font-size: 1.3em; }

/* ---------- the side rail (grant-garden home pattern) ---------- */
.rail { background: var(--card); border-radius: 12px; padding: 22px 16px 16px; box-shadow: 0 2px 10px rgba(58,58,58,.08); position: relative; }
/* the crayon strip is a piece of tape laid across the top of the card, not a border: the card keeps its rounded corners and the tape can overhang and tilt like the kit's tape does */
.rail::before { content: ''; position: absolute; left: -6px; right: -6px; top: -5px; height: 10px; border-radius: 2px; transform: rotate(-.35deg); box-shadow: 0 1px 2px rgba(58,58,58,.18); pointer-events: none; }
.rail::before { background: linear-gradient(90deg, #6D5042 0 18%, #559C40 18% 36%, #88C339 36% 54%, #6D5042 54% 72%, #C49538 72% 90%, #7A4380 90%); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat { background: #FBFAF6; border-radius: 8px; padding: 12px 8px 10px; text-align: center; box-shadow: 0 1px 4px rgba(58,58,58,.08); position: relative; }
.stat::before { content: ''; position: absolute; left: 18%; right: 18%; top: -7px; height: 14px; background: repeating-linear-gradient(58deg, #A0B5B8 0 7px, #D4ECF1 7px 14px); opacity: .85; }
.stat .n { font-family: 'Gaposiss', monospace; font-size: 1.6rem; color: var(--teal); line-height: 1.1; }
.stat .l { font-family: Avenir, sans-serif; font-size: .72rem; letter-spacing: .06em; color: var(--ink-md); text-transform: uppercase; }
.rail h3 { font-family: 'EmbossT1', monospace; letter-spacing: .08em; text-transform: uppercase; font-size: .95rem; color: var(--ink); background: #E8ECE4; display: inline-block; padding: 4px 12px; margin: 18px 0 10px; }
.faces { display: flex; flex-wrap: wrap; gap: 8px; }
.face { width: 52px; height: 52px; border-radius: 50%; background: #FBFAF6; border: 3px solid #E8E4DA; box-shadow: 0 2px 6px rgba(58,58,58,.14); display: grid; place-items: center; font-family: 'Chalkduster', cursive; font-size: 1.2rem; color: var(--ink-lt); }
.face.seat { border-style: dashed; color: #B0AA9E; }
.face.deesil { background: #FFF2B8; border-color: #E8D5A0; color: #7A5C3E; }
.rail p.fine { font-size: .82rem; color: var(--ink); margin: 10px 0 0; }   /* never plain grey text on its own (MSG-0125): ink, with highlighted words */
.by-build a { display: block; color: var(--teal-dk); text-decoration: none; padding: 4px 0; font-weight: 600; }

/* ---------- houses on the boulevard: each build is a different style of building ---------- */
.houses { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; margin-top: 14px; align-items: stretch; }
.houses .house.bf-card, .builds-grid .house.bf-card { min-height: 380px; }   /* the two cards hold one size beside each other and across views (MSG-0225) */
/* the two buildings are kit postcards (kit/reference.css .bf-card + .edge tiles), each in its own character (f02, MSG-20260919-0020 point 5).
   Geometry is the kit's own, measured on its card (MSG-0125): padding 10 so the tiles touch the paper, cream paper, corners inset 23/29 and 31, segment lengths 25·33·25·39·23·34 with 2px paper gaps; only the palettes are ours */
.house.bf-card, .house-head.bf-card { padding: 10px; border-radius: 11px; overflow: hidden; }
.houses > .house.bf-card:nth-child(even), .builds-grid > div:nth-child(even) > .house.bf-card { rotate: .18deg; }   /* the kit alternates the tilt on even cards (reference.css l.1283) */
.house.bf-card { display: flex; flex-direction: column; }
.house .bf-inner { position: relative; padding: 23px 22px 15px; flex: 1 1 auto; background-color: #FAFAF5; background-image: var(--expression-paper-texture); border-radius: 6px; }   /* the kit's paper grain (reference.css l.1274/1276); a `background:` shorthand had wiped it */
.house-head .bf-inner, .build-top .bf-inner { background-color: #FAFAF5; background-image: var(--expression-paper-texture); border-radius: 6px; }
.breaks.bf-card { --accent: #307878; --pc-m: #307878; background-color: #307878; }
.buddy.bf-card { --accent: #6A70A8; --pc-m: #6A70A8; background-color: #6A70A8; }
.house.bf-card .edge-t, .house-head.bf-card .edge-t { top: 0; left: 23px; right: 29px; height: 10px; }
.house.bf-card .edge-b, .house-head.bf-card .edge-b { bottom: 0; left: 29px; right: 23px; height: 10px; }
.house.bf-card .edge-l, .house-head.bf-card .edge-l { top: 31px; bottom: 31px; left: 0; width: 10px; }
.house.bf-card .edge-r, .house-head.bf-card .edge-r { top: 31px; bottom: 31px; right: 0; width: 10px; }
/* Breaks Playhouse: the locked brand rainbow as the tiles; the three window dots and the progress ring of a playful app window */
.breaks.bf-card .edge-t, .breaks.bf-card .edge-b { background: repeating-linear-gradient(90deg, #C13B2A 0px 25px, #FAFAF5 25px 27px, #D47A3A 27px 60px, #FAFAF5 60px 62px, #C49538 62px 87px, #FAFAF5 87px 89px, #559C40 89px 128px, #FAFAF5 128px 130px, #307878 130px 153px, #FAFAF5 153px 155px, #7A4380 155px 189px, #FAFAF5 189px 191px, #C13B2A 191px 219px, #FAFAF5 219px 221px, #D47A3A 221px 257px, #FAFAF5 257px 259px); }
.breaks.bf-card .edge-l, .breaks.bf-card .edge-r { background: repeating-linear-gradient(180deg, #C13B2A 0px 25px, #FAFAF5 25px 27px, #D47A3A 27px 60px, #FAFAF5 60px 62px, #C49538 62px 87px, #FAFAF5 87px 89px, #559C40 89px 128px, #FAFAF5 128px 130px, #307878 130px 153px, #FAFAF5 153px 155px, #7A4380 155px 189px, #FAFAF5 189px 191px, #C13B2A 191px 219px, #FAFAF5 219px 221px, #D47A3A 221px 257px, #FAFAF5 257px 259px); }
.house h3.sign { display: flex; justify-content: center; margin: .1rem 0 .5rem; }   /* the sign centred on the card (MSG-0145); no invented marks around it */
/* Brain Buddy Dream Shop: the BRAIN·WAVE pastels as the tiles, cream cardstock, the character peeking in */
.buddy.bf-card .bf-inner { background-color: #FAFAF5; background-image: var(--expression-paper-texture); }   /* plain cardstock under the kit grain, no ruled lines (MSG-0410: 'it doesn't need the lined paper. It should just be cardstock') */
.buddy.bf-card .edge-t, .buddy.bf-card .edge-b { background: repeating-linear-gradient(90deg, #7A60A0 0px 25px, #FAFAF5 25px 27px, #6A70A8 27px 60px, #FAFAF5 60px 62px, #5A80B0 62px 87px, #FAFAF5 87px 89px, #4A8AA0 89px 128px, #FAFAF5 128px 130px, #3A9090 130px 153px, #FAFAF5 153px 155px, #7A60A0 155px 189px, #FAFAF5 189px 191px, #6A70A8 191px 219px, #FAFAF5 219px 221px, #5A80B0 221px 257px, #FAFAF5 257px 259px); }
.buddy.bf-card .edge-l, .buddy.bf-card .edge-r { background: repeating-linear-gradient(180deg, #7A60A0 0px 25px, #FAFAF5 25px 27px, #6A70A8 27px 60px, #FAFAF5 60px 62px, #5A80B0 62px 87px, #FAFAF5 87px 89px, #4A8AA0 89px 128px, #FAFAF5 128px 130px, #3A9090 130px 153px, #FAFAF5 153px 155px, #7A60A0 155px 189px, #FAFAF5 189px 191px, #6A70A8 191px 219px, #FAFAF5 219px 221px, #5A80B0 221px 257px, #FAFAF5 257px 259px); }
.house.buddy img { position: absolute; right: 12px; top: 8px; width: 84px; transform: rotate(6deg); filter: drop-shadow(0 2px 3px rgba(58,58,58,.25)); z-index: 1; }   /* Brain Buddy back at the top of his card, clear of the centred sign (MSG-0225) */
.house.buddy h3.sign { padding-right: 70px; }
.house h3 { margin: .2rem 0 .3rem; font-size: 1.35rem; }
.house p { margin: .5rem 0; }
.house .meta { font-size: .8rem; color: var(--ink-md); }
.house .enter { margin-top: 12px; }
/* the little post-it chips under each sign: where the build is, at a glance */
.chips { list-style: none; margin: .6rem 0 .2rem; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-family: 'Chalkduster', cursive; font-size: .7rem; line-height: 1.3; color: var(--chip-ink, #5A5855); background: var(--chip, #FFF1BF); padding: 5px 10px 4px; box-shadow: 1px 2px 4px rgba(65,68,63,.18); transform: rotate(-1.2deg); }
.chip:nth-child(2n) { transform: rotate(1deg); }
/* Brain Buddy speaks in the Universes caption bubble (kit/bubble.js): the art at the left, the tail pointing at it */
.buddy-says { display: flex; align-items: flex-end; justify-content: center; gap: 22px; margin: 6px auto 4px; width: fit-content; max-width: 100%; }   /* the pair centred as one unit, the same air between them as the tail wants (MSG-0410: 'it's like touching him… centralised with equidistant padding') */
.buddy-says .buddy-art { width: 120px; height: auto; flex: 0 0 auto; margin-bottom: -6px; filter: drop-shadow(0 2px 3px rgba(58,58,58,.2)); }
.buddy-says .bubble-real { margin: 0 0 30px; max-width: 420px; font-size: 17px; text-align: left; padding: 16px 20px 18px; }
@media (max-width: 560px) { .buddy-says { align-items: center; gap: 14px; } .buddy-says .buddy-art { width: 92px; } .buddy-says .bubble-real { font-size: 14px; padding: 12px 14px 14px; } }
.house .tape { display: inline-block; font-size: .72rem; margin-bottom: 4px; }

/* ---------- a build page: the house you entered ---------- */
.house-head { margin-bottom: 18px; }
.build-top { margin: 34px 0 6px; }
section.build-top.bf-card { overflow: visible !important; }   /* the sign hugs the OUTSIDE of the card top; the kit's card hides overflow (and its rule outranks a plain class pair), which cut the sign (MSG-0245) */
.build-top.bf-card .edge { overflow: hidden; }
.build-top .bf-inner { padding: 0 22px 18px; }
.build-top .sign-row { display: flex; justify-content: center; margin: -34px 0 6px; position: relative; z-index: 2; }   /* the sign hugs the top edge of the dashboard card (MSG-0145, builder's pick of his three) */
.build-top .sign-row h1 { margin: 0; }
.build-top .sign-row .wm { --wm-size: 1.35rem; }
.build-top .lead { text-align: center; max-width: 760px; margin: 0 auto 14px; }
.build-top .build-dash { margin: 0; }
.build-top .build-dash .dash-card { background: rgba(255,255,255,.55); box-shadow: 0 1px 4px rgba(58,58,58,.08); }
@media (max-width: 560px) { .build-top { margin-top: 30px; } .build-top .bf-inner { padding: 0 12px 14px; } .build-top .sign-row { margin-top: -30px; } .build-top .sign-row .wm { --wm-size: 1.05rem; } }
.house-head .bf-inner { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; padding: 23px 22px 18px; }
.house-head .bf-inner > div { flex: 1 1 320px; min-width: 0; }
.house-head h1 { margin: 0; font-family: 'Chalkduster', cursive; font-size: 1.7rem; }
.house-head.breaks h1 { color: var(--teal-dk); }
.house-head.buddy h1 { color: #AB7A99; }
.house-head .lead { margin: 0; color: var(--ink-md); max-width: 60ch; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.list { list-style: none; padding: 0; margin: .4rem 0 0; }
.list li { padding: .45rem 0; border-bottom: 1px dashed #DCD8CF; display: flex; gap: .6rem; align-items: baseline; }
.list li .who { margin-left: auto; font-size: .78rem; color: var(--ink-lt); white-space: nowrap; }
.pill { display: inline-block; font-family: 'PixelGamer', monospace; font-size: .62rem; letter-spacing: .05em; padding: 3px 8px; border-radius: 3px; color: #fff; background: var(--ink-lt); text-transform: uppercase; }
.pill.open { background: #406592; } .pill.now { background: #307878; } .pill.hold { background: #8a6c2c; }

/* project / topic tabs: the paper tabs pattern from the Universes kit, used as subsections (D-007: tabs demoted, not dropped) */
/* the tabs inside a building and on the Foundation: the kit's index tabs (kit/reference.site.css .index), left-aligned, the pressed one expanded with its chalk caption */
.sub-index.index { justify-content: flex-start; margin: 6px 0 0; padding: 0 6px; }
.sub-index.index button { cursor: pointer; transition: left .65s ease-in-out, width .65s ease-in-out, flex-basis .65s ease-in-out; }
.sub-index.index button[data-expanded="true"] .nav-caption { visibility: visible !important; }   /* the kit hides captions until its own entrance animation has run; this site has no entrance, so the pressed tab's caption shows at once */
.sub-index.index button > .tab-art { transition: none; }
.sub-index.index button:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; border-radius: 6px; }
.sub-panel { margin-top: 10px; }
.sub-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 14px 0 0; padding: 0; list-style: none; }
.sub-tabs button { font-family: 'Chalkduster', cursive; font-size: .9rem; color: var(--accent, var(--teal)); background: #FBFAF6; border: 2px solid color-mix(in srgb, var(--accent, var(--teal)) 45%, #fff); border-bottom: none; border-radius: 10px 12px 0 0; padding: 8px 14px 6px; cursor: pointer; position: relative; top: 2px; }
.sub-tabs button[aria-selected="true"] { background: color-mix(in srgb, var(--accent, var(--teal)) 12%, #FBFAF6); border-color: var(--accent, var(--teal)); top: 0; box-shadow: 0 -2px 0 var(--accent, var(--teal)); }
.sub-tabs button:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }
.sub-panel { border: 2px solid #DCD8CF; border-radius: 0 12px 12px 12px; padding: 16px 18px; background: #FBFAF6; }
.sub-panel[hidden] { display: none; }
.sprint-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.sprint-table th, .sprint-table td { text-align: left; padding: .35rem .5rem; border-bottom: 1px dashed var(--page-line); }
.sprint-table tr.now td { color: var(--teal-dk); font-weight: 600; }
.sprint-table .num { font-family: Gaposiss, monospace; letter-spacing: .04em; }

/* resources: the Garden's resource groups */
.res-group { margin-bottom: 18px; }
.res-group h3 { font-family: 'EmbossT1', monospace; letter-spacing: .08em; font-size: .95rem; margin: 0 0 6px; }
.res-group a { color: var(--teal-dk); }
.res-group .vis { font-size: .72rem; color: var(--ink-lt); }

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

/* ---- fixes after the first frames (18 Sept) ---- */
main.blvd > section.page { scroll-margin-top: 150px; }          /* anchor jumps land below the sticky banner */
.house.breaks .fundamental-arcade-button, .house-head.breaks ~ * .fundamental-arcade-button { --button-top: #3A8888; --button-bottom: #307878; --button-edge: #1F5A5F; --button-ink: #fff; }
.house.buddy .fundamental-arcade-button { --button-top: #C48FB0; --button-bottom: #AB7A99; --button-edge: #7A4380; --button-ink: #fff; }
@media (max-width: 560px) { .nav-btn-row .tab-btn { flex: 1 1 42%; justify-content: center; } .note-yellow { font-size: .92rem; padding: 12px 14px; } }

/* quoted source passages: his words, on a paper slip */
blockquote.quote { margin: .6rem 0; padding: .7rem 1rem .6rem 1.1rem; border-left: 4px solid var(--gold); background: #FBFAF6; border-radius: 0 10px 10px 0; font-size: .98rem; line-height: 1.6; }
blockquote.quote .cite { margin-top: .35rem; }

/* ===== revision 2.1 · 18 Sept 2026 · D-008 Workshop at the bottom · D-009 builder profiles · D-010 the intro deck ===== */
/* the Workshop footer (JC translation): workshop.css owns everything inside #workshop; only the outer width lives here */
.workshop { max-width: 1180px; margin: 0 auto 60px; padding: 0 16px; }
/* the kit's reference.site.css styles every <footer> as a flex row with a dashed top rule (its own page footer); the Workshop is a footer in the document sense only */
footer#workshop.workshop { display: block; border-top: 0; align-items: initial; justify-content: initial; padding-top: 0; }
.rail .join-btn { margin-top: 10px; width: 100%; justify-content: center; }

/* faces: a builder who set up a profile on this device, and open seats that invite */
.face.you { border-style: solid; border-color: #559C40; background: #EEF6E6; color: #3E6E2C; overflow: hidden; }
.face img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.face.seat.invite { cursor: pointer; color: #8CA07E; border-color: #B7C9A9; background: #F6FAF2; font-family: Avenir, sans-serif; font-weight: 700; }
.face.seat.invite:hover, .face.seat.invite:focus-visible { border-color: #559C40; color: #3E6E2C; outline: none; }
.face .lt { position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%); font-family: 'PixelGamer', monospace; font-size: .5rem; background: #FBFAF6; color: var(--teal-dk); padding: 1px 4px; border-radius: 3px; border: 1px solid #DCD8CF; white-space: nowrap; }
.face { position: relative; }

/* the builder profile sheet: every control explicitly coloured (white-on-white has bitten before) */
.profile .field { display: flex; flex-direction: column; gap: 4px; margin: 0 0 12px; }
.profile label { font-family: 'EmbossT1', monospace; letter-spacing: .06em; text-transform: uppercase; font-size: .78rem; color: var(--teal-dk); }
.profile label em { font-family: Avenir, sans-serif; text-transform: none; letter-spacing: 0; font-style: italic; font-weight: 400; color: var(--ink-lt); margin-left: .4em; }
.profile input[type="text"], .profile input[type="email"], .profile input[type="url"], .profile textarea, .profile select { font: inherit; font-size: 1rem; color: var(--ink); background: #FBFAF6; border: 2px solid #DCD8CF; border-radius: 8px; padding: 9px 12px; width: 100%; box-sizing: border-box; }
.profile input:focus-visible, .profile textarea:focus-visible, .profile select:focus-visible { outline: 3px solid var(--purple); outline-offset: 1px; border-color: var(--teal); }
.profile ::placeholder { color: #A39D91; opacity: 1; }
.profile input[type="file"] { font: inherit; font-size: .9rem; color: var(--ink-md); }
.profile input:user-invalid { border-color: #C4553E; }
.profile .hint { font-size: .8rem; color: var(--ink-md); }
.profile .actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.profile .fundamental-arcade-button.ghost { --button-top: #F1EEE5; --button-bottom: #E3DFD3; --button-edge: #BDB7A8; --button-ink: var(--ink); }
.profile-preview { display: flex; gap: 12px; align-items: center; background: #FBFAF6; border-radius: 10px; padding: 10px; border: 1px dashed #DCD8CF; }
.profile-preview .face { flex: none; }
.profile-preview .who { font-family: 'Chalkduster', cursive; color: var(--teal-dk); }
.profile-preview .what { font-size: .82rem; color: var(--ink-md); margin: 2px 0 0; }
.profile-preview .empty { font-size: .82rem; color: var(--ink-lt); }

/* the intro deck: skeleton blueprint, restrained visuals, device speech in Brain Buddy's voice (Universes path) */
.deck { margin-top: 18px; border-top: 2px dashed #DCD8CF; padding-top: 14px; }
.deck-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.deck-head h3 { margin: 0; font-family: 'Chalkduster', cursive; color: var(--teal-dk); font-size: 1.25rem; }
.deck-head .fine { font-size: .8rem; color: var(--ink-md); margin: 0; }
.deck-strip { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 12px; }
.deck-step { font-family: 'PixelGamer', monospace; font-size: .7rem; min-width: 34px; height: 34px; padding: 0 8px 0 4px; border-radius: 6px; border: 2px solid #A0B5B8; background: #FBFAF6; color: var(--teal-dk); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.deck-step .foam { font-size: 1.05rem; filter: url(#studio-status-foam); }
.deck-step[aria-current="true"] { background: var(--teal); border-color: var(--teal-dk); color: #fff; }
.deck-step:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }
.slide { background: #FBFAF6; border: 2px solid #B0EAE5; border-radius: 12px; padding: 18px 20px 16px; position: relative; box-shadow: 0 2px 8px rgba(58,58,58,.08); }
.slide .tape { display: inline-block; font-size: .7rem; margin-bottom: 6px; }
.slide h4 { margin: .1rem 0 .6rem; font-family: 'Chalkduster', cursive; font-size: 1.35rem; color: var(--teal-dk); }
.slide-lines p { margin: .3rem 0; }
.slide-lines.list p::before { content: '☑︎ '; color: #559C40; }
.slide-lines.timeline { display: flex; gap: 8px; flex-wrap: wrap; counter-reset: step; }
.slide-lines.timeline p { counter-increment: step; flex: 1 1 140px; background: #fff; border: 2px solid #DCD8CF; border-radius: 8px; padding: 8px 10px; margin: 0; font-size: .92rem; position: relative; }
.slide-lines.timeline p::before { content: counter(step); font-family: 'PixelGamer', monospace; font-size: .65rem; background: var(--teal); color: #fff; border-radius: 4px; padding: 1px 6px; margin-right: 6px; }
.slide-lines.three-floors { display: grid; gap: 6px; max-width: 560px; }
.slide-lines.three-floors p { margin: 0; background: #fff; border: 3px solid #307878; border-radius: 6px; padding: 8px 12px; }
.slide-lines.three-floors p:nth-child(1) { border-color: #406592; } .slide-lines.three-floors p:nth-child(3) { border-color: #6D5042; }
.slide-lines.before-after { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.slide-lines.before-after p { margin: 0; background: #fff; border: 2px dashed #DCD8CF; border-radius: 8px; padding: 8px 12px; }
.slide .sources { margin-top: 10px; font-size: .8rem; color: var(--ink-md); }
.slide .sources summary { cursor: pointer; font-family: 'EmbossT1', monospace; letter-spacing: .06em; font-size: .72rem; text-transform: uppercase; color: var(--teal-dk); }
.slide .sources ul { margin: .4rem 0 0; padding-left: 1.1rem; }
.slide .sources li { margin: .2rem 0; }
.slide .sources q { font-style: italic; }
.deck-controls { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.deck-controls .fundamental-arcade-button { font-size: .72rem; padding: 7px 12px; }
.deck-controls .fundamental-arcade-button.quiet { --button-top: #F1EEE5; --button-bottom: #E3DFD3; --button-edge: #BDB7A8; --button-ink: var(--ink); }
.deck-state { font-size: .8rem; color: var(--ink-md); margin: 6px 0 0; min-height: 1.2em; }
.deck-closing { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.deck .say { display: none; }
@media (max-width: 560px) { .slide { padding: 14px; } .deck-step { width: 30px; } .profile .actions .fundamental-arcade-button { flex: 1 1 100%; justify-content: center; } }

/* floors as an open set (D-012): confirmed floors hold work orders and steps; anticipated floors are dashed and empty */
.floors { display: grid; gap: 12px; margin-top: 10px; }
.floor { background: #fff; border: 3px solid var(--accent, #307878); border-radius: 10px; padding: 12px 16px; }
.floor h3 { margin: 0 0 .3rem; font-family: 'Chalkduster', cursive; color: var(--accent, #307878); font-size: 1.1rem; display: flex; align-items: center; gap: .5em; flex-wrap: wrap; }
.floor p { margin: .25rem 0; }
.floor.anticipated { border-style: dashed; background: #FBFAF6; opacity: .92; }
.floor .list li { display: block; }
.floor .task .who { margin-left: .5em; font-size: .78rem; color: var(--ink-lt); }
.steps { margin: .35rem 0 .2rem 1.2rem; padding: 0 0 0 .6rem; font-size: .9rem; color: var(--ink-md); border-left: 2px dashed #DCD8CF; }
.steps li { padding: .12rem 0; }
.steps li::marker { font-family: 'PixelGamer', monospace; font-size: .7rem; color: var(--teal); }
.steps li.done { text-decoration: line-through; color: var(--ink-lt); }
.pill.soon { background: #C49538; }
.steps-n { font-family: 'PixelGamer', monospace; font-size: .58rem; color: var(--teal-dk); background: #E2EFEB; padding: 2px 6px; border-radius: 3px; margin-left: .3em; vertical-align: middle; }

/* stage trail strip (D-013): labels are decoration, state is the record; blocked is a flag, never a stage */
.trail { display: inline-flex; gap: 3px; align-items: center; margin: .3rem 0 0; }
.trail i { font-style: normal; font-family: 'PixelGamer', monospace; font-size: .55rem; letter-spacing: .04em; padding: 2px 6px; border-radius: 3px; background: #F1EEE5; color: #A39D91; border: 1px solid #E3DFD3; }
.trail i.past { background: #E2EFEB; color: #307878; border-color: #B0EAE5; }
.trail i.now { background: var(--teal); color: #fff; border-color: var(--teal-dk); }
.trail b { font-size: .7rem; margin-left: 2px; }

/* building signs (D-014): the wordmark sits where the handwritten name was; the name stays for screen readers */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.house h3.sign { padding-top: 12px; margin-bottom: .5rem; }
.house.buddy h3.sign { padding-right: 84px; }
.house-head h1.sign { margin: .1rem 0 .4rem; }
.house-head h1.sign .wm { --wm-size: 1.45rem; }
.house h3.sign .wm { --wm-size: 1rem; }
@media (max-width: 560px) { .house-head h1.sign .wm { --wm-size: 1.1rem; } .house h3.sign .wm { --wm-size: .9rem; } .house.buddy h3.sign { padding-right: 0; } }


/* Workshop fold (D-016: expandable and collapsible): the JC open/closed cues are written for cards, so the top fold gets its own toggle */
#workshop .workshop-fold > summary .open-cue { display: none; }
#workshop .workshop-fold[open] > summary .open-cue { display: inline; }
#workshop .workshop-fold[open] > summary .closed-cue { display: none; }
#workshop .workshop-fold > summary .inbox-count { margin-left: auto; }
#workshop .inbox-count > b { margin-right: .35em; }

/* the top nav: the kit's digital button (D-016 point 4), coloured like the design site's nav groups */
.nav-btn-row .nav-arcade { font-size: .8rem; padding: 9px 18px; min-height: 40px; }
.nav-btn-row .nav-arcade .foam { font-size: 1.2em; margin-right: .35em; }
.nav-btn-row .nav-arcade[aria-current="page"] { outline: 2px solid rgba(255,255,255,.6); outline-offset: 2px; }
.nav-btn-row .nav-arcade:focus-visible { outline: 3px solid #FFF9CC; outline-offset: 2px; }
.nav-title { font-size: 1.5rem; line-height: 1; white-space: nowrap; }
@media (max-width: 560px) { .nav-btn-row .nav-arcade { flex: 1 1 42%; justify-content: center; font-size: .72rem; padding: 8px 10px; } .bb-chalk { font-size: 1.15rem; } .bb-emboss { font-size: 1.1rem; } }
/* nav emojis (MSG-1655 point 7): a little larger, with the kit's thinner sticker outline (#studio-status-foam, dilate 1.9) instead of the full foam (2.7) */
.nav-btn-row .nav-arcade .foam { font-size: 1.45em; filter: url(#studio-status-foam); margin-right: .4em; }


/* the crew rail (D-019): Brain Buddy, Deesil's empty account (a button), builders as they join */
.face.buddy { background: none; border: 0; box-shadow: none; overflow: visible; border-radius: 0; }   /* a die-cut sticker: white cut line, slight tilt, contact shadow (MSG-0200) */
.face.buddy img { width: 100%; height: 100%; object-fit: contain; border-radius: 0; transform: rotate(-6deg) scale(1.06); filter: drop-shadow(1.5px 0 0 #fff) drop-shadow(-1.5px 0 0 #fff) drop-shadow(0 1.5px 0 #fff) drop-shadow(0 -1.5px 0 #fff) drop-shadow(0 2px 2.5px rgba(58,58,58,.28)); }
@keyframes bb-working { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
.face.buddy[data-active="true"] { animation: bb-working 1.4s ease-in-out infinite; }   /* slight, not busy: 2px, a resting-breath rhythm, only while the last checkpoint is under 45 minutes old */
@media (prefers-reduced-motion: reduce) { .face.buddy[data-active="true"] { animation: none; } }
button.face.deesil { cursor: pointer; font: inherit; font-family: 'Chalkduster', cursive; }
button.face.deesil.empty { border-style: dashed; background: #FFF9E0; color: #B8A15C; }
button.face.deesil:hover, button.face.deesil:focus-visible { border-color: #C49538; outline: none; }
/* the grey pop-up postcard (JC .popup-postcard, grey variant): the dialog lives inside #workshop so the vendored rules apply */
#workshop dialog.popup-postcard { position: fixed; inset: 0; margin: auto; width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 27px; border: 0; z-index: 900; }
#workshop dialog.popup-postcard::backdrop { background: rgba(43, 42, 40, .45); }
#workshop dialog.popup-postcard .profile { box-shadow: none; padding: 0; background: transparent; }
#workshop dialog.popup-postcard .profile .h-tape { display: none; }
#workshop dialog.popup-postcard .packet-card-heading h3 { font: 20px/1.4 Chalk, 'Chalkduster', cursive; color: #5A5855; margin: 0 40px 0 0; }
#workshop dialog.popup-postcard .packet-kicker { font-size: .85rem; color: #6B706B; margin: 4px 0 12px; }
#workshop dialog.popup-postcard:focus, #workshop dialog.popup-postcard:focus-visible { outline: none; }
#workshop dialog.popup-postcard > .popup-scroll { max-height: calc(100dvh - 90px); }



/* a closed dialog stays closed: the JC sheet rule forces display:block, which showed the empty sheet as a bar on the page */
#workshop dialog:not([open]) { display: none !important; }
#workshop dialog.popup-postcard.household-postcard:not([open]) { display: none !important; }
#workshop dialog .popup-close:focus, #workshop dialog .note-close:focus { outline: none; box-shadow: none; }

/* the request form's controls: JC renders them in the body face (Avenir) with a rounded 36px trigger; a native select and textarea inherit nothing, so the face is set here */
#workshop .field input, #workshop .field textarea, #workshop .field select, #workshop .inbox-toolbar select { font: 15px/1.6 Avenir, "Avenir Next", "Segoe UI", system-ui, sans-serif; color: #3a3a3a; }
#workshop .field textarea::placeholder, #workshop .field input::placeholder { color: #8b8f89; }
#workshop .field select, #workshop .inbox-toolbar select { appearance: none; -webkit-appearance: none; width: 100%; min-height: 36px; padding: 6px 34px 6px 12px; background: #fffef9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b706b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; border: 1px solid #b4bcb7; border-radius: 6px; box-shadow: 0 1px 2px rgba(58,58,58,.06); }
#workshop .inbox-toolbar select { width: auto; min-width: 180px; }
/* the note pop-up's close cross sits in the top-right corner of the note, as on the JC site */
#workshop .task-floating-note .note-close { position: absolute; top: 4px; right: 6px; z-index: 2; cursor: pointer; line-height: 1; }
#workshop .task-floating-note:has(.note-close) { position: fixed; }

#workshop .category-heading h3 .foam { font-size: 22px; margin: 0 6px 0 0; }
#workshop .tracker-task .task-facts b { margin-right: .4em; }

/* the build dashboard: across the top of a build, under its sign; the top-line information and your role on this build (f03, MSG-20260919-0125); the hand-drawn tabs sit below it */
.build-dash { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 0 0 6px; }
.build-dash .dash-card { background: var(--card); border-radius: 12px; padding: 14px 16px 12px; box-shadow: 0 2px 10px rgba(58,58,58,.08); position: relative; }
.build-dash .dash-card::before { content: ''; position: absolute; left: -4px; right: -4px; top: -4px; height: 8px; border-radius: 2px; transform: rotate(-.3deg); background: linear-gradient(90deg, var(--accent, #307878) 0 40%, color-mix(in srgb, var(--accent, #307878) 55%, #fff) 40% 70%, var(--accent, #307878) 70%); box-shadow: 0 1px 2px rgba(58,58,58,.18); }
.build-dash h3 { font-family: 'EmbossT1', monospace; letter-spacing: .08em; text-transform: uppercase; font-size: .9rem; color: var(--ink); background: #E8ECE4; display: inline-block; padding: 4px 12px; margin: 4px 0 10px; }
.build-dash .stats { display: flex; gap: 10px; flex-wrap: wrap; }
.build-dash .stat { flex: 1 1 60px; text-align: center; }
.build-dash .stat .n { font-family: 'PacketDigits', monospace; font-size: 1.9rem; color: var(--accent, #307878); line-height: 1; }
.build-dash .stat .l { font-family: 'Chalkduster', cursive; font-size: .68rem; color: var(--ink-md); margin-top: 4px; }
.build-dash .roles { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 8px; }
.build-dash .role { font-family: 'Chalkduster', cursive; font-size: .78rem; color: var(--r, #307878); background: #FBFAF6; border: 2px solid color-mix(in srgb, var(--r, #307878) 45%, #fff); border-radius: 4px 8px 3px 6px; padding: 6px 10px; cursor: pointer; display: inline-flex; align-items: center; gap: .4em; }
.build-dash .role .foam { font-size: 1.25em; }
.build-dash .role[aria-pressed="true"] { background: color-mix(in srgb, var(--r, #307878) 14%, #FBFAF6); border-color: var(--r, #307878); box-shadow: 0 2px 0 color-mix(in srgb, var(--r, #307878) 35%, transparent); }
.build-dash .role[disabled] { opacity: .55; cursor: not-allowed; border-style: dashed; }
.build-dash .role:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }
.build-dash .fine { font-size: .8rem; margin: 6px 0 0; }
.build-dash .faces { margin: 4px 0 0; }
@media (max-width: 560px) { .build-dash { grid-template-columns: 1fr; } }

/* the emphasis words of the Universes communication design, on the street as on the kit: coloured, bold, specific */
.semantic { font-weight: 700; }
.semantic.focus { color: #307878; } .semantic.mind { color: #AD4780; } .semantic.ground { color: #6D5042; } .semantic.grow { color: #559C40; }
.lead, .house p, .sub-panel > p, .sheet > p { color: var(--ink); }

/* the Builds page: the two postcards again, a little status dashboard under each (most recent, top stats, must-dos), more specific than the Boulevard overview (MSG-0145) */
.build-status { background: var(--card); border-radius: 12px; padding: 14px 16px 12px; box-shadow: 0 2px 10px rgba(58,58,58,.08); margin-top: 12px; }
.build-status h4 { font-family: 'EmbossT1', monospace; letter-spacing: .08em; text-transform: uppercase; font-size: .82rem; color: var(--ink); background: #E8ECE4; display: inline-block; padding: 3px 10px; margin: 6px 0 8px; }
.build-status .stats { display: flex; gap: 8px; }
.build-status .stat { flex: 1 1 40px; text-align: center; }
.build-status .stat .n { font-family: 'PacketDigits', monospace; font-size: 1.5rem; color: var(--accent, #307878); line-height: 1; }
.build-status .stat .l { font-family: 'Chalkduster', cursive; font-size: .62rem; color: var(--ink-md); margin-top: 3px; }
.build-status ul { list-style: none; margin: 0; padding: 0; }
.build-status li { display: flex; gap: 8px; align-items: baseline; font-size: .9rem; padding: 5px 0; border-bottom: 1px dashed #E2DED4; }
.build-status li:last-child { border-bottom: 0; }
.build-status li .foam { font-size: 1.1em; }
.build-status li .when { margin-left: auto; font-family: 'Chalkduster', cursive; font-size: .68rem; color: var(--ink-md); white-space: nowrap; }
.build-status .lane { font-family: 'PixelGamer', monospace; font-size: .6rem; text-transform: uppercase; color: #fff; background: var(--lane, #307878); padding: 3px 7px; border-radius: 3px; white-space: nowrap; margin-left: auto; }
.builds-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; margin-top: 14px; align-items: start; }

/* the Workshop's postcards on the kit's own variants (f06, MSG-0145/0225; measured on the kit page, research 19 Sept): the idea card = the four-edge postcard with the kit's corner arms (kit/corners.js), the person windows = the kit's rail card, the responsibilities card = the kit's band card */
#workshop.play-packet.material-system .bf-card.bf-std::after { border-radius: 11px; }
#workshop.play-packet.material-system .bf-card.bf-std > .bf-inner { background-color: #FAFAF5; background-image: var(--expression-paper-texture); }
#workshop.play-packet.material-system .bf-card.bf-std.left { padding: 0 0 0 10px; border-color: #929aa045; background: transparent; }
#workshop.play-packet.material-system .bf-card.bf-std.left > .edge-l { top: 0; bottom: 0; left: 0; width: 10px; border-radius: 0; }
#workshop.play-packet.material-system .bf-card.bf-std.bands { padding: 10px 0; background: #fafaf5; isolation: isolate; }
#workshop.play-packet.material-system .bf-card.bf-std.bands > .edge-t, #workshop.play-packet.material-system .bf-card.bf-std.bands > .edge-b { left: 0; right: 0; height: 10px; border-radius: 0; }

/* a student's tasks on a floor: the SAME task card as the Workshop (kit/tasks.css is scoped to :is(#workshop, .blvd-tasks)); the buttons around it (f03, MSG-0235) */
.blvd-tasks { display: grid; gap: 12px; margin: 10px 0 4px; }
.blvd-tasks .task-edit { display: inline-flex; align-items: center; gap: .3em; color: #246567; text-underline-offset: 4px; background: none; border: 0; min-height: 32px; padding: 4px 2px; margin: 6px 0 0; font: 700 12px/1.5 Chalkduster, cursive; text-decoration: underline; cursor: pointer; white-space: nowrap; }
.blvd-tasks .task-edit .foam { font-size: 1.3em; }
.floor .task-tools { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 6px 0 2px; }
.floor .take { font: 700 12px/1.6 Chalkduster, cursive; color: var(--accent, #307878); background: none; border: 0; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; padding: 4px 2px; }
.floor .taken { font-family: 'Chalkduster', cursive; font-size: .72rem; color: var(--ink-md); }
.floor .add-task { margin-top: 10px; }
.floor.draft { border-style: dashed; background: #FBFAF6; }
.floor .pill.draft { background: #7A4380; }
.dash-card .drafts { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.dash-card .drafts .chip-btn { font-family: 'Chalkduster', cursive; font-size: .72rem; color: #5A4A7A; background: #EAE3F2; border: 0; padding: 6px 10px; box-shadow: 1px 2px 4px rgba(65,68,63,.18); transform: rotate(-1deg); cursor: pointer; }
.dash-card .drafts .chip-btn:nth-child(2n) { transform: rotate(1deg); }
.dash-card .draft-row { display: flex; gap: 8px; align-items: center; margin: 6px 0; }
.dash-card .draft-row input { flex: 1 1 120px; min-width: 0; font: 15px/1.5 Avenir, "Avenir Next", system-ui, sans-serif; color: #3a3a3a; border: 1px solid #b4bcb7; border-radius: 6px; padding: 7px 10px; background: #fffef9; }
.dash-card .your-tasks { margin: 8px 0 0; }
/* the task sheet (a grey pop-up postcard like the account sheet, inside #workshop so the JC dialog rules apply) */
#workshop dialog#task-sheet .popup-scroll { max-height: calc(100dvh - 40px); }
#workshop dialog#task-sheet .field { display: flex; flex-direction: column; gap: 5px; margin: 8px 0 12px; }
#workshop dialog#task-sheet .field > span { color: var(--tone, #406592); font: 700 .875rem/1.5 Chalk, 'Chalkduster', cursive; }
#workshop dialog#task-sheet .field small { color: #687564; font: 12px/1.6 Avenir, "Avenir Next", system-ui, sans-serif; }
#workshop dialog#task-sheet input[type="text"], #workshop dialog#task-sheet textarea, #workshop dialog#task-sheet select { font: 15px/1.5 Avenir, "Avenir Next", system-ui, sans-serif; color: #3a3a3a; background: #fffef9; border: 1px solid #ACA99E; border-radius: 4px; padding: 8px 11px; min-height: 40px; width: 100%; box-sizing: border-box; }
#workshop dialog#task-sheet textarea { resize: vertical; min-height: 64px; }
#workshop dialog#task-sheet details.record-section { margin: 14px 0; padding: 12px 14px; background: #FFFDF5; border-left: 4px solid var(--tone, #406592); border-radius: 0 8px 8px 0; }
#workshop dialog#task-sheet details.record-section > summary { cursor: pointer; color: var(--tone, #406592); font: 15px/1.8 Chalk, 'Chalkduster', cursive; }
#workshop dialog#task-sheet details.record-section > summary small { color: #7A7775; font: 12px/1.6 Avenir, "Avenir Next", system-ui, sans-serif; }
#workshop dialog#task-sheet .step-row { display: flex; gap: 8px; align-items: center; margin: 6px 0; }
#workshop dialog#task-sheet .step-row input[type="checkbox"] { width: 20px; height: 20px; flex: none; }
#workshop dialog#task-sheet .step-row .remove { background: none; border: 0; color: #7A3F3F; cursor: pointer; font-size: 16px; }
#workshop dialog#task-sheet .choices { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
#workshop dialog#task-sheet .choice { font: 700 12px/1.6 Chalkduster, cursive; color: var(--tone, #406592); background: #FBFAF6; border: 2px solid color-mix(in srgb, var(--tone, #406592) 45%, #fff); border-radius: 4px 8px 3px 6px; padding: 6px 10px; cursor: pointer; }
#workshop dialog#task-sheet .choice[aria-pressed="true"] { background: var(--tone, #406592); color: #fff; border-color: var(--tone, #406592); }
#workshop dialog#task-sheet .note-field > span { color: var(--note-ink, #406592); }
#workshop dialog#task-sheet .record-actions { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin: 16px 0 6px; }
#workshop dialog#task-sheet .record-actions .text-button { background: none; border: 0; color: #246567; text-decoration: underline; text-underline-offset: 4px; font: 700 13px/1.6 Chalkduster, cursive; cursor: pointer; min-height: 40px; }
#workshop dialog#task-sheet .record-actions .text-button.danger { color: #7A3F3F; }
#workshop dialog#task-sheet .fine { color: var(--ink); }

/* a task card inside a floor at phone width: the actions row wraps (Unfold and Edit on one line, the nine stickers below on their own full row) and the floor gives the card more room */
@media (max-width: 560px) {
  .floor { padding: 12px 8px; }
  .sub-panel { padding: 14px 8px; }
  /* inside a floor the card is ~318px wide (361 in the Workshop): the nine stickers tighten a touch so the third column stays inside the paper */
  /* the kit's rules carry the Workshop id through :is(), so these carry the build page ids to outrank them */
  :is(#build-breaks, #build-brain-buddy) .blvd-tasks .tracker-task > summary > .task-actions { display: grid; grid-template-columns: 1fr; gap: 8px; }   /* Unfold above, the stickers on their own full-width row */
  :is(#build-breaks, #build-brain-buddy) .blvd-tasks .tracker-task > summary > .task-actions > .task-open { justify-self: start; }
  :is(#build-breaks, #build-brain-buddy) .blvd-tasks .tracker-task .task-note-row { gap: 10px 12px; justify-content: flex-start; margin-left: 0; }
  :is(#build-breaks, #build-brain-buddy) .blvd-tasks .tracker-task .task-note-trigger { min-width: 50px; }
  :is(#build-breaks, #build-brain-buddy) .blvd-tasks .tracker-task .task-note-trigger .foam { font-size: 22px; }
  :is(#build-breaks, #build-brain-buddy) .blvd-tasks .tracker-task .task-note-trigger .note-label { font-size: 10px; }
}

/* the Foundation (f04): ten topics; a topic opens with one quote in Deesil's words, then its elements as small paper notes, each with its foam, a name, the quote and its citation; chips keep conflicts visible; the Power-Up Principles in their six colours */
.fd-lead { margin: 0 0 14px; }
.fd-lead blockquote.quote { font-size: 1.05rem; }
.fd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin: 12px 0 6px; }
.fd-el { background: var(--card); border-radius: 12px; padding: 14px 16px 12px; box-shadow: 0 2px 10px rgba(58,58,58,.08); position: relative; }
.fd-el::before { content: ''; position: absolute; left: 16px; right: 16px; top: -5px; height: 9px; border-radius: 2px; transform: rotate(-.4deg); background: linear-gradient(90deg, var(--accent, #7A4380) 0 45%, color-mix(in srgb, var(--accent, #7A4380) 55%, #fff) 45% 75%, var(--accent, #7A4380) 75%); box-shadow: 0 1px 2px rgba(58,58,58,.18); }
.fd-el:nth-child(2n)::before { transform: rotate(.4deg); }
.fd-el h4 { margin: 4px 0 8px; font-family: 'Chalkduster', cursive; font-size: .98rem; color: var(--accent, #7A4380); display: flex; align-items: center; gap: .45em; }
.fd-el h4 .foam { font-size: 1.35em; }
.fd-el p { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--ink); }
.fd-el .cite { margin-top: .5rem; }
.fd-el .status { font-family: 'PixelGamer', monospace; font-size: .58rem; text-transform: uppercase; color: #fff; padding: 3px 7px; border-radius: 3px; margin-left: auto; white-space: nowrap; background: var(--st, #7A7775); }
.fd-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 2px; }
.fd-chip { font-family: 'Chalkduster', cursive; font-size: .72rem; line-height: 1.4; color: #5A5855; background: #FFF1BF; padding: 6px 10px 5px; box-shadow: 1px 2px 4px rgba(65,68,63,.18); transform: rotate(-.8deg); max-width: 560px; }
.fd-chip:nth-child(2n) { transform: rotate(.7deg); }
.fd-chip.conflict { background: #F3DCD5; color: #7A3F3F; }
.fd-chip.claim { background: #E2ECF2; color: #3A5A70; }
.fd-chip.needs-copy, .fd-chip.needs-decision { background: #EDE9E3; color: #6D5042; border: 1px dashed #B0ACA5; }
.fd-principles { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 4px; }
.fd-principle { display: inline-flex; align-items: center; gap: .4em; font-family: 'EmbossT1', monospace; letter-spacing: .08em; font-size: 1.05rem; color: #fff; background: var(--c); padding: 8px 14px 7px; border-radius: 3px 8px 3px 6px; text-shadow: 0 -1px 0 rgba(22,54,87,.5), 0 1px 0 rgba(255,255,255,.35); box-shadow: 0 2px 0 rgba(0,0,0,.14); transform: rotate(-1deg); }
.fd-principle:nth-child(2n) { transform: rotate(1deg); }
.fd-principle .foam { font-size: 1.2em; }
@media (max-width: 560px) { .sub-index.index { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding-bottom: 4px; } .sub-index.index > .nav-group { display: block; min-width: var(--tabs-width, 100%); height: 76px; } .fd-grid { grid-template-columns: 1fr; } }

/* ---------- the account CARD (MSG-0425): what a saved account looks like; the form only shows on Edit or when nothing is saved ---------- */
.account-card { display: grid; gap: 12px; }
.account-card .ac-top { display: flex; gap: 16px; align-items: center; }
.account-card .ac-name { font-family: 'Chalkduster', cursive; font-size: 1.35rem; color: var(--teal-dk); line-height: 1.2; }
.account-card .ac-time { font-size: .9rem; color: var(--ink); margin-top: 4px; }
.account-card .ac-zone { color: var(--ink-md); font-size: .82rem; }
.account-card .ac-from { display: inline-block; margin-top: 6px; font-family: 'Chalkduster', cursive; font-size: .68rem; color: #5A5855; background: #E8ECE4; padding: 3px 8px; transform: rotate(-1.2deg); }
.account-card .ac-skills { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--ink); background: #FFF6CF; padding: 10px 12px; box-shadow: 1px 2px 4px rgba(65,68,63,.14); transform: rotate(-.4deg); }
.account-card .ac-skills em { color: var(--ink-md); }
.account-card .ac-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.account-card .ac-links li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.account-card .ac-links .ac-val { font-size: .86rem; color: var(--ink); word-break: break-word; }
.account-card .ac-links .ac-none { font-size: .86rem; color: var(--ink-md); }
.account-card .fundamental-arcade-button.small { font-size: .68rem; padding: 6px 11px; text-decoration: none; }
.account-card .ac-state { margin: 0; }
.account-card .actions { display: flex; gap: 10px; margin-top: 2px; }
/* the round sticker faces (MSG-0425: "update these thumbnails to be cute"): a white rim, a soft cast shadow, a slight tilt that alternates; a button face carries no padding, so the photo stays round, never squashed */
button.face, .face[role="button"] { padding: 0; }
.face.you, .face.deesil:not(.empty), .face.sheet { border: 3px solid #fff; box-shadow: 0 0 0 1.5px rgba(58,58,58,.13), 0 2px 3px rgba(58,58,58,.26); transform: rotate(-5deg); }
.faces > .face:nth-child(even):is(.you, .deesil:not(.empty), .sheet) { transform: rotate(4deg); }
.face.you:hover, .face.sheet:hover, .face.you:focus-visible, .face.sheet:focus-visible { transform: rotate(0deg) scale(1.06); outline: none; box-shadow: 0 0 0 1.5px rgba(58,58,58,.13), 0 3px 6px rgba(58,58,58,.3); }
.face.big { width: 96px; height: 96px; font-size: 2rem; flex: none; }
.face.big .lt { font-size: .62rem; bottom: -10px; }
@media (prefers-reduced-motion: reduce) { .face.you:hover, .face.sheet:hover { transform: rotate(-5deg); } }

/* the studio address (D-035): a real link, ink not grey, underlined the paper way */
a.mail { color: var(--teal-dk); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: #C49538; }
a.mail:hover, a.mail:focus-visible { color: var(--purple); outline: none; }