/* The screens' look (the mock-up notes, "The look"; the way-in canvas): IBM Plex Sans and IBM Plex Mono, served from the app itself (never from Google, which would learn every student's address); ground #EEF1EE, ink #16212B, blue #1B4B87. Phone-first: one column 390 px wide, centred at the same width on a laptop. Step 2.16: the way in. */ @font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-sans-latin-400-normal.0ceb759015a6.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-sans-latin-600-normal.e78568807d10.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-mono-latin-400-normal.4cc7b4398540.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-mono-latin-600-normal.ed616eb04c5f.woff2") format("woff2"); } :root { --ground: #EEF1EE; --ink: #16212B; --quiet: #46525E; --blue: #1B4B87; --blue-dark: #12345E; /* The link blue of the Wallet's headline total, the one term that is a blue link and not dotted (Juli's look at 3.1, item 6; 3.3, fix 1): 5.39:1 on white. */ --link: #266ABF; --card: #FFFFFF; --edge: #D3D9D4; --field-edge: #8A949C; --red: #94000A; --red-ink: #7E0708; --red-tint: #EFCAC5; --grey-tint: #E8ECEF; --grey-edge: #C2CAC4; --sans: "IBM Plex Sans", system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, monospace; } * { box-sizing: border-box; } /* Nothing marked hidden is ever drawn (Juli's look at the five fixes and 3.13, 25 Oct 2026, fix 1): a class that sets `display` (`.field`, say) would otherwise beat the browser's own rule for `hidden`, and *Which stall* was always drawn. */ [hidden] { display: none !important; } html { background: var(--ground); } /* Fast taps never zoom (Juli, 21 Oct 2026; the mock-up notes' checklist 28): a double tap on a control does not zoom the page. Pinch-zoom always stays: the viewport line never says user-scalable=no or a maximum scale. */ a, button, input, select, textarea, label, summary, [role=button], [data-opens] { touch-action: manipulation; } body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.5; } p { margin: 0; } h1 { margin: 0; font-size: 24px; font-weight: 600; line-height: 1.2; } a { color: var(--blue); } a:hover { color: var(--blue-dark); } input, button { font-family: inherit; } input:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .mono { font-family: var(--mono); } /* The way in: the header, one card, a line under it. */ .way-in { max-width: 390px; margin: 0 auto; padding: 28px 20px 20px; display: flex; flex-direction: column; gap: 28px; min-height: 100vh; } .way-in-head { display: flex; align-items: center; gap: 12px; } .way-in-head .mark { width: 52px; height: 52px; border-radius: 12px; flex: none; } .way-in-head .name { font-size: 20px; font-weight: 600; line-height: 1.2; } .way-in-head .course { font-size: 14px; color: var(--quiet); } .card { display: flex; flex-direction: column; gap: 20px; background: var(--card); border: 1px solid var(--edge); border-radius: 12px; padding: 20px; } .card .quiet, .quiet { font-size: 14px; color: var(--quiet); } .card .lead { font-size: 16px; } .foot { font-size: 13px; color: var(--quiet); padding: 0 4px; } .field { display: flex; flex-direction: column; gap: 8px; } .field label { font-size: 14px; font-weight: 600; } .field input { width: 100%; min-height: 48px; padding: 0 12px; border: 1px solid var(--field-edge); border-radius: 8px; background: var(--card); color: var(--ink); font-family: var(--mono); font-size: 16px; } .field input.refused { border: 2px solid var(--red); } .refusal { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 8px; background: var(--red-tint); color: var(--red-ink); font-size: 14px; } .refusal .first { font-weight: 600; } button.primary { min-height: 48px; padding: 8px 16px; border-radius: 8px; border: 1px solid var(--blue); background: var(--blue); color: #FFFFFF; font-size: 16px; font-weight: 600; cursor: pointer; } button.secondary { min-height: 44px; padding: 8px 16px; border-radius: 8px; border: 1px solid var(--blue); background: var(--card); color: var(--blue); font-size: 15px; font-weight: 600; cursor: pointer; align-self: flex-start; } button.link { border: 0; padding: 0; background: none; color: var(--blue); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; } button.link:hover { color: var(--blue-dark); } /* The page for the code. */ .back { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px; color: var(--blue); font-size: 15px; font-weight: 600; text-decoration: none; } .card .email { font-weight: 600; word-break: break-all; } .code-form { display: flex; flex-direction: column; gap: 20px; } .boxes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; } .boxes input { width: 100%; min-height: 52px; padding: 0; text-align: center; border: 1px solid var(--field-edge); border-radius: 8px; background: var(--card); color: var(--ink); font-family: var(--mono); font-size: 22px; font-weight: 600; } .boxes input:focus { border: 2px solid var(--blue); background: #F3F6FA; } .boxes input:valid { border: 2px solid var(--blue); } .boxes input[aria-invalid="true"] { border: 2px solid var(--red); } /* Log in is grey until six digits are typed; the browser's own check stops a code too short being sent. */ .code-form:has(.boxes input:invalid) button.login { border: 1px solid var(--grey-edge); background: var(--grey-tint); color: var(--quiet); cursor: not-allowed; } .test-mode { padding: 12px; border-radius: 8px; border: 2px dashed var(--ink); background: #FFF4CC; color: var(--ink); font-family: var(--mono); font-size: 14px; font-weight: 600; } /* The closed page. */ .lock { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 8px; background: var(--grey-tint); color: var(--quiet); font-size: 14px; } .lock svg { flex: none; } .washing-line { display: block; width: calc(100% + 40px); max-width: none; height: auto; margin: auto -20px 0; } /* The convenor's pages (step 2.17): the roster. Drawn 1,280 wide on the way-in canvas (screens 9–12) and the dashboards canvas (C5b); at a phone's width everything stacks and nothing scrolls sideways. Colour on the convenor's pages is urgency (the look of 14 October): amber before the next block, red within a day, green done, grey not open yet; a tag that names a problem is plain, white with a grey edge. */ :root { --amber-ink: #7F3000; --green-ink: #1E6B3A; } h2 { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.3; } .small-caps { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--quiet); } .keep-case { text-transform: none; } /* µ in a heading set in capitals: never the Greek capital Μ */ /* A list's heading at the page's section-heading size, so the lists read apart as Juli scrolls (BUILD-PLAN 4.9b, E18; the class blocks of This week, E14): bold, sentence case, a rule above it, its count beside it. */ .section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 0; padding-top: 16px; border-top: 1px solid var(--edge); font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--ink); } .section-head .count, .section-head .sep { font-size: 15px; font-weight: 400; color: var(--quiet); } .section-head .sep { white-space: pre; } textarea { font-family: var(--mono); } textarea:focus, select:focus { outline: 2px solid var(--blue); outline-offset: 2px; } .convenor { min-height: 100vh; display: flex; flex-direction: column; } .convenor-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding: 10px 16px; background: var(--card); border-bottom: 1px solid var(--edge); } .convenor-head .brand { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; flex: 1 1 auto; } .convenor-head .brand .name { font-weight: 600; font-size: 17px; } .convenor-head .brand .what { font-size: 14px; color: var(--quiet); } .convenor-head nav { display: flex; flex-wrap: wrap; gap: 0 20px; } /* six tabs from 4.9a: on a phone they wrap to a second line, never past the edge */ .convenor-head nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; color: var(--quiet); font-weight: 500; text-decoration: none; border-bottom: 3px solid transparent; } .convenor-head nav a[aria-current] { color: var(--blue); border-bottom-color: var(--blue); font-weight: 600; } /* The missed tick (4.9b, E16): a red band under the header of every page of Juli's, its words white on the card's red (8.9 : 1), its link underlined; a red dot beside This week on the tab, its words for a screen reader only. */ .cv-band { margin: 0; padding: 10px 16px; background: var(--red-band); color: #FFFFFF; font-size: 15px; font-weight: 600; line-height: 1.4; } .cv-band a.cv-band-go { color: #FFFFFF; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; } .cv-band a:focus-visible { outline-color: #FFFFFF; } /* the ring on the red band: white, 9.28 : 1, as its words (F1; 4.22) */ /* The rehearsal's band (6.6): the tick's red band's shape, in amber — white words on --amber-dark (9.0 : 1), never the red of a missed tick; the first thing on every page while the rehearsal setting is on. */ .rehearsal-band { margin: 0; padding: 10px 16px; background: var(--amber-dark); color: #FFFFFF; font-size: 15px; font-weight: 600; line-height: 1.4; text-align: center; } .convenor-head nav a .tab-dot { display: inline-block; width: 9px; height: 9px; margin-left: 4px; border-radius: 50%; background: var(--red-band); vertical-align: middle; } .only-you { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--grey-tint); color: var(--quiet); font-size: 14px; font-weight: 600; } .convenor-main { width: 100%; max-width: 1200px; margin: 0 auto; padding: 24px 16px 32px; display: flex; flex-direction: column; gap: 20px; } /* The refresh's two wrappers (fd1217e, 2 Nov 2026) pass the page's gap on to the sections inside them, as before they came: without it the Marketplace's Bank, its communities and In cooks' care touched, one group's line on the next (Juli's look at 4.23, 3 Nov 2026, Look 2: "There needs to be a gap"). */ .convenor-main > .tw-stack { display: flex; flex-direction: column; gap: inherit; min-width: 0; } /* the pages it wrapped: the Marketplace's five, the Roster, a student's page, the Report; This week and The room keep their own */ .page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px 24px; } .page-head h1 { font-size: 30px; } .convenor-main .page-head { align-items: flex-end; } /* Juli's screens: the box at the right sits level with the head's last line, as C1, C3 and C5 draw it (the reviewer's change 9 at Code's own look, 26 Oct 2026) */ .sub-line p { display: inline; } .page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .showing { padding: 8px 12px; border: 1px solid var(--edge); border-radius: 8px; background: var(--card); font-size: 14px; } .panel { background: var(--card); border: 1px solid var(--edge); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 14px; } /* (Juli's look at 4.23: one look for every box, the Stock Market's — 14 px inside at most) */ .two-columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; } .column { display: flex; flex-direction: column; gap: 20px; min-width: 0; } .convenor-side .panel p { font-size: 15px; } /* Juli's right column: its own class, never the Marketplace's .side (Code's own look, 26 Oct 2026) */ .step-n { color: var(--blue); font-size: 15px; margin-right: 6px; } .paste textarea { width: 100%; min-height: 220px; padding: 12px 14px; border: 1px solid var(--field-edge); border-radius: 8px; font-size: 15px; line-height: 1.7; resize: vertical; white-space: pre; overflow: auto; color: var(--ink); background: var(--card); } .row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; } .row-actions button.primary { padding-left: 20px; padding-right: 20px; } a.button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 8px; font-size: 15px; font-weight: 600; text-decoration: none; } a.button.primary { background: var(--blue); border: 1px solid var(--blue); color: #FFFFFF; } a.button.primary:hover { background: var(--blue-dark); color: #FFFFFF; } a.button.secondary { background: var(--card); border: 1px solid var(--blue); color: var(--blue); } a.button.danger-outline { background: var(--card); border: 1px solid var(--red); color: var(--red-ink); } button.danger { min-height: 44px; padding: 0 18px; border-radius: 8px; border: 1px solid var(--red); background: var(--red); color: #FFFFFF; font-size: 15px; font-weight: 600; cursor: pointer; } button.primary[disabled], button.primary[aria-disabled="true"] { border: 1px solid var(--grey-edge); background: var(--grey-tint); color: var(--quiet); cursor: not-allowed; } .back.button { align-self: flex-start; } .counts { display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: center; } .flag { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; } .flag svg { flex: none; } .flag.amber { color: var(--amber-ink); } .flag.red { color: var(--red-ink); } .flag.green { color: var(--green-ink); } .flag.grey { color: var(--quiet); } .label-tag { display: inline-block; align-self: flex-start; padding: 2px 10px; border: 1px solid var(--field-edge); border-radius: 6px; background: var(--card); color: var(--ink); font-size: 14px; font-weight: 600; } .class-list { width: 100%; border-collapse: collapse; font-size: 15px; } .class-list th { text-align: left; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--quiet); padding: 8px 6px; border-bottom: 1px solid var(--edge); } .class-list td { padding: 10px 6px; border-bottom: 1px solid var(--edge); vertical-align: top; } .class-list td.name { font-weight: 600; } .class-list td.email { white-space: nowrap; } .table-wrap { overflow-x: auto; } .class-list td.fix .fix-items { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; } .class-list .why { color: var(--quiet); font-size: 14px; } .class-list tr.fold td { background: #F4F5F4; color: var(--quiet); font-size: 14px; } .notice { padding: 10px 14px; border-radius: 8px; background: #EFF7F1; border: 1px solid #B9D8C3; color: var(--ink); } .filters { display: flex; flex-wrap: wrap; gap: 8px; } .filters a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--grey-edge); background: var(--card); color: var(--ink); font-weight: 600; font-size: 14px; text-decoration: none; } .filters a[aria-current] { background: var(--blue); border-color: var(--blue); color: #FFFFFF; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; } /* chosen by more than its colour (1.4.1; 4.22) */ .convenor-foot { padding: 8px 4px; } .pending-move { padding: 10px 14px; border-radius: 8px; background: #F2F6FB; border-left: 4px solid var(--blue); } .red-words { color: var(--red-ink); font-size: 15px; } .amber-words { color: var(--amber-ink); font-size: 15px; } /* the class's feature, judged whenever (4.9b, item 10): #7F3000 on white, about 9:1 */ /* A window over the roster (screens 11 and 12): the roster behind it is inert — no keyboard, no screen reader — under a grey veil. */ .behind { filter: grayscale(0.3); opacity: 0.45; } .convenor-top { display: contents; } /* the header and the band, one part that a window makes inert (4.22) */ .veil { position: fixed; inset: 0; background: rgba(22, 33, 43, 0.45); display: flex; justify-content: center; align-items: flex-start; padding: 24px 16px; overflow-y: auto; } .window { width: 100%; max-width: 620px; background: var(--card); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25); } .window h1 { font-size: 24px; } .window .fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; } .field input.refused { border: 2px solid var(--red); } .field-refusal { color: var(--red-ink); font-size: 14px; } .choices { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; } .choices legend { font-size: 14px; font-weight: 600; margin-bottom: 8px; padding: 0; } .choice { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px; border: 1px solid var(--field-edge); border-radius: 8px; } .choice:has(input:checked) { border: 2px solid var(--blue); background: #F3F6FA; } .choice input { width: 18px; height: 18px; accent-color: var(--blue); } .what-happens { background: #EEF1EE; border-radius: 8px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; } .what-happens ul { margin: 0; padding-left: 20px; } .window-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; } .window-actions button.primary { padding-left: 20px; padding-right: 20px; } /* The convenor's This week (step 4.1): the checklist's cards share the students' card look (.line, below); a block folded to one grey line opens on a tap; the right column is the record's (4.5). */ .cl-count { white-space: normal; margin: 0; font-size: 14px; color: var(--quiet); } .cl-label { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; margin: 8px 0 0; } /* C1: the due block's name, the count beside it; "THE REST OF WEEK 4" */ .cl-label h2 { margin: 0; } .cl-list details.fold { margin-top: 0; } .cl-fold summary .chevron { color: var(--grey-dark); } .cl-fold .fold-items, .cl-done .fold-items { padding-left: 24px; } .cl-fold summary.line .under { display: block; } /* A folded block's head never runs under its grey word: where "W1 Wednesday" and "Not open yet" cannot share the line (a phone, with WCAG's text spacing), the word and the chevron go under the head (4.23, 1.4.12). */ .cl-fold summary.line { flex-wrap: wrap; } .cl-fold summary.line .text { flex: 1 1 0; min-width: min-content; } .cl-side:empty { display: none; } /* A class on This week (4.9b, E14): its heading, red *Now*, its hours, one *Open The room*, and a plain list of The room's steps, a done one ticked; folded, the same list. */ .cl-class { display: flex; flex-direction: column; gap: 8px; padding: 0 0 16px 14px; border-left: 6px solid var(--red); } .cl-class-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; } .cl-class .section-head { border-top: 0; padding-top: 0; } .cl-class-word { font-size: 14px; font-weight: 600; color: var(--red-dark); white-space: nowrap; } .cl-class .quiet { margin: 0; } a.button.cl-class-go { align-self: flex-start; font-size: 14px; } .cl-steps { margin: 0; padding-left: 24px; display: flex; flex-direction: column; gap: 6px; font-size: 16px; line-height: 1.4; } .cl-steps li.done { list-style: none; } .cl-steps .cl-tick { display: inline-block; width: 16px; height: 16px; margin: 0 8px 0 -24px; vertical-align: -2px; color: var(--green-dark); } .cl-fold .fold-items .cl-steps { padding: 8px 0 8px 24px; } .cl-row .cl-row-undo { display: flex; } .cl-row .cl-row-change { font-size: 14px; font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; } /* The room (step 4.2; B, 4.5: the dashboards canvas, C8, C7, C2, C9): on the left the class's moves in order and the week's other classes, no buttons (P2); on the right NOW — one card for each move (P1) —, the Market Hours line, ATTENDANCE with the sheet folded, the other votes; on a phone everything stacks, NOW first. */ /* The class now, large, in its community's colours (BUILD-PLAN 4.9b, E8; the audit's item 7a): a band under the head, readable across the room — a tutorial's in its community's ground with its sign, the lecture's in the course's dark blue with no sign and no ground; a joint tutorial two halves side by side (stacked on a phone), one when-line. The name at the page's largest size, the h1's. Ink on ground at AA (screens/tests/test_room_band.py). */ .class-band { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; } .band-halves { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; } .band-half { display: flex; align-items: center; gap: 16px; min-width: 0; padding: 14px; border: 1px solid var(--c-edge); border-radius: 14px; background: var(--c-ground); color: var(--c-ink); } .band-half .sign { flex: none; color: var(--c-ink); } .band-words { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .band-name { margin: 0; font-size: 30px; font-weight: 600; line-height: 1.2; color: inherit; } .band-when { font-size: 18px; font-weight: 600; color: inherit; } .band-half.lecture { padding: 0; border: 0; border-radius: 0; background: none; color: var(--blue-ink); } .class-band > .band-when { color: var(--ink); } @media (min-width: 640px) { .class-band.joint .band-halves { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .room-columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; } .room-side, .room-main { display: flex; flex-direction: column; gap: 22px; min-width: 0; } /* NOW first in the page (P2) */ .room-list { display: flex; flex-direction: column; gap: 8px; } .room-list .list { display: flex; flex-direction: column; gap: 8px; } .room-list .line { min-height: 48px; padding: 8px 12px 8px 10px; border-left-width: 8px; border-radius: 10px; } .room-list .line .title { font-size: 15px; } .room-list .line .under { font-size: 13px; } .room-list .line .word { font-size: 13px; } .room-main .gap { margin: 0; } .room-rest { min-height: 0; } .room-warnings { display: flex; flex-direction: column; gap: 10px; } .room-now { display: flex; flex-direction: column; gap: 10px; } /* TO DO and JUST DONE (Juli's look at B's first half, C4; the dashboards canvas, version 38): two headed parts, the move waiting above the result just made; the app's own (the vote on a question) apart. */ .room-head { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; } .room-head svg { flex: none; } .room-head.todo { color: var(--red-dark); } .room-head.done { color: var(--green-dark); } .room-head.app { color: var(--blue-ink); } .now-cards > .room-head ~ .room-head { margin-top: 10px; } .now-empty { margin: 0; padding: 14px 16px; border: 1px dashed var(--grey-edge); border-radius: 12px; background: var(--card); color: var(--quiet); font-size: 15px; } .done-card { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 10px 14px; border: 1px solid #B9D8C3; border-radius: 10px; background: var(--green-tint); } .done-card .dc-text { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .done-card .dc-what { margin: 0; font-size: 13px; font-weight: 600; color: var(--green-dark); } .done-card .dc-headline { margin: 0; font-size: 19px; font-weight: 600; line-height: 1.3; color: var(--ink); } .done-card .dc-detail { margin: 0; font-size: 14px; line-height: 1.4; color: var(--quiet); } .done-card .quiet-move p { margin: 0; } .move-card.done-wide { border: 1px solid #B9D8C3; background: var(--green-tint); } .move-card.done-wide .mc-body, .move-card.done-wide .stage-strip { padding-left: 0; } .move-card.done-wide .mc-title { font-size: 13px; color: var(--green-dark); } .now-cards { display: flex; flex-direction: column; gap: 10px; } .now-class { margin: 6px 0 0; font-size: 15px; font-weight: 600; } .now-line { margin: 0; font-size: 15px; } /* A move's card (P1): the flag's band and tint, its title and word on one line; its result the headline (C7, C8). */ .move-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--edge); border-left: 12px solid var(--grey-band); border-radius: 12px; background: var(--grey-tint-card); } .move-card.red { border-left-color: var(--red-band); background: var(--red-tint-card); } .move-card.blue { border-left-color: var(--blue-band); background: var(--blue-tint); } .move-card.green { border-left-color: var(--green-band); background: var(--green-tint); } .move-card.amber { border-left-color: var(--amber-band); background: var(--amber-tint); } /* This week's cards (B, second half; C1) */ .move-card.wide:not(.green) { background: var(--card); } /* a vote's card is a white panel with its band (C2, C9); green once closed */ .mc-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; } .mc-head .flag-icon { flex: none; width: 22px; height: 22px; } .mc-title { margin: 0; flex: 1 1 auto; font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--ink); } .move-card.result .mc-title { font-size: 15px; } .mc-sub { font-size: 13px; color: var(--quiet); } .mc-word { font-size: 14px; font-weight: 600; white-space: nowrap; } .move-card.red .mc-title, .move-card.red .mc-word, .move-card.red .flag-icon { color: var(--red-dark); } .move-card.blue .mc-title, .move-card.blue .mc-word, .move-card.blue .flag-icon { color: var(--blue-ink); } .move-card.green .mc-title, .move-card.green .mc-word, .move-card.green .flag-icon { color: var(--green-dark); } .move-card.grey .mc-title, .move-card.grey .mc-word, .move-card.grey .flag-icon { color: var(--grey-dark); } .move-card.amber .mc-title, .move-card.amber .mc-word, .move-card.amber .flag-icon { color: var(--amber-dark); } .mc-body { display: flex; flex-direction: column; gap: 10px; padding-left: 34px; } .mc-body p { margin: 0; } .mc-line { font-size: 15px; } .mc-question { font-weight: 600; color: var(--quiet); } .mc-result { display: flex; flex-direction: column; gap: 4px; } .mc-headline { font-size: 22px; font-weight: 600; line-height: 1.25; color: var(--ink); } .move-card.wide .mc-headline { font-size: 24px; line-height: 1.2; } .mc-headline.red { color: var(--red-dark); } .mc-result .quiet { font-size: 14px; } .mc-link { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: 14px; text-decoration: none; } /* C8: a text button, as Why? is */ .mc-link:hover { text-decoration: underline; } a.button.mc-go { align-self: flex-start; font-size: 14px; } /* This week: a card's way there, a bordered button (C1, decision (j)) */ .cl-list .move-card { margin: 0; } .cl-row .cl-when { font-weight: 400; color: var(--quiet); white-space: normal; text-align: right; } /* C1: Done this week's when */ .mc-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .mc-buttons form { display: flex; } .mc-buttons button { min-height: 48px; padding-left: 18px; padding-right: 18px; } .mc-buttons button[disabled], .mc-buttons button[aria-disabled="true"] { border-color: var(--grey-edge); background: var(--grey-tint); color: var(--quiet); cursor: not-allowed; } .quiet-button { min-height: 44px; padding: 0 2px; border: 0; background: none; color: var(--blue); font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; } .quiet-button:hover { color: var(--blue-dark); text-decoration: underline; } /* *Why?* (P5): the browser's own fold, opening in place; its word reads *Less* when open (decision (i)). */ details.why summary { display: inline-flex; align-items: center; min-height: 44px; color: var(--blue); font-size: 14px; font-weight: 600; cursor: pointer; list-style: none; } details.why summary::-webkit-details-marker { display: none; } details.why .why-open, details.why[open] .why-closed { display: none; } details.why[open] .why-open { display: inline; } details.why p { font-size: 14px; color: var(--quiet); } /* The stage strip (P4): the stage marked, a done stage ticked, a stage passed over dashed. */ .stage-strip { list-style: none; margin: 0; padding: 0 0 0 34px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .stage-strip li { display: flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 10px; border: 1px solid var(--edge); border-radius: 8px; background: var(--card); font-size: 13px; font-weight: 500; color: var(--quiet); } .stage-strip li.done { border-color: var(--grey-edge); color: var(--green-dark); font-weight: 600; } .stage-strip li.current { border-color: var(--blue); background: var(--blue); color: #FFFFFF; font-weight: 600; } .stage-strip li.skipped { border: 1px dashed var(--grey-edge); } .mc-boxes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; } .mc-box { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 12px 14px; border: 1px solid var(--grey-edge); border-radius: 10px; background: var(--card); } .mc-box.win { border: 2px solid var(--blue); } .mc-box p { font-size: 13px; } .mc-box-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .mc-box-name { font-weight: 600; } .mc-count { font-size: 18px; font-weight: 600; } .mc-voted { margin: 0; font-size: 15px; font-weight: 600; } /* "2 of 3 voted" under the boxes (4.9b E10) */ .mc-bar { height: 12px; border-radius: 6px; background: var(--grey-tint); overflow: hidden; } .mc-bar div { height: 12px; border-radius: 6px; background: var(--grey-band); } .mc-box.win .mc-bar div { background: var(--blue); } .mc-tag { font-size: 12px; font-weight: 600; color: var(--blue-ink); } /* Market Hours, a slim line between NOW and ATTENDANCE (decision (d)); the override a quiet button. */ .mh-lines { display: flex; flex-direction: column; gap: 10px; } .mh-lines:empty { display: none; } .mh-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 14px; border: 1px solid var(--edge); border-radius: 12px; background: var(--card); } .mh-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--grey-band); } .mh-dot.open { background: var(--blue); } .mh-word { font-weight: 600; } .mh-text { flex: 1 1 260px; font-size: 14px; } .mh-line form { display: flex; } .mh-line button { min-height: 44px; } /* ATTENDANCE after the first save (decision (b)): the count, who is not marked, the sheet folded under Change the marks. */ .attendance { display: flex; flex-direction: column; gap: 10px; } .att-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 16px; } .att-head h2 { margin: 0; } .att-count { font-weight: 600; } .att-fold summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--blue); border-radius: 8px; background: var(--card); color: var(--blue); font-size: 14px; font-weight: 600; list-style: none; cursor: pointer; } /* C8: Change the marks, a bordered button */ .att-fold summary::-webkit-details-marker { display: none; } .att-fold summary:focus-visible, details.why summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .att-fold .when-open, .att-fold[open] .when-closed { display: none; } .att-fold[open] .when-open { display: inline; } .att-sheet { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--edge); } .sheet-panel { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid var(--edge); border-radius: 10px; background: var(--card); } .attendance .sheet-panel { padding: 0; border: 0; } .sheet-form { display: flex; flex-direction: column; gap: 12px; } .room-other-votes { display: flex; flex-direction: column; gap: 8px; } .room-other-votes .list { display: flex; flex-direction: column; gap: 8px; } .sheet form { display: flex; flex-direction: column; gap: 14px; } .sheet-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; } .sheet-count { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; } .sheet-count .count { margin: 0; font-size: 22px; font-weight: 600; } .sheet-columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; } .col-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding-bottom: 6px; margin-bottom: 8px; border-bottom: 1px solid var(--edge); } .sheet-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .sheet-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 0 12px 0 0; border: 1px solid var(--field-edge); border-radius: 8px; background: var(--card); } .sheet-row label { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; min-height: 46px; padding: 0 12px; cursor: pointer; font-weight: 600; } .sheet-row input { width: 20px; height: 20px; margin: 0; accent-color: var(--blue); flex: none; } .sheet-row.saved input { accent-color: var(--green-dark); } /* C8: once saved the tick turns green and the row says Paid; the row stays white */ .sheet-row.off { border-style: dashed; background: var(--grey-tint-card); } .sheet-row.off .name { color: var(--quiet); font-weight: 500; } .sheet-row.unticked { border-style: dashed; border-color: var(--grey-band); background: var(--grey-tint-card); } /* C8: an unticked row grey and dashed (Code's own look, 26 Oct 2026) */ .sheet-row.unticked .name { color: var(--quiet); } .sheet-column > .col-head { flex-direction: row; gap: 8px; align-items: baseline; } /* the community's count on its name's line (C8); never the students' .col-head column */ .sheet-row .tag { flex: none; font-size: 14px; font-weight: 600; color: var(--quiet); } .sheet-row .tag.green { color: var(--green-dark); } .sheet-row .tag.red { color: var(--red-dark); } .other-fold .fold-items { padding-top: 10px; } .sheet .missing { margin: 0; } .sheet-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .sheet-actions button.primary { padding-left: 20px; padding-right: 20px; } .sheet-actions button.secondary { align-self: auto; } .sheet-actions button.secondary[disabled], .sheet-actions button.secondary[aria-disabled="true"] { border-color: var(--grey-edge); color: var(--quiet); cursor: not-allowed; } @media (min-width: 900px) { .convenor-head { padding: 10px 32px; flex-wrap: nowrap; } .cv-band { padding: 10px 32px; } .convenor-main { padding: 32px; } .two-columns { grid-template-columns: minmax(0, 1fr) 340px; } .two-columns.student-columns { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } /* a student's page in halves, as C5b draws it: the week's lines read whole (Code's own look, 26 Oct 2026) */ /* Put right, last, under the shorter column (6.5a): the column it does not sit under spans both rows; the extra height of that long column goes to the second row (1fr), so the panel sits right under the shorter one. shorter-column.js sets last-left when the left is the shorter; without it, under the right. Only when the panel is there (has-last). */ .two-columns.has-last { grid-template-rows: auto 1fr; } .two-columns.has-last > .column:first-child { grid-column: 1; grid-row: 1 / span 2; } .two-columns.has-last > .column:nth-child(2) { grid-column: 2; grid-row: 1; } .two-columns.has-last > .last-panel { grid-column: 2; grid-row: 2; } .two-columns.has-last.last-left > .column:first-child { grid-row: 1; } .two-columns.has-last.last-left > .column:nth-child(2) { grid-row: 1 / span 2; } .two-columns.has-last.last-left > .last-panel { grid-column: 1; } .room-columns { grid-template-columns: minmax(280px, 1fr) minmax(0, 2.4fr); } .room-side { grid-column: 1; grid-row: 1; } /* on a laptop the list on the left, as drawn */ .room-main { grid-column: 2; grid-row: 1; } .stage-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } .mc-boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mc-boxes.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sheet-columns { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .window .fields { grid-template-columns: 1fr 1fr; } .choices { grid-template-columns: 1fr 1fr; } .choices legend { grid-column: 1 / -1; } } /* The sheet in as many columns as it has communities, never wrapped, from a laptop's width (BUILD-PLAN 4.9b, E9 — Juli: "3 columns please, there's enough room."); between 900 and 1023 px they fit as they can; on a phone they stack. */ @media (min-width: 1024px) { .sheet-columns.n-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sheet-columns.n-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Below 1280 px the room's right column is too narrow for three (E9's own fallback): while the sheet of three is the move waiting, or open under *Change the marks*, it takes the page's full width, the list under it. */ @media (min-width: 1024px) and (max-width: 1279px) { .room-columns.sheet-now:has(.sheet-columns.n-3), .room-columns:has(.att-fold[open] .sheet-columns.n-3) { grid-template-columns: minmax(0, 1fr); } .room-columns.sheet-now:has(.sheet-columns.n-3) > .room-main, .room-columns:has(.att-fold[open] .sheet-columns.n-3) > .room-main { grid-column: 1; grid-row: 1; } .room-columns.sheet-now:has(.sheet-columns.n-3) > .room-side, .room-columns:has(.att-fold[open] .sheet-columns.n-3) > .room-side { grid-column: 1; grid-row: 2; } } @media (max-width: 640px) { .class-list thead { position: absolute; left: -9999px; } .class-list, .class-list tbody, .class-list tr, .class-list td { display: block; width: 100%; } .class-list tr { border-bottom: 1px solid var(--edge); padding: 8px 0; } .class-list td { border: 0; padding: 2px 6px; } .class-list td.email { white-space: normal; word-break: break-all; } } /* The students' screens (step 2.18): the shell, the header, This week. The look is the week 1 and way-in canvases' (the mock-up notes, "The look"; the card look of 14 October; Juli's word of 16 October — every card's title and flag word in its card's own dark colour). Phone-first: one column 390 px wide, centred on a laptop until 2.20 sets the three tabs side by side. Nothing from the banner (BR-4). */ :root { --blue-band: #1B4B87; --blue-ink: #12345E; --blue-tint: #F2F6FB; --amber-band: #BF5000; --amber-dark: #7F3000; --amber-tint: #FDE3CE; /* a deeper orange (Juli, 20 Oct 2026; checklist 26) */ --red-band: #94000A; --red-dark: #7E0708; --red-tint-card: #F4DDD9; /* darker by amber's step (Juli, 21 Oct 2026) */ --grey-band: #8A959F; --grey-dark: #46525E; --grey-tint-card: #F4F5F4; --green-band: #2E7D4F; --green-dark: #1B5E34; --green-tint: #EFF7F1; } .student { min-height: 100vh; } .phone { max-width: 390px; margin: 0 auto; padding: 20px 20px 104px; display: flex; flex-direction: column; gap: 16px; } .student-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .student-head .name { font-size: 16px; font-weight: 600; line-height: 1.4; } .student-head .place { font-size: 14px; color: var(--quiet); } a.help { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--grey-edge); background: var(--card); color: var(--ink); font-size: 18px; font-weight: 600; text-decoration: none; } .money { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; } /* the pills wrap under the total when the two do not fit: 200% text (Juli, 25 Oct 2026, the ⚑ at BUILD-PLAN 3.12, fix 4) */ .total { font-size: 48px; font-weight: 600; line-height: 1.1; white-space: nowrap; } /* a count keeps its sign */ .pills { display: flex; flex-wrap: wrap; gap: 8px; } .pill { display: inline-block; padding: 4px 10px; border-radius: 6px; font-size: 14px; white-space: nowrap; } .pill.smu { background: #BFD8F0; border: 1px solid #5E8DBB; color: var(--ink); } .pill.imu { background: #A9DBBC; border: 1px solid #3E8A5E; color: var(--ink); } .sub-line { font-size: 15px; } .head-actions { display: flex; flex-wrap: wrap; gap: 8px; } /* Send bills and Ask to cook side by side, two equal halves, as the week 3 canvas draws them (4.16, l.489; built at 4.23); one alone fills the row; the hidden phone / laptop twin takes no room */ .head-actions > * { flex: 1 1 0; min-width: 0; text-align: center; } .send { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 8px 16px; border-radius: 8px; border: 1px solid var(--blue); background: var(--card); color: var(--blue); font-weight: 600; text-decoration: none; } .send.greyed { border-color: var(--grey-edge); background: var(--grey-tint); color: var(--quiet); } .back { margin-left: -4px; } .place-title { font-size: 22px; } .builder { background: var(--card); border: 1px dashed var(--grey-edge); border-radius: 12px; padding: 16px; color: var(--quiet); font-size: 15px; } /* The three tabs, always at the bottom. */ .tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; justify-content: center; background: var(--card); border-top: 1px solid var(--edge); } /* above a raised word card link and the pop-up's title row, which scroll under it (found at the fixes of 3.4); nothing on the Marketplace stays on the screen but the tabs (Juli's look at 3.12, fix 9) */ .tabs a { flex: 0 1 130px; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 60px; padding: 8px 4px; color: var(--quiet); font-size: 14px; font-weight: 500; text-decoration: none; border-top: 3px solid transparent; } .tabs a[aria-current] { color: var(--blue); font-weight: 600; border-top-color: var(--blue); } @media (max-width: 74.99em) { /* A control the keyboard reaches is scrolled clear of the fixed tab bar, never behind it (F2; 2.4.7; 4.22). */ html { scroll-padding-bottom: 84px; } } .tab-icon { position: relative; display: inline-flex; } .dot { position: absolute; top: -3px; right: -7px; width: 9px; height: 9px; border-radius: 50%; background: var(--blue); } /* This week: the lists, and the card look of 14 October. */ .list { display: flex; flex-direction: column; gap: 10px; } .list-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 24px; } .list-head form { display: inline; } .line-form { margin: 0; } .line { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 12px 14px 12px 12px; border: 1px solid var(--edge); border-left-width: 12px; border-radius: 12px; text-align: left; text-decoration: none; font: inherit; color: var(--quiet); } button.line { cursor: pointer; } .line .text { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; } .line .title { font-weight: 600; font-size: 16px; line-height: 1.35; } .line .under { font-size: 15px; color: var(--quiet); } .line .word { flex: none; max-width: 45%; text-align: right; font-weight: 600; font-size: 15px; } .line .flag-icon { flex: none; } .line.red { border-left-color: var(--red-band); background: var(--red-tint-card); } .line.amber { border-left-color: var(--amber-band); background: var(--amber-tint); } .line.blue { border-left-color: var(--blue-band); background: var(--blue-tint); } .line.grey { border-left-color: var(--grey-band); background: var(--grey-tint-card); } .line.green { border-left-color: var(--green-band); background: var(--green-tint); } .line.red .title, .line.red .word, .line.red .flag-icon { color: var(--red-dark); } .line.amber .title, .line.amber .word, .line.amber .flag-icon { color: var(--amber-dark); } .line.blue .title, .line.blue .word, .line.blue .flag-icon { color: var(--blue-ink); } .line.grey .title, .line.grey .word, .line.grey .flag-icon { color: var(--grey-dark); } .line.green .title, .line.green .word, .line.green .flag-icon { color: var(--green-dark); } a.line:hover .title, button.line:hover .title { text-decoration: underline; } .line.holds { flex-direction: column; align-items: stretch; gap: 12px; flex-shrink: 0; } /* its own height in a column, never squeezed below its words (4.23: the space inside every box) */ .line-head { display: flex; align-items: center; gap: 12px; } .inside { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--edge); border-radius: 8px; background: #F7F9F7; color: var(--ink); font-size: 15px; } .inside .quiet { font-size: 15px; } .sent { font-size: 15px; color: var(--ink); } .holds .buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .holds .buttons form { display: contents; } .holds .buttons button, .holds .buttons a.button { width: 100%; justify-content: center; min-height: 48px; } .holds .buttons .wide { grid-column: 1 / -1; } .holds button.secondary { align-self: auto; } .split { display: flex; flex-direction: column; gap: 10px; color: var(--ink); } .split-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; } .split-row label { font-weight: 600; } .stepper { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; } .stepper input { width: 52px; min-height: 44px; text-align: center; border: 1px solid var(--field-edge); border-radius: 8px; font-family: var(--mono); font-size: 16px; } .stepper .unit { font-size: 14px; color: var(--quiet); } .step { width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--blue); background: var(--card); color: var(--blue); font-size: 20px; font-weight: 600; cursor: pointer; } .step[disabled], .step[aria-disabled="true"], .split button.primary[disabled], .split button.primary[aria-disabled="true"] { border-color: var(--grey-edge); background: var(--grey-tint); color: var(--quiet); cursor: not-allowed; } .tally { font-size: 15px; } .tally.short { color: var(--red-dark); font-weight: 600; } .fold summary { list-style: none; cursor: pointer; } .fold summary::-webkit-details-marker { display: none; } .fold summary .chevron { color: var(--green-dark); flex: none; transition: transform 0.15s; } .fold[open] summary .chevron { transform: rotate(180deg); } .fold-items { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; } .refusal[role=alert] { font-size: 15px; } /* This week's ? card. */ .help-card { width: min(390px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto; padding: 0 0 12px; border: 1px solid var(--blue); border-radius: 12px; background: var(--card); color: var(--ink); } .help-card::backdrop { background: rgba(22, 33, 43, 0.45); } .help-card:not([open]) { display: none; } .help-card[open]:not(:modal) { position: static; margin: 0 auto 16px; } /* Every pop-up card at one place, its top 24 px below the top of the screen, whatever its height (Juli's look at 3.1, item 4: "a card opens in the same place every time"). */ .help-card:modal { margin: 24px auto auto; } .help-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--edge); } .help-head h2 { font-size: 17px; } .close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--ink); font-size: 26px; text-decoration: none; } .help-flags { list-style: none; margin: 0; padding: 0; } .help-flags li { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--edge); font-size: 15px; } .help-card > p { padding: 12px 16px 0; font-size: 15px; } .help-foot { padding: 12px 16px 0; } .chip { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 14px; font-weight: 600; } .chip.green { background: var(--green-tint); color: var(--green-dark); border: 1px solid #B9D8C3; } .chip.blue { background: var(--blue-tint); color: var(--blue-ink); border: 1px solid #C4D3E6; } .chip.amber { background: var(--amber-tint); color: var(--amber-dark); border: 1px solid #F2BE98; } .chip.red { background: var(--red-tint-card); color: var(--red-dark); border: 1px solid #DEB2AB; } .chip.grey { background: var(--grey-tint-card); color: var(--grey-dark); border: 1px solid var(--grey-edge); } /* 2.17's fix-up: a student's name and email, each changed from the student's page */ .correct.field { gap: 8px; } .correct.field button { align-self: flex-start; } /* 2.18's fix-up: the Governor's pop-up — its two buttons side by side, like a partner's card's (checklist 12) */ .help-card > .buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px 16px 4px; } .help-card > .buttons form { display: contents; } .help-card > .buttons button, .help-card > .buttons a.button { width: 100%; justify-content: center; min-height: 48px; } /* The author's card: the suggested rows, a name and its tenths */ .split-rows { margin: 0; display: flex; flex-direction: column; gap: 8px; } .split-rows > div { display: flex; flex-direction: column; gap: 2px; font-size: 15px; } .split-rows dt { font-weight: 600; } .split-rows dd { margin: 0; } /* Juli's second look at 2.18 (20 Oct 2026; the mock-up notes' checklist 23). (a) A number with − / + shows the number alone: no browser arrows in its box, on every page. The field stays type=number, so a phone opens its number keyboard. */ input[type="number"] { appearance: textfield; -moz-appearance: textfield; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } /* (b) A button's words are centred, across and down, also on two lines. A button that looks like a link, and a This week card that is itself a button, keep their own layout. */ button, a.button { display: inline-flex; align-items: center; justify-content: center; text-align: center; line-height: 1.25; padding-top: 6px; padding-bottom: 6px; } button.link { display: inline; text-align: left; line-height: inherit; padding: 0; } button.line { justify-content: flex-start; text-align: left; line-height: 1.5; padding: 12px 14px 12px 12px; } /* (c) The author's card for a suggested split: a small table, a row per person (week 1's 4d, version 62) — the partner's split bold, the author's grey. */ .split-table { width: 100%; border-collapse: separate; border-spacing: 0; background: #F7F9F7; border: 1px solid #E3E8E4; border-radius: 8px; font-size: 14px; line-height: 1.4; color: var(--ink); } .split-table caption, .split-table .read-aloud { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .split-table thead th { padding: 10px 0 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--quiet); text-align: right; vertical-align: bottom; border-bottom: 1px solid #E3E8E4; } .split-table thead th:first-child { text-align: left; padding-left: 12px; } .split-table th[scope="row"] { padding: 6px 8px 0 12px; text-align: left; font-weight: 500; } .split-table td { padding: 6px 0 0 8px; text-align: right; font-family: var(--mono); white-space: nowrap; } .split-table td.theirs { font-weight: 600; } .split-table td.ours { color: var(--quiet); } .split-table th:last-child, .split-table td:last-child { padding-right: 12px; } .split-table tbody tr:last-child > * { padding-bottom: 10px; } /* The Wallet tab and Send bills (step 2.19; week 1's 1a, 1b, 7b, 9; the way in's 8). The bills in the old notes' colours: µ yellow with a blue µ sign; a polluted bill a deeper shade with a dot; a bill in a cook's care dashed. */ .bills { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px 6px; } .bill { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 3px; height: 19px; border-radius: 3px; background: #F2C230; border: 1px solid #A87B00; color: var(--blue); font-family: var(--mono); font-size: 12px; font-weight: 600; line-height: 1; } .bill.polluted { background: #D9A81A; border-color: #5A4300; color: var(--blue-dark); } /* 4.5:1 on the darker gold (a bundle of ten polluted bills, 4.10's browser check) */ .bill .pdot { width: 5px; height: 5px; border-radius: 50%; background: #3A2B00; } .bill.care { border-style: dashed; } .bill.faded { opacity: 0.25; } .bill.rotted { background: transparent; border: 1.5px dotted #8A959F; min-width: 19px; } /* a bill that rotted (week 3's 1d, 1e) */ .sb-heading { font-size: 15px; font-weight: 600; margin: 0 0 6px; } /* What you send, sentence case as drawn (1e) */ .earn-card { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--edge); border-radius: 12px; background: var(--card); } .earn-card .pill { padding: 6px 10px; border-radius: 999px; background: var(--blue-tint); color: var(--blue-ink); font-weight: 600; } /* 6 px kept: at 4 px the words sit 3 px from the pill's top edge on GitHub's Linux (run 41852118548), under the 4 px the boxes need (4.25 (0); 4.26 (14), the reviewer's change 10) */ .care-due { font-weight: 600; color: var(--ink); } /* the care sentence, dark (README v34, S-28) */ .bill.bundle { height: 22px; box-shadow: 0 2px 0 #A87B00, 0 4px 0 #F2C230, 0 4px 0 1px #A87B00; margin-bottom: 4px; } .bill.bundle.polluted { box-shadow: 0 2px 0 #5A4300, 0 4px 0 #D9A81A, 0 4px 0 1px #5A4300; } .legend { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--quiet); } .legend .bill { width: 40px; } .no-bills { padding: 36px 16px; border: 1px dashed var(--grey-edge); border-radius: 12px; background: var(--card); color: var(--quiet); text-align: center; } .owing { display: flex; flex-direction: column; gap: 4px; color: var(--red-ink); font-weight: 600; } a.button.wide-button, button.wide-button { width: 100%; min-height: 48px; } .strip-form { display: block; } .recent { list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--edge); border-radius: 12px; } .recent li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--edge); } .recent li:last-child { border-bottom: 0; } .recent .text { display: flex; flex-direction: column; min-width: 0; } .recent .title { font-size: 16px; } .recent .under { font-size: 14px; color: var(--quiet); } .recent .amount { flex: none; display: flex; flex-direction: column; align-items: flex-end; text-align: right; } .recent .amount .mono { font-size: 16px; white-space: nowrap; } .recent-empty { padding: 16px; border: 1px solid var(--edge); border-radius: 12px; background: var(--card); color: var(--quiet); } .earlier { display: flex; flex-direction: column; gap: 10px; } .earlier summary { list-style: none; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; border: 1px solid var(--grey-edge); border-radius: 12px; background: var(--card); color: var(--ink); font-weight: 600; cursor: pointer; } .earlier summary::-webkit-details-marker { display: none; } .earlier h3 { margin: 12px 0 6px; } .notice[role=status] { font-size: 15px; } .page-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .page-title > .chip { flex: none; white-space: nowrap; align-self: center; } /* a flag in a title stays on one line; the title wraps (week 2's 3) */ /* At 200% text (WCAG 1.4.4, 1.4.10) a title, its flag and its ? can no longer share one row: the flag and the ? drop under the title rather than off the screen (found by the class vote's look at 3.12, fix 5). At every phone width at 100% the row is as before. */ .page-title { flex-wrap: wrap; } .page-title > div:first-child { flex: 1 1 6em; min-width: 0; } .send-form { display: flex; flex-direction: column; gap: 18px; } .send-form select { width: 100%; min-height: 48px; padding: 0 12px; border: 1px solid var(--field-edge); border-radius: 8px; background: var(--card); color: var(--ink); font: inherit; } .send-form .field > label, .send-form legend { font-size: 16px; font-weight: 600; } .send-form fieldset { border: 0; margin: 0; padding: 0; } .count-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--edge); border-radius: 12px; background: var(--card); } .count-row label { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; } .count-row label .bill { width: 36px; } .count-row.one { justify-content: center; } .count-row.check label { min-height: 44px; cursor: pointer; } /* 4.17: Add cover for kept cooked bills */ .count-row.check input[type=checkbox] { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--blue); } .stepper.big { margin-left: 0; gap: 10px; } .count-row.one .stepper.big { width: 100%; justify-content: space-between; } .stepper.big input { width: 64px; min-height: 48px; border: 0; font-size: 22px; font-weight: 600; } .stepper.big .step { width: 48px; height: 48px; border-color: var(--grey-edge); color: var(--ink); } .why-foot { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; } .send-note { padding: 10px 12px; border-radius: 8px; background: var(--grey-tint-card); font-size: 15px; } .sees { font-size: 15px; } .send-form button.primary { width: 100%; padding-left: 16px; padding-right: 16px; } .send-form button.primary[disabled], .send-form button.primary[aria-disabled="true"] { border-color: var(--grey-edge); background: var(--grey-tint); color: var(--quiet); cursor: not-allowed; } .split-card { display: flex; flex-direction: column; gap: 10px; } .split-card .quiet { font-size: 14px; } /* The Marketplace (step 2.20; week 1's 0g, 2, 3a–3c; week 2's 2b; week 3's 7; the three-communities canvas's 1b). Each community's colour is ground and outline only (Juli, 19 Oct 2026): Old Town sandstone, New Town violet, Leith sea; the flags keep their own colours. */ .c-old_town { --c-ground: #F3ECDF; --c-edge: #CBB58C; --c-ink: #5A3F14; } .c-new_town { --c-ground: #EDE9F7; --c-edge: #B4A8D8; --c-ink: #3F3275; } .c-leith { --c-ground: #E0EFF0; --c-edge: #97C3C7; --c-ink: #16545B; } .read-aloud { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .terrace { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid #C9D3CB; border-radius: 14px; background: #DDE4DD; } .tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .tiles.bank, .tiles.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tiles.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tiles > li { display: flex; min-width: 0; } .tile { flex: 1; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; min-height: 96px; border: 1px solid var(--edge); border-radius: 10px; background: var(--card); color: var(--ink); text-decoration: none; overflow: hidden; } .tile[class*="c-"] { border-color: var(--c-edge); } a.tile:hover .tile-name { text-decoration: underline; } .tile-top { display: flex; flex-direction: column; gap: 2px; padding: 10px 10px 8px; } .tile-top .sign { color: var(--blue); margin-bottom: 4px; } .tile[class*="c-"] .tile-top .sign, .tile-under { color: var(--c-ink); } .tile-name { font-size: 15px; font-weight: 600; line-height: 1.3; } .tile-under, .tile-line { font-size: 14px; line-height: 1.3; } .tile-line { color: var(--quiet); } .tile-flag { display: flex; align-items: center; gap: 6px; padding: 6px 10px; font-size: 14px; font-weight: 600; line-height: 1.25; } .tile-flag .flag-icon { width: 16px; height: 16px; flex: none; } .tile-flag.blue { background: var(--blue-tint); color: var(--blue-ink); } .tile-flag.green { background: var(--green-tint); color: var(--green-dark); } .tile-flag.amber { background: var(--amber-tint); color: var(--amber-dark); } .tile-flag.red { background: var(--red-tint-card); color: var(--red-dark); } .tile-flag.grey { background: var(--grey-tint-card); color: var(--grey-dark); } .plot { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 96px; padding: 10px; border: 1px dashed var(--grey-field, #8A949C); border-radius: 10px; color: var(--quiet); font-size: 14px; text-align: center; } .square.columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: stretch; } .square.columns .plot { font-size: 12px; padding: 10px 4px; } /* a week and its day on one line in the two-community square's plot (4.23; checklist 33: "a smaller size, as the Bank's tiles were given at 2.20") */ .side { display: flex; flex-direction: column; gap: 8px; padding: 8px; border: 1px solid var(--c-edge, #9FC4A9); border-radius: 12px; background: var(--c-ground, #D3E6D7); min-width: 0; } .side.yours, .district.yours { border: 2px solid var(--c-ink); } .side .tiles { grid-template-columns: 1fr; } .side-head { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; background: var(--c-ground); color: var(--c-ink); text-align: center; } .side-head h2, .place-name { font-size: 15px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } /* One sign size and one type for every place: the Bank and the Town Square as the communities (Juli's look at 3.4, fix 3) */ .place-head { display: flex; align-items: center; gap: 10px; color: var(--ink); } .place-head .sign { flex: none; } .place-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; } /* one row wherever it fits; in a column too narrow for both (the laptop's two communities) the sign sits centred above the name, as the communities' own heads do there */ .square-top { align-items: center; text-align: center; } .square-top .place-row { align-self: stretch; } .tile-top .place-row .sign { margin-bottom: 0; flex: none; } .side .square-tile .place-name { font-size: 15px; } .your-side { display: inline-block; padding: 3px 8px; border-radius: 999px; background: var(--c-ink); color: #FFFFFF; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .side-count { font-size: 14px; color: var(--c-ink); } .theirs { padding: 6px; border-radius: 8px; background: var(--grey-tint); color: var(--quiet); font-size: 14px; text-align: center; } .messages { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 6px; border: 1px solid var(--blue); border-radius: 10px; background: var(--card); color: var(--blue); font-size: 15px; font-weight: 600; text-decoration: none; } .square-column { --c-ground: #D3E6D7; --c-edge: #9FC4A9; } .square-column > .tile, .square-band > .tile { flex: none; border-color: #9FC4A9; background: #E6F1E8; } .square-column .sign, .square-band .sign { color: #1E5E33; } .square-band { display: flex; flex-direction: column; } /* scrolls with the square (Juli's look at 3.12, fix 9: "Don't make the Town Square fixed on the screen"); the communities' heads too — nothing on the Marketplace stays but the tabs */ .district { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--c-edge); border-radius: 14px; background: var(--c-ground); } .district .side-head { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 4px 10px; } /* at 200% text YOUR COMMUNITY drops under the name (fix 10's check) */ .district-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; } .others { display: flex; flex-direction: column; gap: 10px; } /* The other two communities side by side under yours, half the width each (Juli's look at 3.12, fix 10): each with its heading centred above its tiles, one tile to a row, its own dotted plot. */ .others-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: stretch; } .district.half { min-width: 0; padding: 8px; gap: 8px; } .district.half .tiles { grid-template-columns: 1fr; } .district.half .side-head { flex-direction: column; justify-content: center; align-items: center; gap: 2px; text-align: center; } /* At large text, or on a narrow phone, the sides stack in the bible's order, each under its heading (S-44 (3); WCAG 1.4.10): the columns need 22em. */ @media (max-width: 22em) { .square.columns { grid-template-columns: 1fr; } .tiles.bank, .tiles.three, .tiles.two { grid-template-columns: 1fr; } .others-pair { grid-template-columns: 1fr; } /* yours, then the other two in the fixed order (fix 10) */ } /* A stall's page, the Tax Booth, a Fund's page. */ .stall-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--edge); border-radius: 12px; } .stall-terms { display: flex; gap: 12px; align-items: center; padding: 14px; } .stall-terms > span:last-child { display: flex; flex-direction: column; } .stall-sign { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--edge); border-radius: 10px; background: #F7F9F7; color: var(--blue); } .terms { font-size: 17px; font-weight: 600; line-height: 1.35; } .stall-more, .stall-condition { padding: 10px 14px; border-top: 1px solid var(--edge); font-size: 15px; } .stall-condition { color: var(--quiet); } .strip { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 12px; font-size: 16px; } .strip.green { background: #E2F0E6; } .strip.blue { background: #E4ECF6; } .strip.amber { background: #FCD9BD; } .strip.red { background: #F1CCC7; } .strip.grey { background: var(--grey-tint-card); } .strip-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .strip .chip { display: inline-flex; align-items: center; gap: 6px; background: #FFFFFF; } .strip .chip .flag-icon { width: 16px; height: 16px; } .strip.red .small-caps { color: var(--red-dark); } .strip.green .small-caps { color: var(--green-dark); } .strip.blue .small-caps { color: var(--blue-ink); } .strip.amber .small-caps { color: var(--amber-dark); } .red-banner { display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid #DEB2AB; border-radius: 12px; background: #F1CCC7; color: var(--red-dark); } .red-title { display: flex; align-items: center; gap: 8px; font-weight: 600; } .red-banner p:last-child { color: var(--ink); font-size: 15px; } .routes, .rows { list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--edge); border-radius: 12px; } .routes li { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-bottom: 1px solid var(--edge); } .route-title { font-size: 17px; font-weight: 600; } .rows li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--edge); } .routes li:last-child, .rows li:last-child { border-bottom: 0; } .rows li.sum { display: block; color: var(--quiet); font-size: 14px; } .rows li.plain { display: block; } .box { padding: 14px; background: var(--card); border: 1px solid var(--edge); border-radius: 12px; } .fund-now { gap: 6px; padding: 14px; } .fund-n { font-size: 40px; font-weight: 600; line-height: 1.1; } .recent li.quiet { display: block; } .card-part { padding: 12px 16px 0; } .help-card > h3 + p { padding-top: 4px; } .card-foot { padding: 16px 16px 4px; } .card-foot form { display: block; } .card-foot button, .card-foot a.button { width: 100%; min-height: 48px; } .confirm .buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px 16px 4px; } .confirm .buttons form { display: contents; } .confirm .buttons button, .confirm .buttons a.button { width: 100%; min-height: 48px; } /* The three columns are narrow on a phone: a word of the app's own wraps whole, never with a hyphen and never cut (the mock-up notes' checklist 33; Juli, 22 Oct 2026, at the look at 2.24: "'Messages' for OT got split over two lines"). Where a word would not fit, the layout makes the room — a smaller size, or the line laid out under. */ .side { padding: 6px; gap: 6px; } .side .tile-top, .tiles.bank .tile-top, .tiles.three .tile-top, .district.half .tile-top { padding: 8px 8px 6px; } .side .tile-name, .tiles.bank .tile-name, .tiles.three .tile-name, .district.half .tile-name { font-size: 14px; } /* the Bank's tiles too: "Community" fits whole wherever the three sit in a row (2.20, small thing 4) */ .side .tile-flag, .tiles.three .tile-flag, .district.half .tile-flag { padding: 6px 8px; flex-wrap: wrap; row-gap: 2px; } /* a narrow tile: the icon above "By W2 Friday" when both do not fit on one line (2.20 (b)) */ .side .messages { flex-wrap: wrap; gap: 2px 4px; padding: 6px 4px; font-size: 14px; } /* the icon above "Messages" when both do not fit on one line, as a narrow tile's flag (2.20 (b)) */ .side .messages .sign { flex: none; } /* The Messages tile's dot (4.25 (3)): the thread list's own blue dot, in the tile's top right corner, so "Messages" keeps its room and never splits (checklist 33). */ .messages { position: relative; } .messages .udot.on { position: absolute; top: 5px; right: 5px; } /* A red tile stands out on a community's colour (Juli, 20 Oct 2026, at the look at 2.20's fixes; the mock-up notes' checklist 26): a thick dark-red border round the whole tile — never the flag's, a banner's or a strip's, which keep their drawn look. The red band (#94000A from 21 Oct 2026, darker by amber's step) is 7.1:1 or more against every community's colour, the Square's green, the Bank's terrace and the page's ground (WCAG 1.4.11 asks 3:1). Placed after the tiles' own borders, which it replaces. A test measures it (screens/tests/test_accessibility.py). */ .tile.red { border: 3px solid var(--red-band); } .tile.red > .tile-top { margin: 0 -2px; } /* its words keep the room of any tile: the border's extra 2 px is not taken from them */ /* On a narrow phone (up to 24em) the tiles' sides are 6 px, so that every word on a tile fits whole wherever the three sit in a row, down to 353 px: never a word cut (2.20, small thing 4; checklist 33; tested). */ @media (max-width: 24em) { .side .tile-top, .tiles.bank .tile-top, .tiles.three .tile-top, .district.half .tile-top { padding-left: 6px; padding-right: 6px; } /* The empty plot's week and day on one line where a phone draws the fonts a little wider (GitHub's Linux, run 41795749603; 4.23's order, its second step): the sides' padding at the floor, 4 px, and the columns' gap 4 px. */ .square.columns { gap: 4px; } .square.columns .side { padding: 4px; } } /* A few facts, one a row: a label on the left, the number on the right (point 2). */ table.facts { width: 100%; border-collapse: collapse; font-size: 15px; } table.facts th { padding: 6px 14px; text-align: left; font-weight: 400; color: var(--quiet); } table.facts td .under { display: block; font-size: 13px; color: var(--quiet); } /* the polluted count under the number (3.12) */ table.facts td .under { white-space: normal; } /* a row's sentence under its number wraps, never past the phone (4.13: the owed row; 4.12's lent row) */ table.facts td { padding: 6px 14px; text-align: right; color: var(--ink); white-space: nowrap; } table.facts tr + tr th, table.facts tr + tr td { border-top: 1px solid var(--edge); } /* Your policy's cover: a long value wraps inside the white box, between words (Juli's look at 2.22, item 5). */ table.facts.cover th { white-space: nowrap; vertical-align: top; } table.facts.cover td { white-space: normal; } .stall-card table.facts { border-top: 1px solid var(--edge); } table.facts.sum { margin-top: 8px; background: var(--card); border: 1px solid var(--edge); border-radius: 12px; } table.facts.sum caption { padding: 0 2px 6px; text-align: left; color: var(--quiet); font-size: 14px; } table.facts.sum { border-collapse: separate; border-spacing: 0; } /* One page, two widths (step 2.20 (b); Layout; week 1's 10 and 10b). Every student page carries the three columns; a phone shows the current tab, or the page one step in, and the tabs at the bottom. A laptop starts where three phone-width columns fit side by side, 75em (1200 px at the usual text size; at large text a laptop gets the phone's layout, WCAG 1.4.10): the bar across the top, This week · Wallet · Marketplace, each with its title and its ?, and a page one step in as the phone's screen in a pop-up, 24 px from the window's top and bottom; only the pop-up scrolls, its title row and × stay in place. */ .columns, .col, .col-head, .step-in, .step-body, #wl-live, #mk-live { display: flex; flex-direction: column; gap: 16px; min-width: 0; } /* The students' header reaches across its column: a column's items aligned by their baseline shrink to their contents in Chrome — the ? against the name, sµ and iµ against the total, Send bills cramped (Juli's look at 4.1–4.5, A2). */ .student .col-head { align-items: stretch; } @media (max-width: 74.99em) { .laptop-only { display: none !important; } .has-step-in .columns { display: none; } } @media (min-width: 75em) { .phone-only { display: none !important; } .tabs { display: none; } .lap-bar { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 14px 40px; background: var(--card); border-bottom: 1px solid var(--edge); } .lap-title { display: flex; align-items: baseline; gap: 20px; } .lap-name { font-size: 22px; font-weight: 600; } .lap-who { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.3; } .lap-student { font-size: 18px; font-weight: 600; } .lap-bar h1.lap-student { margin: 0; line-height: 1.3; } /* the laptop's h1 is the student's name, as the phone's (4.23) */ .phone { max-width: 1280px; padding: 32px 40px 48px; } .columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; grid-template-areas: "twt wal mkt" "head wal mkt" "tw wal mkt"; column-gap: 40px; row-gap: 16px; align-items: start; } .col-tw-title { grid-area: twt; } .col-head { grid-area: head; } .col-tw { grid-area: tw; } .col-wallet { grid-area: wal; } .col-market { grid-area: mkt; } .col-title { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .col-title h2 { font-size: 26px; font-weight: 600; line-height: 1.2; } /* The pop-up: the dim covers the bar and the columns and everything in them (the mock-up notes: no pale patch behind 10b's pop-up). */ .student.has-step-in { height: 100vh; overflow: hidden; } /* the page behind is no taller than the window: it cannot scroll */ .step-dim { position: fixed; inset: 0; z-index: 50; background: rgba(22, 33, 43, 0.5); } .step-in { position: fixed; z-index: 60; top: 24px; bottom: 24px; left: 50%; transform: translateX(-50%); width: min(430px, calc(100vw - 48px)); gap: 0; background: var(--ground); border-radius: 16px; overflow: hidden; box-shadow: 0 12px 40px rgba(22, 33, 43, 0.35); } .step-body { flex: 1 1 auto; overflow-y: auto; padding: 0 20px 24px; scroll-padding-top: 72px; } /* clear of its sticky title (F2, change 22) */ .step-body > .back { display: none; } .step-body > .page-title, .step-body > h1.place-title { position: sticky; top: 0; z-index: 2; margin: 0 -20px; padding: 18px 68px 12px 20px; background: var(--ground); border-bottom: 1px solid var(--edge); } .step-close { position: absolute; top: 14px; right: 12px; z-index: 3; border-radius: 50%; border: 1px solid var(--grey-edge); background: var(--card); } .step-body > .page-title a.help { margin-right: -4px; } } /* Open a stall, the pitches and the vote (BUILD-PLAN 2.21; week 1's 4, 4a, 4c, 5). The form's parts are numbered headings; the kind and the terms are big buttons, the chosen one pressed in the pale blue of 4; the founders' block and the terms sit on white cards; the tenths' rows are 2.18's split card's, the author's row included. A pitch is a white card; the vote's chosen pitch is pale blue with the blue edge and a tick (5). */ .pitch-form { display: flex; flex-direction: column; gap: 16px; } .pitch-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; } .part { display: flex; flex-direction: column; gap: 8px; } .part-title { padding: 0; margin-bottom: 8px; font-size: 17px; font-weight: 600; color: var(--ink); } .part-title label { font: inherit; } .kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .kind-choice, .option span { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 8px; border: 1px solid var(--field-edge); border-radius: 10px; background: var(--card); color: var(--ink); font: inherit; font-size: 17px; font-weight: 600; text-align: center; cursor: pointer; } .kind-choice[aria-pressed=true], .option input:checked + span { border: 2px solid var(--blue); background: #E4ECF6; color: var(--blue-ink); } .kinds.with-short .kind-choice { flex-direction: column; gap: 2px; padding: 8px; } /* the subtitle under the name (week 2's 5; 3.12) */ .kind-short { font-size: 13px; font-weight: 400; color: var(--quiet); line-height: 1.3; } .kind-choice[aria-pressed=true] .kind-short { color: var(--blue-ink); } .founders { display: flex; flex-direction: column; gap: 8px; } .kind-how { margin: 0; font-size: 17px; font-weight: 600; color: var(--ink); scroll-margin-top: 12px; } /* "How a Bureau de Change works" over the kind's description (6.4g (B1)) */ .earns { margin: 0; } .earns > div { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--edge); } .earns dt { font-weight: 600; } .earns dd { margin: 0; } .founders-part { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; } .founders-part + .founders-part { border-top: 1px solid var(--edge); } .terms-card { padding: 14px; gap: 12px; } .terms-set { font-weight: 600; } .choose { display: flex; flex-direction: column; gap: 8px; } .choose legend { padding: 0; margin-bottom: 6px; font-size: 15px; } .options { display: grid; gap: 8px; } .options.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .options.six { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; } @media (max-width: 22em) { .options.six { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* six counts in two rows of three where the square stacks too, each count with room inside its box (4.23) */ .options.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* A way that cannot be taken now (4.10: Pool to profit outside Market Hours): grey, its short line under it. */ .option input[disabled] + span { background: var(--grey-tint); border: 1px dashed var(--grey-edge); color: var(--quiet); cursor: not-allowed; } .option { position: relative; } .option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .option span { min-height: 48px; padding: 0 2px; font-size: 16px; font-weight: 400; white-space: nowrap; } .options.six .option span { font-size: 15px; } /* six amounts in a row keep 4 px inside where the words draw a little wider (4.25 (0)) */ .option input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; } /* A Betting Shop's part 2 (4.19; week 3's OpenStall): the questions as radios with their words wrapping, the answers' steppers, the chips, the ticket's row with its counting line under its label. */ /* A stall's page from W3 Monday (4.19; StallInsurance): WHAT THE STALL HOLDS, ITS 10 SHARES and its small chart (4.11's). */ .hold-label { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .hold-label .under { font-size: 13px; color: var(--quiet); } .split { display: flex; flex-wrap: wrap; gap: 0 6px; } .stall-holds > p, .shares-card > p { margin: 8px 14px; } .for-sale li form, .for-sale li .button, .for-sale li button { margin-top: 6px; align-self: flex-start; } .cb-group { margin: 6px 0 -6px; } /* THE BANK BUYS · NEW THIS WEEK and THE BANK SELLS, over their blocks (week 4's 3; 6.4b) */ button.primary.grey-button { border-color: var(--grey-edge); background: var(--grey-tint); color: var(--quiet); cursor: not-allowed; } /* a Market-Hours-only button outside them (6.4b) */ button.secondary.grey-button, button.secondary[aria-disabled="true"] { border-color: var(--grey-edge); background: var(--grey-tint); color: var(--quiet); cursor: not-allowed; } .price-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; } .st-chart { flex: none; } .st-chart .st-base { stroke: var(--edge); stroke-width: 1; fill: none; } .st-chart .st-line { stroke: var(--blue); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; } .st-chart .st-dot { fill: var(--blue); } .bet-card { display: flex; flex-direction: column; } .bet-questions legend { color: var(--quiet); } .bet-question span { justify-content: flex-start; padding: 8px 12px; white-space: normal; text-align: left; line-height: 1.35; font-size: 15px; } .bet-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } /* The pitch form's answers only (a div): a customer's list of answers is a white box of rows, never given this top space too (Juli's look at 4.23: too padded) */ div.bet-answers { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid var(--edge); } div.bet-answers h3 { margin: 0; color: var(--quiet); } .bet-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; } .bet-row > label, .bet-ticket-words label { font-weight: 500; } .bet-row input { width: 76px; } .bet-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; } .chip-answer { padding: 6px 10px; border-radius: 6px; background: #E4ECF6; color: var(--blue-ink); font-family: var(--mono); font-size: 14px; font-weight: 500; white-space: nowrap; } .bet-ticket { padding-top: 12px; border-top: 1px solid var(--edge); } .bet-ticket-words { display: flex; flex-direction: column; gap: 1px; flex: 1 1 10em; min-width: 0; } .tenth-rows { padding: 0; } .tenth-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 14px; border-bottom: 1px solid var(--edge); } .tenth-row .who { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 6em; } .tenth-row .stepper { gap: 4px; } .tenth-row .stepper input { width: 40px; } /* the name and its − 6 tenths + on one line, as 4 draws it, down to 360 px */ .tenth-row .who label { font-weight: 400; font-size: 16px; } .tenth-row .answer { font-size: 14px; font-weight: 600; color: var(--green-dark); } .tenth-row .answer.asked { color: var(--amber-dark); } .tenth-row .small { font-size: 14px; } .tenth-row .remove { flex: 0 0 auto; font-size: 15px; } .ask-row { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 8px; } /* "A partner is asked when you send your pitch." inside part 3's white box (Juli's look at 3.1, item 9). */ .ask-when { padding: 0 14px 12px; } .ask-row label { color: var(--blue); font-weight: 600; } .ask-pick { display: flex; gap: 8px; } .ask-pick select { flex: 1; min-height: 44px; padding: 0 10px; border: 1px solid var(--field-edge); border-radius: 8px; background: var(--card); color: var(--ink); font: inherit; } .ask-pick button.secondary { align-self: auto; } .pitch-form textarea { width: 100%; min-height: 96px; padding: 12px 14px; border: 1px solid var(--field-edge); border-radius: 10px; background: var(--card); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.5; resize: vertical; } .pitch-form .count { font-size: 14px; text-align: right; } .pitch-form button.send-pitch { width: 100%; min-height: 52px; font-size: 18px; } .pitch-form button.send-pitch[disabled], .pitch-form button.send-pitch[aria-disabled="true"] { border-color: var(--grey-edge); background: var(--grey-tint); color: var(--quiet); cursor: not-allowed; } .every-part { color: var(--red-dark); font-weight: 600; font-size: 15px; } .one-pitch { font-size: 15px; } /* Juli's look at 3.12, fix 3 (24 Oct 2026: "The questions and answers need to be more clearly delineated"): on every form of numbered questions — Open a stall and Change your pitch, Send bills, Ask to cook, the Pot's form — each question and its answer read as one pair, with a clear gap and a line before the next question. The line is drawn on the question itself, never on its fieldset (whose legend sits on its top edge — Juli's look at 3.3, fix 5), so it lies wholly above the question's words; a note between two parts (a second stall of a kind) stays above it. */ .pitch-form { gap: 20px; } .pitch-form > .part ~ .part > .part-title, .send-form > .field ~ .field > legend, .send-form > .field ~ .field > label:first-child { display: block; width: 100%; box-sizing: border-box; padding-top: 20px; border-top: 1px solid var(--edge); } .pitch-form > .one-pitch { padding-top: 20px; border-top: 1px solid var(--edge); } /* part 6's answer closed off from the button */ /* One text size in every answer box (fix 3 (ii)): part 6, one line, at the size, type and width of parts 4 and 5. */ .pitch-form input[type=text] { width: 100%; box-sizing: border-box; min-height: 48px; padding: 12px 14px; border: 1px solid var(--field-edge); border-radius: 10px; background: var(--card); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.5; } /* WHAT ITS FOUNDERS EARN inside its white box, with its answer (fix 3 (iii)): the earnings take the part's margins once, with no line of their own — the card's line marks the next part. */ .founders-part .earns > div { padding: 4px 0 0; border-bottom: 0; } /* Every part's heading inside its white box (fix 3; the rule of 23 Oct): YOU ARE PUTTING IN, YOU ARE SAVING as the box's first row; WHAT YOU ARE ASKING with its sentences in one white box, a line between each (week 2's 1c). */ .saving-box > h2, .saving-box > h3 { margin: 0; } /* its heading 12 px from the top, as every box's first words (Juli's look at 4.23: too padded) */ .card-box { gap: 0; background: var(--card); border: 1px solid var(--edge); border-radius: 12px; } .card-box > * { margin: 0; padding: 12px 14px; } .card-box > * + * { border-top: 1px solid var(--edge); } .link-card { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--edge); border-radius: 12px; background: var(--card); color: var(--ink); font-weight: 600; text-decoration: none; } .link-card:hover { text-decoration: underline; } .pitch-card { display: flex; flex-direction: column; border: 1px solid var(--edge); border-radius: 12px; background: var(--card); scroll-margin-top: 80px; } .pitch-card.yours { background: #F7F9F7; } .pitch-body { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; } .pitch-kind { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; } .pitch-terms { font-size: 16px; } .pitch-who { font-size: 15px; } /* A pitch's answers, each under its question, pair by pair (Juli's look at 3.12's ten fixes, 25 Oct 2026, fix 3: "it's clear that answers belong to questions"): the question in ink, bold, the answer's size; the answer directly under it; between one pair and the next — and between the pitch's terms and its first pair — the forms' line and gap (fix 3 of 24 Oct: 20 px, a line, 20 px). One look on every card: the pitches (4c), the author's own, the vote's (5), inside a vote's choice too, where they are spans displayed as blocks. On the vote the who comes after the answers: the same line closes them. */ .qa { display: block; margin: 8px 0 0; padding: 16px 0 0; border-top: 1px solid var(--edge); } .qa-pair { display: flex; flex-direction: column; gap: 2px; } .qa-pair + .qa-pair { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--edge); } .qa-q { display: block; font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--ink); } .qa-a { display: block; margin: 0; font-size: 16px; font-weight: 400; color: var(--ink); overflow-wrap: break-word; } .qa + .pitch-who { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--edge); } .vote-choice .pitch-body { min-width: 0; } /* a long word in an answer wraps inside the button, never widening it */ /* On the pressed choice's pale blue the lines stay visible (the plain edge is about 1.2:1 there). */ .vote-choice[aria-pressed=true] .qa, .vote-choice[aria-pressed=true] .qa-pair + .qa-pair, .vote-choice[aria-pressed=true] .qa + .pitch-who { border-top-color: #7F96B4; } .take-backs { list-style: none; margin: 0; padding: 0 16px 12px; display: flex; flex-direction: column; gap: 8px; } .take-backs li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; font-size: 15px; } .take-backs button.secondary { align-self: auto; } .pitch-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 16px 14px; border-top: 1px solid var(--edge); } .pitch-buttons form { display: contents; } .pitch-buttons a.button, .pitch-buttons button { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: center; } button.plain-button { border-radius: 8px; border: 1px solid var(--field-edge); background: var(--card); color: var(--ink); font-size: 15px; font-weight: 600; cursor: pointer; } .vote-card { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--edge); border-radius: 12px; background: var(--card); color: var(--ink); text-decoration: none; } .vote-card .text { display: flex; flex-direction: column; } .vote-card .title { font-weight: 600; font-size: 17px; } .vote-card .chip { display: inline-flex; align-items: center; gap: 6px; flex: none; } .vote-card .chip .flag-icon { width: 16px; height: 16px; } .vote-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .vote-head .chip { display: inline-flex; align-items: center; gap: 6px; } .vote-head .chip .flag-icon { width: 16px; height: 16px; } .vote-line { font-weight: 600; } .vote-form { display: block; } .vote-choice { display: flex; align-items: center; gap: 12px; width: 100%; padding: 0 16px 0 0; border: 1px solid var(--edge); border-radius: 12px; background: var(--card); color: var(--ink); font: inherit; text-align: left; cursor: pointer; } .vote-choice .pitch-body { flex: 1; } .vote-choice .pitch-kind { display: block; } .vote-choice[aria-pressed=true] { border: 2px solid var(--blue); background: #E4ECF6; } .vote-choice .tick { flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 2px solid var(--field-edge); border-radius: 50%; } .vote-choice[aria-pressed=true] .tick { border-color: var(--blue); background: var(--blue); color: #FFFFFF; } /* *Read the pitch* (Juli's look at the five fixes and 3.13, 25 Oct 2026, fix 3): in a list of two or more pitches, parts 5 and 6 behind the browser's own fold, under the founders; the why stays in view. On a card, the fold is its foot; on the open vote it hangs under the choice, outside its button, the two drawn as one card. */ .read-pitch { margin-top: 12px; border-top: 1px solid var(--edge); } .read-pitch summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; list-style: none; cursor: pointer; color: var(--green-dark); font-size: 16px; font-weight: 600; } .read-pitch summary::-webkit-details-marker { display: none; } .read-pitch summary .chevron { flex: none; transition: transform 0.15s; } .read-pitch summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .read-pitch[open] summary .chevron { transform: rotate(180deg); } .read-pitch .qa { margin: 0 0 4px; } .vote-form > .read-pitch { margin: 0; padding: 0 16px 8px; border: 1px solid var(--edge); border-top: 0; border-radius: 0 0 12px 12px; background: var(--card); } .vote-form > .read-pitch[open] { padding-bottom: 14px; } .vote-form:has(> .read-pitch) > .vote-choice { border-radius: 12px 12px 0 0; } .your-vote { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--edge); border-radius: 12px; background: var(--card); } .your-vote .title { font-weight: 600; font-size: 17px; } .pitch-votes { font-weight: 600; } /* A closed vote's bars (4.9b E2 (d)), as The room's and the projector's: hidden from a screen reader, the count beside each says it; the chosen pitch's in its green. */ .vote-bar { height: 12px; margin-top: 6px; border-radius: 6px; background: var(--grey-tint); overflow: hidden; } .vote-bar span { display: block; height: 12px; border-radius: 6px; background: var(--grey-band); } .pitch-card.won .vote-bar span { background: var(--green-band); } /* ONLY NOW, IN MARKET HOURS on a student's pitches and vote (4.9b E2 (b)): the projector's card, on each phone. */ .only-now { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--edge); border-left: 12px solid var(--blue-band); border-radius: 12px; background: var(--card); } .only-now h2 { margin: 0; color: var(--blue-ink); } .only-now p { margin: 0; } .only-now ul { margin: 4px 0 0; padding-left: 20px; font-weight: 600; } /* The class vote (3.11; week 2's 3) */ .tie-banner { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 12px 12px; border: 1px solid var(--edge); border-left: 12px solid var(--blue-band); border-radius: 12px; background: var(--blue-tint); } .tie-banner .title { font-weight: 600; color: var(--blue-ink); } .cv-question { font-size: 20px; font-weight: 600; line-height: 1.3; } .cv-question-more { font-size: 15px; line-height: 1.45; color: var(--ink-2, #46525E); } /* week 4's four sentences under the question (2c; 6.4b) */ .vote-under { font-size: 14px; line-height: 1.5; } /* week 4's two grey lines under the answers (2c; 6.4b) */ .cv-result { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--edge); border-radius: 12px; background: var(--card); } .cv-result .title { font-size: 17px; font-weight: 600; } .cv-about { border: 1px solid var(--edge); border-radius: 12px; background: var(--card); overflow: hidden; } .cv-about h2 { padding: 12px 14px 10px; margin: 0; } .cv-about p { padding: 9px 14px 12px; margin: 0; border-top: 1px solid #E3E8E4; font-size: 14px; line-height: 1.45; } /* A table inside a ? sits indented within the text's margins, never wider than the sentences around it (Juli's look at 3.12, fix 5, 24 Oct 2026: "Should be an indented table, not wider than the other text"): the ?'s 16 px, as its sentences; drawn as the other table inside a card, This week's split table — a pale ground, a thin edge, 14 px — its words padded inside and wrapping (week 2's 8b: the name 500, both cells in ink, aligned by their baselines). */ .help-card > dl, .help-card > table { margin: 8px 16px 0; } .cv-not { display: flex; flex-direction: column; padding: 4px 0; background: #F7F9F7; border: 1px solid #E3E8E4; border-radius: 8px; font-size: 14px; line-height: 1.4; } .cv-not div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; padding: 6px 12px; } /* without the script, a row too narrow for both drops its second half; with it, the whole table reads one way (below) */ .cv-not dt { min-width: 0; font-weight: 500; } .cv-not dd { min-width: 0; margin: 0 0 0 auto; text-align: right; color: var(--ink); } .chosen-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .not-open-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; } /* a chosen stall, not open yet (C7) */ .not-open-line .chip { display: inline-flex; align-items: center; gap: 6px; } .not-open-line .chip .flag-icon { width: 16px; height: 16px; } .chosen-line .chip { display: inline-flex; align-items: center; gap: 6px; } .chosen-line .chip .flag-icon { width: 16px; height: 16px; } .pitch-card.chosen { border: 2px solid var(--grey-band); } /* The vote's result on the student's screen: the chosen pitch green with the tick, its stall's name the headline (A6) */ .pitch-card.won { border: 2px solid var(--green-band); background: var(--green-tint); } .pitch-card.won .won-head { font-size: 20px; font-weight: 600; color: var(--green-dark); margin: 0; } .pitch-card.won .won-note { margin: 0; } /* A stall's forms and the saver's cards (step 2.22; week 1's 3e, 3f, 3h) */ .saving-box { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--edge); border-radius: 12px; background: var(--card); } .saving-box p { margin: 0; } .saving-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-weight: 600; } .under-row { display: block; font-weight: 400; font-size: 14px; } /* YOUR POTS and YOUR SAVINGS: one short row each, drawn as Recent's rows (Juli's look at the five fixes and 3.13, 25 Oct 2026, fix 2) — the whole row a link, in ink, with a chevron; its focus ring drawn inside the list's edge. */ .wallet-rows { list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--edge); border-radius: 12px; overflow: hidden; } .wallet-rows > li + li { border-top: 1px solid var(--edge); } .wallet-row { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 12px 10px 12px 14px; color: var(--ink); text-decoration: none; } .wallet-row:hover { color: var(--ink); background: #F7F9F7; } .wallet-row:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; } .wallet-rows > li:first-child .wallet-row { border-radius: 11px 11px 0 0; } .wallet-rows > li:last-child .wallet-row { border-radius: 0 0 11px 11px; } .wallet-rows > li:only-child .wallet-row { border-radius: 11px; } .wallet-row .text { display: flex; flex-direction: column; min-width: 0; flex: 1; } .wallet-row .title { font-size: 16px; font-weight: 600; } .wallet-row .under { font-size: 14px; color: var(--quiet); } .wallet-row .amount { flex: none; font-size: 16px; white-space: nowrap; } .wallet-row .chevron { flex: none; color: var(--green-dark); } /* ---------------------------------------------------------------- the Town Square and Messages (2.23; week 1's 6, 6b, 6c; week 2's 7, 7b, 7c) */ .question-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; } /* a box of words: 14 px, as the Stock Market's (Juli's look at 4.23: one look for every box) */ /* A Betting Shop's question is a stall's card of parts, each part with its own 14 px, as the Stock Market's card: the card itself adds none (Juli's look at 4.23: its words sat 30 px from the edge) */ .question-card.shop-question { gap: 0; padding: 0; } .shop-question .prize-row { padding: 10px 14px; } /* the prize a part as the others: 10 px above and below its words */ .stall-card > .card-part { margin: 0; padding: 12px 14px 0; } .question-card .question, .kind-explain .question { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.35; color: var(--ink); } .question-card .reading .small-caps { font-size: 12px; } .square-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; } .views { display: inline-flex; border: 1px solid var(--grey-edge); border-radius: 8px; overflow: hidden; } .views a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; background: var(--card); color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; } .views a.on { background: var(--blue); color: #FFFFFF; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; } /* the chosen view by more than its colour (1.4.1; 4.22) */ .admires-left { margin: 0; font-size: 14px; color: var(--ink); } .grey-legend { margin: 0; } .legend { display: inline-flex; align-items: center; gap: 6px; margin: 0; } .udot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: transparent; } .udot.on { background: var(--blue); } ul.posts { list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--edge); border-radius: 12px; overflow: hidden; } /* A thread is one item: the post, then its replies one step in, the thread line down their left (6, 6c; Juli's look at 2.23, item 1). The full rule only between threads, a faint one above each reply. */ ul.posts > li + li { border-top: 1px solid #E3E8E4; } /* A reply's whole box is indented under the post it answers, its thread line at the box's left edge (4.25 (8): "replies should have their whole gray box indented rather than flush with the original posts"); its words where they were. */ ul.replies { list-style: none; margin: 0 0 0 22px; padding: 0; } ul.replies > li { border-top: 1px solid #EDF0EE; background-color: #FAFBFA; background-image: linear-gradient(#C2CAC4, #C2CAC4); background-size: 2px 100%; background-repeat: no-repeat; background-position: 0 0; } .post.reply .post-row { min-height: 50px; padding-left: 12px; } .post.reply .post-more { padding-left: 31px; } .post-row { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 8px 12px; color: var(--ink); text-decoration: none; touch-action: manipulation; } .post.open .post-row { align-items: flex-start; padding-top: 12px; } .post.open { background-color: #F7F9F7; } .post-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .post-head { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; color: var(--quiet); } .post-head .who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* The Closed tag outside the part that may be cut, so it always shows (4.25 (7)); the day kept at the right. */ .post-head .closed-tag { flex: none; align-self: center; margin-left: -4px; } .post-head .day { margin-left: auto; } /* A post's name line is bold, read or not; the dot says unread (4.25 (8): "keeping the first line bold even when read", as Messages, Juli's look at 3.3, fix 6). */ .post-head .name { color: var(--ink); font-weight: 700; } .post-head .day { flex: none; font-size: 13px; } .post .first { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .post .post-text { font-size: 15px; line-height: 1.45; white-space: normal; overflow-wrap: break-word; } .post .stars { flex: none; font-size: 12px; color: var(--quiet); } /* The mark on one's own post (Juli's look at 2.24, item 1): a small icon beside the stars, in their grey, the substantive one in the dark green; on the row whether the post is opened or not. Each holds 3:1 or more against its row (WCAG 1.4.11; tested): #46525E is 8.0:1 on white, 7.5 on the opened row, 7.7 on a reply's tint, 6.4 on the grey old row; #1B5E34 is 7.8, 7.4, 7.5 and 6.3. */ .post .own-mark { flex: none; display: inline-flex; color: var(--quiet); } .post .own-mark.yes { color: var(--green-dark); } .mark-key { font-size: 13px; } .mark-key .key-item { white-space: nowrap; } /* an icon, its words and the dot after them stay together on a line */ .mark-key .mark-icon { vertical-align: -2px; margin-right: 3px; } .post-more { display: flex; flex-direction: column; gap: 8px; padding: 0 12px 12px 31px; } .post-more p { margin: 0; } .post.grey, .post.grey .post-head .name, .post.grey .first, .post.grey .post-text { color: var(--quiet); } .post.grey { background-color: #E3E8E4; } /* 6, 6c: an old thread's grey; the thread line stays on it */ /* A featured post (BUILD-PLAN 4.23; Juli's Look 1, step 131; the mock-up notes l.708: "on a pale tinted background that meets AA contrast; the word 'featured' stays"): the iµ's green family, pale (a featured post earns 1 iµ), with the green band at its left as a green line has (drawn inside, so nothing on the row moves); over a closed week's grey, the Closed tag kept; opened or not. On it: ink 13.9:1, the grey words 6.8, a link 4.6, the own mark 6.6, the unread dot 7.4, the band 4.3 (test_featured_posts.py). The tint is Code's, for Juli's look: no canvas draws it yet. */ :root { --featured: #D9F3E1; } .post.featured, .post.featured.open, .post.featured.grey { background-color: var(--featured); box-shadow: inset 6px 0 0 var(--green-band); } .reply-form, .write-form { display: flex; flex-direction: column; gap: 10px; } .reply-form label, .write-form .field label { font-size: 14px; font-weight: 600; } .reply-form textarea, .write-form textarea, .write-form input[type=text] { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--field-edge); border-radius: 8px; background: var(--card); color: var(--ink); font-size: 16px; line-height: 1.4; } .write-form input[type=text] { min-height: 48px; font-family: var(--mono); } .empty-week { margin: 0; } /* Write a post: the kinds as cards, the chosen card's explainer only (with no :has, both show) */ .kinds { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; border: 0; } .kinds legend { margin-bottom: 10px; font-size: 16px; font-weight: 600; } .kind-radio { position: absolute; opacity: 0; width: 1px; height: 1px; } .kind-card { position: relative; display: flex; flex-direction: column; gap: 2px; min-height: 64px; padding: 10px 52px 10px 14px; box-sizing: border-box; border: 1px solid var(--grey-edge); border-radius: 12px; background: var(--card); cursor: pointer; justify-content: center; } .kind-card .kind-name { font-weight: 600; color: var(--ink); } .kind-tick { position: absolute; right: 14px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border: 2px solid #8A959F; border-radius: 50%; box-sizing: border-box; } .kind-radio:checked + .kind-card { border: 2px solid var(--blue); background: #E4ECF6; } .kind-tick { display: flex; align-items: center; justify-content: center; color: transparent; } .kind-radio:checked + .kind-card .kind-tick { border-color: var(--blue); background: var(--blue); color: #FFFFFF; } .kind-radio:focus-visible + .kind-card { outline: 2px solid var(--blue); outline-offset: 2px; } .write-form:has(.kind-radio:checked) .kind-explain, .write-form:has(.kind-radio:checked) .for-answer { display: none; } .write-form:has(#kind-answer:checked) .explain-answer, .write-form:has(#kind-answer:checked) .for-answer, .write-form:has(#kind-fieldnote:checked) .explain-fieldnote, .write-form:has(#kind-fieldnote:checked) .for-answer, .write-form:has(#kind-suggestion:checked) .explain-suggestion, .write-form:has(#kind-general:checked) .explain-general { display: flex; flex-direction: column; } .kind-explain { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; } .kind-explain p { margin: 0; } /* Messages: a thread (7b): one white card, a line between messages, the new ones on a tint after their band */ .thread-card { background: var(--card); border: 1px solid var(--edge); border-radius: 12px; overflow: hidden; } ol.thread-messages { list-style: none; margin: 0; padding: 0; } ol.thread-messages li { padding: 12px 16px; } ol.thread-messages li + li { border-top: 1px solid var(--edge); } ol.thread-messages .message p { margin: 0; overflow-wrap: break-word; } ol.thread-messages .message-head { margin-bottom: 4px !important; font-size: 14px; } ol.thread-messages .message.new { background: #F7F9F7; } ol.thread-messages .divider { display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: #E4ECF6; color: var(--blue-dark); font-size: 14px; font-weight: 600; } .thread-card .reply-form { padding: 12px 16px 16px; border-top: 1px solid var(--edge); } .threads .post-body .quiet { font-size: 13px; } .post-more .buttons { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; } .post-more .buttons form { margin: 0; } /* The word cards (2.24; week 1's 8): a term the course teaches, underlined (dotted) where the drawings draw it; a tap opens its card — dark, the term in small capitals, its line, its reading on its own line. Juli's look at 3.3, fix 1 (23 Oct 2026): the dotted underline back everywhere, as before Juli's look at 3.1 — "except for wallet µ". */ a.term { color: inherit; font-weight: inherit; text-decoration: none; border-bottom: 2px dotted var(--blue); touch-action: manipulation; } /* as drawn on 4, 6c, 7: the words' own look, a 2 px dotted ink line under them */ a.term:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 2px; } /* A card's word inside something that is itself one button (a notification in NEW, whose tap opens the card: the Governor's, CR-14): the same dotted line, drawn, not a link of its own. */ /* A card or line with a word card's word in it (Juli's look at 3.4, fix 2): the card's tap is a cover laid over it, the word's link raised above the cover, so a tap on the word opens only its card. */ .has-cover { position: relative; } .line-cover { position: absolute; inset: -1px -1px -1px -12px; margin: 0; padding: 0; border: 0; border-radius: 12px; background: transparent; cursor: pointer; } .has-cover a.term { position: relative; z-index: 1; } .has-cover:hover .title { text-decoration: underline; } /* The header's µ total opens the µ card (CR-12), as the sµ and iµ pills open theirs. The one exception to the dotted line (Juli's look at 3.3, fix 1: "the headline wallet number looked messy with the underline"): a blue link, no line at rest; underlined on hover and on keyboard focus (WCAG 1.4.1, G183). The whole total is the link. */ .money .total a.term { color: var(--link); border-bottom: 0; } .money .total a.term:hover, .money .total a.term:focus-visible { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; } .term-card { background: #16212B; color: #FFFFFF; border-color: #16212B; } .term-card .help-head { border-bottom: 0; padding: 4px 4px 0 14px; } .term-card .help-head h2.small-caps { font-size: 12px; color: #C5CED6; } .term-card .close { color: #FFFFFF; } .term-card > p { padding: 6px 14px 0; font-size: 15px; line-height: 1.45; } .term-card > .term-reading, .term-card > .term-reading .small-caps { color: #C5CED6; font-size: 13px; } .term-card > .term-reading .small-caps { font-size: 12px; } a.pill { text-decoration: none; touch-action: manipulation; } .pills a.pill { border-bottom: 2px dotted var(--blue); } /* the dotted line back (Juli's look at 3.3, fix 1) */ /* The Decree's card (W4-33; week 4's 2b): the Bank above its title, each clause numbered with its heading. */ .decree-card .decree-bank { margin: 0; font-size: 12px; } /* Room inside the card (Juli's look at 3.1, item 2): the clauses inside the card's edges, as the ?'s paragraphs; a blank line between every pair of clauses, the last one (no title) too. */ .decree-card .clause { padding: 0 16px; margin-top: 16px; } .decree-card .clause + .clause { margin-top: 1.5em; } .decree-card .clause h3 { font-size: 16px; margin: 0 0 4px; } .decree-card .clause p { margin: 0; font-size: 15px; } .decree-card > .term-reading { padding-top: 1.5em; } .decree-card .clause-n { font-weight: 600; } /* Juli's look at 3.1, item 5 (23 Oct 2026): no ring round a card's title, or anything in it, after a tap. The script moves the focus to the card's title for a screen reader and notes how the student last acted (); the ring shows for the keyboard only (WCAG 2.4.7). */ /* Juli's look at 3.12's ten fixes (25 Oct 2026), fix 5: the same for every pop-up's title — the cards' and the laptop's pop-up over the three columns, whose title drew the browser's own ring after a click. The script marks each title it moves the focus to (`data-pop-title`); one rule for them all. */ .help-head h2:focus, [data-pop-title]:focus { outline: none; } html[data-input="pointer"] dialog:focus, html[data-input="pointer"] dialog :focus, html[data-input="pointer"] a:focus, html[data-input="pointer"] button:focus, html[data-input="pointer"] summary:focus { outline: none; } html[data-input="keyboard"] .help-head h2:focus, html[data-input="keyboard"] [data-pop-title]:focus { outline: 2px solid var(--blue); outline-offset: 2px; } .term-card a:focus-visible, html[data-input="keyboard"] .term-card .help-head h2:focus, html[data-input="keyboard"] .term-card [data-pop-title]:focus { outline-color: #FFFFFF; } /* Juli's look at 3.1, item 10: a button's words, and a route's, wrap inside it, whatever the width or the text size — at its spaces only: a word is never split (2.24; the block's (3) keeps overflow-wrap for a student's own words). */ button, a.button, .route-title, .routes li { min-width: 0; white-space: normal; } /* Ask a student to cook (3.3; week 2's 1c): WHAT YOU ARE ASKING, a sentence to a paragraph, a little apart. */ .cook-what { display: flex; flex-direction: column; gap: 8px; } .cook-what h2 { margin: 0; } /* Juli's look at 3.3, fix 5: every form's white box holds all it contains. A fieldset is never itself a ground: its legend sits on its top edge, so a white fieldset's ground began half-way down its own title. Each row in it — the − and + rows — is its own white box, and the part's title and its foot sit on the page, as every other part's. */ fieldset.rows { background: transparent; border: 0; border-radius: 0; padding: 0; margin: 0; min-width: 0; } fieldset.rows > legend { padding: 0; margin-bottom: 8px; } /* A div of rows is a white box of words (Lend to the Bank, Borrow, Post a price, the Bank Counter): its words 12 px from its top and 14 px from its sides, as the week 3 canvas draws it (BankBond, `12px 14px`; Juli, 30 Oct 2026, Looks 5 and 7: text never touches the edge of its box — 4.23). A fieldset of rows is not a box and stays flat. */ div.field.rows { padding: 12px 14px; } /* Juli's look at 3.3, fix 4: room above every section heading — a clear gap between the last card of a section and the next heading, 28 px, on This week (NEW → THIS WEEK → Done this week), the Wallet, the Marketplace, a stall's page, Messages and the Town Square. */ #tw-live > .list + .list { margin-top: 28px; } .list > details.fold { margin-top: 18px; } .step-body > * + section, #wl-live > * + section, #mk-live > * + section { margin-top: 12px; } /* Send back cooked bills (3.4; week 3's 1e): each row's title over its small line; room under the heading. */ .send-back { display: flex; flex-direction: column; gap: 8px; } .row-text { display: flex; flex-direction: column; gap: 2px; } .row-text .small { font-size: 14px; } /* Bitter Money (3.12; week 2's 4, 4b): a ware's card, the name choosers, the banner on a name. */ .ware-card { padding: 14px; gap: 10px; } .ware-card p { margin: 0; } .ware-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .ware-name { font-size: 17px; font-weight: 600; } .ware-link { text-decoration: none; color: var(--ink); } .ware-link .quiet { font-size: 15px; } .ware-head > .mono { flex: none; white-space: nowrap; } /* "8 polluted µ" on one line; the ware's name wraps (week 2's 4) */ .ware-link .ware-name { color: var(--blue); } /* the row opens the banner page: its name reads as a link, as drawn */ .round-form .fund-go { font-size: 15px; font-weight: 600; } /* in the weight of "5 go to students you name" (week 2's 4) */ .names { gap: 8px; } .names legend { font-size: 15px; font-weight: 600; margin-bottom: 6px; } .names select { width: 100%; min-height: 48px; padding: 0 12px; border: 1px solid var(--field-edge); border-radius: 8px; background: var(--card); color: var(--ink); font-size: 16px; } .round-form .wide-button { width: 100%; } /* A banner lies behind the whole name (Juli's look at 3.12, fix 7: "the polluted money banner should be over the student's whole name, not only in front"): the dark ground behind the small flag and the name, the name white on it (16:1), in every state of the row or link it sits in; it wraps with the name on a narrow screen, each line on its ground. */ .name-banner { display: inline; padding: 4px 6px; border-radius: 4px; background: #16212B; color: #FFFFFF; font-weight: 600; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .name-banner > svg { margin-right: 4px; vertical-align: -2px; } .name-banner .name, .post .post-head .name-banner .name, .post.grey .post-head .name-banner .name { color: #FFFFFF; } a.name-banner, a.name-banner:link, a.name-banner:visited, a.name-banner:hover, a.name-banner:active { color: #FFFFFF; text-decoration: underline; } a.name-banner:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; } .post-head .who { padding: 1px 0; } /* the banner's own padding is never clipped by the row's one line */ .how-looks { padding: 0 14px 12px; } .how-looks .card-part { margin-top: 12px; } .example-head { margin: 4px 0 2px; font-weight: 600; } /* The standing rule the class vote made, at the top of the Marketplace (3.12; week 2's 2c). */ .standing-rule { padding: 12px 14px; gap: 6px; border-color: var(--blue); } .standing-rule p { margin: 0; font-size: 15px; } .standing-title { margin: 0; font-size: 17px; font-weight: 600; } /* The Pot's form (3.12; week 2's 5c): the purposes as cards, the chosen one marked. */ .purposes { display: flex; flex-direction: column; gap: 8px; } .purpose { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--edge); border-radius: 12px; background: var(--card); } .purpose.on { border-color: var(--blue); } .purpose input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; } .purpose-body { display: flex; flex-direction: column; gap: 2px; } .purpose-name { font-size: 16px; font-weight: 600; } .purpose.have { color: var(--quiet); } .pot-locked { margin: -2px 0 2px; padding: 0 14px; font-size: 14px; } .which-stall { padding: 0 14px 6px; } .which-stall select { width: 100%; min-height: 48px; padding: 0 12px; border: 1px solid var(--field-edge); border-radius: 8px; background: var(--card); color: var(--ink); font-size: 16px; } /* The Town Square's kinds above the list (3.12; 6, 6c) and the Closed tag on a grey row. */ .filters.kind-filters a { min-height: 36px; padding: 0 12px; } .closed-tag { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 4px; background: var(--grey-tint-card); color: var(--grey-dark); font-size: 12px; font-weight: 600; vertical-align: 1px; } /* A table of two halves reads one way (Juli's look at 3.12's ten fixes, 25 Oct 2026, fix 4: "Whenever any row's two halves cannot each sit on one line side by side, every row of the table puts its right half whole under its left, indented"). halves.js measures each `[data-halves]` table with every half on one line (`data-measuring`, never painted) and marks it `data-stacked` when any row does not fit. The class vote's ?, This week's split table, a stall's condition, its sum, YOUR SAVINGS, Your policy's cover, the lists of rows (waiting, tenths, claims, the Fund's, what a cook sends), YOU ARE PUTTING IN and YOU ARE SAVING. Where they fit, as drawn. */ [data-halves][data-measuring] .under, [data-halves][data-measuring] .under-row, [data-halves][data-measuring] .row-text > .quiet { display: none; } /* a half's first line is what must fit */ table[data-halves][data-measuring] { width: max-content; max-width: none; } table[data-halves][data-measuring] th, table[data-halves][data-measuring] td { white-space: nowrap; } dl[data-halves][data-measuring] > div, ul[data-halves][data-measuring] > li, [data-halves][data-measuring] .saving-total { flex-wrap: nowrap; } dl[data-halves][data-measuring] > div > *, ul[data-halves][data-measuring] > li > *, [data-halves][data-measuring] .saving-total > * { flex: none; min-width: auto; white-space: nowrap; } /* Stacked: each row's left half on its line, its right half whole under it, left-aligned, set in 16 px. */ dl[data-stacked]:not([data-measuring]) > div, ul[data-stacked]:not([data-measuring]) > li:not(.plain):not(.sum), [data-stacked]:not([data-measuring]) .saving-total { flex-direction: column; align-items: flex-start; gap: 2px; } dl[data-stacked]:not([data-measuring]) > div > dd, ul[data-stacked]:not([data-measuring]) > li:not(.plain):not(.sum) > :last-child, [data-stacked]:not([data-measuring]) .saving-total > :last-child { margin: 0; padding-left: 16px; text-align: left; } table.facts[data-stacked]:not([data-measuring]), table.facts[data-stacked]:not([data-measuring]) > tbody { display: block; } table.facts[data-stacked]:not([data-measuring]) > caption:not(.read-aloud) { display: block; } table.facts[data-stacked]:not([data-measuring]) tr { display: block; padding: 6px 14px; } table.facts[data-stacked]:not([data-measuring]) tr + tr { border-top: 1px solid var(--edge); } /* between rows only */ table.facts[data-stacked]:not([data-measuring]) th, table.facts[data-stacked]:not([data-measuring]) td { display: block; padding: 0; border-top: 0; text-align: left; white-space: normal; } table.facts[data-stacked]:not([data-measuring]) td { padding: 2px 0 0 16px; } /* The split table: the name on its line; under it, set in, each count with its own heading above it (the headings' row kept for a screen reader only), the two side by side where they fit, one under the other where even they do not — at 200% text on a phone a count's word is wider than half the card. */ .split-table[data-stacked]:not([data-measuring]), .split-table[data-stacked]:not([data-measuring]) > tbody { display: block; } .split-table[data-stacked]:not([data-measuring]) > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .split-table[data-stacked]:not([data-measuring]) tbody tr { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 8px 12px 0 28px; } .split-table[data-stacked]:not([data-measuring]) tbody tr:last-child { padding-bottom: 10px; } .split-table[data-stacked]:not([data-measuring]) tbody th[scope="row"] { flex: 0 0 100%; margin-left: -16px; padding: 0; } .split-table[data-stacked]:not([data-measuring]) tbody td { display: flex; flex-direction: column; padding: 0; text-align: left; white-space: nowrap; } .split-table[data-stacked]:not([data-measuring]) tbody td::before { content: attr(data-label); content: attr(data-label) / ""; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--quiet); white-space: normal; } /* The votes on The room (step 4.3; the dashboards canvas, C2, C9): a community's vote card and the vote on a question, each a white panel with a flag mark for its state (the look of 14 October, item 14); the pitches and the answers in the students' pitch-card look; the quiet moves (reopen, cancel, not held) under the main button. */ .panel-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; } /* A vote's card is a white panel; its state is the flag mark at its corner, in the flag's colour (C2, C9; the look of 14 October, item 14). Code's own look, 26 Oct 2026: the cards had been banded and tinted like This week's lines. */ .flag.blue { color: var(--blue-ink); } .quiet-move { display: flex; flex-direction: column; gap: 6px; } .quiet-move p { margin: 0; font-size: 14px; } /* Mark the tutorial as not held? — the question in the card itself, its two answers side by side (A1) */ .ask-move { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid var(--red); border-radius: 8px; background: var(--card); } .ask-question { margin: 0; font-weight: 600; } .ask-buttons { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } /* The convenor's Town Square tab (step 4.4; the dashboards canvas, C3): the five lists down the left as cards in the flag's colours — a post waiting on Juli amber or red by the clock, judged green with its mark, a general post white — the side's four panels, and the picks full width below in two columns on a laptop; a long pick clamped to two lines with Read all (S-14), by square.js. */ .sq-lists { display: flex; flex-direction: column; gap: 28px; } .sq-list { display: flex; flex-direction: column; gap: 10px; } .sq-list > .quiet { font-size: 14px; } .sq-post { display: flex; flex-direction: column; gap: 10px; } .sq-post.plain { padding: 14px 16px; border: 1px solid var(--edge); border-radius: 12px; background: var(--card); color: var(--ink); } .sq-post.line.holds { color: var(--ink); } .sq-post .line-head .under { font-size: 14px; } .sq-post .post-words { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink); overflow-wrap: break-word; } .sq-text.long.clamped .post-words { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sq-text .read-all { margin-top: 6px; font-size: 14px; } .sq-mark { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.25; color: var(--ink); } /* the result in the buttons' place, the headline's size (C3 v36; decision (k)) */ .sq-mark.not { color: var(--quiet); } .sq-mark.pick { font-size: 18px; } .sq-post .quiet { font-size: 14px; } .sq-form { display: flex; flex-direction: column; gap: 10px; } .sq-form .buttons { display: flex; flex-wrap: wrap; gap: 10px; } .sq-form .buttons button.primary { min-height: 44px; padding-left: 16px; padding-right: 16px; font-size: 15px; } .sq-post .sq-form .buttons button { width: auto; } /* side by side at their own width, as C3 draws them — never the students' .holds buttons, full width (Code's own look, 26 Oct 2026) */ .sq-post .line-head .text { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; } /* a plain card (a general post, a pick) stacks its name over its line, as a coloured one does */ .sq-post.plain .line-head .title { font-weight: 600; font-size: 16px; line-height: 1.35; } .sq-post.plain .line-head .under { color: var(--quiet); } .sq-form .buttons button.secondary[disabled], .sq-form .buttons button.secondary[aria-disabled="true"] { border-color: var(--grey-edge); background: var(--grey-tint); color: var(--quiet); cursor: not-allowed; } .sq-form .buttons button.link { align-self: center; } .sq-note { font-size: 13px; color: var(--quiet); } .sq-form input[type=text] { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--field-edge); border-radius: 8px; background: var(--card); color: var(--ink); font-family: var(--sans); font-size: 15px; } .sq-slot h3 { margin: 0; } .sq-slot-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; } .sq-side-card .cv-question { font-weight: 600; font-size: 16px; } .sq-counts { width: 100%; border-collapse: collapse; } .sq-counts th { text-align: left; font-weight: 400; font-size: 15px; padding: 6px 0; border-bottom: 1px solid var(--edge); } .sq-counts td { text-align: right; font-weight: 600; padding: 6px 0; border-bottom: 1px solid var(--edge); } .sq-counts tr:last-child th, .sq-counts tr:last-child td { border-bottom: 0; } .sq-picks-all { display: flex; flex-direction: column; gap: 24px; } .sq-picks { display: flex; flex-direction: column; gap: 12px; } .sq-picks-head { align-items: flex-start; flex-wrap: wrap; } .sq-picks-head .quiet { font-size: 14px; } .sq-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; } .sq-post.picked { background: var(--green-tint); } .sq-old { font-size: 14px; } @media (min-width: 900px) { .sq-grid { grid-template-columns: 1fr 1fr; } } /* The Roster in term (step 4.5; the dashboards canvas, C5; screen 10): the columns as a real table on a laptop, each row stacked with its labels on a phone (the table's roles kept, as the split table does). The keys under three headings (S-14); the tags plain, white with a grey edge (the look of 14 October, item 18). */ .chip-rows { display: flex; flex-direction: column; gap: 10px; } .filters.orders { align-items: center; } .order-label { font-size: 14px; margin-right: 4px; } .roster-panel { padding: 12px 14px 14px; gap: 18px; } /* (Juli's look at 4.23: one look for every box, the Stock Market's — 14 px inside at most) */ .roster-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.4; } .roster-table th, .roster-table td { text-align: left; vertical-align: top; padding: 10px 8px; border-top: 1px solid var(--edge); } .roster-table thead th { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--quiet); border-top: 0; border-bottom: 1px solid var(--edge); vertical-align: bottom; } .roster-table thead th .head-sub { display: block; font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; } .roster-table th.num, .roster-table td.num { text-align: right; } .roster-table thead th.num { text-transform: none; } /* "sµ", "iµ": uppercase turns µ into a Greek capital M, "SM" (Code's own look, 26 Oct 2026) */ .roster-table th.who { display: flex; flex-direction: column; gap: 2px; font-weight: 400; min-width: 120px; } .roster-table .who .student-name { font-weight: 600; } .roster-table .who .label-tag { align-self: flex-start; font-size: 12px; padding: 1px 8px; margin-top: 4px; } .roster-table td > .mono, .roster-table td > .quiet, .roster-table td > .owes { display: block; } .roster-table .strong { font-weight: 600; } .roster-table td .quiet { font-size: 13px; } .roster-table .owes { font-size: 13px; margin-top: 4px; } .roster-table tr.left td, .roster-table tr.left .student-name { color: var(--quiet); } .roster-table tr.left { background: #F4F5F4; } .roster-table .tags { display: flex; flex-wrap: wrap; gap: 6px; } .roster-table .tags .label-tag { font-size: 12px; padding: 1px 8px; white-space: nowrap; } ul.dots, ul.commas { list-style: none; margin: 0; padding: 0; display: inline; } ul.dots li, ul.commas li { display: inline; } ul.dots li + li::before { content: " · "; } ul.lines { list-style: none; margin: 0; padding: 0; } /* a cell's lines, one to a line: a stall's debts by kind (Juli's look at 4.23, 3 Nov 2026) */ ul.lines li + li { margin-top: 4px; } ul.commas li + li::before { content: ", "; } .roster-foot { display: flex; flex-direction: column; gap: 6px; font-size: 13px; border-top: 1px solid var(--edge); padding-top: 12px; } .roster-table .roster-phone { display: none; } /* the phone's one line (6.4g (B2)) */ @media (max-width: 899px) { .roster-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .roster-table, .roster-table tbody, .roster-table tr { display: block; width: 100%; } .roster-table tr { display: flex; flex-wrap: wrap; gap: 6px 20px; padding: 12px 4px; border-top: 1px solid var(--edge); } .roster-table th.who { flex: 0 0 100%; padding: 0; border: 0; } .roster-table td { display: flex; flex-direction: column; padding: 0; border: 0; min-width: 120px; text-align: left; } .roster-table td::before { content: attr(data-label); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--quiet); } .roster-table td.num { text-align: left; } .roster-table td.num::before { text-transform: none; } /* "sµ", never "SM" */ .roster-table td:empty { display: none; } /* One line a student (6.4g (B2); Juli's look at 6.4d, 5 Nov 2026, (17)): the name, the community, the wallet; every other cell on the student's page, the whole row its link. */ .roster-table:not(.cm-table) tr { position: relative; } .roster-table:not(.cm-table) td:not([colspan]) { display: none; } /* the Roster's own table only: Juli's Marketplace list and a stall's customers keep their cells (6.5a, mended) */ .roster-table:not(.cm-table) .roster-phone { display: block; } .roster-table .phone-wallet { font-family: var(--mono); font-weight: 600; } .roster-table:not(.cm-table) .who .student-name::after { content: ""; position: absolute; inset: 0; } } /* Save the record (step 4.5; D18): the panel in This week's right column. */ .record-panel { gap: 12px; } .rec-saved:empty { margin-top: -12px; } /* a live region kept in the page, empty until saved (WCAG 4.1.3): no gap of its own */ .rec-saved p { margin: 0; } .rec-saved .rec-saved-head { font-size: 18px; font-weight: 600; } /* C1: "Saved", then "Just now · after the tick of W3 Friday" */ .record-form { display: flex; flex-direction: column; gap: 8px; } .record-form button { align-self: flex-start; } .record-form .quiet { font-size: 14px; } /* A student's page in full (step 4.5; the dashboards canvas, C5b): the four figures in a row, what the student holds, in class as chips, the posts, the week from the record. */ .page-head .tags { display: flex; flex-wrap: wrap; gap: 8px; } .figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; } .figure { gap: 4px; } .fig-label { margin: 0; font-size: 14px; font-weight: 400; color: var(--quiet); } .fig-value { margin: 0; font-size: 28px; font-weight: 600; line-height: 1.2; } .figure .quiet { font-size: 14px; } .figure .owes { font-size: 14px; margin: 0; } .fig-lines { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; } .student-columns .strong { font-weight: 600; } .holds { margin: 0; display: flex; flex-direction: column; } .hold { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 4px 16px; padding: 10px 0; border-top: 1px solid var(--edge); } .hold:first-child { border-top: 0; padding-top: 0; } .hold dt { color: var(--quiet); } .hold dd { margin: 0; display: flex; flex-direction: column; gap: 4px; } .hold dd p { margin: 0; } .chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } /* A student's page, in class: only the chips of its own list (until Code's look at A6 these rules reached every chip of the app, the students' flags among them, and stacked each flag's icon over its word) */ .chips .chip { display: flex; flex-direction: column; align-items: center; min-width: 64px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--green-band); background: var(--green-tint); color: var(--green-dark); font-size: 13px; font-weight: 600; text-align: center; } .chips .chip.off { border-color: var(--grey-edge); border-style: dashed; background: var(--card); color: var(--quiet); } .chip-day { font-size: 12px; font-weight: 500; } .chip-note { font-size: 11px; font-weight: 400; } .sp-post { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-top: 1px solid var(--edge); } .sp-post:first-of-type { border-top: 0; padding-top: 0; } .sp-post .panel-head p { margin: 0; } .sp-post .post-words { margin: 0; font-size: 15px; line-height: 1.5; overflow-wrap: break-word; } .link-words { font-weight: 600; } .week-lines { margin: 0; display: flex; flex-direction: column; } .week-line { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 2px 14px; padding: 8px 0; border-top: 1px solid var(--edge); font-size: 15px; } .week-line:first-child { border-top: 0; padding-top: 0; } .week-line dt { font-size: 13px; } .week-line dd { margin: 0; overflow-wrap: break-word; } .for-student .facts { display: flex; flex-direction: column; gap: 14px; padding-top: 12px; border-top: 1px solid var(--edge); } /* Put right, folded (6.5a): the heading is the fold's summary, the chevron at its right; the form under a rule, open. */ .pr-fold summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 24px; } .pr-fold summary h2 { margin: 0; } .pr-fold .chevron { color: var(--grey-dark); } .pr-body { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--edge); } /* See their screen (4.9c; GM-2): the band across the top — Juli's sentence and the way back, white on ink — and under it the student's own screen in a frame the app's phone column wide (390 px, .phone; the whole width on a narrower window, with no gutter), filling the window under the band. On a short window — a laptop's page zoomed to 400 % is 320 × 200 — the frame is at least the window's height and the page scrolls to it, so the student's screen is never squeezed to nothing (WCAG 1.4.10; the reviewer's change 7). */ .see-main { flex: 1 0 auto; display: flex; flex-direction: column; } .see-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px; padding: 8px 16px; background: var(--ink); color: #FFFFFF; } .see-words { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.4; } .see-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px; color: #FFFFFF; font-size: 15px; font-weight: 600; text-decoration: underline; } .see-back:hover { color: #FFFFFF; text-decoration-thickness: 2px; } .see-back:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; } .see-frame { flex: 1 0 auto; display: block; width: min(390px, 100%); min-height: 100vh; margin: 16px auto; border: 1px solid var(--grey-edge); border-radius: 12px; background: var(--ground); } @media (min-height: 40em) { .see-frame { min-height: 0; } } @media (max-width: 390px) { .see-frame { margin: 0 auto; border-width: 1px 0 0; border-radius: 0; } } /* Inside the frame, the student's own page drawn in a disabled fieldset (student/base.html): the fieldset draws nothing of its own, and a button dead only because Juli is looking keeps the look the student sees — the page's own disabled buttons are greyed by their attribute, [disabled], never by :disabled. */ fieldset.seeing { display: block; min-width: 0; margin: 0; padding: 0; border: 0; } fieldset.seeing :disabled:not([disabled]) { cursor: not-allowed; } fieldset.seeing select:disabled:not([disabled]) { opacity: 1; } /* Chromium's own: a dead list at 0.7 (the browser check, B2) */ @media (max-width: 640px) { .hold, .week-line { grid-template-columns: minmax(0, 1fr); } } /* The Town Square's question form (step 4.7): the question, its source, one button; Replace it folded. */ .sq-question-form { display: flex; flex-direction: column; gap: 8px; } .sq-question-form label { font-size: 14px; font-weight: 600; } .sq-question-form textarea, .sq-question-form input[type=text] { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--field-edge); border-radius: 8px; font-size: 15px; line-height: 1.5; color: var(--ink); background: var(--card); font-family: inherit; } .sq-question-form input[type=text]:focus { outline: 2px solid var(--blue); outline-offset: 2px; } .sq-question-form button.primary { padding-left: 20px; padding-right: 20px; align-self: flex-start; } .sq-replace > summary { cursor: pointer; min-height: 24px; } .sq-replace[open] > summary { margin-bottom: 8px; } /* ON THE PROJECTOR on The room (BUILD-PLAN 4.8; C8, C2, C9 v38): each scene a button, name over its line, the one showing blue with a 2 px edge; the Decree's key under them while the Decree is up. */ .proj-head-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; } .proj-head-row h2 { margin: 0; } .proj-open { font-size: 15px; font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; } .proj-open-sub { margin: -8px 0 0; font-size: 14px; } /* From 4.9b: in amber while no projector's page is open (E3); the room's computer's session and its End (E1, Q2). */ .proj-live { display: flex; flex-direction: column; gap: 10px; } .proj-live:empty { display: none; } .proj-none .text { gap: 4px; } .proj-none-open { font-size: 15px; font-weight: 600; min-height: 24px; align-self: flex-start; color: var(--blue-ink); } .proj-end { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; } .proj-end-line { margin: 0; font-size: 15px; } .proj-scenes { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; } .proj-form { margin: 0; display: flex; } .proj-scene { flex: 1; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 3px; min-height: 64px; padding: 10px 12px; border-radius: 10px; text-align: left; font-family: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--grey-edge); cursor: pointer; } .proj-scene.on { background: #E4ECF6; border: 2px solid var(--blue); padding: 9px 11px; } .proj-name { font-size: 15px; font-weight: 600; } .proj-sub { font-size: 13px; line-height: 1.35; color: var(--quiet); } .proj-key { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; border-top: 1px solid #E3E8E4; padding-top: 12px; } .proj-key-head { font-size: 15px; font-weight: 600; } .proj-key-row { display: flex; align-items: center; gap: 8px; } .proj-key-row form { margin: 0; } .proj-turn { font-size: 14px; } .proj-turn[disabled], .proj-turn[aria-disabled="true"] { border-color: var(--grey-edge); background: var(--grey-tint); color: var(--quiet); cursor: default; } .proj-clause { font-size: 15px; font-weight: 600; min-width: 96px; text-align: center; white-space: nowrap; } /* The calendar (step 4.6): THE TICKS as a list of rows, the tick days with their moves, the shortening. Undrawn. */ .calendar-panel { gap: 12px; } .calendar-panel .mc-go { align-self: flex-start; } .cal-rows, .cal-days { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; } .cal-row { padding: 8px 12px; border-left: 4px solid var(--grey-edge); background: var(--card); border-radius: 4px; } .cal-row.green { border-left-color: var(--green-ink); } .cal-row.blue { border-left-color: var(--blue); } .cal-row.red { border-left-color: var(--red); color: var(--red-ink); font-weight: 600; } .cal-short { margin: 0; color: var(--red-ink); font-weight: 600; } .cal-day { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-top: 1px solid var(--edge); } .cal-day:first-child { border-top: 0; } .cal-date { font-weight: 600; } .cal-day.amber .quiet { color: var(--amber-ink); font-weight: 600; } /* The Report (step 4.9; the dashboards canvas, version 38, C4): TO LOOK AT as The room's cards; the two Decrees side by side; THE NUMBERS four across (two at a phone's width); the Bank's report — the points left, the charts right — and the notes. The charts are plain HTML bars in one hue, the values printed: no library. */ .convenor-main.report { display: flex; flex-direction: column; gap: 24px; } .rp-section { display: flex; flex-direction: column; gap: 12px; } /* TO LOOK AT as small tiles (BUILD-PLAN 4.9b, E20): one or two lines each — the flag a coloured edge and its word, the title and its one sentence, the way there a link at the right, *Why?* folded under; two across on a laptop, one on a phone (a tile narrower than 440 px would wrap its line to three); the green one spans the row. */ .rp-look { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; } /* one a row on a phone; three on a laptop, below (6.5a) */ @media (min-width: 900px) { .rp-look { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .look-tile { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 8px 12px; border: 1px solid var(--edge); border-left: 6px solid var(--grey-band); border-radius: 10px; background: var(--grey-tint-card); } .look-tile.red { border-left-color: var(--red-band); background: var(--red-tint-card); } .look-tile.blue { border-left-color: var(--blue-band); background: var(--blue-tint); } .look-tile.green { border-left-color: var(--green-band); background: var(--green-tint); } /* one tile in the grid, not the whole row (6.5a) */ .lt-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .lt-text { min-width: 0; margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink); } .lt-word { margin: 0; font-size: 14px; font-weight: 600; color: var(--grey-dark); } .lt-items { list-style: disc; margin: 2px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.45; color: var(--ink); } .lt-items li + li { margin-top: 4px; } .lt-item-go { font-weight: 600; color: var(--blue); white-space: nowrap; } .lt-all { align-self: flex-start; font-size: 14px; } .look-tile.red .lt-word { color: var(--red-dark); } .look-tile.blue .lt-word { color: var(--blue-ink); } .look-tile.green .lt-word { color: var(--green-dark); } .lt-title { font-weight: 600; } .lt-go { flex: none; font-size: 14px; font-weight: 600; color: var(--blue); } .look-tile .why summary { font-size: 13px; } .rp-decrees { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 16px; } /* min(): a panel never wider than a 320 px window (4.22, 1.4.10) */ .rp-panel { background: var(--card); border: 1px solid var(--edge); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 12px; min-width: 0; } .rp-panel-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; } .rp-panel-head h2 { margin: 0; } .rp-question { margin: 0; font-size: 18px; font-weight: 600; } .rp-gap { margin: 0; } .rp-cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .rp-vitals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .rp-vitals .rp-cell { background: var(--card); border: 1px solid var(--edge); border-radius: 12px; padding: 12px 14px; } .rp-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .rp-cell p { margin: 0; } .rp-n { font-size: 26px; font-weight: 600; line-height: 1.2; } .rp-label { font-size: 15px; } .rp-sub { font-size: 13px; } .rp-panel .rp-sub::first-letter { text-transform: uppercase; } /* C4: "Lent to the Bank 21 · sheltered 17 · …", the parts the words file's */ .rp-bank { background: var(--card); border: 1px solid var(--edge); border-radius: 12px; padding: 14px; } .rp-bank-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; } .rp-bank-head h2, .rp-bank-head p { margin: 0; } .rp-bank-form { display: flex; flex-direction: column; gap: 16px; } .rp-bank-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; } .rp-bank fieldset { border: 0; margin: 0; padding: 0; min-width: 0; } .rp-points { display: flex; flex-direction: column; gap: 10px; } .rp-points legend, .rp-charts-head { font-size: 15px; font-weight: 600; margin: 0 0 6px; padding: 0; } .rp-point { display: flex; flex-direction: column; gap: 4px; } .rp-point label { font-size: 14px; color: var(--quiet); display: flex; gap: 8px; align-items: center; } .rp-point-n { display: inline-flex; width: 22px; height: 22px; border-radius: 11px; background: var(--blue); color: #FFFFFF; font-size: 13px; align-items: center; justify-content: center; } .rp-point input[type=text] { width: 100%; min-height: 44px; font: inherit; font-size: 16px; padding: 8px 10px; border: 1px solid var(--field-edge); border-radius: 8px; background: var(--card); color: var(--ink); } .rp-point input[readonly] { background: var(--ground); } .rp-fixed { margin: 0; min-height: 44px; padding: 10px; border-radius: 8px; background: var(--ground); font-size: 16px; } .rp-fixed-note { margin: 0; font-size: 13px; } .rp-charts { display: flex; flex-direction: column; gap: 12px; } .rp-charts legend { margin-bottom: 6px; } .rp-chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .rp-chart { position: relative; display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--grey-edge); border-radius: 10px; background: var(--card); min-width: 0; } .rp-chart.on { border: 2px solid var(--blue); background: #F2F6FB; } .rp-chart input[type=checkbox] { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--blue); } .rp-chart label { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; cursor: pointer; } .rp-chart-name { font-size: 14px; font-weight: 600; } .rp-bars { display: flex; align-items: flex-start; gap: 2px; } /* the bar boxes level, however a label wraps */ .rp-bar-col { flex: 1; display: flex; flex-direction: column; align-items: stretch; min-width: 0; } .rp-bar-box { height: 44px; display: flex; align-items: flex-end; } .rp-bar-n { font-size: 12px; text-align: center; } .rp-bar { display: block; width: 100%; min-height: 2px; border-radius: 4px 4px 0 0; background: #8A959F; } .rp-chart.on .rp-bar { background: var(--blue); } .rp-bar-label { font-size: 12px; text-align: center; color: var(--quiet); } .rp-use { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .rp-result { display: flex; flex-direction: column; gap: 2px; margin-right: auto; } .rp-result p { margin: 0; } .rp-notes { gap: 8px; } .rp-notes form { display: flex; flex-direction: column; gap: 8px; } .rp-notes-label { font-size: 15px; font-weight: 600; } .rp-notes textarea { width: 100%; font: inherit; font-size: 16px; padding: 10px; border: 1px solid var(--field-edge); border-radius: 8px; background: var(--card); color: var(--ink); } .rp-earlier { border-top: 1px solid var(--edge); padding-top: 8px; } .rp-earlier-head { margin: 0; font-size: 14px; color: var(--quiet); font-weight: 600; } .rp-earlier-text { margin: 4px 0 0; } .rp-later { margin: 0; font-size: 14px; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } @media (max-width: 760px) { .rp-vitals { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rp-bank-grid { grid-template-columns: minmax(0, 1fr); } .rp-cells { grid-template-columns: minmax(0, 1fr); } } /* The convenor's Marketplace tab (step 4.9a; the dashboards canvas, C6, C6b, C6c, C6d): its own classes, never the students' .side (Code's own look at 4.1–4.5, item 1). The communities' grounds are the Marketplace's own variables (.c-old_town, .c-new_town, .c-leith). */ .cm-title { display: flex; flex-direction: column; gap: 4px; } .cm-sub { font-size: 15px; } .cm-views { display: flex; flex-wrap: wrap; gap: 8px; } .cm-view { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--grey-edge); border-radius: 999px; background: var(--card); color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; } .cm-view.on { border-color: var(--blue); background: var(--blue); color: #FFFFFF; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; } /* chosen by more than its colour (1.4.1; 4.22) */ .cm-view.on:hover { color: #FFFFFF; } .cm-bank { display: flex; flex-direction: column; gap: 10px; } .cm-bank-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; } .cm-bank-tile { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--edge); border-radius: 12px; background: var(--card); } .cm-bank-tile .quiet { font-size: 14px; } .cm-bank-name { font-weight: 600; } .cm-bank-line { font-size: 15px; } .cm-sides { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; } .cm-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 12px; border: 1px solid var(--c-edge); border-radius: 14px; background: var(--c-ground); } .cm-side-head { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 18px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-ink); } .cm-side-head .sign { color: var(--c-ink); flex: none; } .cm-tiles { display: flex; flex-direction: column; gap: 8px; } .cm-none { font-size: 15px; color: var(--c-ink); } .cm-messages { font-size: 14px; color: var(--c-ink); } .cm-mark { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; } .cm-mark .flag-icon { width: 18px; height: 18px; flex: none; } .cm-mark.red { color: var(--red-dark); } .cm-mark.amber { color: var(--amber-dark); } .cm-mark.blue { color: var(--blue-ink); } .cm-mark.green { color: var(--green-dark); } .cm-mark.grey { color: var(--grey-dark); } .cm-table td .quiet { display: block; } .cm-cookings, .cm-list { gap: 10px; } .cm-cook-top { display: flex; flex-direction: column; gap: 4px; } .cm-head { cursor: default; } .cm-head h1.title { font-size: 24px; } .cm-head .under { display: block; } .cm-fsub ul.dots { display: inline; } .cm-fsub { font-size: 14px; } .cm-note { font-size: 14px; } .cm-holders dt a { font-weight: 600; } .cm-customers .panel-head .strong { font-weight: 600; } tr.cm-no td:first-of-type { color: var(--red-dark); font-weight: 600; } /* "No: …" — the word carries it, not the colour alone */ @media (min-width: 900px) { .cm-sides.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cm-sides.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* 4.23 (P1): the head's next Decree with Hold it / Let it go (This week; Look 13), under the Next tick box; and "As of 10:42" on each of Juli's tabs */ .tw-head-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .decree-hold { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0 10px; margin: 0; font-size: 14px; color: var(--quiet); } .decree-hold.held .decree-hold-line { color: var(--blue); font-weight: 600; } .as-of { margin: 0; font-family: var(--mono); font-size: 13px; color: var(--quiet); } @media (max-width: 600px) { .tw-head-side { align-items: flex-start; } .decree-hold { justify-content: flex-start; } } /* Juli's stall page: the price line and the holders' small chart in one row under ITS 10 SHARES (4.23 P1 item 5). */ .cm-price-head { padding: 8px 0 0; } .cm-price-head .cm-price { margin: 0; } /* 4.23 (Look 10; week 3's 11, v46): a Shelter's count and its polluted row in one white box, the polluted row indented with a rule at its left, so it reads as part of the count. */ .shelter-count { background: var(--card); border: 1px solid var(--edge); border-radius: 12px; } .shelter-count > .count-row { border: 0; border-radius: 0; background: none; } .shelter-count > .count-row.of-them { margin: 0 12px 12px 28px; padding: 2px 0 2px 12px; border-left: 2px solid var(--edge); } /* 4.23 (Looks 9–14; week 3's OpenStall, v46 screen 3): a Betting Shop's question, its answers one to a line, bulleted — a real list; inside the vote's button, spans drawn as one. */ ul.q-answers { display: block; margin: 4px 0; padding: 0 0 0 22px; list-style: disc; } ul.q-answers > li { margin: 2px 0; line-height: 1.45; } span.q-answers { display: block; margin: 4px 0; padding-left: 22px; } span.q-answers > .q-answer { display: list-item; list-style: disc; line-height: 1.45; } span.bet-q, span.bet-ticket-line { display: block; } .q-block > p, .q-block > .bet-q { margin: 0; } /* A Bureau de Change's Part 2 (6.4d; the week 4 canvas's 6): the seed's row, its number in mono on the right. */ .seed-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0; font-weight: 600; } .seed-part .quiet { margin: 0; font-size: 14px; line-height: 1.45; } /* A Bureau de Change's two blocks and a Mattress's leaves line (6.4d): the counter's box under a heading outside it. */ .bu-block > .cb-part:first-child, .bu-block form > .cb-part:first-child, .bu-block > .cb-short:first-child { border-top: 0; } .bu-block form { display: block; } .bu-grey { gap: 10px; } .bu-grey p { margin: 0; font-size: 15px; line-height: 1.45; } .mt-leaves { display: inline; }