/* Weekabout on the web. design/decisions/ is the design and board.css is what the phone is built from: tokens.css holds the palette and the type for both, kit.css the parts, and this file the shell, the night and what the older pages still need while plans/35 lands phase by phase. Two households use electric and tangerine, mixed into paper rather than laid over it. Mirror-image hatches are the redundant channel for colour blindness -- Alex's leans 45 degrees, Sam's -45, everywhere in the app. A settled band is the hue at 15% (A) or 18% (B), and the edge that says *unsettled* is 2.5px of the full colour, on your own change and on theirs. Each parent has one colour, the same on both phones and in every calendar the pair share (calendars/templatetags/sd.py decides which). The stylesheet still speaks of "mine" and "theirs" -- who a night belongs to relative to the viewer, which is what the scripts need -- and sets which colour "mine" is. */ @import url("tokens.css"); @import url("kit.css"); :root{ /* legacy names the older pages still use; each is one of the tokens */ --faint:#8A837D; --rule:var(--line); --edge:var(--hair); --link:var(--action); --link-hover:#211F55; --ang-a:45deg; --ang-b:-45deg; } /* derived on body, where the pair's colours are set, so they follow the swap */ body{ /* the settled ground: A at 15% and B at 18%, the edge at 40 and 42. The quarter of a percent between the two is not a rounding error -- tangerine at the same weight reads lighter than blue against warm paper (design/decisions/calendar-suggestions.html note 2). */ --a-band:color-mix(in srgb, var(--a) 15%, transparent); --a-edge:color-mix(in srgb, var(--a) 40%, transparent); --b-band:color-mix(in srgb, var(--b) 18%, transparent); --b-edge:color-mix(in srgb, var(--b) 42%, transparent); /* the same tint, flattened: a handover cell paints two of these as one gradient, and a gradient cannot composite translucent stops over the page */ --a-solid:color-mix(in srgb, var(--a) 15%, var(--paper)); --b-solid:color-mix(in srgb, var(--b) 18%, var(--paper)); } *{box-sizing:border-box} [hidden]{display:none!important} html,body{margin:0} body{ background:var(--paper); color:var(--ink); font-family:var(--text); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums; text-wrap:pretty; } /* display face: Bricolage reads as too much when tracked loose -- never set it untracked */ .disp,.serif{font-family:var(--display);font-weight:600;letter-spacing:-.032em} a{color:var(--link);text-decoration:none} a:hover{color:var(--link-hover)} .mute{color:var(--mute)} .faint{color:var(--faint)} .rule{height:1px;background:var(--rule);border:0;margin:20px 0} .lbl{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);font-weight:500} h1{font-family:var(--display);font-weight:600;font-size:28px;line-height:1.15;letter-spacing:-.032em;margin:0 0 6px} h2{font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:-.028em;margin:0 0 8px} p{margin:0 0 12px;color:var(--prose)} small{font-size:13px} /* ---- the shell: three widths ------------------------------------------- Under 700px the phone, exactly: the column, the rail fixed at the bottom with the home inset under it. From 700 the rail is a 72px ink column on the left and the content one column at 430px. From 960 the month column is 433px (7 x 55 + 6 x 3 + 24), a 24px gutter, and the pane, 380 to 520px. plans/35 section 4. */ .wrap{max-width:430px;margin:0 auto;padding:0 18px} .wrap{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))} .col{min-width:0} .pane{display:none;min-width:0} body.incal{padding-bottom:calc(66px + env(safe-area-inset-bottom))} body.incal .wrap{max-width:433px;padding:0} #rail{position:fixed;left:0;right:0;bottom:0;z-index:9;padding-bottom:calc(20px + env(safe-area-inset-bottom))} #rail a{position:relative} #rail .calmenu{position:fixed;bottom:calc(74px + env(safe-area-inset-bottom))} @media (min-width:700px){ body.incal{padding-bottom:0;padding-left:72px} #rail{top:0;bottom:0;right:auto;width:72px;grid-template-columns:1fr;grid-auto-rows:min-content; align-content:start;align-items:start;padding:14px 0 0} #rail>a,#rail .ri{padding:9px 0 8px} #rail .badge{left:auto;right:-8px;top:7px} #rail .calmenu{position:fixed;left:64px;bottom:auto;top:14px} #rail .calmenu .tail{left:-7px;bottom:auto;top:26px;border:0;border-left:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0 0 0 3px} body.incal .wrap{max-width:none;margin:0;padding:0 24px;display:grid;grid-template-columns:minmax(0,430px);gap:24px;justify-content:start} } @media (min-width:960px){ body.incal .wrap{grid-template-columns:433px minmax(380px,520px)} .pane{display:block} } /* the door and the public pages: the one place the lockup appears */ .door{padding:34px 0 26px;display:flex;align-items:center;gap:14px;justify-content:space-between} .door .wrap{display:flex;align-items:center;justify-content:space-between;width:100%} /* lockup: the diagonal-handover app icon widened to 5:3, with the word in capitals, in ink. The mark is exactly the cap height. Bricolage 600 measures .676em to the cap line and sits .149em below the top of a line-height:1 box, so 12px of mark against 17.8px of type puts the top of the mark and the top of the letters on one line, and the foot of the mark and the baseline on the other. Capitals are the one place this face is set untracked. The mark names its own two hues so it can swap them without touching --a and --b on , which say which parent you are and hold up every band, stripe and diff on the page. The swap is set in before first paint, and it moves the mark only: the word no longer carries colour. */ .brand{display:flex;align-items:flex-start;gap:5px;font-family:var(--display);font-weight:600;font-size:17.8px;line-height:1; text-transform:uppercase;letter-spacing:0;color:var(--ink); --m1:var(--mark-a);--m2:var(--mark-b)} [data-flip] .brand{--m1:var(--mark-b);--m2:var(--mark-a)} .brand .r1{fill:var(--m1)} .brand .r2{fill:var(--m2)} .brand svg{display:block;flex:none;margin-top:2.65px} /* the mark on its own, as the empty state draws it: two rows of the fortnight */ .mark{display:grid;gap:2px;width:44px;margin-bottom:16px} .mark i{display:block;height:5px;border-radius:1px;background:linear-gradient(to right,var(--mark-a) 55%,var(--mark-b) 55%)} .mark i+i{background:linear-gradient(to right,var(--mark-b) 45%,var(--mark-a) 45%)} [data-flip] .mark i{background:linear-gradient(to right,var(--mark-b) 55%,var(--mark-a) 55%)} [data-flip] .mark i+i{background:linear-gradient(to right,var(--mark-a) 45%,var(--mark-b) 45%)} /* cards */ .card{background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:13px 15px;margin-bottom:10px} .card.flat{background:transparent;border-style:dashed} /* buttons: the older pages' .btn, .btn-solid and .btn-sm wear the kit's weights -- hairlined, primary, and small inline -- until they are rebuilt */ .btn:not(.pri):not(.sec):not(.quiet):not(.dang){border:1px solid var(--line);color:var(--ink);background:var(--card); min-height:48px;margin-bottom:8px} .btn-solid:not(.pri){background:var(--action);color:var(--paper);border-color:var(--action)} .btn-sm{min-height:38px;padding:8px 12px;width:auto;display:inline-block;font-size:14px;margin-bottom:0} .row{display:flex;gap:8px}.row>*{flex:1} /* forms: the kit's field */ label{display:block;font-size:13px;font-weight:500;margin:14px 0 5px} input[type=text],input[type=email],input[type=date],input[type=datetime-local], input[type=number],input[type=time],select,textarea{ width:100%;font:inherit;padding:12px 13px;border:1px solid var(--line);border-radius:10px; background:var(--card);color:var(--ink);min-height:46px} input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--action);outline-offset:-1px} textarea{min-height:80px} /* parent identity: colour AND hatch direction, so it survives colour blindness */ .who{display:inline-flex;align-items:center;gap:7px;font-weight:500} .chip{width:15px;height:15px;border-radius:3px;flex:none;border:1px solid rgba(0,0,0,.15)} .chip-mine{background:var(--a)} .chip-theirs{background:var(--b)} .chip-none{background:var(--paper);border-style:dashed} /* status pills -- never a red badge with a number */ .pill{display:inline-block;font-size:12px;padding:3px 9px;border-radius:99px; border:1px solid var(--edge);color:var(--mute);background:var(--surface)} .pill-ok{color:var(--ink);border-color:var(--ink)} .pill-wait{border-style:dashed} /* diff rows */ .diff{border-left:2px solid var(--rule);padding-left:12px;margin:10px 0} .diff .was{color:var(--faint);text-decoration:line-through} .diff .now{font-weight:500} .arrow{color:var(--faint);padding:0 6px} /* notes (older pages) */ .note{background:var(--surface);border:1px solid var(--rule);border-radius:10px; padding:12px 14px;margin-bottom:12px;font-size:14.5px;color:var(--prose)} .note-quiet{background:transparent;border-style:dashed} .mono{font-family:ui-monospace,Menlo,monospace;font-size:12px;word-break:break-all} .msg{background:var(--surface);border:1px solid var(--rule);border-left:3px solid var(--ink); border-radius:5px;padding:11px 13px;margin-bottom:12px;font-size:14.5px} /* a Django message rendered as the kit's notice: one per page, under the top */ .notices{padding:12px 12px 0} .notices .notice+.notice{margin-top:8px} body:not(.incal) .notices{padding:12px 0 0} /* the strip and the calendar's name stay at the top of the column while the months scroll under the cut edge; the month names stick just below them */ #strip{position:sticky;top:0;z-index:7} .calname{position:sticky;top:55px;z-index:6} .monthname{top:55px} .calname~.monthwrap .monthname{top:88px} /* ---- the month -------------------------------------------------------- 50 x 84 at 393, capped at 55 x 93; 3px gutters; the numeral at 15px in its own corner, the seam a clear middle, the dots a clear floor (design/decisions/calendar.html). */ .monthwrap{padding:14px 12px 0;position:relative} .cal{width:calc(100% + 6px);margin:0 -3px 4px;border-collapse:separate;border-spacing:3px;table-layout:fixed} .cal th{font-size:11px;color:var(--mute);font-weight:400;padding:0 0 2px;line-height:1.2} .cal td{padding:0;vertical-align:top} .cell{display:block;position:relative;aspect-ratio:50/84;max-height:93px;border-radius:8px; border:1px solid var(--rule);background:var(--card);text-align:left; font-size:13px;color:var(--ink);overflow:hidden} .cell .n{position:absolute;left:6px;top:4px;font-family:var(--text);font-weight:500;font-size:var(--nsz,15px); line-height:1.15;z-index:2;color:var(--ink)} .cell.out{opacity:.32} /* ---- how a night is drawn ------------------------------------------------- Settled nights use a quiet household tint and a hairline edge. A proposal from the other parent uses a near-white ground, a full-colour diagonal hatch and a 2.5px solid edge. Your proposal uses the household colour at 45% and the same edge. Stripe direction carries household identity (45deg for one, -45deg for the other), so the proposal survives greyscale and colour blindness. Every state composes from the custom properties below. */ .cell{--tint:var(--card); --hue:var(--ink); --edge2:var(--rule); --ang:45deg; /* the hatch: 10px pitch, stroke = pitch x 0.15, and x 0.175 on the b colour -- tangerine gives up more of a hairline against warm paper than electric does (calendar-suggestions.html note 2). Under 44px a sample drops to a 6px pitch. */ --sp:10px; --sw:1.5px; --te:2.5px; /* a split day sets this to the hour it happens. defaulted because an undefined length makes the whole gradient invalid */ --split:75%} .cell.mine{--tint:var(--a-band); --hue:var(--a); --edge2:var(--a-edge); --ang:var(--ang-a); --sw:1.5px} .cell.theirs{--tint:var(--b-band); --hue:var(--b); --edge2:var(--b-edge); --ang:var(--ang-b); --sw:1.75px} .cell.mine,.cell.theirs{background:var(--tint);border-color:var(--edge2)} /* nobody yet: paper, the hairline at 80% (board.css .cell.free) */ .cell.none{background:var(--paper);border-color:color-mix(in srgb, var(--line) 80%, transparent)} .cell.today{box-shadow:inset 0 0 0 1.5px var(--mute)} /* past: 55% throughout; a selection's step-back multiplies in */ .cell.past{opacity:.55} /* events: up to three 8px dots on the floor, hollow when provisional */ .cell .marks{position:absolute;bottom:6px;left:6px;right:6px;display:flex;gap:4px;align-items:center;z-index:2} .cell .ed{width:8px;height:8px;border-radius:50%;background:var(--ink);flex:none;box-shadow:0 0 0 1px var(--paper)} .cell .ed.mine{background:var(--a)} .cell .ed.theirs{background:var(--b)} .cell .ed.tent{background:transparent;border:1.5px solid var(--ink);box-shadow:none} .cell .ed.tent.mine{border-color:var(--a)} .cell .ed.tent.theirs{border-color:var(--b)} .cell .ed:nth-child(n+4){display:none} /* the children leave the night's parent for this one */ .cell .ed.over{border-radius:1px;transform:rotate(45deg)} /* the numeral takes the larger half of a split day: a seam above the middle (before 15:13) moves it to the bottom left, and the dots to the bottom right */ .cell.flip .n{top:auto;bottom:5px} .cell.flip .marks{left:auto;right:6px;justify-content:flex-end} .cal input{position:absolute;opacity:0;pointer-events:none} .cal label{display:block;cursor:pointer} .cal input:checked + .cell{box-shadow:inset 0 0 0 2px var(--ink)} .monthbar{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:2px} .key{display:flex;gap:14px;font-size:12.5px;color:var(--mute);margin:8px 0 14px;flex-wrap:wrap} .cell .kid{font-size:9px;font-weight:600;line-height:1;padding:1px 3px;border-radius:2px; color:var(--paper);flex:none;letter-spacing:.02em;box-shadow:0 0 0 1px var(--paper)} .cell .kid.mine{background:var(--a)} .cell .kid.theirs{background:var(--b)} /* the hover caret: a mouse is told there is a menu here. 6.8 x 3.8 in ink, 6px from the top-right corner, on hover for a fine pointer and always on a selected night, never on a past night's hover (plans/35 section 5) */ .cell::after{content:"";position:absolute;top:6px;right:6px;width:0;height:0;z-index:3;opacity:0; border-left:3.4px solid transparent;border-right:3.4px solid transparent;border-top:3.8px solid var(--ink)} @media (hover:hover) and (pointer:fine){ .cal.is-live .cell:not(.past):hover::after{opacity:1} } .cell.sel::after,.cell.selected::after{opacity:1} /* the samples: the same night at the kit's other sizes */ .cell.sample40{width:40px;height:40px;aspect-ratio:auto;border-radius:6px;--nsz:11px;--sp:6px} .cell.sample34{width:34px;height:34px;aspect-ratio:auto;border-radius:5px;--nsz:10px;--sp:6px} .cell.sample34 .n{left:4px;top:2px} .cell.quiet84{height:84px;aspect-ratio:auto;width:auto} .cell.cut80{width:40px;height:67px;aspect-ratio:auto;border-radius:6px;--nsz:12px} .cell.chip{width:26px;height:34px;aspect-ratio:auto;border-radius:5px;--sp:6px} .cell.chip .n,.cell.chip .marks,.cell.chip .at,.cell.sample34 .at,.cell.sample40 .at,.cell.chip::after{display:none} .foot{display:flex;gap:16px;padding:26px 18px 30px;font-size:13px;color:var(--faint); border-top:1px solid var(--rule);margin-top:28px} .foot a{color:var(--faint)} .foot a:hover{color:var(--mute)} .cal .cell{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation} .cal.selecting .cell{cursor:pointer} /* ---- feeling like an app rather than a website ------------------------- Cross-document view transitions: Chrome 126+, Safari 18.2+, pure CSS, and silently ignored everywhere else. */ @view-transition { navigation: auto; } #rail{view-transition-name:rail} #strip{view-transition-name:strip} ::view-transition-old(root){animation:vt-out .18s ease both} ::view-transition-new(root){animation:vt-in .22s ease both} @keyframes vt-out{to{opacity:0;transform:translateY(-4px)}} @keyframes vt-in{from{opacity:0;transform:translateY(6px)}} @media (prefers-reduced-motion: reduce){ @view-transition { navigation: none; } ::view-transition-old(root),::view-transition-new(root){animation:none} } /* touch behaviour people read as "app" without noticing */ html{-webkit-text-size-adjust:100%} body{-webkit-tap-highlight-color:transparent;overscroll-behavior-y:contain;overflow-x:hidden} .btn,.cell,.rail a,.pill{-webkit-touch-callout:none} .offline{background:var(--surface);border-bottom:1px solid var(--edge);padding:10px 0;font-size:13.5px;color:var(--prose)} .offline .inner,.stale .inner{max-width:433px;margin:0 auto;padding:0 12px} /* a night a proposal would move is drawn in the colour it would become, striped because nobody has agreed to it, and thickened because it is the thing the page is asking about. Today is a dot here, since the border is already spoken for. */ .cell .dot-today{position:absolute;top:5px;right:5px;width:4px;height:4px;border-radius:50%;background:var(--ink)} /* ---- setup and draft states -------------------------------------------- Before a calendar is live, every night is still a sketch. These draft-only states keep the quieter legacy hatch; live proposals use the stronger, author-specific treatment below. */ .cell{--pale:var(--paper); --line2:var(--edge)} @supports (color: color-mix(in srgb, red, blue)) { .cell{--pale:color-mix(in srgb, var(--tint) 45%, var(--paper)); --line2:color-mix(in srgb, var(--hue) 28%, transparent)} } .cell.staged,.cell.pending,.cell.moved, .cal.is-draft .cell.mine,.cal.is-draft .cell.theirs{ background-color:var(--pale); background-image:repeating-linear-gradient(var(--ang), var(--line2) 0 1px, transparent 1px 6px)} /* not agreed by both: one dashed edge, one weight, everywhere */ .cell.staged,.cell.pending,.cell.moved, .cal.is-draft .cell.mine,.cal.is-draft .cell.theirs{border:2px dashed var(--hue)} .cell.staged .n,.cell.pending .n,.cell.moved .n{font-weight:700} label.card.pick{display:flex;gap:10px;align-items:center;cursor:pointer} label.card.pick input{margin-top:3px;flex:none} /* the pattern radios live outside their labels, so a CSS dot stands in for the native control -- and the panels below can key off :checked directly */ input[name=pattern]{position:absolute;opacity:0;width:0;height:0;pointer-events:none} label.card.pick .dot{width:18px;height:18px;border-radius:50%;flex:none;margin-top:2px; border:1.5px solid var(--edge);background:var(--paper)} input[name=pattern]:checked + label.card.pick{border-color:var(--ink)} input[name=pattern]:checked + label.card.pick .dot{border-color:var(--ink); box-shadow:inset 0 0 0 3px var(--paper),inset 0 0 0 9px var(--ink)} input[name=pattern]:focus-visible + label.card.pick{outline:2px solid var(--ink);outline-offset:2px} button.cell{font:inherit;cursor:pointer;width:100%;appearance:none} button.cell:active{filter:brightness(.96)} .kidrow{display:flex;gap:8px;align-items:center;margin-bottom:8px} .kidrow input{flex:1;min-width:0} .kidrow .btn{margin:0;flex:none} .kidrow:only-child .btn{visibility:hidden} /* ---- pattern strips (the older picker) -------------------------------- */ .strip{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;width:98px;flex:none} .strip i{display:block;height:11px;border-radius:2px} .strip i.mine{background:var(--a)} .strip i.theirs{background:var(--b)} .strip i.none{background:var(--rule)} label.card.pick .strip{margin-left:auto} /* the builder: same diagram at a size you can hit with a thumb */ .strip-build{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin:8px 0 2px} .strip-build button{appearance:none;font:inherit;cursor:pointer;border:1px solid transparent; border-radius:4px;min-height:44px;padding:0;color:transparent;overflow:hidden} .strip-build button.mine{background:var(--a)} .strip-build button.theirs{background:var(--b)} .strip-build button:focus-visible{outline:2px solid var(--ink);outline-offset:2px} .strip-cols{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:4px} .strip-cols span{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);text-align:center} .weekpick{display:flex;gap:6px;margin:4px 0 10px} .weekpick button{appearance:none;font:inherit;cursor:pointer;flex:1;min-height:40px; border:1px solid var(--edge);border-radius:4px;background:var(--paper);color:var(--ink)} .weekpick button[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)} /* ---- chip pickers ------------------------------------------------------- */ .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px} .chips input{position:absolute;opacity:0;width:0;height:0;pointer-events:none} .chips label{display:flex;flex-direction:column;align-items:stretch;overflow:hidden; min-width:46px;min-height:48px;cursor:pointer;border:1.5px solid var(--edge); border-radius:6px;background:var(--card);font-weight:500;margin:0; transition:border-color .12s ease,transform .12s ease} .chips label .bar{height:6px;flex:none;background:var(--rule)} .chips label .n{flex:1;display:flex;align-items:center;justify-content:center;font-size:13px;padding:0 9px;white-space:nowrap} .chips label:hover{border-color:var(--a);transform:translateY(-1px)} .chips input:checked + label{border-color:var(--ink)} .chips input:checked + label .bar{background:var(--a)} .chips input:focus-visible + label{outline:2px solid var(--ink);outline-offset:2px} .chips label.wide .n{padding:0 14px} .timepick .othertime,.chips .othertime{display:none;flex-basis:100%;margin-top:4px} .timepick #htx:checked ~ .othertime{display:block} .chips #co-new:checked ~ .othertime{display:block} .timepick .othertime label,.chips .othertime label{all:unset;display:block;font-size:13px;font-weight:500;margin:10px 0 5px} [data-builder]{display:none} #pat-custom:checked ~ [data-builder]{display:block} #pat-custom:checked ~ [data-handover-day],#pat-one_home:checked ~ [data-handover-day]{display:none} .patkey{display:flex;flex-wrap:wrap;gap:8px 18px;margin:6px 0 10px;font-size:13.5px;color:var(--prose)} .patkey span{display:inline-flex;align-items:center;gap:8px;font-weight:500} .patkey i{display:block;width:16px;height:16px;border-radius:3px;flex:none} .patkey i.mine{background:var(--a)} .patkey i.theirs{background:var(--b)} [data-flip-grid] .cell{touch-action:none} /* Past the end of what is planned at all. Flat and grey rather than dashed: a dashed empty night inside the plan means "nobody is down for this", and this means "we have not got this far yet". */ .cell.beyond,.cell.beyond.mine,.cell.beyond.theirs,.cal.is-draft .cell.beyond{ background:var(--surface);background-image:none; border-style:solid;border-width:1px;border-color:var(--rule)} .cell.beyond .n{opacity:.38;font-weight:600} .cell.beyond .marks,.cell.beyond .at,.cell.beyond::before{display:none} /* one tick per day on a suggestion: agree the rest, send this one back */ .notthis{display:flex;align-items:center;gap:9px;margin-top:8px;font-size:13px;color:var(--mute);font-weight:400;cursor:pointer} .notthis input{width:20px;height:20px;flex:none;margin:0} .diff:has(.notthis input:checked){border-left-color:var(--b)} .diff:has(.notthis input:checked) .was{text-decoration:none;color:var(--ink);font-weight:600} .diff:has(.notthis input:checked) .now{text-decoration:line-through;opacity:.5} /* a draft the other parent currently has: a picture, not a control */ .cal .cell:disabled{cursor:default;opacity:1} .cal .cell:disabled:active{filter:none} /* ---- reviewing what came back (proposals/detail.html, until phase 7) ---- */ .reviewbar{position:sticky;top:0;z-index:6;background:var(--surface); border:1px solid var(--rule);border-radius:6px;padding:14px 15px;margin:0 0 14px} .reviewbar .btn{margin-bottom:0} .reviewbar .btn[aria-pressed=true]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)} .reviewnav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;font-size:12.5px} .reviewnav .btn{margin:0} .reviewnav .btn:disabled{opacity:.4;cursor:default} .diff{scroll-margin-top:var(--review-offset,0px)} [data-tally]{scroll-margin-top:var(--review-offset,0px)} .reviewbar.is-done .row,.reviewbar.is-done [data-review-next]{display:none} .reviewbar.is-done [data-review-pos]{display:none} .reviewbar.is-done [data-review-when]{margin-top:0} .reviewbar.is-done .reviewnav{margin-top:8px} /* per-platform steps: open one at a time rather than a wall of instructions */ .howto{border:1px solid var(--rule);border-radius:10px;margin-bottom:8px;background:var(--card)} .howto summary{cursor:pointer;padding:13px 15px;font-weight:500;list-style:none;display:flex;justify-content:space-between;align-items:center} .howto summary::-webkit-details-marker{display:none} .howto summary::after{content:"+";color:var(--faint);font-size:18px;line-height:1} .howto[open] summary::after{content:"\2212"} .howto ol{margin:0;padding:0 15px 6px 34px;font-size:14.5px;color:var(--prose)} .howto ol li{margin-bottom:7px} .howto .hint{padding:0 15px 13px} /* ---- who is on the calendar: two identical columns ----------------------- */ .people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:10px 0 4px} .person{border:1px solid var(--rule);border-radius:10px;padding:13px 14px;background:var(--card)} .person .chip{display:block;width:18px;height:18px;margin-bottom:9px} .person-name{font-weight:600;font-size:16px;overflow:hidden;text-overflow:ellipsis} .person .faint{font-size:12.5px;line-height:1.5} /* Anything on screen only because this is a prototype wears the same mark */ .devnote{border-color:var(--ink);border-style:dashed;background:transparent} .devnote .tag{display:inline-block;font-size:10px;letter-spacing:.09em;text-transform:uppercase;font-weight:600; color:var(--paper);background:var(--ink);padding:2px 7px;border-radius:3px;margin-bottom:8px} /* ---- the day the children change hands ----------------------------------- A night belongs to whoever they sleep with, so a day on which they move is two things at once: the outgoing parent until the handover, the incoming one after it. The cell is split at the hour it actually happens. The hatch is dropped on a settled split day; the rule that stands in for it is the line, which says a handover happens here in any colour scheme. Both halves are opaque mixes of the two bands over paper. */ .cell.hand{background-color:var(--paper); background-image:linear-gradient(to bottom, var(--hand-from) 0 var(--split), var(--hand-to) var(--split) 100%)} .cell.hand.to-theirs{--hand-from:var(--a-solid); --hand-to:var(--b-solid); --from-hue:var(--a); --from-ang:var(--ang-a); --to-hue:var(--b); --to-ang:var(--ang-b); --from-sw:1.5px; --to-sw:1.75px; --from-pale:var(--paper); --to-pale:var(--paper); border-color:var(--b-edge)} .cell.hand.to-mine{--hand-from:var(--b-solid); --hand-to:var(--a-solid); --from-hue:var(--b); --from-ang:var(--ang-b); --to-hue:var(--a); --to-ang:var(--ang-a); --from-sw:1.75px; --to-sw:1.5px; --from-pale:var(--paper); --to-pale:var(--paper); border-color:var(--a-edge)} @supports (color: color-mix(in srgb, red, blue)) { .cell.hand.to-theirs{--from-pale:color-mix(in srgb, var(--a-band) 45%, var(--paper)); --to-pale:color-mix(in srgb, var(--b-band) 45%, var(--paper))} .cell.hand.to-mine{--from-pale:color-mix(in srgb, var(--b-band) 45%, var(--paper)); --to-pale:color-mix(in srgb, var(--a-band) 45%, var(--paper))} } /* a handover that is not agreed yet, on a sketch: each parent's hatching at their own angle, clipped to their half of the day */ .cell.hand.staged,.cell.hand.pending,.cell.hand.moved, .cal.is-draft .cell.hand{background-color:var(--paper); background-image: repeating-linear-gradient(var(--from-ang), color-mix(in srgb, var(--from-hue) 28%, transparent) 0 1px, transparent 1px 6px), repeating-linear-gradient(var(--to-ang), color-mix(in srgb, var(--to-hue) 28%, transparent) 0 1px, transparent 1px 6px), linear-gradient(to bottom, var(--from-pale) 0 var(--split), var(--to-pale) var(--split) 100%); background-size:100% var(--split), 100% calc(100% - var(--split)), 100% 100%; background-position:top left, bottom left, top left; background-repeat:no-repeat} .cell.hand.staged,.cell.hand.pending,.cell.hand.moved{border-color:var(--hue)} /* the rule *is* the handover: 2px of ink at the hour */ .cell.hand::before{content:"";position:absolute;left:0;right:0;top:var(--split);height:0;border-top:2px solid var(--ink);z-index:2} /* the capsule rides the line: paper, a 55% ink edge, the time at 10px */ .cell .at{position:absolute;left:50%;top:var(--split);transform:translate(-50%,-50%); padding:1.5px 5px;border-radius:99px;background:var(--paper); border:1px solid color-mix(in srgb, var(--ink) 55%, transparent); font-size:10px;line-height:1.2;font-weight:600;letter-spacing:.01em;color:var(--ink);z-index:3;white-space:nowrap} /* held: the capsule hides, the seam thickens to 3px, the day lifts */ .cell.held::before{border-top-width:3px;border-top-style:solid} .cell.held .at{display:none} .cell.held{transform:scale(1.05);box-shadow:0 10px 20px -8px rgba(0,0,0,.45);z-index:5} /* the older positioned menu (menu.js, until phase 4) */ .menu{position:absolute;z-index:30;min-width:230px;background:var(--card);border:1px solid var(--line); border-radius:13px;padding:6px;box-shadow:0 8px 19px rgba(31,26,23,.24)} .menu .lbl{padding:6px 11px 2px} .menu a,.menu button{display:block;width:100%;text-align:left;padding:10px 11px;border-radius:8px; font:inherit;font-size:14.5px;color:var(--ink);background:none;border:0;cursor:pointer} .menu a:hover,.menu button:hover{background:var(--surface)} .menu button.solid{background:var(--ink);color:var(--paper)} .menu .menu-note{padding:8px 11px;font-size:14px;color:var(--prose)} .menu .menu-row{display:flex;gap:8px;align-items:center;padding:8px 11px} .menu .menu-row label{margin:0;font-size:13.5px;color:var(--mute);white-space:nowrap} .menu .menu-row input{width:auto;margin:0;padding:6px 8px;min-height:0} .menu .menu-row .btn{margin:0;width:auto} /* the line that says the calendar has moved since the page was drawn */ .stale{position:sticky;top:0;z-index:6;background:var(--surface);border-bottom:1px solid var(--edge);font-size:14px;color:var(--prose)} .stale .inner{padding:9px 12px} .stale a{font-weight:600;margin-left:6px} /* ragged months: the days of the month and nothing else */ .cal td.blank .cell{visibility:hidden} /* ---- the live month ------------------------------------------------------ A stack of months; the name of each sticks while its weeks scroll under it. A night is drawn as proposed if anything is proposed. */ .month{position:relative;margin:0 0 22px} .monthname{position:sticky;z-index:5;margin:0 0 5px;padding:8px 0 4px;font-size:22px;letter-spacing:-.032em; background:var(--paper);display:flex;align-items:baseline;justify-content:space-between;gap:12px} .edge{display:flex;justify-content:center;padding:8px 12px 18px} /* Proposed by the other parent: near-white ground, full-colour diagonal hatch and a 2.5px solid edge. The numeral gets a paper halo. */ .cell.proposed.by-them{background-color:color-mix(in srgb, var(--hue) 4%, var(--paper)); background-image:repeating-linear-gradient(var(--ang), var(--hue) 0 var(--sw), transparent var(--sw) var(--sp)); border:var(--te) solid var(--hue)} /* Proposed by you: your household colour at 45%, plain, the same edge */ .cell.proposed.by-me{background-color:color-mix(in srgb, var(--hue) 45%, var(--paper)); background-image:none;border:var(--te) solid var(--hue)} .cell.proposed .n,.cell.hand.from-proposed .n{font-weight:700} .cell.proposed.by-me .n,.cell.hand.from-by-me:not(.proposed) .n{color:var(--ink);text-shadow:0 0 3px var(--paper)} .cell.proposed.by-them .n,.cell.hand.from-by-them:not(.proposed) .n{ color:var(--ink);paint-order:stroke fill;-webkit-text-stroke:3px var(--paper);text-shadow:0 0 3px var(--paper)} /* A split day with anything unanswered on it: the whole square is in play, each half hatched at its own household's angle, and the seam asked for is dashed (calendar-suggestions.html note 3) */ .cell.hand.proposed-time::before{border-top-style:dashed} .cell.hand.to-theirs{--from-faint:color-mix(in srgb, var(--a) 3%, var(--paper)); --to-faint:color-mix(in srgb, var(--b) 3%, var(--paper)); --from-own:color-mix(in srgb, var(--a) 45%, var(--paper)); --to-own:color-mix(in srgb, var(--b) 45%, var(--paper))} .cell.hand.to-mine{--from-faint:color-mix(in srgb, var(--b) 3%, var(--paper)); --to-faint:color-mix(in srgb, var(--a) 3%, var(--paper)); --from-own:color-mix(in srgb, var(--b) 45%, var(--paper)); --to-own:color-mix(in srgb, var(--a) 45%, var(--paper))} .cell.hand.from-by-me:not(.proposed), .cell.hand.proposed.by-me{background-color:var(--paper); background-image:linear-gradient(to bottom, var(--from-own) 0 var(--split), var(--to-own) var(--split) 100%)} .cell.hand.from-by-them:not(.proposed), .cell.hand.proposed.by-them{background-color:var(--paper); background-image: repeating-linear-gradient(var(--from-ang), var(--from-hue) 0 var(--from-sw), transparent var(--from-sw) var(--sp)), repeating-linear-gradient(var(--to-ang), var(--to-hue) 0 var(--to-sw), transparent var(--to-sw) var(--sp)), linear-gradient(to bottom, var(--from-faint) 0 var(--split), var(--to-faint) var(--split) 100%); background-size:100% var(--split), 100% calc(100% - var(--split)), 100% 100%; background-position:top left, bottom left, top left;background-repeat:no-repeat} /* selected: one SVG outline per month round the run (kit.css .selout, drawn by month.js), under the sticky month name */ .month>.selout{z-index:4} /* while a selection stands every other night steps back: 30% at 80% saturation */ [data-months]:has(.cell.selected) .cell:not(.selected){filter:saturate(.8);opacity:.3} [data-months]:has(.cell.selected) .cell.past:not(.selected){opacity:.165} /* declined: the settled night, outlined in its own colour a shade stronger, and a mark */ .cell.declined{box-shadow:inset 0 0 0 2.5px color-mix(in srgb, var(--hue) 55%, transparent)} .cell .bang{position:absolute;right:6px;top:3px;font-size:12px;font-weight:700;color:var(--ink);z-index:3;line-height:1.2} /* live: a tap on its way, a tap that failed, a change that just arrived */ .cell.inflight{opacity:.6} .cell.failed{box-shadow:inset 0 0 0 2px var(--ink)} .cell.arrived{box-shadow:0 0 0 2.5px color-mix(in srgb, var(--ink) 35%, transparent);transition:box-shadow .3s} /* a finger scrolls the month until a hold has armed a drag-select (plans/35 section 5); a mouse never scrolls it by dragging */ .cal.is-live .cell{touch-action:pan-y;cursor:pointer;user-select:none;-webkit-user-select:none} .cal.selecting .cell{touch-action:none} .cal.is-live .cell.past{cursor:default} .cal.is-live .cell.past.selected{cursor:pointer} /* prototype: who am I (rendered inside Settings) */ .devpick{position:relative} .devpick summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;font-size:14px;color:var(--mute);padding:6px 0} .devpick summary::-webkit-details-marker{display:none} .devpick .ic{width:22px;height:22px} .devmenu{position:absolute;top:100%;left:0;margin-top:4px;min-width:200px;background:var(--ink);color:var(--paper); border-radius:10px;padding:6px;box-shadow:0 8px 28px rgba(34,36,42,.25);z-index:20} .devmenu .lbl{color:color-mix(in srgb,var(--paper) 60%,transparent);padding:4px 8px} .devmenu a{display:block;padding:8px 10px;border-radius:6px;color:var(--paper);font-size:14px} .devmenu a.on,.devmenu a:hover{background:var(--paper);color:var(--ink)} /* changes: parcels */ .parcel{display:block;padding:11px 13px;margin-bottom:8px;color:var(--ink)} .parcel.is-new{border-left:3px solid var(--ink)} .parcel-head{display:flex;justify-content:space-between;gap:10px;font-size:13px;margin-bottom:3px} .parcel-body{font-size:15px} /* ---- the empty state: signed in, no calendar --------------------------- */ .floor{padding-top:34px} .floor .sec{margin-top:30px} .floor .sec+.sec{margin-top:26px} .floor form .btn{margin-top:10px} .floor form:has(input:placeholder-shown) .btn.pri{background:var(--line);color:var(--mute)} .floor .foot-row{margin-top:34px;border-top:1px solid var(--line);padding-top:10px} .floor .foot-row .lrow{border:0;color:var(--mute);font-size:14px} /* ---- the home page ------------------------------------------------------ The one page that gets read on a laptop, so it is allowed to be wider than the app's 430px column -- but nothing else changes. */ body.wide .wrap{max-width:660px} .land{margin:0 auto} .land-h1{font-size:clamp(30px,7vw,40px);line-height:1.08;margin:2px 0 10px} .land-sub{font-family:var(--display);font-weight:600;letter-spacing:-.028em;font-size:clamp(18px,4.4vw,22px); line-height:1.35;color:var(--prose);margin-bottom:20px} .demo{padding:14px 15px 13px} .demo .cal{margin:0 auto;max-width:520px} .demo .cell{font:inherit;width:100%;appearance:none;cursor:pointer;-webkit-tap-highlight-color:transparent} .demo .cell:focus-visible{outline:2px solid var(--ink);outline-offset:2px} .demo-say{font-size:14px;line-height:1.45;color:var(--prose);margin:10px 2px 0;min-height:3em} .demo-act{display:flex;gap:8px;margin-top:2px} .demo-act .btn{margin:0} .start{margin:16px 0 4px} .start label{font-size:14px;font-weight:600;color:var(--ink);margin:0 0 7px} .start .kidrow{margin-bottom:6px} .start .kidrow .btn{visibility:visible} .steps{margin:6px 0 12px;padding-left:22px;display:flex;flex-direction:column;gap:9px;color:var(--prose);font-size:15px} .steps li::marker{font-weight:600;color:var(--ink)} .steps strong{color:var(--ink)} .cards{display:grid;gap:10px} .cards .card{margin:0} .cards .card p{margin:5px 0 0;font-size:14.5px;line-height:1.45} @media (min-width:640px){ .cards{grid-template-columns:1fr 1fr} .land .btn{display:inline-block;width:auto;min-width:210px;margin-right:8px} .land-h1{font-size:44px} .demo{padding:18px 20px 16px} } /* ---- the kit gallery, /dev/kit/ ------------------------------------------ */ .kitpage{max-width:none} .kitpage .wrap{max-width:none} .kit{display:flex;flex-wrap:wrap;gap:34px 30px;align-items:flex-start;padding:12px 0 60px} .kit>div{width:393px;flex:none} .kit .cap{font-size:12px;color:var(--mute);margin-top:10px;letter-spacing:.02em} .kit .cap b{display:block;font-size:13px;color:var(--ink);letter-spacing:0;margin-bottom:2px} .kit .box{background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden;position:relative} .kit .box .pad{height:auto} .kit .grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px} .kit .grid+.grid{margin-top:3px} .kit .grid .cell{height:84px;aspect-ratio:auto} /* ---- the lists: Settings, Sam's page, Sync, the deletion screens, Changes (plans/35 sections 6.4 to 6.6 and 11 phase 9). The parts are kit.css's; this is only where the web puts a real field where the app pushes an editor, and where the second scope goes from 960 (web.html section 4). */ .pad.lists{padding-bottom:34px} .lists .scope+.sec,.lists .scope+form.sec{margin-top:0} /* a row whose value is the field itself: the web has no second screen for a name */ .lrow.edit{cursor:text} .lrow.edit input.val{all:unset;margin-left:auto;text-align:right;color:var(--ink);font-size:15px;min-width:0;flex:1;cursor:text} .lrow.edit input.val::placeholder{color:var(--mute)} .lrow.edit input.val:focus{color:var(--action)} .lrow.edit .save{margin-left:8px;flex:none;background:none;border:0;padding:0;font-family:inherit;font-size:13px;font-weight:600;color:var(--action);cursor:pointer} /* the ladder and the tick, as real inputs: the input is there for the keyboard, the ring draws it */ .lrow.tickrow{position:relative} .lrow.tickrow input{position:absolute;opacity:0;width:1px;height:1px;margin:0} .lrow.tickrow input:checked+.tick{border:none;background:var(--action)} .lrow.tickrow input:checked+.tick::after{content:"\2713";position:absolute;inset:0;color:var(--paper);font-size:12px;text-align:center;line-height:20px;font-weight:700} .lrow.tickrow input:focus-visible+.tick{outline:2px solid var(--action);outline-offset:2px} .lrow.tickrow .tick{position:relative} /* a row that is a button: the same row, and the form does the rest */ button.lrow.plain{width:100%;appearance:none;background:none;border:0;border-bottom:1px solid var(--hair);padding:13px 0;font-family:inherit;text-align:left;cursor:pointer} button.lrow.plain:last-child{border-bottom:0} .seat.big{font-size:17px;margin-bottom:4px} .seat i.wait{background:transparent} .fld.words{font-size:20px;letter-spacing:.01em} .fld.link{font-size:13px;color:var(--mute);word-break:break-all;line-height:1.35} /* the how-tos under the link, folded */ .howrow summary.lrow{list-style:none;cursor:pointer;font-size:14px} .howrow summary::-webkit-details-marker{display:none} .howrow[open] summary .chev{transform:rotate(180deg)} .howrow ol{margin:4px 0 0;padding-left:20px;font-size:13.5px;color:var(--prose);line-height:1.45} .howrow ol li{margin-bottom:5px} .howrow .hint{margin-bottom:12px} .howrow[open]{border-bottom:1px solid var(--hair)} .howrow[open] summary.lrow{border-bottom:0} /* the second scope, lifted into the pane from 960: a hairline on its left, the sheet's inset, and the blank bar to line up with the column's title */ .pane:has(.panebox){border-left:1px solid var(--line)} .pane .panebox{padding:64px 18px 34px} .pane .panebox .scope:first-child{margin-top:0} .copies{display:grid;gap:8px;margin-top:8px} .copies .btn+.btn{margin-top:0} /* the signature at the foot of Settings */ .colophon.brand{justify-content:center;margin:34px auto 10px;width:max-content} /* the ledger (undo.html; web.html section 4) */ .ledger.lists{padding:14px 15px 34px} .ledger>.sub{margin:0 0 6px} .ledger .notices{padding:8px 0 0} .ledger .notice .go{background:none;border:0;padding:0;font-family:inherit;cursor:pointer} .ledgerrow .jump{display:contents;color:inherit;text-decoration:none} .ledgerrow .cell.sample34{width:34px} .ledgerrow .cell.sample34.blank{visibility:hidden} .ledgerrow span.back{display:flex;gap:0;align-items:center} .ledgerrow.chosen{background:var(--surface);margin:0 -15px;padding-left:15px;padding-right:15px} .ledger .empty{font-size:13px;color:var(--mute);padding-top:20px} .ledger .foot-line{font-size:12px;color:var(--mute);padding:16px 0 0} .card.arr{margin-top:12px} .card.arr b{display:block;font-size:14px;font-weight:600;color:var(--ink)} .card.arr .hint{margin-top:4px} .btns{display:grid;gap:8px;margin-top:12px} .btns .btn+.btn{margin-top:0} /* ---- select, then choose: the menu, the strip's states, the sheets and the pane (plans/35 phases 4 to 6; selection.html, context-menu.html, strip.html, day-sheet.html, range-sheet.html, web.html) ---------------- */ /* the wash covers the window while a menu is up; the card rides above the strip */ .wash.fixed{position:fixed;z-index:29} .nightmenu.onmonth{z-index:30} .nightmenu a.mr{display:flex} .nightmenu .mr.pri{font-weight:700} .nightmenu:focus{outline:none} .nightmenu .mr:focus-visible{outline:2px solid var(--action);outline-offset:-3px;border-radius:8px} /* offline: the same step-back on every night, and nothing takes a click (web.html section 5) */ body.offline [data-months] .cell{filter:saturate(.8);opacity:.3;pointer-events:none} body.offline [data-months] .cell.past{opacity:.165} /* the strip: one height in every state; the one line that wraps is offline at 393 */ .keystrip .readout .verb.warn{color:var(--b)} .keystrip.standing .readout{flex-wrap:wrap;row-gap:2px} .keystrip.standing:has(.verb.warn){height:auto} .keystrip .primary:focus-visible{outline:2px solid var(--action);outline-offset:2px} /* the day sheet and the range sheet, in the page, the bottom sheet and the pane */ .dsheet .shead{padding:10px 0 0} .dsheet .sbody{padding-top:16px} .dsheet .btns{margin-top:16px} .dsheet .btns form{margin:0} .dsheet .btns .btn+.btn{margin-top:0} .dsheet .sec{margin-top:22px} .dsheet .lrow.chg{font-size:13.5px;padding:11px 0} .dsheet .dayhd{font-size:12px;font-weight:600;color:var(--mute);padding-top:10px} /* the day drawn tall, the details read out beside it (day-sheet.html note 4) */ .dayhead{display:flex;gap:14px;align-items:flex-start} .dayhead .col{flex:none;position:relative} .dayfacts{display:grid;gap:9px;font-size:13.5px;line-height:1.25;padding-top:2px} .dayfacts b{display:block;font-weight:500;color:var(--ink)} .dayfacts em{display:block;font-style:normal;font-size:12.5px;color:var(--mute);margin-top:2px} /* a day with no boundary: a key, not a picture */ .daykey{display:flex;gap:10px;align-items:center;font-size:13.5px;color:var(--ink)} .cell.key18{width:18px;height:18px;aspect-ratio:auto;border-radius:4px;--sp:6px} .cell.key18 .n,.cell.key18 .marks,.cell.key18 .at,.cell.key18::after{display:none} .cell.tall160{width:95px;height:160px;max-height:none;aspect-ratio:auto;--nsz:15px} .cell.tall160::after{display:none} /* the events inside the tall day: 9px semibold in a paper capsule, at their times on the seam's formula */ .lozs{position:absolute;left:4px;right:4px;top:0;bottom:0;pointer-events:none} .loz{position:absolute;left:50%;transform:translate(-50%,-50%);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; font-size:9px;font-weight:600;line-height:1.3;color:var(--ink);padding:2px 5px;border-radius:99px; background:color-mix(in srgb,var(--paper) 92%,transparent);border:1px solid var(--ink);z-index:4} .loz.mine{border-color:var(--a)} .loz.theirs{border-color:var(--b)} /* the night row's one word, as a form */ .nrow form.acts{margin:0} .nrow button.act2{background:none;border:0;padding:0;font-family:inherit;cursor:pointer} /* On this day: the dot is content, whose colour and whether it is settled */ .evrow{text-decoration:none;color:inherit} .evrow .txt{min-width:0} .evrow .txt small{display:block;font-size:12.5px;margin-top:2px} .evrow .txt small.mute{color:var(--mute)} .evrow .txt small.act{color:var(--action)} .evdot{width:9px;height:9px;border-radius:50%;background:var(--ink);flex:none;display:block} .evdot.mine{background:var(--a)} .evdot.theirs{background:var(--b)} .evdot.tent{background:transparent;border:1.5px solid var(--ink)} .evdot.tent.mine{border-color:var(--a)} .evdot.tent.theirs{border-color:var(--b)} /* the history, folded to a count */ .fold2 summary{list-style:none;cursor:pointer} .fold2 summary::-webkit-details-marker{display:none} .fold2[open] summary .chev{transform:rotate(180deg)} /* the cut-out: the run at 0.8 in its engraved box, on the strip's ground (range-sheet.html notes 3 and 4; the phone's 40 x 67, the pane's 44 x 74) */ .cutout{background:var(--shelf);border:1px solid var(--line);border-radius:10px;padding:10px;margin-top:16px; width:max-content;max-width:100%;box-shadow:none} .cutout .mn{font-size:12px;font-weight:600;color:var(--mute);margin-bottom:6px} .cutout .dow{display:grid;grid-template-columns:repeat(7,40px);gap:2.4px;margin-bottom:6px} .cutout .dow span{text-align:center;font-size:10px;color:var(--mute)} .cutout .grid{grid-template-columns:repeat(7,40px);gap:2.4px} .cutout .grid+.grid{margin-top:2.4px} .cutout .cell{--sp:6px} .cutout .cell.blank{visibility:hidden} .cutout .cell::after{display:none} .cutout .cell:not(.selected){opacity:.55} .cutout .cell.past:not(.selected){opacity:.3} .cutout .cell.selected{box-shadow:inset 0 0 0 2px var(--ink)} .cutout .cell .n{left:5px;top:3px} .cutout .cell.flip .n{top:auto;bottom:4px} .cutout .cell .at{font-size:8px;padding:0 3px;border:0;background:rgba(255,249,242,.9);left:auto;right:3px;transform:translateY(-50%)} .cutout .cell .marks{bottom:4px;left:5px;right:5px;gap:3px} .cutout .cell .ed{width:6px;height:6px} /* the sheets as pages, and in the bottom sheet */ body.incal .col>.dsheet{padding:10px 18px 34px} dialog.sheet{max-height:92vh;overflow:auto} dialog.sheet .body .dsheet .shead{padding-top:0} /* the pane: the sheet minus the grabber, a hairline on its left, scrolling on its own; with nothing selected it shows today (web.html note 3) */ .pane .dsheet{padding:22px 0 34px} @media (min-width:960px){ .pane{position:sticky;top:0;height:100vh;overflow:auto;border-left:1px solid var(--line);padding:0 18px} .pane .cutout .dow,.pane .cutout .grid{grid-template-columns:repeat(7,44px)} .pane .cutout .cell.cut80{width:44px;height:74px} } /* the printable month: the column, and nothing that is not the month (web.html section 7) */ @media print{ #rail,.keystrip,.pane,.band,.edge,dialog{display:none!important} body.incal{padding:0} body.incal .wrap{display:block;max-width:433px} .monthwrap{break-inside:avoid;page-break-inside:avoid} } /* ---- authoring, brought to the kit (plans/35 section 6.7; the /new/ wizard, the pattern editor, the event sheet, restart and join). Appended by the authoring agent; nothing above is reordered. These rules dress the kit's parts on the authoring templates and add the few small parts the boards name that the shared kit does not carry. ------------------------------- */ /* a label kept for screen readers where a .sech already names the field */ .vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* the me/other legend over a pattern strip: the kit's swatches, inline and small rather than the two full-width cards .whose draws by default */ .whose.legend{display:flex;gap:18px;margin:2px 0 8px} .whose.legend .w{border:0;padding:0;background:none;font-size:13px;color:var(--prose);cursor:default} .whose.legend .w i{width:14px;height:14px} /* the preset cards keep the CSS-only radio selection above; the swatch strip is now the kit's .pat, sat at the right of the card */ .card.pick .pk-txt{flex:1;min-width:0} .card.pick .pat.pk-strip{margin-left:auto;width:98px;flex:none;--ph:12px} /* who takes an event: a full-width default over the kit's two-up .whose, radios hidden and the choice shown by a heavier border (AddEventView.swift) */ .takes{display:grid;gap:9px;margin-top:8px} .takes .opt{border:1px solid var(--line);border-radius:10px;padding:12px 13px;font-size:14.5px; background:var(--card);color:var(--ink);cursor:pointer;display:flex;align-items:center} .takes .opt:has(input:checked){border:2px solid var(--ink);padding:11px 12px;font-weight:600} .takes .whose{margin:0} .whose .w{cursor:pointer} .takes .opt input,.whose .w input{position:absolute;opacity:0;width:0;height:0;pointer-events:none} .whose .w:has(input:checked){border:2px solid var(--ink);padding:10px 11px;font-weight:600} .whose .w:focus-within{outline:2px solid var(--action);outline-offset:2px} /* the numbered steps on the join screen: a small ink-ringed circle */ .nrow .num{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line);flex:none; display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--mute)} /* the kit's tick, driven by the checkbox it labels rather than a class */ .tickrow{margin-top:4px} .tickrow input{position:absolute;opacity:0;width:0;height:0;pointer-events:none} .tickrow:has(input:checked) .tick{border:none;background:var(--action);position:relative} .tickrow:has(input:checked) .tick::after{content:"\2713";position:absolute;inset:0;color:var(--paper); font-size:12px;text-align:center;line-height:20px;font-weight:700} /* the preview shelf sits full-bleed like the kit's .preview; its rows are quiet */ .preview .prevhead{padding-bottom:10px} .preview .lrow{border-bottom-color:var(--hair)} /* details used as a disclosure: no default marker, the summary is a .sech */ details>summary::-webkit-details-marker{display:none}