:root { --glass-blur: 24px; --glass-sat: 125%; --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --fab-bottom: 22px; --fab-clear: 172px; --bar-lift: calc(8px + var(--safe-b)); --fab-h: 48px; --mark-task: #FFC94D; --mark-mat: #6BB2FF; --mark-note: #3DDC97; --note1: #E9C07A; --note2: #D08E4A; --rad: 14px; --rad-s: 9px; --ff: ui-sans-serif, system-ui,"Segoe UI Variable Text","Segoe UI", Inter, Roboto, Arial, sans-serif; --fm: ui-sans-serif, -apple-system, system-ui,"Segoe UI Variable Text","Segoe UI", Inter, Roboto, Arial, sans-serif; --fcode: ui-monospace, SFMono-Regular,"Cascadia Mono","JetBrains Mono", Consolas, monospace; --dc-fg: #07101A; --ink-on-dc: #07101A; } :root { --bg: #040706; --bg2: #070C09; --panel: #0A100C; --panel2: #101812; --edge: #17231A; --edge2: #253527; --ink: #DEE8DF; --ink2: #AFBFB2; --mut: #6D8073; --ok: #6FBF84; --wait: #D2AC69; --now: #6FBF84; --bad: #D9746D; --glow: 0 0 15px -4px; --shadow: 0 14px 36px rgba(0,0,0,.7); --grad1: 5%; --grad2: 4%; --heat-ink: #040706; --rt: #ED8712; --rd: #25E47E; } :root[data-skin="cyber"] { --bg: #070A12; --bg2: #0B1020; --panel: #0E1526; --panel2: #152038; --edge: #1E2E4D; --edge2: #2E4B7A; --ink: #DBEBF3; --ink2: #ABCCE4; --mut: #91B1CE; --ok: #4ED6B0; --wait: #EABE57; --now: #0DCEE6; --bad: #FD7B9C; --glow: 0 0 10px -5px; --shadow: 0 16px 44px rgba(0,0,0,.72); --grad1: 5%; --grad2: 4%; --rad: 6px; --rad-s: 4px; --heat-ink: #070A12; --rt: #FF3D7F; --rd: #4DF0C4; } :root[data-skin="coal"] { --bg: #000000; --bg2: #07080A; --panel: #0E0F12; --panel2: #16181C; --edge: #24262B; --edge2: #3B3E45; --ink: #E5E7EA; --ink2: #C4C9D0; --mut: #A6ADB6; --ok: #A5C577; --wait: #DAB663; --now: #D8DCE1; --bad: #F08684; --glow: 0 0 0; --shadow: 0 12px 32px rgba(0,0,0,.7); --grad1: 0%; --grad2: 0%; --rad: 8px; --rad-s: 5px; --heat-ink: #000000; --rt: #71A8F4; --rd: #C9E2A3; } :root[data-skin="graphite"] { --bg: #1A1918; --bg2: #201F1D; --panel: #282624; --panel2: #312E2B; --edge: #3B3834; --edge2: #56514B; --ink: #EEEAE4; --ink2: #D0CAC1; --mut: #B7B0A7; --ok: #8EC49D; --wait: #D8B06A; --now: #D9A65E; --bad: #F58C7D; --glow: 0 0 0; --shadow: 0 10px 28px rgba(0,0,0,.34); --grad1: 0%; --grad2: 0%; --rad: 12px; --rad-s: 8px; --heat-ink: #1A1918; --rt: #7FB2E0; --rd: #8EC49D; } :root[data-skin="linen"] { --mark-task: #A06A00; --mark-mat: #2F5FA8; --mark-note: #2A6B4E; --bg: #F2F1EC; --bg2: #EAE9E2; --panel: #FAFAF7; --panel2: #F1F1EB; --edge: #DEDDD4; --edge2: #BFBEB2; --ink: #1A1C19; --ink2: #40453D; --mut: #666C61; --ok: #2F6F5E; --wait: #96631A; --now: #2F6F5E; --bad: #A83B3B; --glow: 0 0 0; --shadow: 0 6px 20px rgba(40,45,35,.10); --grad1: 0%; --grad2: 0%; --rad: 12px; --rad-s: 8px; --heat-ink: #FAFAF7; --rt: #9A4E10; --rd: #16775A; } :root[data-skin="chalk"] { --mark-task: #8F6400; --mark-mat: #2F5FA8; --mark-note: #23704F; --bg: #F3F4F6; --bg2: #EBEDF0; --panel: #FFFFFF; --panel2: #F5F6F8; --edge: #E1E4E8; --edge2: #C3C8CF; --ink: #15181D; --ink2: #3D434C; --mut: #676D77; --ok: #217A55; --wait: #8F6400; --now: #2F62C0; --bad: #B23A3A; --glow: 0 0 0; --shadow: 0 6px 20px rgba(20,30,45,.08); --grad1: 0%; --grad2: 0%; --rad: 12px; --rad-s: 8px; --heat-ink: #FFFFFF; --rt: #9A4E10; --rd: #16775A; } :root[data-skin="apricot"] { --mark-task: #9A5A00; --mark-mat: #3A58A0; --mark-note: #2A6A4C; --bg: #FBF0E2; --bg2: #F6E6D2; --panel: #FFF9F1; --panel2: #FBEFDF; --edge: #F0DDC4; --edge2: #DDBE98; --ink: #22170D; --ink2: #4D3826; --mut: #7C6450; --ok: #2A6A4C; --wait: #8A6A00; --now: #AC4E02; --bad: #A8322E; --glow: 0 0 0; --shadow: 0 8px 24px rgba(120,70,20,.12); --grad1: 0%; --grad2: 0%; --rad: 14px; --rad-s: 10px; --heat-ink: #FFF9F1; --rt: #9A4E10; --rd: #16775A; } :root[data-skin="mercury"] { --mark-task: #8A6A12; --mark-mat: #2C5C86; --mark-note: #1F6B57; --bg: #E8ECF0; --bg2: #DDE3EA; --panel: #F6F8FA; --panel2: #EAEEF3; --edge: #D6DDE5; --edge2: #A9B5C2; --ink: #12181D; --ink2: #38434E; --mut: #5D6975; --ok: #1F6B57; --wait: #8A6A12; --now: #2C6E8F; --bad: #A3324A; --glow: 0 0 0; --shadow: 0 10px 26px rgba(30,45,60,.12); --grad1: 0%; --grad2: 0%; --rad: 12px; --rad-s: 8px; --heat-ink: #F6F8FA; --ff:"Segoe UI Variable Text","Inter", ui-sans-serif, system-ui,"Helvetica Neue", Arial, sans-serif; --rt: #9A5A12; --rd: #16736A; } :root[data-skin="orbit"] { --bg: #121327; --bg2: #171830; --panel: #1D1E38; --panel2: #262845; --edge: #323457; --edge2: #4B4D80; --ink: #EDEDFF; --ink2: #C6C6EA; --mut: #ACACD7; --ok: #6FD0A7; --wait: #E6BD6C; --now: #9BA8FF; --bad: #F2889A; --glow: 0 0 12px -6px; --shadow: 0 16px 44px rgba(0,0,0,.6); --grad1: 6%; --grad2: 5%; --rad: 13px; --rad-s: 9px; --heat-ink: #121327; --rt: #FFA23A; --rd: #7CF0C0; } :root[data-skin="neon"] { --bg: #110D1B; --bg2: #161124; --panel: #1C1529; --panel2: #251C36; --edge: #372951; --edge2: #523E7A; --ink: #EDE5F8; --ink2: #D2C3EC; --mut: #B7A5D9; --ok: #54D6AC; --wait: #E4C157; --now: #FE7FCB; --bad: #FF7D8C; --glow: 0 0 10px -5px; --shadow: 0 16px 44px rgba(0,0,0,.6); --grad1: 4%; --grad2: 3%; --rad: 4px; --rad-s: 3px; --heat-ink: #110D1B; --rt: #FFB03A; --rd: #3DF5C0; } :root[data-skin="steel"] { --bg: #0C1015; --bg2: #111720; --panel: #151C26; --panel2: #1E2733; --edge: #26313F; --edge2: #3C4B5D; --ink: #E7EEF6; --ink2: #C0CCDA; --mut: #9FB0C2; --ok: #6DCEA7; --wait: #E0BA68; --now: #72B0F6; --bad: #F28883; --glow: 0 0 0; --shadow: 0 12px 32px rgba(0,0,0,.55); --grad1: 5%; --grad2: 4%; --rad: 9px; --rad-s: 6px; --heat-ink: #0C1015; --rt: #E08A3C; --rd: #46D6C0; } :root[data-skin="fog"] { --bg: #171A20; --bg2: #1D222A; --panel: #272E38; --panel2: #323A46; --edge: #3A4351; --edge2: #515C6C; --ink: #E3E9F1; --ink2: #C5CFDA; --mut: #ABB5C0; --ok: #8FD3B0; --wait: #DFC183; --now: #9DBBE6; --bad: #ED9493; --glow: 0 0 0; --shadow: 0 8px 24px rgba(0,0,0,.22); --grad1: 3%; --grad2: 2%; --rad: 16px; --rad-s: 12px; --heat-ink: #171A20; --rt: #D79A5E; --rd: #74C9A8; } :root[data-skin="heather"] { --bg: #161317; --bg2: #1C181D; --panel: #241F25; --panel2: #2D272E; --edge: #3A333B; --edge2: #554A56; --ink: #F2ECF0; --ink2: #D3C9D0; --mut: #B9ACB6; --ok: #D79CBC; --wait: #DCAC6E; --now: #D79CBC; --bad: #F38892; --glow: 0 0 0; --shadow: 0 16px 40px rgba(0,0,0,.62); --grad1: 5%; --grad2: 4%; --rad: 12px; --rad-s: 8px; --heat-ink: #161317; --rt: #7FB4E8; --rd: #C98FAE; } :root[data-skin="tint"] { --bg: color-mix(in srgb, var(--tint) 7%, #0E1014); --bg2: color-mix(in srgb, var(--tint) 8%, #14171C); --panel: color-mix(in srgb, var(--tint) 9%, #1B1F27); --panel2: color-mix(in srgb, var(--tint) 11%, #242932); --edge: color-mix(in srgb, var(--tint) 16%, #303643); --edge2: color-mix(in srgb, var(--tint) 24%, #48505F); --ink: color-mix(in srgb, var(--tint) 6%, #F2F5F9); --ink2: color-mix(in srgb, var(--tint) 10%, #C7CEDA); --mut: color-mix(in srgb, var(--tint) 12%, #AEB7C5); --ok: #6FD3A6; --wait: #E5AE60; --now: var(--tint); --bad: #F28A80; --glow: 0 0 0; --shadow: 0 15px 38px rgba(0,0,0,.55); --grad1: 6%; --grad2: 5%; --rad: 8px; --rad-s: 5px; --heat-ink: #0E1014; --rt: #6FD3A6; --rd: var(--tint); } :root[data-skin="tintlight"] { --mark-task: #8A5A00; --mark-mat: #2F5FA8; --mark-note: #2A6B4E; --bg: color-mix(in srgb, var(--tint) 5%, #F4F4F2); --bg2: color-mix(in srgb, var(--tint) 7%, #ECECE9); --panel: color-mix(in srgb, var(--tint) 3%, #FAFAF8); --panel2: color-mix(in srgb, var(--tint) 6%, #F1F1EE); --edge: color-mix(in srgb, var(--tint) 12%, #DDDDD7); --edge2: color-mix(in srgb, var(--tint) 22%, #BEBEB6); --ink: color-mix(in srgb, var(--tint) 6%, #1A1C1E); --ink2: color-mix(in srgb, var(--tint) 10%, #414549); --mut: color-mix(in srgb, var(--tint) 12%, #5C6166); --ok: #2F6F5E; --wait: #96631A; --now: color-mix(in srgb, var(--tint) 62%, #14171A); --bad: #A83B3B; --glow: 0 0 0; --shadow: 0 6px 20px rgba(40,45,50,.10); --grad1: 0%; --grad2: 0%; --rad: 12px; --rad-s: 8px; --heat-ink: #FAFAF8; --rt: #9A4E10; --rd: color-mix(in srgb, var(--tint) 78%, #14171A); } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background: radial-gradient(120vw 82vh at 16% -8%, color-mix(in srgb, var(--now) var(--grad1), transparent), transparent 62%), radial-gradient(100vw 74vh at 92% 0%, color-mix(in srgb, var(--ok) var(--grad2), transparent), transparent 58%), var(--bg); background-attachment: fixed; color: var(--ink); font: 15.5px/1.6 var(--ff); -webkit-font-smoothing: antialiased; padding-bottom: 78px; transition: background .25s, color .25s; min-height: 100dvh; display: flex; flex-direction: column; } body > main { flex: 1 0 auto; } body > header, body > footer { flex: none; } .wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 calc(16px + var(--safe-r)) 0 calc(16px + var(--safe-l)); } .wrap.narrow { max-width: 820px; } .wrap.wide { max-width: 1720px; } a { color: var(--now); text-decoration: none; border-bottom: 1px solid transparent; } a:hover { border-bottom-color: currentColor; } :focus-visible { outline: 2px solid var(--now); outline-offset: 2px; border-radius: 4px; } code, .mono { font-family: var(--fm); } code { font-family: var(--fcode); } code { font-size: .88em; background: var(--panel2); border: 1px solid var(--edge); border-radius: 5px; padding: 1px 5px; color: var(--ink2); } pre { font-family: var(--fcode); font-size: 12.5px; line-height: 1.65; background: var(--bg2); border: 1px solid var(--edge); border-radius: var(--rad-s); padding: 14px; overflow-x: auto; white-space: pre-wrap; word-break: break-word; color: var(--ink2); } h1 { font-size: 24px; line-height: 1.18; letter-spacing: -.02em; font-weight: 680; } h2 { font-size: 16.5px; letter-spacing: -.01em; font-weight: 640; } h3 { font: 700 10.5px/1.3 var(--fm); letter-spacing: 1.5px; text-transform: uppercase; color: var(--mut); } .sub { color: var(--mut); font-size: 13px; } .muted { color: var(--mut); } .small { font-size: 12.5px; } .tiny { font-size: 11.5px; } .nowrap { white-space: nowrap; } .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .row.tight { gap: 6px; } .spread { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; } .grow { flex: 1 1 auto; min-width: 0; } .hide { display: none !important; } .offscreen { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; white-space: nowrap; clip-path: inset(50%); } h2.sec { font: 700 11px/1.3 var(--fm); letter-spacing: 1.6px; text-transform: uppercase; color: var(--mut); margin: 26px 0 10px; display: flex; align-items: center; gap: 12px; } h2.sec::after { content:""; flex: 1; height: 1px; background: var(--edge); } .top { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg2) 64%, transparent); backdrop-filter: saturate(var(--glass-sat)) blur(var(--glass-blur)); -webkit-backdrop-filter: saturate(var(--glass-sat)) blur(var(--glass-blur)); border-bottom: 1px solid var(--edge); padding-top: env(safe-area-inset-top); } .top-in { display: flex; align-items: center; gap: 12px; min-height: 56px; } .brand { display: flex; align-items: center; gap: 9px; color: var(--ink); font: 700 14px/1 var(--fm); letter-spacing: .5px; border: 0; flex: none; } .brand-mark { display: grid; place-items: center; width: 30px; height: 30px; flex: none; position: relative; border-radius: 9px; background: radial-gradient(125% 115% at 24% 10%, color-mix(in srgb, var(--ok) 90%, transparent), transparent 60%), linear-gradient(150deg, var(--now), var(--ok)); color: var(--heat-ink); font: 700 13px/1 var(--fm); letter-spacing: 0; padding-top: 2px; box-shadow: 0 3px 10px -4px color-mix(in srgb, var(--now) 75%, transparent); transition: transform .16s cubic-bezier(.2,.8,.2,1); } .brand:hover .brand-mark { transform: translateY(-1px); } .brand:active .brand-mark { transform: translateY(1px); } .brand-mark::after { content:""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 26%, transparent); } .brand-sheen { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; } .brand-sheen::before, .brand-sheen::after { content:""; position: absolute; inset: 0; opacity: 0; background: linear-gradient(115deg, transparent 18%, color-mix(in srgb, #fff 55%, transparent) 32%, transparent 46%); } .brand-sheen::after { background: linear-gradient(115deg, transparent 54%, color-mix(in srgb, #fff 55%, transparent) 68%, transparent 82%); } @media (prefers-reduced-motion: no-preference) { .brand-sheen::before { animation: brand-sheen 7s ease-in-out 2; } .brand-sheen::after { animation: brand-sheen-2 7s ease-in-out 2; } } @keyframes brand-sheen { 0%, 64%, 80%, 100% { opacity: 0; } 72% { opacity: 1; } } @keyframes brand-sheen-2 { 0%, 72%, 90%, 100% { opacity: 0; } 81% { opacity: 1; } } .brand { perspective: 620px; } .brand-word { display: inline-flex; perspective: 300px; } .brand-word .bl { display: inline-block; transform-origin: 50% 58%; animation-delay: calc(var(--i, 0) * 55ms); } @media (prefers-reduced-motion: no-preference) { .brand-word.fx-sh .bl { animation-name: bl-dim; animation-duration: 2.2s; animation-timing-function: ease-in-out; animation-fill-mode: both; } .brand-word.fx-sh .bl.key { animation-name: bl-lit, bl-caps; animation-duration: 2.2s; animation-timing-function: ease-in-out, steps(1, end); animation-fill-mode: both; } .brand-word.fx-seam .bl { animation-name: bl-seam; animation-duration: 1.4s; animation-timing-function: cubic-bezier(.34, 1.56, .5, 1); animation-fill-mode: both; } .brand-word.fx-spin .bl { animation-name: bl-spin; animation-duration: 1s; animation-timing-function: ease-in-out; animation-fill-mode: both; } .brand-word.fx-flip .bl { animation-name: bl-flip; animation-duration: 1s; animation-timing-function: ease-in-out; animation-fill-mode: both; } .brand-word.fx-light .bl { animation-name: bl-lit; animation-duration: .9s; animation-timing-function: ease-in-out; animation-fill-mode: both; } .brand-word.fx-trace .bl { animation-name: bl-trace; animation-duration: 1.05s; animation-timing-function: ease-in-out; animation-fill-mode: both; } .brand-word.fx-wink .bl { animation-name: bl-wink; animation-duration: .8s; animation-timing-function: ease-in-out; animation-fill-mode: both; } .brand-word.fx-tilt .bl { animation-name: bl-tilt; animation-duration: 1.1s; animation-timing-function: cubic-bezier(.34, 1.4, .5, 1); animation-fill-mode: both; } .brand-word.fx-gather .bl { animation-name: bl-gather; animation-duration: 1.4s; animation-timing-function: cubic-bezier(.34, 1.56, .5, 1); animation-fill-mode: both; } .brand-word.fx-turn { animation: word-turn 1.25s cubic-bezier(.4, 0, .2, 1) both; } .brand-word.fx-tip { animation: word-tip 1.25s cubic-bezier(.4, 0, .2, 1) both; } .brand-word.fx-nudge { animation: word-nudge 1.1s cubic-bezier(.34, 1.5, .5, 1) both; } .brand-word.fx-nod { animation: word-nod 1.05s cubic-bezier(.34, 1.4, .5, 1) both; } } @keyframes bl-spin { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } } @keyframes bl-flip { from { transform: rotateX(0deg); } to { transform: rotateX(360deg); } } @keyframes bl-seam { from, to { transform: translateX(0); } 42% { transform: translateX(calc(var(--side, 0) * 4px)); } } @keyframes bl-dim { from, to { opacity: 1; } 16%, 76% { opacity: .28; } } @keyframes bl-lit { from, to { color: var(--ink); } 16%, 76% { color: var(--now); } } @keyframes bl-trace { from, to { color: var(--ink); transform: translateY(0); } 42% { color: var(--ok); transform: translateY(-1px); } } @keyframes bl-caps { from, 15% { text-transform: none; } 16%, 76% { text-transform: uppercase; } 77%, to { text-transform: none; } } @keyframes word-turn { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } } @keyframes word-tip { from { transform: rotateX(0deg); } to { transform: rotateX(360deg); } } @keyframes word-nudge { from, to { transform: translateX(0); } 40% { transform: translateX(4px); } } @keyframes word-nod { from, to { transform: rotateX(0deg); } 45% { transform: rotateX(26deg); } } @keyframes bl-wink { from, to { opacity: 1; } 45% { opacity: 0; } } @keyframes bl-tilt { from, to { transform: rotate(0deg); } 40% { transform: rotate(8deg); } 70% { transform: rotate(-4deg); } } @keyframes bl-gather { from, to { transform: translateX(0); } 42% { transform: translateX(calc(var(--side, 0) * -3px)); } } @media (prefers-reduced-motion: no-preference) { .brand-mark.mk-lit { animation: mark-lit 1.5s cubic-bezier(.3, 0, .2, 1) both; } .brand-mark.mk-lit::after { animation: mark-flare 1.5s cubic-bezier(.3, 0, .2, 1) both; } .brand-mark.mk-turn { animation: mark-turn 1.15s cubic-bezier(.4, 0, .2, 1) both; } .brand-mark.mk-pulse::after { animation: mark-pulse 2.4s ease-in-out both; } .brand-mark.mk-tilt { animation: mark-tilt 1.1s cubic-bezier(.34, 1.5, .5, 1) both; } .brand-mark.mk-nod { animation: mark-nod .9s cubic-bezier(.34, 1.5, .5, 1) both; } .brand-mark.mk-scan::after { animation: mark-scan 1.35s cubic-bezier(.25,.8,.2,1) both; } .brand-mark.co-mark { animation: mark-lit 1.5s cubic-bezier(.3, 0, .2, 1) both; } .brand-mark.co-mark::after { animation: mark-flare 1.5s cubic-bezier(.3, 0, .2, 1) both; } .brand-word.co-word .bl { animation-name: bl-lit; animation-duration: .9s; animation-timing-function: ease-in-out; animation-fill-mode: both; animation-delay: calc(340ms + var(--i, 0) * 55ms); } .brand-word.co-back-word .bl { animation-name: bl-lit; animation-duration: .9s; animation-timing-function: ease-in-out; animation-fill-mode: both; animation-delay: calc(var(--j, 0) * 55ms); } .brand-mark.co-back-mark { animation: mark-lit 1.5s cubic-bezier(.3, 0, .2, 1) both; } .brand-mark.co-back-mark::after { animation: mark-flare 1.5s cubic-bezier(.3, 0, .2, 1) both; animation-delay: 620ms; } .brand-mark.co-nod-mark { animation: mark-nod .9s cubic-bezier(.34, 1.5, .5, 1) both; } .brand-word.co-nod-word .bl { animation-name: bl-wave; animation-duration: .85s; animation-timing-function: cubic-bezier(.34, 1.4, .5, 1); animation-fill-mode: both; animation-delay: calc(240ms + var(--i, 0) * 55ms); } .brand-word.fx-wave .bl { animation-name: bl-wave; animation-duration: .85s; animation-timing-function: cubic-bezier(.34, 1.4, .5, 1); animation-fill-mode: both; } } @keyframes mark-lit { 0%, 100% { color: var(--heat-ink); } 22%, 62% { color: #FFFFFF; } } @keyframes mark-flare { 0%, 100% { box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 26%, transparent); } 34% { box-shadow: inset 0 0 14px 2px color-mix(in srgb, #fff 78%, transparent), 0 0 18px -2px color-mix(in srgb, var(--ok) 70%, transparent); } 70% { box-shadow: inset 0 0 6px 1px color-mix(in srgb, #fff 40%, transparent); } } @keyframes mark-turn { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } } @keyframes mark-pulse { 0%, 100% { box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 26%, transparent); } 26%, 74% { box-shadow: inset 0 0 8px 1px color-mix(in srgb, #fff 48%, transparent); } 50% { box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 26%, transparent); } } @keyframes mark-scan { 0%, 100% { box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 26%, transparent); } 46% { box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 72%, transparent), 0 0 16px -2px color-mix(in srgb, var(--now) 72%, transparent); } } @keyframes mark-tilt { from, to { transform: rotate(0deg); } 38% { transform: rotate(9deg); } 68% { transform: rotate(-5deg); } } @keyframes mark-nod { from, to { transform: translateY(0); } 42% { transform: translateY(2px); } } @keyframes bl-wave { from, to { transform: translateY(0); } 45% { transform: translateY(-3px); } } .brand-sub { color: var(--mut); font-weight: 500; letter-spacing: 0; } .topdoors { display: none; margin-left: auto; flex: none; gap: 8px; } .topbtn { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--edge); background: var(--panel); color: var(--ink2); font: 400 20px/1 var(--ff); text-decoration: none; transition: color .15s, border-color .15s, transform .12s; } .topbtn.on { color: var(--now); border-color: var(--now); } .topbtn:active { transform: scale(.94); } .nav { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; padding: 4px 0; } .nav::-webkit-scrollbar { display: none; } .nav a { display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 6px 9px; border-radius: 999px; border: 1px solid transparent; color: var(--mut); font: 600 12px/1 var(--ff); white-space: nowrap; } .nav a:hover { color: var(--ink); background: var(--panel2); } .nav a.on { color: var(--ink); background: var(--panel); border-color: var(--edge2); } .nav a i { font-style: normal; font-size: 13px; } .hues { display: flex; flex-wrap: wrap; gap: 7px; } .hue { position: relative; display: block; width: 26px; height: 26px; cursor: pointer; margin: 0; } .hue input { position: absolute; opacity: 0; width: 0; height: 0; } .hue span { display: block; width: 100%; height: 100%; border-radius: 999px; background: var(--hue, transparent); border: 1px solid color-mix(in srgb, var(--hue, var(--edge2)) 60%, var(--edge)); transition: transform .12s, box-shadow .12s; } .hue.none span { background: transparent; border-style: dashed; border-color: var(--edge2); } .hue.none span::after { content:""; position: absolute; left: 50%; top: 4px; bottom: 4px; width: 1px; background: var(--mut); transform: rotate(45deg); transform-origin: center; } .hue.busy span::after { content:""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .45); } .hue:hover span { transform: scale(1.12); } .hue.on span, .hue input:checked + span { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--ink2); } .hue.own { border-radius: 999px; } .hue.own input[type="color"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 1; padding: 0; border: 0; border-radius: 999px; background: transparent; cursor: pointer; } .hue.own input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; } .hue.own input[type="color"]::-webkit-color-swatch { border: 1px solid color-mix(in srgb, var(--hue, var(--edge2)) 60%, var(--edge)); border-radius: 999px; } .hue.own input[type="color"]::-moz-color-swatch { border: 1px solid color-mix(in srgb, var(--hue, var(--edge2)) 60%, var(--edge)); border-radius: 999px; } .hue.own::before { content:""; position: absolute; inset: 4px; border-radius: 999px; z-index: 1; border: 1.5px dashed rgba(255, 255, 255, .85); filter: drop-shadow(0 0 1px rgba(0, 0, 0, .65)); pointer-events: none; } .hue.own:hover { transform: scale(1.12); } .hue.own.on { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--ink2); } .pick { position: relative; display: inline-flex; margin: 0; cursor: pointer; } .pick input { position: absolute; opacity: 0; width: 0; height: 0; } .pick span { display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 11px; border-radius: 999px; border: 1px solid var(--edge2); background: var(--panel); font: 600 12.5px/1 var(--ff); color: var(--mut); transition: color .14s, border-color .14s, background .14s; } .pick:hover span { color: var(--ink); } .pick.on span, .pick input:checked + span { color: var(--ink); border-color: var(--now); background: color-mix(in srgb, var(--now) 10%, var(--panel)); } .skinbar { display: flex; gap: 5px; flex: none; align-items: center; } .skin-dot { width: 19px; height: 19px; border-radius: 6px; border: 1px solid var(--edge2); cursor: pointer; padding: 0; position: relative; display: block; } .skin-dot.on { box-shadow: 0 0 0 2px var(--now); } .skin-dot span { position: absolute; inset: 3px 3px 50% 3px; border-radius: 3px 3px 0 0; } .card { background: var(--panel); border: 1px solid var(--edge); border-radius: var(--rad); padding: 16px; box-shadow: var(--shadow); } .card + .card { margin-top: 14px; } .grid > .card + .card { margin-top: 0; } .card.flat { box-shadow: none; background: var(--panel2); } .card.tight { padding: 12px; } .card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; } .grid { display: grid; gap: 14px; } .grid > * { min-width: 0; } @media (min-width: 900px) and (min-height: 481px) { .grid.two { grid-template-columns: 1fr 1fr; } .grid.side { grid-template-columns: minmax(0,1.55fr) minmax(0,1fr); align-items: start; } .grid.two > .span2 { grid-column: 1 / -1; } } .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 10px; } .tile { background: var(--panel); border: 1px solid var(--edge); border-radius: var(--rad-s); padding: 12px 13px; position: relative; overflow: hidden; } .tile-label { font: 700 9.5px/1.3 var(--fm); letter-spacing: 1.2px; text-transform: uppercase; color: var(--mut); } .tile-value { font: 700 24px/1.1 var(--fm); letter-spacing: -.02em; margin-top: 5px; } .tile-value small { font-size: 13px; font-weight: 600; color: var(--mut); letter-spacing: 0; } .tile-note { font-size: 11.5px; color: var(--mut); margin-top: 4px; } .tile.up .tile-value { color: var(--ok); } .tile.down .tile-value { color: var(--bad); } .tile.warn { border-color: color-mix(in srgb, var(--wait) 45%, var(--edge)); } .tile.warn .tile-value { color: var(--wait); } .alert { border-radius: var(--rad-s); padding: 11px 13px; font-size: 13px; border: 1px solid var(--edge2); background: var(--panel2); color: var(--ink2); display: flex; gap: 9px; align-items: flex-start; } .alert b { color: var(--ink); } .alert.bad { border-color: color-mix(in srgb, var(--bad) 55%, var(--edge)); background: color-mix(in srgb, var(--bad) 12%, var(--panel)); } .alert.warn { border-color: color-mix(in srgb, var(--wait) 55%, var(--edge)); background: color-mix(in srgb, var(--wait) 12%, var(--panel)); } .alert.good { border-color: color-mix(in srgb, var(--ok) 50%, var(--edge)); background: color-mix(in srgb, var(--ok) 11%, var(--panel)); } .latecopy-act { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .alert + .alert { margin-top: 8px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 15px; border-radius: var(--rad-s); border: 1px solid var(--edge2); background: color-mix(in srgb, var(--panel2) 62%, transparent); color: var(--ink); cursor: pointer; font: 600 13px/1 var(--ff); text-decoration: none; transition: .15s; white-space: nowrap; margin: 0; text-transform: none; letter-spacing: normal; vertical-align: middle; } .btn:hover { border-color: var(--now); color: var(--now); } .btn.primary { background: var(--now); border-color: var(--now); color: var(--heat-ink); } .btn.primary:hover { filter: brightness(1.1); color: var(--heat-ink); } .btn.ghost { background: transparent; border-color: var(--edge); color: var(--mut); } .btn.ghost:hover { color: var(--ink); border-color: var(--edge2); } .btn[data-copy].copy-bad { color: var(--mut); border-color: var(--edge); } .btn.danger { border-color: color-mix(in srgb, var(--bad) 50%, var(--edge)); color: var(--bad); background: transparent; } .card-head .statecopy { margin-left: auto; text-align: right; } .btn.purge { color: var(--bad); } .btn.danger:hover { background: color-mix(in srgb, var(--bad) 14%, transparent); border-color: var(--bad); } .btn.sm { padding: 6px 10px; font-size: 12px; } .btn.xs { padding: 4px 8px; font-size: 11.5px; border-radius: 6px; } .btn.wide { width: 100%; } .btn[disabled] { opacity: .45; pointer-events: none; } .btn-note { font: 600 .85em/1 var(--fm); opacity: .72; margin-left: 4px; letter-spacing: .2px; white-space: nowrap; } .btn-note::before { content:"· "; opacity: .6; } .iconbtn { margin: 0; text-transform: none; letter-spacing: normal; display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: var(--rad-s); border: 1px solid var(--edge); background: color-mix(in srgb, var(--panel) 62%, transparent); color: var(--ink2); font-size: 16px; line-height: 1; cursor: pointer; } .iconbtn:hover { border-color: var(--now); color: var(--now); } label { display: block; font: 700 10px/1.3 var(--fm); letter-spacing: 1.2px; text-transform: uppercase; color: var(--mut); margin-bottom: 5px; } input[type=text], input[type=password], input[type=date], input[type=time], input[type=number], input[type=search], input[type=url], select, textarea { width: 100%; padding: 9px 11px; border-radius: var(--rad-s); border: 1px solid var(--edge2); background: var(--bg2); color: var(--ink); font: 14px/1.45 var(--ff); -webkit-appearance: none; appearance: none; } input[type=color] { width: 44px; height: 34px; padding: 2px; border-radius: var(--rad-s); border: 1px solid var(--edge2); background: var(--bg2); cursor: pointer; } select { background-image: none; cursor: pointer; } textarea { min-height: 96px; resize: vertical; line-height: 1.6; } textarea.tall { min-height: 340px; font-family: var(--fcode); font-size: 13px; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--now); box-shadow: var(--glow) color-mix(in srgb, var(--now) 55%, transparent); } @media (pointer: coarse) { input, select, textarea, .mdlive-back, [contenteditable] { font-size: 16px !important; } } ::placeholder { color: var(--mut); opacity: .75; } .field + .field { margin-top: 11px; } .fields2 { display: grid; gap: 11px; } @media (min-width: 620px) { .fields2 { grid-template-columns: 1fr 1fr; } .fields2 .span2 { grid-column: 1 / -1; } } .scale { display: flex; gap: 5px; flex-wrap: wrap; } .scale label { margin: 0; text-transform: none; letter-spacing: 0; color: var(--ink2); } .scale button, .scale a, .scale label { flex: 1 1 0; min-width: 38px; padding: 9px 0; border-radius: var(--rad-s); border: 1px solid var(--edge2); background: var(--bg2); color: var(--ink2); font: 700 14px/1 var(--fm); cursor: pointer; transition: .13s; text-align: center; } .scale button:hover, .scale a:hover, .scale label:hover { border-color: var(--dc, var(--now)); color: var(--ink); } .scale button.on, .scale a.on, .scale label.on { background: var(--dc, var(--now)); border-color: var(--dc, var(--now)); color: var(--ink-on-dc); box-shadow: var(--glow) color-mix(in srgb, var(--dc, var(--now)) 60%, transparent); } [data-light] .scale button.on, [data-light] .scale a.on, [data-light] .scale label.on { background: color-mix(in srgb, var(--dc, var(--now)) 80%, #10202E); color: #fff; } .scale .clear { flex: 0 0 auto; min-width: 34px; color: var(--mut); font-size: 15px; } .scale .clear.on, .scale label.clear.on { background: var(--panel2); border-color: var(--edge2); color: var(--ink2); box-shadow: inset 0 0 0 1px var(--edge2); } [data-light] .scale .clear.on, [data-light] .scale label.clear.on { background: var(--panel2); color: var(--ink2); } .dirline { padding: 12px 0; border-top: 1px solid var(--edge); } .dirline:first-of-type { border-top: 0; padding-top: 4px; } .dirline-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; } .dirline-emoji { font-size: 17px; line-height: 1; flex: none; } .dirline-title { font-weight: 640; font-size: 14px; } .dirline-val { margin-left: auto; font: 700 12px/1 var(--fm); color: var(--dc, var(--mut)); } [data-light] .dirline-val { color: color-mix(in srgb, var(--dc, var(--mut)) 75%, #0E1720); } .scorebar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; --v: 0; --knob: 24px; --rail: 6px; } .scorebar-track { position: relative; height: 36px; cursor: pointer; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } .scorebar-rail { position: absolute; left: 0; right: 0; top: 50%; height: var(--rail); margin-top: calc(var(--rail) / -2); border-radius: 99px; overflow: hidden; background: color-mix(in srgb, var(--mut) 26%, transparent); } .scorebar-fill { display: none; position: absolute; inset: 0 auto 0 0; width: calc(var(--knob) / 2 + (100% - var(--knob)) * var(--v) / 100); background: var(--dc, var(--now)); transition: width .16s cubic-bezier(.2, .8, .2, 1); } [data-light] .scorebar-fill { background: color-mix(in srgb, var(--dc, var(--now)) 80%, #10202E); } .scorebar.is-set .scorebar-fill { display: block; } .scorebar-knob { position: absolute; top: 50%; left: calc((100% - var(--knob)) * var(--v) / 100); width: var(--knob); height: var(--knob); margin-top: calc(var(--knob) / -2); border-radius: 50%; background: #fff; touch-action: none; cursor: grab; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .14), 0 1px 2px rgba(0, 0, 0, .2), 0 3px 8px rgba(0, 0, 0, .16); transition: left .16s cubic-bezier(.2, .8, .2, 1), transform .12s ease, box-shadow .12s ease; } .scorebar-knob::before { content:""; position: absolute; inset: -10px; border-radius: 50%; } .scorebar:not(.is-set) .scorebar-knob { background: var(--panel); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--mut) 62%, transparent); } @media (hover: hover) { .scorebar.is-set .scorebar-track:hover .scorebar-knob { box-shadow: 0 0 0 .5px rgba(0, 0, 0, .14), 0 1px 2px rgba(0, 0, 0, .2), 0 3px 8px rgba(0, 0, 0, .16), 0 0 0 6px color-mix(in srgb, var(--dc, var(--now)) 20%, transparent); } } .scorebar.is-drag .scorebar-knob { transform: scale(1.14); cursor: grabbing; transition: transform .12s ease, box-shadow .12s ease; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .14), 0 2px 4px rgba(0, 0, 0, .22), 0 6px 14px rgba(0, 0, 0, .2), 0 0 0 7px color-mix(in srgb, var(--dc, var(--now)) 22%, transparent); } .scorebar.is-drag .scorebar-fill { transition: none; } .scorebar-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; -webkit-appearance: none; appearance: none; background: none; border: 0; opacity: 0; pointer-events: none; cursor: inherit; } .scorebar-range:focus { box-shadow: none; outline: none; } .scorebar-range:focus-visible ~ .scorebar-knob { outline: 2px solid var(--now); outline-offset: 3px; } .scorebar-val { width: 3.1em; text-align: right; font: 700 15px/1 var(--fm); font-variant-numeric: tabular-nums; color: var(--mut); } .scorebar.is-set .scorebar-val { color: var(--dc, var(--ink)); } [data-light] .scorebar.is-set .scorebar-val { color: color-mix(in srgb, var(--dc, var(--ink)) 72%, #0E1720); } .scorebar-clear { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--mut); font: 400 17px/1 var(--ff); cursor: pointer; } @media (hover: hover) { .scorebar-clear:hover { background: var(--panel2); color: var(--ink); } } .scorebar-clear:disabled { visibility: hidden; } @media (pointer: coarse) { .scorebar { --knob: 28px; --rail: 8px; } .scorebar-track { height: 44px; } .scorebar-knob::before { inset: -8px; } .scorebar-clear { width: 40px; height: 40px; margin-right: -6px; } .scorebar-val { font-size: 16px; } } .dirline textarea { min-height: 30px; height: 30px; margin-top: 6px; padding: 6px 9px; font-size: 13px; resize: none; overflow: hidden; transition: height .14s ease, min-height .14s ease; } .dirline textarea:focus, .dirline textarea:not(:placeholder-shown) { min-height: 66px; height: 66px; resize: vertical; overflow: auto; } .cal-nav { display: flex; align-items: center; gap: 7px; } .cal-title { font: 700 14px/1 var(--fm); min-width: 128px; text-align: center; letter-spacing: .3px; } .cal { border: 1px solid var(--edge); border-radius: var(--rad); overflow: hidden; background: var(--panel); container-type: inline-size; } .cal-head, .cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); } .cal-head { background: var(--panel2); border-bottom: 1px solid var(--edge); } .cal-head div { padding: 7px 4px; text-align: center; color: var(--mut); font: 700 9.5px/1 var(--fm); letter-spacing: 1.1px; text-transform: uppercase; } .cal-head div.we { color: color-mix(in srgb, var(--wait) 70%, var(--mut)); } .cal-day { position: relative; min-height: 118px; padding: 5px 5px 4px; border-right: 1px solid var(--edge); border-bottom: 1px solid var(--edge); display: flex; flex-direction: column; gap: 4px; color: var(--ink2); text-decoration: none; border-bottom-color: var(--edge); overflow: hidden; } .cal-week .cal-day:last-child { border-right: 0; } .cal-week:last-child .cal-day { border-bottom: 0; } .cal-day:hover { background: var(--panel2); border-bottom-color: var(--edge); } .cal-day.out, .pday.out { opacity: 1; pointer-events: none; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--edge2) 34%, transparent) 0 1px, transparent 1px 7px), color-mix(in srgb, var(--bg) 55%, var(--panel2)); } .cal-day.today { box-shadow: inset 0 0 0 2px var(--now); z-index: 2; } .cal-num { font: 700 13px/1 var(--fm); color: var(--ink2); } .cal-wd { display: none; } .cal-day.today .cal-num { color: var(--now); } .cal-day.we .cal-num { color: color-mix(in srgb, var(--wait) 62%, var(--mut)); } .cal-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 4px; } .cal-top > .cal-num { grid-area: 1 / 1; justify-self: start; } .cal-top > .cal-note { grid-area: 1 / 2; } .cal-top > .cal-idx { grid-area: 1 / 3; justify-self: end; } .cal-fill { position: absolute; inset: 0; pointer-events: none; opacity: var(--fill, 0); background: var(--now); } .cal-day .cal-inner { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; gap: 3px; } .cal-subfill { z-index: 0; } .cal-idx { font: 700 10.5px/1 var(--fm); color: var(--ink); opacity: .82; } .cal-idx[style] { font-weight: var(--w, 700); opacity: var(--o, .82); } .cal-idx small { font-size: .78em; font-weight: inherit; margin-left: 1px; opacity: .8; } @container (max-width: 559px) { .cal-idx small { display: none; } .cal-top { column-gap: 1px; } } .bars { display: flex; align-items: flex-end; gap: 2px; height: 26px; margin-top: auto; } .bars .b { flex: 1 1 0; min-width: 3px; border-radius: 2px 2px 1px 1px; position: relative; height: 100%; background: color-mix(in srgb, var(--edge2) 62%, transparent); } .bars .b i { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 2px 2px 1px 1px; background: var(--dc); height: var(--h, 0%); transition: height .45s cubic-bezier(.2,.8,.2,1); } [data-light] .bars .b i { background: color-mix(in srgb, var(--dc) 80%, #12202C); } .bars .b.empty { background: color-mix(in srgb, var(--edge2) 34%, transparent); } .bars.sh-bars { height: 30px; gap: 2.5px; } .bars.sh-bars .b { border-radius: 3px; } .bars.sh-bars .b i { border-radius: 3px; } .bars.sh-rows { flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 3px; height: 30px; } .bars.sh-rows .b { flex: 0 0 4px; height: 4px; min-width: 0; width: 100%; border-radius: 999px; } .bars.sh-rows .b i { top: 0; bottom: 0; right: auto; height: auto; border-radius: 999px; width: var(--h, 0%); transition: width .45s cubic-bezier(.2,.8,.2,1); } .bars.sh-dots { align-items: center; justify-content: center; gap: 4px; height: 22px; } .bars.sh-dots .b { flex: 0 0 12px; width: 12px; height: 12px; border-radius: 50%; background: color-mix(in srgb, var(--edge2) 30%, transparent); display: grid; place-items: center; } .bars.sh-dots .b i { position: static; border-radius: 50%; background: var(--dc); width: calc(3px + var(--u, 0) * 9px); height: calc(3px + var(--u, 0) * 9px); transition: width .4s, height .4s; } .bars.sh-wave { display: block; height: 34px; margin-top: auto; width: 100%; } .bars.sh-wave svg { width: 100%; height: 100%; display: block; overflow: visible; } .sh-wave .wave-fill { fill: color-mix(in srgb, var(--now) 20%, transparent); } .sh-wave .wave-line { fill: none; stroke: color-mix(in srgb, var(--now) 70%, transparent); stroke-width: 3; stroke-linejoin: round; } .cal-day.plain .cal-inner { justify-content: space-between; } .cal-mark { display: flex; gap: 3px; align-items: center; } .cal-mark span { width: 5px; height: 5px; border-radius: 50%; background: var(--mut); opacity: .9; } .cal-mark span.task { background: var(--mark-task); } .cal-mark span.note { background: var(--mark-note); } .feed { border: 1px solid var(--edge); border-radius: var(--rad); overflow: hidden; background: var(--panel); } .feed-row { display: grid; grid-template-columns: 62px 1fr 46px; gap: 10px; align-items: center; padding: 9px 11px; border-bottom: 1px solid var(--edge); color: var(--ink2); text-decoration: none; } .feed-row:last-child { border-bottom: 0; } .feed-row:hover { background: var(--panel2); border-bottom-color: var(--edge); } .feed-row.today { box-shadow: inset 2px 0 0 var(--now); } .feed-row.we .feed-date b { color: color-mix(in srgb, var(--wait) 62%, var(--mut)); } .feed-row.empty { opacity: .55; } .feed-date { font-family: var(--fm); line-height: 1.25; } .feed-date b { display: block; font-size: 14px; font-weight: 700; color: var(--ink); } .feed-date span { font-size: 10px; color: var(--mut); text-transform: uppercase; letter-spacing: .8px; } .feed-bars { display: flex; gap: 3px; align-items: flex-end; height: 27px; justify-content: flex-start; } .feed-bars .b { flex: 0 0 15px; background: color-mix(in srgb, var(--edge2) 55%, transparent); border-radius: 2px; position: relative; height: 100%; } .feed-bars .b i { position: absolute; left: 0; right: 0; bottom: 0; background: var(--dc); border-radius: 2px; height: var(--h, 0%); } [data-light] .feed-bars .b i { background: color-mix(in srgb, var(--dc) 80%, #12202C); } .feed-bars.sh-dots { align-items: center; height: 22px; gap: 4px; } .feed-bars.sh-dots .b { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--edge2) 30%, transparent); } .feed-bars.sh-dots .b i { position: static; border-radius: 50%; width: calc(3px + var(--u,0) * 9px); height: calc(3px + var(--u,0) * 9px); } .feed-bars.sh-wave { display: block; width: 110px; height: 30px; } .feed-bars.sh-wave svg { width: 100%; height: 100%; display: block; } .feed-idx { font: 700 14px/1 var(--fm); text-align: right; color: var(--ink); } .feed-idx small { display: block; font-size: 9.5px; color: var(--mut); font-weight: 600; margin-top: 3px; letter-spacing: .6px; } .feed-note { font-size: 12px; color: var(--mut); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .legend { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 11px; } .legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mut); } .legend i { width: 9px; height: 9px; border-radius: 3px; background: var(--dc); flex: none; } [data-light] .legend i { background: color-mix(in srgb, var(--dc) 80%, #12202C); } .sub-legend { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 11px; } .sub-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mut); } .sub-legend i { width: 9px; height: 9px; border-radius: 3px; background: var(--sc); flex: none; } [data-light] .sub-legend i { background: color-mix(in srgb, var(--sc) 80%, #12202C); } .drow { display: grid; grid-template-columns: 1fr; gap: 7px; padding: 11px 0; border-top: 1px solid var(--edge); } .drow:first-child { border-top: 0; } .drow-head { display: flex; align-items: center; gap: 9px; } .drow-name { font-weight: 620; font-size: 13.5px; } .drow-val { margin-left: auto; font: 700 15px/1 var(--fm); } .drow-delta { font: 600 11.5px/1 var(--fm); padding: 3px 6px; border-radius: 5px; border: 1px solid var(--edge2); color: var(--mut); } .drow-delta.up { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, var(--edge)); } .drow-delta.down { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, var(--edge)); } .meter { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--edge2) 50%, transparent); overflow: hidden; position: relative; } .meter i { display: block; height: 100%; border-radius: 999px; background: var(--dc, var(--now)); width: var(--w, 0%); transition: width .5s cubic-bezier(.2,.8,.2,1); } [data-light] .meter i { background: color-mix(in srgb, var(--dc, var(--now)) 80%, #12202C); } .meter u { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--ink); opacity: .55; left: var(--was, 0%); } .chart { width: 100%; height: auto; display: block; overflow: visible; } .chart .line { fill: none; stroke: var(--now); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .chart .line.short { stroke: var(--mut); stroke-width: 1.4; stroke-dasharray: 3 4; } .chart .area { fill: color-mix(in srgb, var(--now) 16%, transparent); stroke: none; } .chart .grid-l { stroke: var(--edge); stroke-width: 1; } .chart .grid-t { fill: var(--mut); font: 600 9px var(--fm); } .chart .dot { fill: var(--now); } .chart-box { background: var(--bg2); border: 1px solid var(--edge); border-radius: var(--rad-s); padding: 12px 12px 8px; } .spanbrief { margin: 12px 0 0; } .item { display: flex; gap: 11px; align-items: flex-start; padding: 11px 0; border-top: 1px solid var(--edge); } .item:first-child { border-top: 0; } .item-dot { width: 8px; height: 8px; border-radius: 3px; background: var(--dc, var(--mut)); flex: none; margin-top: 6px; } .item-body { flex: 1 1 auto; min-width: 0; } .item-title { font-weight: 600; font-size: 14px; color: var(--ink); } .item-title.done { text-decoration: line-through; color: var(--mut); font-weight: 500; } .item-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 3px; font-size: 12px; color: var(--mut); } .item-acts { display: flex; gap: 5px; flex: none; align-items: center; } .item-note { font-size: 12.5px; color: var(--ink2); margin-top: 5px; white-space: pre-wrap; word-break: break-word; } .chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--edge2); font: 600 11px/1.5 var(--fm); color: var(--mut); background: var(--panel2); } .chip.dc { border-color: color-mix(in srgb, var(--dc) 50%, var(--edge)); color: var(--dc); background: color-mix(in srgb, var(--dc) 12%, transparent); } [data-light] .chip.dc { color: color-mix(in srgb, var(--dc) 72%, #0E1720); } .chip.late { border-color: color-mix(in srgb, var(--bad) 55%, var(--edge)); color: var(--bad); background: color-mix(in srgb, var(--bad) 11%, transparent); } .chip.soon { border-color: color-mix(in srgb, var(--wait) 55%, var(--edge)); color: var(--wait); background: color-mix(in srgb, var(--wait) 11%, transparent); } .chip.ok { border-color: color-mix(in srgb, var(--ok) 45%, var(--edge)); color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, transparent); } .chip-loose { border-style: dashed; border-color: var(--edge2); color: color-mix(in srgb, var(--mut) 80%, transparent); background: transparent; } .chip-file { border-color: var(--edge2); color: var(--ink2); background: var(--panel2); } .empty-note { padding: 22px 4px; text-align: center; color: var(--mut); font-size: 13px; } .box-fold { padding: 0; } .box-fold > summary { display: block; padding: 13px 15px; cursor: pointer; list-style: none; font: 600 14px/1 var(--ff); color: var(--ink); } .box-fold > summary .fold-line { align-items: center; } .box-fold > summary::-webkit-details-marker { display: none; } .box-fold > summary .fold-line::after { content:"▾"; color: var(--mut); font-size: 13px; } .box-fold[open] > summary .fold-line::after { content:"▴"; } .box-fold > summary:hover { color: var(--now); } .box-fold .box-body { padding: 0 15px 14px; border-top: 1px solid var(--edge); } .empty-slim { padding: 4px 2px 2px; color: var(--ink2); font-size: 13px; } .matrow { border-top: 1px solid var(--edge); } .matrow:first-child { border-top: 0; } html.picked-only .matrow { border-top: 0; } html.picked-only .matrow:not(.pick-off) ~ .matrow:not(.pick-off) { border-top: 1px solid var(--edge); } .matrow.has-acts { display: flex; align-items: flex-start; gap: 8px; } .matrow.has-acts > .mat { flex: 1 1 auto; min-width: 0; } .mat-acts { display: flex; gap: 4px; flex: none; align-items: flex-start; padding-top: 11px; } .mat-acts form { margin: 0; } .mat-acts .iconbtn { width: 30px; height: 30px; min-width: 0; padding: 0; font-size: 13px; color: var(--mut); } .mat-acts .iconbtn:hover { color: var(--now); border-color: var(--now); } .mat { display: block; position: relative; padding: 12px 0; color: inherit; border-bottom: 0; border-top: 0; cursor: pointer; } .mat:hover { border-bottom: 0; } .mat-title { display: block; width: max-content; max-width: 100%; font-weight: 640; font-size: 14px; color: var(--ink); border-bottom: 0; } .matrow[data-pick] { cursor: pointer; } .matrow:hover { background-color: color-mix(in srgb, var(--now) 5%, transparent); border-radius: var(--rad-s); } .mat-title:hover { border-bottom: 0; color: var(--now); } .matgrid-wrap { min-width: 0; } .matgrid { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 900px) { .matgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } } .matgrid > .matrow.is-card { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 0; min-width: 0; overflow: hidden; padding: 9px 11px 8px 13px; background: var(--panel); border: 1px solid var(--edge); border-radius: var(--rad); border-top: 0; border-bottom: 0; box-shadow: inset 3px 0 0 var(--dc, var(--edge2)), inset 0 1px 0 color-mix(in srgb, #fff 7%, transparent); transition: border-color .14s, transform .14s; } .matgrid > .matrow.is-card.pc { box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 7%, transparent); background-image: repeating-linear-gradient( -45deg, var(--dc) 0 5px, var(--pc, var(--dc)) 5px 10px); background-size: 3px 100%; background-repeat: no-repeat; background-position: 0 0; } .matgrid > .matrow.is-card:hover { border-radius: var(--rad); border-color: color-mix(in srgb, var(--dc, var(--now)) 45%, var(--edge)); } @media (hover: hover) { .matgrid > .matrow.is-card:hover { transform: translateY(-1px); } } .matgrid > .matrow.is-card > .mat { flex: 1 1 auto; display: flex; flex-direction: column; padding: 0; min-width: 0; } .matc-head { display: flex; align-items: center; gap: 5px; margin-bottom: 5px; } .matc-dir { flex: none; display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; font-size: 11px; line-height: 1; background: color-mix(in srgb, var(--dc, var(--edge2)) 20%, transparent); border: 1px solid color-mix(in srgb, var(--dc, var(--edge2)) 45%, transparent); } .matc-dir.is-loose { color: var(--mut); border-style: dashed; } .matc-pin { flex: none; font-size: 9.5px; opacity: .8; } .matc-head .mat-lamp { flex: none; margin: 0; } .matc-day { margin-left: auto; flex: none; font: 600 10px/1.2 var(--fm); color: var(--mut); letter-spacing: .2px; } .matgrid .mat-title { width: auto; overflow-wrap: anywhere; font-size: 13.5px; line-height: 1.32; } .matc-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 0; min-width: 0; } .matc-tags .chip { white-space: nowrap; } .matgrid { align-items: start; } .matgrid.is-laid { grid-auto-rows: 2px; row-gap: 0; } @media (scripting: enabled) { .matgrid:not(.is-laid) { visibility: hidden; animation: matgrid-late 0s 1.5s forwards; } } @keyframes matgrid-late { to { visibility: visible; } } .matgrid > .matrow.is-card:has(> .mat-tags-open:checked) { border-color: color-mix(in srgb, var(--dc, var(--now)) 55%, var(--edge)); } .mat-tags-open:checked ~ .mat .matc-tags .mat-tag-more { display: inline-flex; } .mat-tags-open:checked ~ .mat .matc-tags .tag-open { display: inline; } .mat-tags-open:checked ~ .mat .matc-tags .tag-shut { display: none; } .matgrid > .matrow.is-card:has(> .mat-tags-open:checked) .matc-tags .chip { white-space: normal; overflow: visible; text-overflow: clip; } .matgrid .mat > .mat-meta { margin-top: auto; padding-top: 7px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 6px; } .matgrid .mat > .mat-meta > .mat-line { grid-column: 1; min-width: 0; } .matgrid .mat > .mat-meta > .mat-line:not(.mat-line-tags) { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior-x: contain; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 14px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 14px), transparent); } .matgrid .mat > .mat-meta > .mat-line:not(.mat-line-tags)::-webkit-scrollbar { display: none; } .matgrid .mat > .mat-meta > .mat-line-tags { margin-top: 3px; overflow: hidden; } .matgrid .mat-line > .chip { flex: none; white-space: nowrap; } .matgrid .mat > .mat-meta > .mat-acts { grid-column: 2; grid-row: 1 / -1; align-self: end; padding-top: 0; gap: 2px; } .matgrid .mat-acts .iconbtn { width: 28px; height: 28px; font-size: 12px; } .matgrid .mat > .mat-meta:not(:has(.chip)) { padding-top: 5px; } .picking .matgrid > .matrow[data-pick] { padding-left: 34px; } .picking .matgrid > .matrow[data-pick]::before { left: 11px; top: 11px; } .picking .matgrid > .matrow[data-pick] .matc-head { min-height: 19px; } @media (max-width: 360px) { .matgrid { gap: 8px; } .matgrid > .matrow.is-card { padding: 8px 8px 7px 11px; } .matgrid .mat-title { font-size: 13px; } .matgrid .mat-acts .iconbtn { width: 26px; height: 26px; } .picking .matgrid > .matrow[data-pick] { padding-left: 30px; } .picking .matgrid > .matrow[data-pick]::before { left: 8px; } } .fileview { padding: 0; overflow: hidden; } .fileview-mid { display: flex; justify-content: center; padding: 12px; } .fileview-name { overflow-wrap: anywhere; } .fileview-text { margin: 0; padding: 14px 16px; max-height: none; font: 400 12.5px/1.65 var(--fm); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; background: transparent; } .fileview-frame { display: block; width: 100%; height: min(72vh, 900px); border: 0; background: #fff; } .fileview-frame[data-live] { height: clamp(300px, calc(100svh - 71px - var(--fab-bottom) - var(--fab-h)), min(72vh, 900px)); } .fileview-bar { display: none; } .fileview.is-full { position: fixed; inset: 0; z-index: 85; margin: 0; width: auto; height: auto; max-width: none; max-height: none; display: flex; flex-direction: column; overflow: hidden; border: 0; border-radius: 0; box-shadow: none; background: var(--panel); color: inherit; padding: env(safe-area-inset-top, 0px) var(--safe-r) var(--safe-b) var(--safe-l); } .fileview.is-full .fileview-bar { display: flex; align-items: center; flex: none; min-height: 44px; padding: 4px 10px; box-sizing: border-box; border-bottom: 1px solid var(--edge); touch-action: none; } .fileview.is-full .fileview-frame { flex: 1 1 auto; height: auto; min-height: 0; } html.file-full { overflow: hidden; } html.file-full body * { visibility: hidden; } html.file-full .fileview.is-full, html.file-full .fileview.is-full * { visibility: visible; } .fileview-stopped { padding: 32px 16px; text-align: center; } .fileview-stopped .btn { margin-top: 12px; } .fileview-img { max-width: 100%; height: auto; border-radius: var(--rad-s); } .fileview-media { width: 100%; } .mattags { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 7px 0 12px; } .mattags-label { font: 700 9.5px/1 var(--fm); letter-spacing: 1.1px; text-transform: uppercase; color: var(--mut); flex: none; } .mattags-row { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; } .mat > .mat-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 6px; min-width: 0; } .mat-line { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; min-width: 0; } .mat-line:not(:has(> *)) { display: none; } .mat-line-tags { display: flex; gap: 6px; flex-wrap: wrap; } .mat-tag-more { display: none; } .mat-tags-open:checked ~ .mat-line .mat-tag-more, .mat-tags-open:checked ~ .mat-tag-more { display: inline-flex; } .tag-open { display: none; } .mat-tags-open:checked ~ .mat-line .tag-open, .mat-tags-open:checked ~ .tag-open, .mat-tags-open:checked ~ .mat-line .mat-tag .tag-open, .mat-tags-open:checked ~ .mat-tag .tag-open { display: inline; } .mat-tags-open:checked ~ .mat-line .mat-tag .tag-shut, .mat-tags-open:checked ~ .mat-tag .tag-shut { display: none; } .mat-tags-open:checked ~ .mat-line .mat-tag { border-color: var(--now); color: var(--now); } label.mat-tag { display: inline-flex; margin: 0; font: 600 11px/1.5 var(--fm); letter-spacing: normal; text-transform: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } label.mat-tag:hover { border-color: var(--now); color: var(--now); } label.mat-tag:hover u { color: inherit; } .mat-tag u { margin-left: 5px; text-decoration: none; font-weight: 600; color: var(--mut); font-size: .92em; } a.mat-tag:hover { border-color: var(--now); color: var(--now); } a.mat-tag:hover u { color: inherit; } .matrow.peeked > .mat .mat-title { color: var(--now); } .matrow.peeked { background: color-mix(in srgb, var(--now) 7%, transparent); border-radius: var(--rad-s); } .mat-prev { font-size: 12.5px; color: var(--mut); margin-top: 4px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .mat-prev mark { background: color-mix(in srgb, var(--wait) 30%, transparent); color: var(--ink); border-radius: 3px; padding: 0 2px; } .mat-meta { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin-top: 6px; } .phead .mat-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 7px; min-width: 0; } .phead .mat-meta > * { max-width: 100%; } .body-text { white-space: pre-wrap; word-break: break-word; font-size: 14px; line-height: 1.72; color: var(--ink2); font-family: var(--ff); } .body-text.code { font-family: var(--fcode); font-size: 13px; line-height: 1.65; } .dayhead { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 0 12px; } .dayhead-back { flex: 0 0 100%; } .dayhead-name { flex: 1 1 200px; min-width: 0; } .dayhead-nav { flex: none; margin-left: auto; } @media (max-width: 560px) { .dayhead-nav { width: 100%; margin-left: 0; } } .dayidx { display: grid; place-items: center; width: 72px; height: 72px; flex: none; border-radius: var(--rad); border: 1px solid var(--edge2); background: var(--bg2); font: 700 22px/1 var(--fm); } .dayidx small { display: block; font: 8.5px/1 var(--fm); letter-spacing: .4px; color: var(--mut); margin-top: 6px; white-space: nowrap; } .wk { border: 1px solid var(--edge); border-radius: var(--rad); overflow: hidden; background: var(--panel); } .wk-day { border-bottom: 1px solid var(--edge); padding: 12px 13px; } .wk-day:last-child { border-bottom: 0; } .wk-day.today { box-shadow: inset 3px 0 0 var(--now); } .wk-day.empty { opacity: .6; } .wk-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .wk-date { font: 700 13px/1 var(--fm); color: var(--ink); } .wk-wd { font: 600 10px/1 var(--fm); letter-spacing: 1px; text-transform: uppercase; color: var(--mut); } .wk-scores { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; } .wk-score { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--dc) 45%, var(--edge)); font: 700 11.5px/1.5 var(--fm); color: var(--dc); background: color-mix(in srgb, var(--dc) 11%, transparent); } [data-light] .wk-score { color: color-mix(in srgb, var(--dc) 72%, #0E1720); } .wk-score.none { color: var(--mut); border-color: var(--edge); background: transparent; } .tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--rad-s); } table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; } table.tbl th { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--edge2); font: 700 9.5px/1.3 var(--fm); letter-spacing: 1.1px; text-transform: uppercase; color: var(--mut); white-space: nowrap; } table.tbl td { padding: 9px 10px; border-bottom: 1px solid var(--edge); vertical-align: top; color: var(--ink2); } table.tbl tr:last-child td { border-bottom: 0; } table.tbl th.num { text-align: right; } table.tbl th.num, table.tbl td.num { width: 1%; white-space: nowrap; } table.tbl td.num { font-family: var(--fm); text-align: right; font-variant-numeric: tabular-nums; } .login { min-height: calc(100vh - 150px); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 36px 0 28px; text-align: center; } .login-icon { border-radius: 24px; display: block; box-shadow: var(--shadow), var(--glow) color-mix(in srgb, var(--now) 34%, transparent); } .login-name { margin-top: 20px; font-size: 34px; line-height: 1.1; letter-spacing: -.035em; font-weight: 700; } .login-claim { margin-top: 8px; color: var(--now); font: 700 11.5px/1.2 var(--fm); letter-spacing: .2em; text-transform: uppercase; } .login-card { width: 100%; max-width: 380px; margin-top: 26px; text-align: left; } .login-card .field input { height: 48px; font-size: 16px; letter-spacing: .12em; } .login-go { height: 48px; font-size: 15px; margin-top: 14px; } .login-dirs { display: flex; gap: 7px; flex-wrap: wrap; justify-content: center; margin-top: 26px; max-width: 420px; } .login-dirs span { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--edge); background: var(--panel); font: 600 11.5px/1 var(--ff); color: var(--mut); } .login-note { margin-top: 18px; max-width: 380px; font-size: 12.5px; line-height: 1.55; color: var(--mut); } @media (max-width: 560px) { .login { min-height: calc(100vh - 120px); padding: 24px 0 20px; } .login-icon { width: 78px; height: 78px; border-radius: 20px; } .login-name { font-size: 28px; margin-top: 16px; } } .foot { padding: 26px 16px 18px; color: var(--mut); font-size: 11.5px; display: flex; gap: 16px; align-items: center; justify-content: center; } .foot:empty { padding: 18px 0; } .foot-out { color: var(--mut); opacity: .8; font-size: 12.5px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--edge); } .foot-out:hover { color: var(--bad); border-color: var(--bad); opacity: 1; } .foot-outs { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; } .foot-out.is-all { opacity: .55; border-style: dashed; } .foot-out.is-all:hover { opacity: 1; } :root { --drum: 78vw; --drum-eye: 1500px; } @view-transition { navigation: auto; } @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } } @property --drum-turn { syntax:"<angle>"; inherits: false; initial-value: 0deg; } @property --drum-x { syntax:"<number>"; inherits: false; initial-value: 0; } @property --drum-fade { syntax:"<number>"; inherits: false; initial-value: 1; } @property --drum-y { syntax:"<length-percentage>"; inherits: false; initial-value: 50%; } html.turning main { transform: translate3d(calc(var(--drum-x, 0) * 100vw), 0, 0); opacity: var(--drum-fade, 1); will-change: transform, opacity; } html.turning.settling main { transition: transform .2s cubic-bezier(.33, 1, .68, 1), opacity .2s cubic-bezier(.33, 1, .68, 1); } html.turning.settling.leaving main { transition: transform .56s cubic-bezier(.33, 1, .68, 1), opacity .56s cubic-bezier(.33, 1, .68, 1); } html.turning { overflow-x: clip; } html.turning body { overflow-x: clip; } @media (prefers-reduced-motion: reduce) { html.turning main { transform: none; opacity: 1; } } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .42s; animation-timing-function: cubic-bezier(.33, 1, .68, 1); transform-origin: center center; } @keyframes vt-in { from { opacity: 0; transform: translateY(6px); } } @keyframes vt-out { to { opacity: 0; transform: translateY(-4px); } } ::view-transition-new(root) { animation-name: vt-in; } ::view-transition-old(root) { animation-name: vt-out; } @keyframes vt-turn-out-next { to { transform: translate3d(-30%, 0, 0); opacity: 0; } } @keyframes vt-turn-in-next { from { transform: translate3d(34%, 0, 0); opacity: .2; } } @keyframes vt-turn-out-prev { to { transform: translate3d(30%, 0, 0); opacity: 0; } } @keyframes vt-turn-in-prev { from { transform: translate3d(-34%, 0, 0); opacity: .2; } } html:active-view-transition-type(next)::view-transition-new(root) { animation-name: vt-turn-in-next; } html:active-view-transition-type(next)::view-transition-old(root) { animation-name: vt-turn-out-next; } html:active-view-transition-type(prev)::view-transition-new(root) { animation-name: vt-turn-in-prev; } html:active-view-transition-type(prev)::view-transition-old(root) { animation-name: vt-turn-out-prev; } @keyframes page-in { from { opacity: .5; transform: translateY(5px); } } main.page-in { animation: page-in .2s cubic-bezier(.33, 1, .68, 1); } @media (prefers-reduced-motion: reduce) { main.page-in { animation: none; } } .tabbar { view-transition-name: tabbar; } ::view-transition-group(tabbar) { animation-duration: .01s; } ::view-transition-old(tabbar), ::view-transition-new(tabbar) { animation: none; opacity: 1; } .top { view-transition-name: topbar; } ::view-transition-group(topbar) { animation-duration: .01s; } ::view-transition-old(topbar), ::view-transition-new(topbar) { animation: none; opacity: 1; } .fab { view-transition-name: fab-add; } .fab.boxfab { view-transition-name: fab-box; } .fab.notefab { view-transition-name: fab-note; } ::view-transition-group(fab-add), ::view-transition-group(fab-box), ::view-transition-group(fab-note) { animation-duration: .01s; } ::view-transition-old(fab-add), ::view-transition-new(fab-add), ::view-transition-old(fab-box), ::view-transition-new(fab-box), ::view-transition-old(fab-note), ::view-transition-new(fab-note) { animation: none; opacity: 1; } .tabshield { display: none; } .tabbar { position: fixed; z-index: 50; display: none; left: calc(10px + var(--safe-l)); right: calc(10px + var(--safe-r)); bottom: var(--bar-lift); background: color-mix(in srgb, var(--panel) 72%, transparent); backdrop-filter: saturate(var(--glass-sat)) blur(var(--glass-blur)); -webkit-backdrop-filter: saturate(var(--glass-sat)) blur(var(--glass-blur)); transform: translateZ(0); border: 1px solid color-mix(in srgb, var(--edge2) 70%, transparent); border-radius: 999px; box-shadow: 0 10px 30px -8px rgba(0,0,0,.45), 0 2px 8px -4px rgba(0,0,0,.3); padding: 5px; touch-action: none; } .tabbar a, .tabbar .tabink-t { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 56px; padding: 6px 2px; border-radius: 999px; color: var(--mut); border: 0; font: 600 9px/1 var(--ff); letter-spacing: .2px; transition: color .18s cubic-bezier(.22,1,.36,1); -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } .tabbar a i, .tabbar .tabink-t i { font-style: normal; font-size: 19px; line-height: 1; display: block; transition: transform .2s cubic-bezier(.22,1,.36,1); } .tabbar a.on { color: var(--now); font-weight: 800; } .tabbar a.on i { transform: translateY(-1px) scale(1.06); } .tabbar a.on::before { content:""; position: absolute; z-index: -1; inset: 0; border-radius: 999px; background: color-mix(in srgb, var(--now) 15%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--now) 32%, transparent); transition: opacity .18s ease; } .tabbar a.tab-main i, .tabbar .tabink-t.tab-main i { font-size: 26px; margin-top: -2px; } .tablane { position: absolute; z-index: 2; inset: 5px; pointer-events: none; overflow: hidden; border-radius: 999px; transition: opacity .2s ease; } .tablane.off { opacity: 0; } .tabpill, .tabwin { position: absolute; top: 0; bottom: 0; left: 0; width: var(--tab-w, 20%); border-radius: 999px; will-change: transform; } .tabpill { transform-origin: 0 50%; background: color-mix(in srgb, var(--now) 15%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--now) 32%, transparent); } .tabwin { overflow: hidden; } .tabink { position: absolute; top: 0; bottom: 0; left: 0; width: var(--lane-w, 100%); display: flex; will-change: transform; } .tabbar .tabink-t { color: var(--now); -webkit-text-stroke: .35px currentColor; } .tabbar.pills a.on::before { display: none; } .tabbar.pills a.on { color: var(--mut); font-weight: 600; } .tabbar.pills a.on i { transform: none; } .tabbar a { position: relative; z-index: 1; } .tabaim { position: fixed; z-index: 65; left: var(--x, 50%); bottom: var(--y, 72px); transform: translateX(-50%); transition: left .22s cubic-bezier(.22,1,.36,1); display: none; align-items: center; gap: 7px; white-space: nowrap; padding: 8px 14px; border-radius: 999px; background: var(--panel); border: 1px solid var(--now); color: var(--now); font: 700 13px/1 var(--ff); box-shadow: 0 14px 34px -12px rgba(0,0,0,.6); pointer-events: none; } .tabaim.on { display: flex; } .tabaim i { font-style: normal; font-size: 15px; line-height: 1; } .fab-toggle { position: absolute; opacity: 0; pointer-events: none; } .fab { position: fixed; z-index: 60; right: calc(18px + var(--safe-r)); bottom: var(--fab-bottom); margin: 0; text-transform: none; letter-spacing: normal; display: inline-flex; align-items: center; gap: 9px; padding: 13px 20px 13px 17px; border-radius: 999px; cursor: pointer; background: color-mix(in srgb, var(--panel2) 70%, transparent); backdrop-filter: saturate(var(--glass-sat)) blur(var(--glass-blur)); -webkit-backdrop-filter: saturate(var(--glass-sat)) blur(var(--glass-blur)); border: 1px solid color-mix(in srgb, var(--now) 30%, var(--edge2)); color: var(--now); font: 700 14px/1 var(--ff); box-shadow: 0 8px 22px -8px rgba(0,0,0,.5); transition: transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s; user-select: none; } .fab:hover { transform: translateY(-2px); } .fab:active { transform: translateY(0) scale(.97); } .fab { min-height: var(--fab-h); } .fab-plus { font-size: 21px; line-height: 1; font-weight: 400; margin-top: -2px; } .fab-toggle:checked ~ .fab { transform: scale(.9); opacity: 0; pointer-events: none; } .fab-shade { position: fixed; inset: 0; z-index: 70; display: none; cursor: pointer; background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(3px); } .fab-toggle:checked ~ .fab-shade { display: block; } .fab-sheet { --fab-gap: 22px; --fab-top: calc(env(safe-area-inset-top) + 28px); position: fixed; z-index: 80; right: 18px; bottom: var(--fab-gap); width: min(520px, calc(100vw - 36px)); height: min(720px, calc(100vh - var(--fab-gap) - var(--fab-top))); height: min(720px, calc(100dvh - var(--fab-gap) - var(--fab-top))); overflow-y: auto; overscroll-behavior: contain; display: none; background: var(--panel); border: 1px solid var(--edge2); border-radius: var(--rad); box-shadow: 0 24px 60px -12px rgba(0,0,0,.55); } .fab-toggle:checked ~ .fab-sheet { display: block; animation: fab-in .18s cubic-bezier(.2,.8,.2,1); } .fab-sheet-in { padding: 16px; } .fab-head { position: sticky; top: -16px; z-index: 2; margin: -16px -16px 12px; padding: 14px 16px 10px; background: var(--panel); border-bottom: 1px solid var(--edge); border-radius: var(--rad) var(--rad) 0 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; } @keyframes fab-in { from { opacity: 0; transform: translateY(14px) scale(.98); } } .fab-tabbar { display: flex; gap: 4px; margin-bottom: 14px; padding: 4px; background: var(--bg2); border: 1px solid var(--edge); border-radius: var(--rad-s); overflow-x: auto; scrollbar-width: none; } .fab-tabbar::-webkit-scrollbar { display: none; } .fab-tabbar label { flex: 1 0 auto; text-align: center; white-space: nowrap; cursor: pointer; padding: 7px 4px; border-radius: 6px; margin: 0; color: var(--mut); font: 600 12px/1.2 var(--ff); text-transform: none; letter-spacing: 0; transition: .14s; } .fab-tabbar label:hover { color: var(--ink); } .fab-pane { display: none; } #fabtab-task:checked ~ .fab-tabbar label[for="fabtab-task"], #fabtab-mat:checked ~ .fab-tabbar label[for="fabtab-mat"], #fabtab-timer:checked ~ .fab-tabbar label[for="fabtab-timer"], #fabtab-sub:checked ~ .fab-tabbar label[for="fabtab-sub"] { background: var(--panel); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.2); } #fabtab-task:checked ~ .fab-pane[data-pane="task"], #fabtab-mat:checked ~ .fab-pane[data-pane="mat"], #fabtab-timer:checked ~ .fab-pane[data-pane="timer"], #fabtab-sub:checked ~ .fab-pane[data-pane="sub"] { display: block; } .fab-where { margin: -4px 0 12px; } .skinpick, .calpick, .iconpick { --pick-col: 104px; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--pick-col), 1fr)); gap: 9px; } .skinopt, .calopt, .iconopt { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 9px 7px 8px; margin: 0; cursor: pointer; text-align: center; border: 1px solid var(--edge); border-radius: var(--rad-s); background: var(--bg2); transition: .14s; text-transform: none; letter-spacing: 0; } .skinopt:hover, .calopt:hover, .iconopt:hover { border-color: var(--edge2); } .iconpick { grid-template-columns: repeat(9, minmax(0, 1fr)); } .iconpick .iconopt { padding: 8px 4px; } .iconpick .iconname { font-size: 10px; text-align: center; } .modeswitch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid var(--edge2); border-radius: var(--rad); background: var(--bg2); } .modeside { display: block; cursor: pointer; border: 1px solid transparent; border-radius: var(--rad-s); background: transparent; color: var(--mut); transition: background .16s, color .16s, border-color .16s; } .modeside { text-align: center; padding: 14px 13px; } .modeside b { display: block; font: 700 15px/1.25 var(--ff); color: var(--ink2); } .modeside:hover { background: var(--panel2); } .modeside.on { background: var(--panel); border-color: color-mix(in srgb, var(--now) 45%, var(--edge2)); } .modeside.on b { color: var(--now); } .modeswitch.homezone { grid-template-columns: repeat(3, minmax(0, 1fr)); } .homezone .modeside { padding: 11px 6px; } .homezone .modeside b { font-size: 14px; overflow-wrap: anywhere; } .homezone-now { display: block; margin-top: 3px; font: 600 11.5px/1.2 var(--fm); color: var(--mut); } .homezone .modeside.on .homezone-now { color: var(--now); } .skinname, .calname, .iconname { font: 600 11px/1.25 var(--ff); color: var(--ink2); } .calname { font: 700 13px/1.3 var(--ff); color: var(--ink2); } .calwhat, .iconwhat { display: block; font: 400 10px/1.3 var(--ff); color: var(--mut); margin-top: 1px; } .skinswatch { width: 100%; height: 34px; border-radius: 6px; border: 1px solid var(--edge2); display: block; position: relative; overflow: hidden; } .skinswatch i { position: absolute; left: 6px; right: 6px; bottom: 6px; height: 6px; border-radius: 3px; } .caldemo { width: 100%; height: 72px; display: block; border-radius: 6px; overflow: hidden; background: var(--panel); border: 1px solid var(--edge); position: relative; } .caldemo .cal-day { position: absolute; inset: 0; display: flex; } .iconshot { width: 48px; height: 48px; display: block; border-radius: 11px; box-shadow: 0 4px 12px -6px rgba(0,0,0,.6); } .skinpick + .skinpick { margin-top: 14px; } .timechips { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; } .timechips .chip { cursor: pointer; border-style: solid; font-size: 10.5px; padding: 3px 7px; } .timechips .chip:hover { border-color: var(--now); color: var(--now); } .timefield { font-family: var(--fm); } input[type="date"][data-empty] { position: relative; } input[type="time"][data-empty] { position: relative; } input[type="date"][data-empty]::before { content:"выбрать день"; } input[type="time"][data-empty]::before { content:"выбрать час"; } input[type="date"][data-empty]::before, input[type="time"][data-empty]::before { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); pointer-events: none; white-space: nowrap; color: var(--mut); opacity: .85; font-family: var(--fm); letter-spacing: .2px; } input[type="date"][data-empty]::-webkit-datetime-edit, input[type="time"][data-empty]::-webkit-datetime-edit { opacity: 0; } input[type="date"][data-empty]:focus::before, input[type="time"][data-empty]:focus::before, input[type="date"][data-empty]:focus-within::before, input[type="time"][data-empty]:focus-within::before { content:""; } input[type="date"][data-empty]:focus::-webkit-datetime-edit, input[type="time"][data-empty]:focus::-webkit-datetime-edit, input[type="date"][data-empty]:focus-within::-webkit-datetime-edit, input[type="time"][data-empty]:focus-within::-webkit-datetime-edit { opacity: 1; } .tintrow { display: flex; align-items: center; gap: 10px; margin-top: 10px; } .tintpick { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 6px 10px 6px 6px; border: 1px solid var(--edge2); border-radius: var(--rad-s); background: var(--panel2); } .tintpick:hover { border-color: var(--now); } .tintpick input[type=color] { width: 34px; height: 26px; padding: 0; border: 0; border-radius: 5px; background: none; cursor: pointer; } .tintpick input[type=color]::-webkit-color-swatch-wrapper { padding: 0; } .tintpick input[type=color]::-webkit-color-swatch { border: 1px solid var(--edge2); border-radius: 5px; } .tintword { font: 600 12px/1 var(--ff); color: var(--ink2); text-transform: none; letter-spacing: 0; } .tintoff { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font: 500 11px/1 var(--ff); color: var(--mut); text-transform: none; letter-spacing: 0; margin: 0; } .tintoff input { width: auto; margin: 0; cursor: pointer; } .tintoff:hover { color: var(--ink2); } .skinopt-own .skinswatch { border-style: dashed; } .inline-check { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; color: var(--ink2); margin: 0; } .inline-check input { width: auto; } .timer { border: 1px solid var(--edge2); border-radius: var(--rad); padding: 14px; background: var(--panel2); margin-bottom: 10px; } .timer.compact { cursor: pointer; } .timerstack { margin-top: 12px; } .grid > div > .timerstack:first-child { margin-top: 0; } .timerstack > .timer:last-child { margin-bottom: 0; } .timer.run { border-color: color-mix(in srgb, var(--now) 55%, var(--edge)); } .timer.pause { border-style: dashed; } .timer-head { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; } .timer-who { display: flex; flex-direction: column; gap: 5px; flex: 1 1 220px; min-width: 0; } .timer-title { font-weight: 640; font-size: 15px; } .timer-name { color: inherit; border: 0; border-bottom: 1px dashed color-mix(in srgb, currentColor 30%, transparent); } .timer-name:hover { color: var(--now); border-bottom-color: var(--now); } .timer-left { margin-left: auto; flex: none; font: 700 17px/1 var(--fm); color: var(--now); } .timer-rail { display: flex; align-items: center; gap: 9px; margin: 11px 0 6px; } .timer-clock { font: 700 11px/1 var(--fm); color: var(--mut); flex: none; } .timer-state { font: 600 11px/1 var(--fm); color: var(--mut); text-transform: uppercase; letter-spacing: .8px; } .timer-done { color: var(--ink2); font-weight: 700; } .timer-bar { flex: 1 1 auto; height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--edge2) 55%, transparent); overflow: hidden; } .timer-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--now), var(--ok)); width: var(--w, 0%); transition: width .6s cubic-bezier(.2,.8,.2,1); } .timer-bar.over i { background: linear-gradient(90deg, var(--wait), var(--bad)); } .timer-meta { display: flex; gap: 2px 9px; flex-wrap: wrap; font-size: 12px; color: var(--mut); font-family: var(--fm); align-items: baseline; } .timer-meta > *:not(:last-child)::after { content:"·"; color: var(--edge2); margin-left: 9px; } .timer-acts { display: flex; flex-direction: column; gap: 11px; margin-top: 11px; } .timer-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .timer-acts form { display: flex; } .timer-acts .btn { display: inline-flex; align-items: center; justify-content: center; } .timer-set { display: flex; flex-direction: column; gap: 5px; } .timer-set-label { font: 700 9.5px/1.3 var(--fm); letter-spacing: .6px; text-transform: uppercase; color: var(--mut); } .timer-undo { display: flex; gap: 6px; opacity: .62; margin-left: auto; } .timer-undo:hover, .timer-undo:focus-within { opacity: 1; } .timer-own { align-items: center; gap: 6px; flex: 1 1 240px; min-width: 0; flex-wrap: wrap; } .timer-own .estimate-say { flex: 1 1 100%; margin-top: 0; } .timer-own input[type=text] { flex: 1 1 100px; width: auto; min-width: 90px; } .timer-own .btn { flex: none; } @media (max-width: 560px) { .timer.compact .timer-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .timer.compact .timer-row > * { min-width: 0; } .timer.compact .timer-row .btn { width: 100%; } .timer:not(.compact) .timer-row { display: grid; gap: 6px; } .timer:not(.compact) .timer-row > * { min-width: 0; } .timer:not(.compact) .timer-row .btn { width: 100%; } .timer:not(.compact) .timer-what { grid-template-columns: repeat(3, 1fr); } .timer:not(.compact) .timer-what .timer-undo { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; margin-left: 0; } .timer:not(.compact) .timer-time, .timer:not(.compact) .timer-spent { grid-template-columns: 1fr 1fr; } .timer:not(.compact) .timer-own { grid-column: 1 / -1; display: flex; max-width: none; } .timer:not(.compact) .timer-own .btn { width: auto; } .timer:not(.compact) .timer-start input[type=time] { flex: 1 1 auto; width: auto; min-width: 0; } .timer:not(.compact) .timer-what .btn { padding-left: 6px; padding-right: 6px; } } .timer-line { display: flex; gap: 6px; flex-wrap: wrap; align-items: stretch; } @media (max-width: 560px) { .timer .timer-line > * { flex: 1 1 auto; } .timer .timer-line .btn { flex: 1 1 auto; padding-left: 6px; padding-right: 6px; white-space: nowrap; } } @media (max-width: 370px) { .timer .timer-line .btn { padding-left: 4px; padding-right: 4px; } } .timer-start { flex-wrap: nowrap; } .timer-start label { margin: 0; flex: none; font: 600 11.5px/1 var(--fm); color: var(--mut); text-transform: uppercase; letter-spacing: .6px; white-space: nowrap; } .timer-start input[type=time] { width: 132px; flex: 0 1 132px; min-width: 0; } .timer-start .btn { flex: none; } .tree-kid { margin-left: 18px; padding-left: 14px; border-left: 2px solid var(--edge); } @media (max-width: 1400px) { .brand-sub { display: none; } } @media (max-width: 860px) { .nav { order: 3; width: 100%; border-top: 1px solid var(--edge); padding-top: 6px; } .top-in { flex-wrap: wrap; padding-bottom: 2px; } } @media (max-width: 700px), (max-height: 480px) { :root { --bar-lift: max(8px, calc(var(--safe-b) - 14px)); } body { padding-bottom: calc(84px + var(--bar-lift)); font-size: 14px; } :root { --fab-bottom: calc(84px + var(--bar-lift)); --fab-clear: 72px; --fab-h: 56px; --fab-add: 64px; } .item { flex-wrap: wrap; } .item-body { flex: 1 1 calc(100% - 19px); } .item-acts { flex: 1 1 100%; justify-content: flex-start; margin-top: 8px; } .btn, .btn.sm, .btn.xs { min-height: 38px; padding-top: 0; padding-bottom: 0; } .btn.xs { font-size: 12px; padding-left: 12px; padding-right: 12px; } .btn.sm { font-size: 13px; } .iconbtn { width: 38px; height: 38px; font-size: 17px; } .item-acts { gap: 7px; } .foot a { min-height: 34px; display: inline-flex; align-items: center; } footer.foot { padding-top: 30px; padding-bottom: 0; } .topdoors { display: flex; } .timechips .chip, .fab-tabbar label { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; } .row { row-gap: 8px; } .statusbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; margin-right: -12px; padding-right: 12px; overscroll-behavior-x: contain; scroll-snap-type: x proximity; } .statusbar::-webkit-scrollbar { display: none; } .statusbar > * { flex: none; scroll-snap-align: start; } .statusbar .btn, .statusbar .btn.sm { min-height: 34px; font-size: 12.5px; padding-left: 11px; padding-right: 11px; } .timer-left { margin-left: 0; flex: 1 0 100%; } .fab { right: calc(14px + var(--safe-r)); bottom: var(--fab-bottom); width: var(--fab-h); height: var(--fab-h); padding: 0; gap: 0; justify-content: center; } .fab-word { display: none; } .fab-plus { font-size: 27px; margin: 0; } .fab:not(.boxfab):not(.notefab) .fab-plus { position: relative; width: 22px; height: 22px; font-size: 0; } .fab:not(.boxfab):not(.notefab) .fab-plus::before, .fab:not(.boxfab):not(.notefab) .fab-plus::after { content:""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: currentColor; border-radius: 3px; box-shadow: 0 1px 2px rgba(0,0,0,.18); } .fab:not(.boxfab):not(.notefab) .fab-plus::before { width: 22px; height: 3px; } .fab:not(.boxfab):not(.notefab) .fab-plus::after { width: 3px; height: 22px; } .fab:not(.boxfab):not(.notefab) { width: var(--fab-add); height: var(--fab-add); bottom: calc(var(--fab-bottom) - (var(--fab-add) - var(--fab-h)) / 2); } .fab:not(.boxfab):not(.notefab):active { transform: scale(.94); } .fab:not(.boxfab):not(.notefab) .fab-plus { width: 40%; height: 40%; } .fab:not(.boxfab):not(.notefab) .fab-plus::before, .fab:not(.boxfab):not(.notefab) .fab-plus::after { box-shadow: none; border-radius: 99px; } .fab:not(.boxfab):not(.notefab) .fab-plus::before { width: 100%; height: 13.5%; } .fab:not(.boxfab):not(.notefab) .fab-plus::after { width: 13.5%; height: 100%; } .fab-sheet { --fab-gap: calc(6px + env(safe-area-inset-bottom)); --fab-top: calc(env(safe-area-inset-top) + 28px); right: calc(6px + var(--safe-r)); left: calc(6px + var(--safe-l)); width: auto; height: calc(100vh - var(--fab-top) - var(--fab-gap)); height: calc(100dvh - var(--fab-top) - var(--fab-gap)); border-radius: var(--rad); } .fab-sheet .fab-tabbar { position: sticky; top: 46px; z-index: 2; background: var(--panel2); } .wrap { padding: 0 calc(12px + var(--safe-r)) 0 calc(12px + var(--safe-l)); } h1 { font-size: 20px; } .card { padding: 13px; border-radius: var(--rad-s); } .tabbar { display: flex; } .tabshield { display: block; position: fixed; z-index: 49; left: 0; right: 0; bottom: 0; height: calc(var(--bar-lift) + 76px); -webkit-tap-highlight-color: transparent; } .nav { display: none; } .skinpick, .calpick, .iconpick { --pick-col: 88px; gap: 7px; } .calname { font-size: 13px; } .iconpick { grid-template-columns: repeat(auto-fill, minmax(var(--pick-col), 1fr)); } .iconpick .iconopt { padding: 10px 6px; } .iconpick .iconname { font-size: 11px; } .caldemo { height: 64px; } .top-in { flex-wrap: nowrap; } .cal-day { min-height: 88px; padding: 4px 3px; } .cal-num { font-size: 11.5px; } .cal-idx { display: none; } .bars { height: 18px; gap: 1.5px; } .cal-head div { font-size: 8.5px; letter-spacing: .6px; padding: 6px 2px; } .cal-mark { gap: 2px; } .cal-mark span { width: 4px; height: 4px; } .cal-cnt { font-size: 11px; } .cal-hrs { font-size: 9px; } .cal-strict { font-size: 9.5px; } .cal-foot { min-width: 0; } .cal-cnt, .cal-hrs { min-width: 0; overflow: hidden; text-overflow: clip; } .cal-dot { display: none; } .feed-row { grid-template-columns: 54px 1fr 40px; gap: 8px; padding: 8px 9px; } .dayidx { width: 60px; height: 60px; font-size: 19px; } .tiles { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 8px; } .tile-value { font-size: 21px; } } @media (max-width: 380px) { .cal-day { min-height: 56px; } .bars { height: 15px; } .cal-num { font-size: 10.5px; } } @media print { .top, .tabbar, .tabshield, .foot, .btn, .item-acts { display: none !important; } body { background: #fff; color: #000; padding: 0; } .card { box-shadow: none; border-color: #ccc; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } html { scroll-behavior: auto; } } .cal-foot { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 3px; margin-top: auto; padding-top: 3px; min-height: 15px; border-top: 1px solid transparent; } .cal-foot:has(.cal-cnt:not(:empty)) { border-top-color: color-mix(in srgb, var(--edge) 70%, transparent); } .cal-fix { position: absolute; top: 0; right: 0; z-index: 2; min-width: 0; line-height: 1; font-size: 0; } .cal-inner:has(.cal-strict) .cal-idx { margin-right: 18px; } .cal-cnt { justify-self: start; font: 800 12px/1.2 var(--fm); color: var(--mark-task); white-space: nowrap; } .cal-hrs { justify-self: end; font: 700 10px/1.3 var(--fm); color: var(--mut); white-space: nowrap; } .cal-hrs.was, .pday-hrs.was { font-style: italic; } .pchip-est.was { font-style: italic; background: color-mix(in srgb, var(--ok) 14%, transparent); } .cal-foot.all-done .cal-cnt { color: var(--ok); } .cal-note { width: 5px; height: 5px; border-radius: 50%; background: var(--mark-note); } .cal-mid { display: flex; align-items: flex-end; flex: 1 1 auto; min-height: 0; } .cal-mid > * { width: 100%; } .feed-load { display: block; font: 600 11px/1.5 var(--fm); color: var(--mut); margin-top: 3px; } .rail { position: relative; width: 46px; height: var(--h); flex: none; } .rail > div { position: absolute; inset: 0; } .rail .gap { position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; bottom: min(var(--time), var(--done)); height: calc(max(var(--time), var(--done)) - min(var(--time), var(--done))); transition: bottom .7s cubic-bezier(.2,.8,.2,1), height .7s cubic-bezier(.2,.8,.2,1); background: repeating-linear-gradient( -45deg, color-mix(in srgb, var(--gapc, var(--mut)) 26%, transparent) 0 4px, transparent 4px 8px); border-top: 1px dashed color-mix(in srgb, var(--gapc, var(--mut)) 55%, transparent); border-bottom: 1px dashed color-mix(in srgb, var(--gapc, var(--mut)) 55%, transparent); } .rail.behind { --gapc: var(--rt); } .rail.ahead { --gapc: var(--rd); } .rail.even .gap, .rail.idle .gap { display: none; } .rail-sand .sandbox { overflow: hidden; border-radius: var(--rad-s); background: color-mix(in srgb, var(--edge2) 20%, transparent); border: 1px solid var(--edge); } .rail-sand .pile { position: absolute; left: 0; right: 0; bottom: 0; height: var(--time); background: linear-gradient(180deg, var(--rt), color-mix(in srgb, var(--rt) 45%, transparent)); transition: height .7s cubic-bezier(.2,.8,.2,1); } .rail-sand .pile::before { content:""; position: absolute; left: 0; right: 0; top: -6px; height: 8px; border-radius: 50% / 8px; background: var(--rt); opacity: .95; } .rail-sand .gr { position: absolute; top: 0; left: calc(50% + var(--x)); width: 3px; height: 3px; border-radius: 50%; background: var(--rt); opacity: 0; z-index: 2; animation: sandfall var(--sd, 2.4s) steps(12) infinite; animation-delay: var(--dl, 0s); } @keyframes sandfall { 0% { transform: translateY(0); opacity: 0; } 8% { opacity: .95; } 86% { opacity: .95; } 100% { transform: translateY(calc(var(--h) - 10px)); opacity: 0; } } .rail-sand .marker { position: absolute; left: -3px; right: -3px; bottom: var(--done); height: 0; border-top: 3px solid var(--rd); z-index: 3; filter: drop-shadow(0 1px 0 rgba(0,0,0,.45)); transition: bottom .7s cubic-bezier(.2,.8,.2,1); } .rail-sand .marker::after { content:""; position: absolute; right: -2px; top: -5px; width: 8px; height: 8px; border-radius: 2px; background: var(--rd); transform: rotate(45deg); box-shadow: var(--glow) var(--rd); } .rail-engine .eng { overflow: hidden; border-radius: var(--rad-s); background: color-mix(in srgb, var(--edge2) 18%, transparent); border: 1px solid var(--edge); } .rail-engine .burn { position: absolute; left: 0; right: 0; top: 0; height: var(--done); background: linear-gradient(180deg, var(--rd), color-mix(in srgb, var(--rd) 38%, transparent)); transition: height .7s; } .rail-engine .rod { position: absolute; left: 50%; width: 3px; margin-left: -1.5px; top: 0; height: calc(var(--time) + 7px); background: linear-gradient(180deg, transparent, var(--rt)); z-index: 2; animation: piston 2.4s steps(6) infinite; } .rail-engine .pist { position: absolute; left: 2px; right: 2px; height: 13px; top: calc(var(--time) - 6px); border-radius: 3px; border: 2px solid var(--rt); z-index: 3; background: linear-gradient(180deg, color-mix(in srgb, var(--rt) 55%, var(--panel)), var(--panel)); box-shadow: var(--glow) var(--rt); animation: piston 2.4s steps(6) infinite; transition: top .7s cubic-bezier(.2,.8,.2,1); } .rail-engine .gap { bottom: auto; top: min(var(--time), var(--done)); } @keyframes piston { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } } .rail-bricks .bricks { display: flex; flex-direction: column; gap: 2px; } .rail-bricks .brick { position: relative; flex: 1; min-height: 5px; border-radius: 3px; border: 1px solid var(--edge2); background: var(--edge); } .rail-bricks .brick b { position: absolute; inset: 0; display: grid; place-items: center; font: 800 8px/1 var(--fm); color: var(--mut); } .rail-bricks .brick.done { background: linear-gradient(180deg, var(--rd), color-mix(in srgb, var(--rd) 55%, var(--bg))); border-color: var(--rd); } .rail-bricks .brick.done b { color: var(--heat-ink); } .rail-bricks .brick.now { border-color: var(--rt); box-shadow: var(--glow) var(--rt), inset 0 0 0 1px var(--rt); } .rail-bricks .brick.now b { color: var(--rt); } .rail-bricks .brick.done.now b { color: var(--heat-ink); } .rail-bricks .gap { display: none; } .rail-spine .spine, .rail .pair { display: flex; gap: 5px; } .rail-spine .spine-track, .rail .rb { position: relative; flex: 1; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--edge2) 35%, transparent); } .rail-spine .spine-track i, .rail .rb i { position: absolute; left: 0; right: 0; top: 0; border-radius: 999px; transition: height .6s cubic-bezier(.2,.8,.2,1); } .rail-spine .spine-track i.t, .rail .rb i.t { height: var(--time); background: var(--rt); } .rail-spine .spine-track i.d, .rail .rb i.d { height: var(--done); background: var(--rd); } .rail-spine .gap, .rail .pair ~ .gap { display: none; } .rail-key { display: flex; flex-direction: column; gap: 3px; margin-top: 7px; } .rail-key span { display: inline-flex; align-items: center; gap: 5px; font: 600 10px/1.3 var(--fm); color: var(--mut); white-space: nowrap; } .rail-key i { width: 9px; height: 9px; border-radius: 2px; flex: none; } .rail-key i.t { background: var(--rt); } .rail-key i.d { background: var(--rd); } .rail-key b { font-weight: 700; color: var(--ink2); } .rail-key .verdict.behind { color: var(--rt); } .rail-key .verdict.ahead { color: var(--rd); } .goal-card { border-left: 3px solid var(--edge2); } .goal-card.behind { border-left-color: var(--rt); } .goal-card.ahead { border-left-color: var(--rd); } .goal-in { display: flex; gap: 16px; align-items: stretch; } .goal-rail-col { display: flex; flex-direction: column; flex: none; } .goal-side { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; } .goal-line { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13.5px; color: var(--ink2); } .goal-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; } .goal-num b { display: block; font: 700 21px/1.1 var(--fm); letter-spacing: -.02em; color: var(--rd); } .goal-num b small { font-size: 12px; font-weight: 600; color: var(--mut); } .goal-num.time b { color: var(--rt); } .goal-num span { display: block; font: 600 10px/1.4 var(--fm); letter-spacing: .6px; text-transform: uppercase; color: var(--mut); margin-top: 2px; } .chip.goal-behind { border-color: color-mix(in srgb, var(--rt) 55%, var(--edge)); color: var(--rt); background: color-mix(in srgb, var(--rt) 10%, transparent); } .chip.goal-ahead { border-color: color-mix(in srgb, var(--rd) 45%, var(--edge)); color: var(--rd); background: color-mix(in srgb, var(--rd) 10%, transparent); } .plan-bar { display: flex; gap: 10px; justify-content: space-between; flex-wrap: wrap; margin-bottom: 10px; } .plan { display: flex; gap: 9px; align-items: flex-start; padding: 10px 0 10px 10px; margin-left: -1px; border-top: 1px solid var(--edge); border-left: 3px solid color-mix(in srgb, var(--dc) 52%, transparent); border-radius: 0 var(--rad-s) var(--rad-s) 0; transition: background .15s; } .plan:first-child { border-top: 0; } [data-lane] .plan[data-pick] { cursor: pointer; } .pc { --hatch: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--dc) 72%, transparent) 0 6px, color-mix(in srgb, var(--pc) 72%, transparent) 6px 12px); } .plan.pc { border-left-color: transparent; background-image: var(--hatch); background-size: 3px 100%; background-repeat: no-repeat; background-position: left top; background-origin: border-box; background-clip: border-box; } .plan:hover { background-color: color-mix(in srgb, var(--dc) 5%, transparent); } .plan, .plan-title { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none; } .plan, .plan *, .plannote, .plannote *, .pchip, .pchip *, .pcard, .pcard *, .ppart, .ppart *, .part, .part * { -webkit-tap-highlight-color: transparent; } .plan-check { flex: none; } .tick { width: 22px; height: 22px; margin-top: 2px; border-radius: 7px; cursor: pointer; border: 1.5px solid var(--edge2); background: transparent; color: transparent; font-size: 13px; line-height: 1; display: grid; place-items: center; transition: border-color .15s, color .15s, background .15s; } .tick:hover { border-color: var(--ok); color: color-mix(in srgb, var(--ok) 45%, transparent); } .tick.on { background: var(--ok); border-color: var(--ok); color: var(--heat-ink); } .plan-check > .tick { position: relative; } .plan-check > .tick::before { content:""; position: absolute; top: -10px; right: -5px; bottom: -14px; left: -13px; } .plan-body { flex: 1 1 auto; min-width: 0; } .plan-title { display: block; font-weight: 600; font-size: 14px; line-height: 1.4; color: var(--ink); border: 0; } .plan-title:hover { color: var(--now); } .plan.is-done .plan-title { text-decoration: line-through; color: var(--mut); font-weight: 500; } .plan.is-box .plan-title { color: var(--mut); } .chip.now { border-color: color-mix(in srgb, var(--wait) 60%, var(--edge)); color: var(--wait); background: color-mix(in srgb, var(--wait) 11%, transparent); } .plan-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 4px; } .plan-acts { display: flex; gap: 4px; flex: none; align-items: center; } .plan-acts .iconbtn, .plan-acts .movepop > summary { font-size: 13px; color: var(--mut); } .plan-acts .movepop > summary { font-size: 16px; } .plan-acts .iconbtn:hover, .plan-acts .movepop > summary:hover { color: var(--now); border-color: var(--now); } .glyph-go { padding-left: 3px; } [data-mode="lite"] .plan-more { display: none; } [data-js][data-mode="lite"] details#setupfold:not([open]), [data-js][data-mode="lite"] details#subadd:not([open]), [data-js][data-mode="lite"] details#attachadd:not([open]) { display: none; } [data-mode="pro"] #setupfold.projsetup > summary { display: none; } [data-js] #setupfold.projsetup[open] > summary { display: none; } .card.setlist { padding: 0; overflow: hidden; } .setrow + .setrow { border-top: 1px solid var(--edge); } .setrow > summary, .setrow-plain { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 11px 14px 11px 16px; } .setrow > summary { cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; } .setrow > summary::-webkit-details-marker { display: none; } .setrow > summary::after { content:"›"; flex: none; margin-left: auto; padding-left: 8px; font: 400 22px/1 var(--ff); color: var(--mut); transition: transform .2s cubic-bezier(.33, 1, .68, 1); } .setrow[open] > summary::after { transform: rotate(90deg); } @media (hover: hover) { .setrow > summary:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); } } .setrow[open] > summary { border-bottom: 1px dashed var(--edge); } .setrow-ico { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; font-size: 15px; line-height: 1; color: var(--now); background: color-mix(in srgb, var(--now) 13%, transparent); } .setrow.is-danger .setrow-ico { color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, transparent); } .setrow-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .setrow-text b { font: 650 15px/1.25 var(--ff); color: var(--ink); } .setrow-text small { font: 500 12.5px/1.35 var(--ff); color: var(--mut); } .setrow-body { padding: 14px 16px 16px; } .setrow-plain { flex-wrap: wrap; } .setrow-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; } .setcase + .setcase { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--edge); } .setcase h3 { margin: 0 0 4px; font: 650 14.5px/1.3 var(--ff); color: var(--ink); } @media (max-width: 520px) { .setrow-plain .setrow-acts { margin-left: 42px; flex-basis: 100%; } } .plan-more { margin-top: 6px; } .plan-more > summary { cursor: pointer; font: 600 11px/1.5 var(--fm); color: var(--mut); list-style: none; } .plan-more > summary::-webkit-details-marker { display: none; } .plan-more > summary::before { content:"+ "; } .plan-more[open] > summary::before { content:"− "; } .plan-more > summary:hover { color: var(--now); } .plan-more p { font-size: 12.5px; line-height: 1.6; color: var(--ink2); margin-top: 6px; } .plan-more p b { color: var(--ink); } .plan-more .body-text { font-size: 12.5px; line-height: 1.6; margin-top: 6px; } .plan-more .body-text b { color: var(--ink); } .movepop { position: relative; flex: none; } .movepop > summary { list-style: none; cursor: pointer; margin: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--rad-s); border: 1px solid var(--edge); background: var(--panel); color: var(--ink2); font-size: 16px; line-height: 1; } .movepop > summary::-webkit-details-marker { display: none; } .movepop > summary:hover { border-color: var(--now); color: var(--now); } .movepop[open] > summary { border-color: var(--now); color: var(--now); background: var(--panel2); } .movepop-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 95; width: min(280px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; padding: 11px; border-radius: var(--rad-s); background: var(--panel); border: 1px solid var(--edge2); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px; } .movepop-head { font: 600 11px/1.4 var(--fm); color: var(--mut); } .movepop-head b { color: var(--ink); font-weight: 700; } .movepop-row { display: flex; flex-wrap: wrap; gap: 5px; } .movepop-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .movepop-line label { margin: 0; flex: none; } .movepop-line input { min-width: 0; width: auto; } .movepop-line input[type=number] { width: 62px; } .movepop-line input[type=date] { flex: 1 1 132px; } .movepop-line input[type=time] { flex: 1 1 96px; } .movepop-line .btn { flex: none; } .movepop-line .btn.wide { flex: 1 1 auto; } .movepop-form { display: flex; flex-direction: column; gap: 8px; } .movepop.chipmove { display: inline-flex; } .movepop.chipmove > summary.chip { display: inline-flex; width: auto; height: auto; place-items: initial; padding: 2px 8px; border-radius: 999px; font: 600 11px/1.5 var(--fm); color: var(--mut); background: var(--panel2); border: 1px solid var(--edge2); } .movepop.chipmove > summary.chip.now { border-color: color-mix(in srgb, var(--wait) 60%, var(--edge)); color: var(--wait); background: color-mix(in srgb, var(--wait) 11%, transparent); } .movepop.chipmove > summary .chipmove-arrow { font-size: 12px; opacity: .75; } .movepop.chipmove[open] > summary.chip, .movepop.chipmove > summary.chip:hover { color: var(--now); border-color: var(--now); } .movepop-pick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; } .movetab { position: relative; display: grid; place-items: center; margin: 0; min-height: 34px; padding: 5px 4px; cursor: pointer; border: 1px solid var(--edge); border-radius: var(--rad-s); background: var(--panel); color: var(--ink2); font: 600 12px/1.2 var(--ff); text-align: center; text-transform: none; letter-spacing: normal; } .movetab input { position: absolute; inset: 0; margin: 0; padding: 0; border: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; -webkit-appearance: none; appearance: none; } .movetab:hover { border-color: var(--edge2); } .movetab:has(input:focus-visible) { outline: 2px solid var(--now); outline-offset: 1px; } .movetab:has(input:checked) { border-color: var(--now); background: var(--panel2); color: var(--now); } .movepop-at { display: flex; flex-direction: column; gap: 6px; } .movepop-at[hidden] { display: none; } .movepop-at .movepop-line input[type=date], .movepop-at .movepop-line input[type=time] { flex: 1 1 0; min-width: 0; } .movepop-at input[type="date"][data-empty]::before, .movepop-at input[type="time"][data-empty]::before { font-size: 11px; } .movepop-tz { flex: 1 1 100%; } .movepop-menu p { margin: 0; } html.move-open .fab { opacity: 0; pointer-events: none; } .chip.tag { border-color: color-mix(in srgb, var(--now) 35%, var(--edge)); color: var(--now); } .factbox dd.taglist { display: flex; flex-wrap: wrap; gap: 5px; } .factbox dd.taglist .chip.tag.lead { background: color-mix(in srgb, var(--now) 14%, transparent); border-color: color-mix(in srgb, var(--now) 55%, var(--edge)); } .factbox dt#tags { scroll-margin-top: 96px; } .factbox dt#tags:target { color: var(--now); } .factbox dt#tags:target + dd .chip.tag { border-color: color-mix(in srgb, var(--now) 55%, var(--edge)); } .chip.flag { border-color: var(--edge2); } .chip.flag.crit { border-color: color-mix(in srgb, var(--wait) 55%, var(--edge)); color: var(--wait); } .chip.flag.wait { border-color: color-mix(in srgb, var(--bad) 45%, var(--edge)); color: var(--bad); } .chip.link { border-color: color-mix(in srgb, var(--now) 40%, var(--edge)); color: var(--now); } .iconbtn.quiet { border-color: transparent; background: transparent; color: var(--mut); opacity: .6; } .iconbtn.quiet:hover { opacity: 1; border-color: var(--edge2); color: var(--now); } .iconbtn.xs { width: 24px; height: 24px; font-size: 12px; } .crumb { display: flex; gap: 6px; align-items: center; font: 600 11px/1.4 var(--fm); color: var(--mut); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .8px; } .crumb a { color: var(--mut); border: 0; } .crumb a:hover { color: var(--now); } .flagpick { display: flex; gap: 7px; flex-wrap: wrap; } .flagbox { display: inline-flex; align-items: center; gap: 6px; margin: 0; cursor: pointer; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--edge2); background: var(--bg2); text-transform: none; letter-spacing: 0; font: 600 12px/1.3 var(--ff); color: var(--ink2); } .flagbox input { width: auto; margin: 0; } .flagbox:hover { border-color: var(--now); } .flagbox:has(input:checked) { border-color: var(--now); color: var(--now); background: color-mix(in srgb, var(--now) 10%, transparent); } .shiftbox { display: flex; flex-direction: column; gap: 10px; } .shiftbox-key { font: 600 9.5px/1.4 var(--fm); letter-spacing: .9px; text-transform: uppercase; color: var(--mut); } .shiftbox-steps { display: flex; gap: 6px; flex-wrap: wrap; } .shiftbox-steps .btn { min-width: 62px; justify-content: center; } .shiftbox-free { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .shiftbox-field { flex: 1 1 200px; min-width: 0; } .shiftbox-who { display: flex; gap: 6px; flex-wrap: wrap; } .shiftbox-who .chip { text-decoration: none; } .shiftbox-who .chip.on { border-color: var(--now); color: var(--now); } @media (max-width: 700px), (max-height: 480px) { .shiftbox-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .shiftbox-steps form { display: contents; } .shiftbox-steps .btn { min-width: 0; width: 100%; justify-content: center; } } .clearbar { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 10px; } .tnums { display: grid; gap: 10px 16px; margin-bottom: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } .tnum { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .tnum-key { display: flex; align-items: center; gap: 6px; font-style: normal; font: 600 9.5px/1.4 var(--fm); letter-spacing: .9px; text-transform: uppercase; color: var(--mut); } .tnum-key u { display: block; width: 15px; height: 0; text-decoration: none; flex: none; } .tnum-key u.line { border-top: 2px solid var(--now); } .tnum-key u.dash { border-top: 2px dashed var(--now); opacity: .75; } .tnum b { font: 700 20px/1.1 var(--fm); color: var(--ink); } .tnum b small { font-size: 11px; font-weight: 600; color: var(--mut); } .tnum em { font-style: normal; font: 500 10.5px/1.35 var(--fm); color: var(--mut); overflow-wrap: anywhere; } .tnum.up b, .tnum.up em { color: var(--ok); } .tnum.down b, .tnum.down em { color: var(--wait); } .tside { display: grid; gap: 7px; margin-bottom: 14px; padding-top: 11px; border-top: 1px solid var(--edge); } .tside-row { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; } .tside-row i { flex: none; min-width: 92px; font-style: normal; font: 600 9.5px/1.4 var(--fm); letter-spacing: .9px; text-transform: uppercase; color: var(--mut); } .tside-row b { flex: none; font: 700 15px/1 var(--fm); color: var(--ink); } .tside-row em { font-style: normal; font: 500 10.5px/1.35 var(--fm); color: var(--mut); min-width: 0; overflow-wrap: anywhere; } .hours-line { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--edge); font-size: 11.5px; color: var(--mut); } .hours-line b { font: 700 15px/1 var(--fm); color: var(--ok); } .tiles.tight { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); margin-bottom: 12px; } @media (max-width: 620px) { .goal-in { flex-direction: column; gap: 12px; } .goal-rail-col { width: 100%; } .goal-card .rail { width: 100%; --h: 44px !important; } .rail-key { flex-direction: row; flex-wrap: wrap; gap: 10px; } .goal-card .rail-sand .sandbox, .goal-card .rail-engine .eng { border-radius: var(--rad-s); } .goal-card .rail-bricks .bricks { flex-direction: row; } .goal-card .rail-bricks .brick b { font-size: 7px; } .plan-acts { flex-direction: column; gap: 3px; } .proj-kid { margin-left: 8px; padding-left: 8px; } } @media (prefers-reduced-motion: reduce) { .rail-sand .gr { display: none; } .rail-engine .rod, .rail-engine .pist { animation: none; } } .daygroup { border-top: 1px solid var(--edge); } .daygroup:first-child { border-top: 0; } .daygroup-head { display: flex; gap: 9px; align-items: baseline; flex-wrap: wrap; padding: 9px 0 5px; position: sticky; top: 0; z-index: 3; background: linear-gradient(180deg, var(--panel) 75%, transparent); } .daygroup-head b { font: 700 11.5px/1.4 var(--fm); letter-spacing: .4px; color: var(--ink2); } .daygroup.is-past .daygroup-head b { color: var(--mut); } .daygroup.is-today { box-shadow: inset 2px 0 0 var(--now); padding-left: 8px; margin-left: -8px; } .daygroup.is-today .daygroup-head b { color: var(--now); } .daygroup .plan:first-of-type { border-top: 0; } .mini { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 90px; max-width: 260px; } .mini-row { position: relative; height: 5px; border-radius: 999px; background: color-mix(in srgb, var(--edge2) 40%, transparent); overflow: hidden; } .mini-row i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; transition: width .5s cubic-bezier(.2,.8,.2,1); } .mini-row.t i { width: var(--time); background: var(--rt); } .mini-row.d i { width: var(--done); background: var(--rd); } .mini-row.d::after { content:""; position: absolute; top: -2px; bottom: -2px; width: 2px; z-index: 2; left: clamp(0px, var(--time), calc(100% - 2px)); background: var(--rt); border-radius: 1px; } .mini-row.d { overflow: visible; } .mini-row.d i { z-index: 1; } .lanes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; } .lane { min-width: 0; } .lanes > .lane:only-child { grid-column: 1 / -1; } .lane-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 10px 13px 9px; background: var(--panel2); border: 1px solid var(--edge); border-bottom: 0; border-radius: var(--rad) var(--rad) 0 0; } .lane-head h2 { font: 700 10.5px/1.3 var(--fm); letter-spacing: 1.4px; text-transform: uppercase; color: var(--mut); } .laneload { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 3px 10px; justify-content: flex-end; } .laneload b { color: var(--ink2); font-weight: 700; } .laneload-n { white-space: nowrap; } .laneload-no { color: var(--mut); opacity: .8; } .laneload-h { color: var(--now); font-weight: 700; white-space: nowrap; padding-left: 10px; border-left: 1px solid var(--edge2); } .lane > .card { border-top-left-radius: 0; border-top-right-radius: 0; } .lane-now .lane-head h2 { color: var(--wait); } .lane-now .lane-head, .lane-now > .card { border-color: color-mix(in srgb, var(--wait) 32%, var(--edge)); } .morefold { border-top: 1px solid var(--edge); margin-top: 8px; } .morefold > summary { cursor: pointer; list-style: none; padding: 8px 2px 2px; font: 600 11.5px/1.4 var(--fm); color: var(--mut); } .morefold > summary::-webkit-details-marker { display: none; } .morefold > summary::before { content:"▾ "; } .morefold[open] > summary::before { content:"▴ "; } .morefold > summary:hover { color: var(--now); } .lane-rest { display: inline-flex; margin: 9px 2px 2px; cursor: pointer; text-decoration: none; } .lane-rest:hover { border-color: var(--now); color: var(--now); } .fold-block > summary { display: block; cursor: pointer; list-style: none; padding: 11px 14px; border-radius: var(--rad-s); background: var(--panel2); border: 1px solid var(--edge); font: 640 13.5px/1.4 var(--ff); color: var(--ink2); } .fold-line { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; } .fold-line > .laneload { margin-left: auto; } .fold-line > [data-strict-hint] { margin-left: auto; text-align: right; } .fold-block > summary::-webkit-details-marker { display: none; } .fold-block > summary .fold-line::after { content:"▾"; color: var(--mut); } .fold-block[open] > summary .fold-line::after { content:"▴"; } .fold-block > summary:hover { border-color: var(--edge2); color: var(--ink); } .fold-quiet > summary { display: none; } .fold-quiet[open] > .card { margin-top: 0; } .fold-block + .card { margin-top: 14px; } .repnext { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 9px; } .repbox { padding: 12px 14px; border-radius: var(--rad-s); border: 1px dashed color-mix(in srgb, var(--rd) 45%, var(--edge2)); background: color-mix(in srgb, var(--rd) 5%, transparent); } .repbox > .spread b { color: var(--rd); } .card.repbox { padding: 16px; border-left: 3px solid color-mix(in srgb, var(--rd) 45%, var(--edge)); } .replist { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; } .rep { display: flex; flex-direction: column; gap: 7px; padding: 11px 12px; border-radius: var(--rad-s); border: 1px solid var(--edge); background: var(--bg2); border-left: 3px solid var(--rd); } .rep.off { opacity: .62; border-left-color: var(--edge2); } .rep-head { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; } .rep-title { font-weight: 600; font-size: 14px; color: var(--ink); border: 0; } .rep-title:hover { color: var(--now); } .rep-form { display: flex; gap: 9px; align-items: flex-end; flex-wrap: wrap; } .rep-form > * { flex: 0 0 auto; } .rep-form select { width: auto; min-width: 168px; max-width: 100%; padding: 7px 10px; font-size: 13px; } .rep-form select.grow { flex: 1 1 240px; } .rep-form label:not(.flagbox) { display: flex; flex-direction: column; gap: 3px; margin: 0; font: 700 9px/1.3 var(--fm); letter-spacing: 1px; text-transform: uppercase; color: var(--mut); } .rep-form label:not(.flagbox) input { width: auto; margin: 0; padding: 7px 9px; font-size: 13px; } .repend > summary { font-size: 13px; } .rep-end label:not(.flagbox) { display: flex; flex-direction: column; gap: 3px; margin: 0; font: 600 11px/1.4 var(--fm); color: var(--mut); } .rep-end label:not(.flagbox) input { width: auto; margin: 0; padding: 7px 9px; font-size: 13px; } .rep-end [hidden] { display: none; } .rep-form input[type="date"] { width: 150px; } .rep-form input[type="number"] { width: 74px; } .rep-form .flagbox { align-self: flex-end; padding: 6px 11px; } .rep-form .btn { align-self: flex-end; } .rep-form label:not(.flagbox)[hidden], .rep-form [hidden] { display: none; } .repend > summary { font-size: 13px; } .rep-end label:not(.flagbox) { display: flex; flex-direction: column; gap: 3px; margin: 0; font: 600 11px/1.4 var(--fm); color: var(--mut); } .rep-end label:not(.flagbox) input { width: auto; margin: 0; padding: 7px 9px; font-size: 13px; } .rep-end label:not(.flagbox)[hidden], .rep-end [hidden] { display: none; } .rep-pick { margin-top: 12px; padding: 11px 12px; border-radius: var(--rad-s); background: var(--bg2); border: 1px solid var(--edge); } .rep-pick[hidden] { display: none; } .rep-pick-head { font: 700 9px/1.3 var(--fm); letter-spacing: 1px; text-transform: uppercase; color: var(--mut); margin-bottom: 8px; } .rep-pick [data-rep-add] { flex-wrap: wrap; } .rep-pick input[type="date"] { width: 154px; margin: 0; } [data-rep-weekdays] .flagpick { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; } [data-rep-weekdays] .flagbox { position: relative; justify-content: center; gap: 0; padding: 7px 2px; min-width: 0; } [data-rep-weekdays] .flagbox input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; -webkit-appearance: none; appearance: none; } [data-rep-weekdays] .flagbox span { pointer-events: none; } .rep-days { display: flex; flex-direction: column; gap: 6px; } .rep-day { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .rep-day .flagbox { flex: 1 1 auto; min-width: 0; } .rep-day input[type="time"] { width: 108px; flex: none; margin: 0; padding: 6px 8px; font-size: 13px; } .rep-add { display: grid; grid-template-columns: 154px 108px; gap: 6px 8px; margin-top: 8px; } .rep-add input { margin: 0; } @media (max-width: 480px) { .rep-add { grid-template-columns: 1fr 108px; } .rep-day .flagbox { flex: 1 1 100%; } } @media (max-width: 620px) { .rep-form { gap: 7px; } .rep-form > label:not(.flagbox), .rep-end > label:not(.flagbox) { flex: 1 1 100%; } .rep-form select, .rep-form select.grow, .rep-form .btn { width: 100%; flex: 1 1 100%; } .rep-form label:not(.flagbox) input, .rep-end label:not(.flagbox) input { width: 100%; } .rep-form input[type="date"], .rep-form input[type="number"] { width: 100%; } } .fab.boxfab { right: auto; left: 18px; background: color-mix(in srgb, var(--panel2) 70%, transparent); backdrop-filter: saturate(var(--glass-sat)) blur(var(--glass-blur)); -webkit-backdrop-filter: saturate(var(--glass-sat)) blur(var(--glass-blur)); color: var(--ink2); border: 1px solid color-mix(in srgb, var(--edge2) 80%, transparent); box-shadow: 0 8px 22px -8px rgba(0,0,0,.5); padding-left: 15px; padding-right: 15px; gap: 7px; } @media (max-width: 700px), (max-height: 480px) { .fab.boxfab { padding: 0; gap: 0; } } .fab.boxfab:hover { border-color: var(--wait); color: var(--ink); } .fab.boxfab .fab-word:empty { display: none; } .fab.boxfab .fab-plus { font-size: 17px; } .fab-sheet.boxsheet { right: auto; left: 18px; } @media (max-width: 900px), (max-height: 480px) { .lanes { grid-template-columns: 1fr; } } @media (max-width: 760px), (max-height: 480px) { .fab.boxfab { left: calc(14px + var(--safe-l)); } .fab-sheet.boxsheet { left: calc(14px + var(--safe-l)); right: calc(14px + var(--safe-r)); width: auto; } } .chip.flag.sign { width: 22px; height: 22px; padding: 0; gap: 0; justify-content: center; align-items: center; line-height: 1; text-align: center; } .chip.flag.opt { border-style: dashed; } .dirband { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 22px 0 10px; padding-bottom: 7px; border-bottom: 1px solid color-mix(in srgb, var(--dc) 30%, var(--edge)); } .dirband-name { font: 700 11px/1.3 var(--fm); letter-spacing: 1.4px; text-transform: uppercase; color: var(--dc); } .dirband-load { flex: none; } .pboard { display: grid; gap: 10px; } .prow { display: grid; grid-template-columns: 66px minmax(0, 1fr) 210px; gap: 16px; align-items: start; padding: 15px 16px 15px 19px; } .prow.is-guest { grid-template-columns: 66px minmax(0, 1fr); } @media (min-width: 561px) { .prow:not(:has(.prow-side)) { grid-template-columns: 66px minmax(0, 1fr); } } .prow-body { min-width: 0; } .prow-step { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 11px; padding: 8px 10px; border-radius: var(--rad-s); background: color-mix(in srgb, var(--dc) 8%, var(--panel2)); border: 1px solid color-mix(in srgb, var(--dc) 22%, var(--edge)); } .prow-step-label { flex: none; font: 700 9.5px/1.4 var(--fm); letter-spacing: .9px; text-transform: uppercase; color: var(--mut); } .prow-step-title { flex: 1 1 180px; min-width: 0; border: 0; font: 600 13.5px/1.35 var(--ff); color: var(--ink); } .prow-step-title:hover { color: var(--now); } .prow-step-when { flex: none; font: 600 11px/1.4 var(--fm); color: var(--mut); } .prow-step-acts { flex: none; display: flex; gap: 4px; } .prow-step.done { display: block; margin-top: 10px; padding: 0; background: none; border: 0; font-size: 12.5px; color: var(--mut); } .prow-folds { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .prow-folds .pcard-fold { flex: 1 1 210px; min-width: 0; margin-top: 0; } .prow-side { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; align-self: stretch; padding-left: 15px; border-left: 1px solid var(--edge); } .prow-left b { display: block; font: 700 30px/1 var(--fm); color: var(--ink); letter-spacing: -1px; } .prow-left span { display: block; margin-top: 4px; font-size: 11px; line-height: 1.45; color: var(--mut); } .prow-left.behind b { color: var(--wait); } .pace { display: flex; flex-direction: column; gap: 2px; } .pace-need { font: 700 12.5px/1.4 var(--ff); color: var(--ink2); } .pace-fact { font: 500 10.5px/1.45 var(--fm); color: var(--mut); } .pace.ok .pace-need { color: var(--ok); } .pace.tight .pace-need { color: var(--wait); } .runway { --namew: 190px; --tailw: 104px; --gap: 12px; margin: 4px 0 10px; padding: 12px 16px 10px; background: var(--panel); border: 1px solid var(--edge2); border-radius: var(--rad); box-shadow: var(--shadow); } .runway-head { display: flex; align-items: baseline; gap: 10px 14px; flex-wrap: wrap; padding-bottom: 10px; } .runway-head b { font: 700 10px/1 var(--fm); letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink2); } .runway-range { margin-right: auto; } .runway-legend { display: inline-flex; align-items: center; gap: 6px; color: var(--now); } .runway-legend i { width: 2px; height: 11px; border-radius: 1px; background: var(--now); box-shadow: var(--glow) var(--now); } .runway-plot { position: relative; } .rw-grid { position: absolute; z-index: 0; top: 0; bottom: 0; left: calc(var(--namew) + var(--gap)); right: calc(var(--tailw) + var(--gap)); pointer-events: none; } .rw-line { position: absolute; left: var(--at); top: 0; bottom: 0; width: 1px; background: var(--edge); } .rw-nowline { position: absolute; left: clamp(0px, var(--nowx), calc(100% - 2px)); top: 0; bottom: 0; width: 2px; z-index: 2; background: var(--now); box-shadow: var(--glow) var(--now); } .runway-months { position: relative; height: 13px; margin-bottom: 3px; margin-left: calc(var(--namew) + var(--gap)); margin-right: calc(var(--tailw) + var(--gap)); } .runway-months span { position: absolute; left: var(--at); top: 0; padding-left: 5px; white-space: nowrap; font: 600 9.5px/1.35 var(--fm); letter-spacing: .6px; color: var(--mut); } .runway-months span.to-left { left: auto; right: calc(100% - var(--at)); padding: 0 5px 0 0; } .runway-row { position: relative; z-index: 1; display: grid; grid-template-columns: var(--namew) minmax(0, 1fr) var(--tailw); gap: var(--gap); align-items: center; padding: 8px 0; color: inherit; border-top: 1px solid var(--edge); border-radius: 0; } .runway-row:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); } .runway-row:hover .runway-name { color: var(--now); } .runway-name { font: 600 12.5px/1.35 var(--ff); color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .runway-lane { position: relative; align-self: stretch; min-height: 20px; } .rw-bar { position: absolute; left: var(--at); width: var(--w); top: 50%; transform: translateY(-50%); height: 11px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--dc) 20%, transparent); border: 1px solid color-mix(in srgb, var(--dc) 45%, transparent); } .rw-bar u { display: block; height: 100%; text-decoration: none; background: var(--dc); } .runway-tail { text-align: right; font: 600 11px/1.35 var(--fm); color: var(--mut); } .runway-row.behind .runway-tail { color: var(--wait); } .runway-row.over .runway-tail { color: var(--bad); } .ev-done { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--edge); } .ev-label { display: block; margin-bottom: 7px; font: 700 9.5px/1.4 var(--fm); letter-spacing: 1px; text-transform: uppercase; color: var(--mut); } .ev-done ul { list-style: none; margin: 0; padding: 0; } .ev-done li { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; padding: 5px 0; font-size: 13px; border-top: 1px solid var(--edge); } .ev-done li:first-child { border-top: 0; } .yearwrap { overflow-x: auto; direction: rtl; padding: 3px 3px 4px; } .yearwrap > * { direction: ltr; } .yearmap, .yearmap-months { min-width: calc(var(--cols) * 9px + (var(--cols) - 1) * 3px); } .yearmap-months { display: grid; grid-template-columns: repeat(var(--cols), minmax(9px, 1fr)); column-gap: 3px; margin-bottom: 6px; } .yearmap-months span { grid-row: 1; grid-column: var(--col) / span 5; font: 600 9.5px/1 var(--fm); letter-spacing: .6px; color: var(--mut); } .yearmap { display: grid; grid-auto-flow: column; grid-template-columns: repeat(var(--cols), minmax(9px, 1fr)); grid-template-rows: repeat(7, 1fr); gap: 3px; } .yearmap i { aspect-ratio: 1; border-radius: 2px; background: color-mix(in srgb, var(--edge2) 26%, transparent); } .yearmap i.on { --tone: color-mix(in oklab, var(--ok) calc(var(--v, 0) * 1%), var(--wait)); background: color-mix(in srgb, var(--tone) calc(24% + var(--v, 0) * 0.76%), var(--bg2)); } .yearmap i.top { box-shadow: 0 0 7px -2px color-mix(in srgb, var(--ok) 70%, transparent); } .yearmap i.work:not(.on) { box-shadow: inset 0 0 0 1.5px var(--ok); } .yearmap i.today { outline: 2px solid var(--now); outline-offset: 1px; } .weekbar-sub { margin-top: 4px; font: 500 10.5px/1.4 var(--fm); color: var(--mut); } .year-key { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; font: 500 11.5px/1.4 var(--fm); color: var(--ink2); } .year-key-sep { opacity: .45; margin: 0 4px; color: var(--mut); } .year-ramp { width: 140px; height: 14px; border-radius: 3px; flex: none; background: linear-gradient(90deg, color-mix(in srgb, color-mix(in oklab, var(--ok) 8%, var(--wait)) 30%, var(--bg2)) 0 19.4%, var(--panel) 19.4% 20.6%, color-mix(in srgb, color-mix(in oklab, var(--ok) 31%, var(--wait)) 48%, var(--bg2)) 20.6% 39.4%, var(--panel) 39.4% 40.6%, color-mix(in srgb, color-mix(in oklab, var(--ok) 54%, var(--wait)) 65%, var(--bg2)) 40.6% 59.4%, var(--panel) 59.4% 60.6%, color-mix(in srgb, color-mix(in oklab, var(--ok) 77%, var(--wait)) 83%, var(--bg2)) 60.6% 79.4%, var(--panel) 79.4% 80.6%, var(--ok) 80.6% 100%); } .year-chip { width: 14px; height: 14px; border-radius: 3px; flex: none; } .year-chip.empty { background: color-mix(in srgb, var(--edge2) 32%, transparent); } .year-chip.work { background: color-mix(in srgb, var(--edge2) 32%, transparent); box-shadow: inset 0 0 0 3px var(--ok); } .kindbox { padding: 9px; border-radius: var(--rad-s); background: var(--bg2); border: 1px solid var(--edge); } .kindpick { display: grid; grid-template-columns: 1fr; gap: 6px; } .kindopt { display: flex; align-items: flex-start; gap: 7px; cursor: pointer; padding: 7px 9px; border-radius: var(--rad-s); margin: 0; border: 1px solid var(--edge); background: var(--panel); } .kindopt:hover { border-color: var(--edge2); } .kindopt input { margin-top: 2px; flex: none; } .kindopt span { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .kindopt b { font: 700 13px/1.3 var(--ff); color: var(--ink2); text-transform: none; letter-spacing: 0; } .kindopt small { font-size: 11px; line-height: 1.3; color: var(--mut); text-transform: none; letter-spacing: 0; } .kindsign { display: inline-block; width: 12px; height: 12px; margin-right: 6px; border: 1.5px solid currentColor; border-radius: 4px; vertical-align: -1.5px; opacity: .8; } .kindopt:has(input:checked) { border-color: var(--now); background: var(--panel2); } .kindopt:has(input:checked) b { color: var(--now); } .kindopt input:checked + span b { color: var(--now); } .eventleads { margin-top: 12px; } .kindbox:has(input[name="kind"][value="task"]:checked) .eventleads, .kindbox:has(input[name="kind"][value="note"]:checked) .eventleads { display: none; } form:has(input[name="kind"][value="note"]:checked) .strictfold { display: none; } .leadpick { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 5px; } .leadopt { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--edge); background: var(--panel); font: 600 12px/1 var(--ff); color: var(--ink2); } .leadopt:hover { border-color: var(--edge2); } .leadopt:has(input:checked) { border-color: var(--wait); color: var(--wait); background: color-mix(in srgb, var(--wait) 12%, transparent); } .leadown { padding: 3px 11px; gap: 4px; flex-wrap: nowrap; white-space: nowrap; } .leadown > span { flex: none; } .leadown input { width: 34px; flex: none; padding: 3px 0; text-align: center; border: 0; border-bottom: 1px solid var(--edge2); border-radius: 0; background: transparent; color: inherit; font: 700 13px/1.2 var(--fm); -moz-appearance: textfield; } .leadown input::-webkit-outer-spin-button, .leadown input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .leadown input:focus { outline: 0; border-bottom-color: var(--now); } .leadat { flex-wrap: wrap; white-space: normal; } .leadat input[type="date"] { width: auto; min-width: 118px; } .leadat input[type="time"] { width: auto; min-width: 76px; } .leadat input { font: 700 12.5px/1.2 var(--fm); text-align: left; } .leadopt.leadat:focus-within { border-color: var(--wait); color: var(--wait); } .leadopt.leadown:has(input[type="number"]:not(:placeholder-shown)) { border-color: var(--wait); color: var(--wait); background: color-mix(in srgb, var(--wait) 12%, transparent); } .leadnote { margin-top: 11px; } .eventleads:not(:has(input[name="leads"]:checked)):not(:has(.leadown input:not(:placeholder-shown))) .leadnote { display: none; } form[data-kindform]:has(input[name="kind"][value="note"]:checked) .taskonly { display: none; } form[data-kindform]:not(:has(input[name="kind"][value="note"]:checked)) .noteonly { display: none; } .event-again { display: grid; } .againof { margin: 4px 0 2px; color: var(--ink); font: 700 16px/1.3 var(--ff); overflow-wrap: anywhere; } .again-no .btn { justify-content: center; } .again-own > label, .event-again .eventleads > label { display: block; font: 700 12px/1.3 var(--ff); color: var(--ink2); } .again-days { display: grid; gap: 8px; margin-top: 7px; } .again-day { display: grid; grid-template-columns: minmax(0, 1fr) minmax(92px, 140px) auto; align-items: center; gap: 8px; } .again-day input { min-width: 0; width: 100%; } .again-day > span { color: var(--mut); font: 700 10px/1 var(--fm); } .againrow { display: grid; gap: 8px; } .againopt { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 10px 12px; border-radius: var(--rad-s); border: 1px solid var(--edge); background: var(--panel2); } .againopt:hover { border-color: var(--edge2); } .againopt input { flex: none; margin: 0; } .againopt > span { min-width: 0; flex: 1; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .againopt b { color: var(--ink); font: 700 13px/1.3 var(--ff); } .againopt small { color: var(--mut); font: 600 11px/1.3 var(--fm); } .againopt:has(input:checked) { border-color: var(--now); background: color-mix(in srgb, var(--now) 9%, var(--panel)); } @media (max-width: 620px) { .again-day { grid-template-columns: minmax(0, 1fr) minmax(86px, .7fr); } .again-day > span { grid-column: 1 / -1; margin-top: -4px; } .againopt > span { align-items: flex-start; flex-direction: column; gap: 2px; } } .chip.event-chip { border-color: color-mix(in srgb, var(--now) 55%, var(--edge)); color: var(--now); font-weight: 700; } .pchip.is-event { background-color: color-mix(in srgb, var(--dc) var(--efill, 58%), var(--panel)); background-image: none; border-color: color-mix(in srgb, var(--dc) var(--eline, 82%), var(--edge)); } .pchip.is-event .pchip-name { font-weight: 600; } .pchip.is-event.pc { border-color: color-mix(in srgb, var(--pc) 85%, var(--edge)); } .pchip.is-event.is-done { background-color: var(--panel2); background-image: none; border-color: var(--edge); } .pchip.pnote-chip { border: 1px solid color-mix(in srgb, var(--paper-line) 70%, transparent); background-image: var(--paper-fiber), linear-gradient(163deg, var(--paper) 0%, var(--paper2) 100%); color: var(--paper-ink); } .pchip.pnote-chip .pchip-name { color: var(--paper-ink); font: 600 var(--hand-slant) 13px/1.3 var(--ff-hand); letter-spacing: .1px; } .pchip.pnote-chip a.pchip-name:hover { color: var(--paper-red); } .pchip.pnote-chip .pchip-at { color: var(--paper-ink2); } .pchip.pnote-chip .pchip-grip { color: var(--paper-ink2); } .pnote-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.85) 0 16%, transparent 46%), linear-gradient(150deg, var(--pin1), var(--pin2)); box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.18) inset; } .pchip-name .pnote-dot { display: inline; width: auto; height: auto; border-radius: 0; box-shadow: none; margin-right: 3px; font: 400 9px/1 var(--ff); font-style: normal; background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.85) 0 16%, transparent 46%), linear-gradient(150deg, var(--pin1), var(--pin2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .plan.is-event .plan-title { display: inline; --evmark: color-mix(in srgb, var(--dc) 34%, var(--panel)); background-image: linear-gradient(var(--evmark) 0 100%); box-shadow: -3px 0 0 var(--evmark), 3px 0 0 var(--evmark); border-radius: 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; } [data-light] .plan.is-event .plan-title { --evmark: color-mix(in srgb, var(--dc) 62%, var(--panel)); } .plan.is-event.is-done .plan-title { background-image: none; box-shadow: none; } .plan.is-sub { margin-left: calc(var(--sub-in, 16px) * var(--lvl, 1) - 1px); position: relative; } .plan.has-kids { position: relative; } @media (max-width: 620px) { .plan.is-sub, .plan.has-kids { --sub-in: 9px; } } .plan-clasp { position: absolute; z-index: 0; pointer-events: none; left: calc(-1 * var(--sub-in, 16px) * var(--lvl, 1)); width: 100%; top: -1px; bottom: 0; background-image: repeating-linear-gradient(to right, color-mix(in srgb, var(--dc) 38%, transparent) 0 2px, transparent 2px var(--sub-in, 16px)); background-repeat: no-repeat; background-size: calc(var(--sub-in, 16px) * var(--lvl, 1)) 100%; } .plan.sub-away > .plan-clasp { background-image: none; } .plan.is-done > .plan-clasp { opacity: .45; } #subs .plan.is-sub { margin-left: 0; } #subs { scroll-margin-top: 96px; } #subs .plan-clasp { display: none; } @media (max-width: 700px) { .calshape { display: none; } } .subadd-form:has(.subwhat input:not(:placeholder-shown)) .subpick { display: none; } .subadd-form:has(.subpick[open]) .subwhat, .subadd-form:has(.subpick[open]) .subrest { display: none; } .tierow { display: flex; align-items: center; gap: 10px; padding: 8px 0 8px 10px; border-top: 1px solid var(--edge); border-left: 3px solid color-mix(in srgb, var(--dc) 52%, transparent); } .tierow:first-child { border-top: 0; } .tierow-body { flex: 1 1 auto; min-width: 0; } .tierow-name { display: block; font-weight: 600; font-size: 13.5px; line-height: 1.35; color: var(--ink); border: 0; } .tierow-name:hover { color: var(--now); } .tierow-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 3px; } .tierow form { margin: 0; flex: none; } .tiebtn { white-space: nowrap; font-weight: 600; } @media (max-width: 560px) { .tierow { flex-wrap: wrap; } .tierow-body { flex: 1 1 100%; } .tierow form { flex: 1 1 100%; margin-top: 6px; } .tierow .tiebtn { width: 100%; } } .pcard-dir { flex: none; font-size: 15px; line-height: 1; border: 0; text-decoration: none; opacity: .9; } .pcard-dir:hover { opacity: 1; } .chip-sub, .chip-kids { border-style: dashed; color: var(--mut); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chip-sub:hover, .chip-kids:hover { color: var(--now); border-color: var(--now); } .plan-mark { flex: none; font-size: 11px; line-height: 1.4; margin-right: 5px; opacity: .9; } .focus { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; margin-top: 14px; padding: 16px 18px 16px 21px; border-radius: var(--rad); background: linear-gradient(100deg, color-mix(in srgb, var(--dc) 13%, var(--panel)) 0%, var(--panel) 62%); border: 1px solid color-mix(in srgb, var(--dc) 34%, var(--edge2)); box-shadow: var(--shadow); } .focus::before { content:""; position: absolute; left: 0; top: 11px; bottom: 11px; width: 3px; border-radius: 0 3px 3px 0; background: var(--dc); } .focus.pc::before { background: var(--hatch) left top / 3px 100% no-repeat; } .focus-body { min-width: 0; } .focus-label { display: block; margin-bottom: 5px; font: 700 9.5px/1.4 var(--fm); letter-spacing: 1.6px; text-transform: uppercase; color: var(--dc); } .focus-title { display: block; border: 0; font: 700 19px/1.3 var(--ff); color: var(--ink); } .focus-title:hover { color: var(--now); } .focus-meta { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin-top: 9px; } .focus-why { font-size: 12px; line-height: 1.5; color: var(--mut); } .focus-acts { display: flex; gap: 6px; align-items: center; flex: none; } .rain { margin-top: 9px; } .rain > summary { cursor: pointer; list-style: none; display: inline-block; padding: 4px 10px; border-radius: 999px; border: 1px dashed var(--edge2); font: 600 11px/1.5 var(--fm); color: var(--mut); } .rain > summary::-webkit-details-marker { display: none; } .rain > summary:hover { color: var(--now); border-color: var(--now); } .rain ol { margin: 9px 0 0; padding-left: 20px; } .rain li { font-size: 12.5px; line-height: 1.6; color: var(--ink2); } .rain li b { color: var(--ink); } .rain p { margin-top: 9px; font-size: 12px; line-height: 1.6; color: var(--mut); } .weekbar { margin-top: 2px; } .weekbar-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font: 600 12px/1.4 var(--ff); color: var(--ink2); } .weekbar-head b { font: 700 26px/1 var(--fm); color: var(--ok); letter-spacing: -1px; } .weekbar-head b small { font-size: 13px; opacity: .7; letter-spacing: 0; } .weekbar-head span { font: 600 13px/1.4 var(--ff); color: var(--ink2); } .weekbar-track { height: 8px; margin-top: 8px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--edge2) 32%, transparent); } .weekbar-track i { display: block; height: 100%; border-radius: 999px; background: var(--ok); transition: width .5s cubic-bezier(.2,.8,.2,1); } .weekbar-note { margin-top: 8px; font-size: 11.5px; line-height: 1.55; color: var(--mut); } @media (max-width: 620px) { .focus { grid-template-columns: 1fr; gap: 12px; } .focus-acts { flex-wrap: wrap; } } @media (max-width: 1000px) { .prow { grid-template-columns: 66px minmax(0, 1fr); } .prow-side { grid-column: 1 / -1; flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 8px 18px; padding: 11px 0 0; border-left: 0; border-top: 1px solid var(--edge); } .prow-left b { display: inline; font-size: 22px; } .prow-left span { display: inline; margin: 0 0 0 6px; } } @media (max-width: 860px) { .runway { --namew: 132px; --tailw: 62px; --gap: 9px; } } @media (max-width: 620px) { .runway { --namew: 0px; --tailw: 0px; --gap: 0px; padding: 12px 13px 10px; } .runway-row { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 9px 0 10px; } .runway-name { grid-area: 1 / 1; } .runway-tail { grid-area: 1 / 2; text-align: right; } .runway-lane { grid-area: 2 / 1 / 3 / -1; min-height: 15px; } } @media (max-width: 560px) { .prow, .prow.is-guest { grid-template-columns: 1fr; gap: 12px; padding-left: 16px; } } .timerstart { align-items: start; } .timerpick > h2.sec:first-of-type, .timerform > h2.sec:first-of-type { margin-top: 0; } @media (max-width: 899px), (max-height: 480px) { .timerstart { display: flex; flex-direction: column; } .timerform { order: 1; } .timerpick { order: 2; } .timerpick > h2.sec:first-of-type { margin-top: 26px; } } .fold-open { display: none; } details[open] > summary .fold-shut { display: none; } details[open] > summary .fold-open { display: inline; } .deskonly { display: none; } @media (min-width: 701px) and (min-height: 481px) { .deskonly { display: block; } } .curtain-box { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); } .curtain-pull { display: none; } @media (max-width: 700px) and (hover: none) { .curtain-pull { display: flex; align-items: center; justify-content: center; height: 22px; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } html.curtaining .curtain-grip { background: color-mix(in srgb, var(--ink) 42%, transparent); } .curtain-grip { width: 36px; height: 4px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 24%, transparent); transition: width .24s cubic-bezier(.33,1,.68,1), background-color .24s; } .curtain-pull:active .curtain-grip { background: color-mix(in srgb, var(--ink) 42%, transparent); } .curtain-box:checked ~ .curtain-pull .curtain-grip { width: 24px; } .curtain-box:focus-visible ~ .curtain-pull { outline: 2px solid var(--now); outline-offset: -2px; } .curtain { max-height: 0; overflow: hidden; transition: max-height .3s cubic-bezier(.33, 1, .68, 1); } .curtain-in { opacity: 0; transform: translateY(-8px); visibility: hidden; transition: opacity .2s, transform .24s cubic-bezier(.33, 1, .68, 1), visibility 0s .3s; } .curtain-box:checked ~ .curtain { max-height: 60vh; } .curtain-box:checked ~ .curtain .curtain-in { opacity: 1; transform: none; visibility: visible; transition-delay: .05s, .05s, 0s; } @media (prefers-reduced-motion: reduce) { .curtain, .curtain-in, .curtain-grip { transition: none; } } .curtain .pagehead { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; justify-content: safe flex-end; gap: 8px; padding: 6px 0 10px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .curtain .pagehead::-webkit-scrollbar { display: none; } .curtain:has(.monthpick[open]) { overflow: visible; } .curtain .pagehead:has(.monthpick[open]) { overflow: visible; } .curtain .pagehead > div, .curtain .pagehead .headstack, .curtain .pagehead .row:not(.calshape):not(.pickhead) { display: contents; } .curtain .pagehead h1:not(.calhead) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; white-space: nowrap; clip-path: inset(50%); } .curtain .pagehead h1.calhead { display: inline-flex; align-items: center; gap: 2px; margin: 0; font: 700 14px/1.2 var(--ff); letter-spacing: 0; flex: 0 0 auto; } .curtain .pagehead > div > .sub { display: none; } .curtain .pagehead .btn, .curtain .pagehead .iconbtn, .curtain .pagehead .chip { flex: 0 0 auto; } .curtain .pagehead .statusbar > * { order: 1; } .curtain .pagehead .statusbar > :nth-child(n+3) { order: 3; } .curtain .pagehead h1.calhead { order: 0; } .curtain .pagehead .calspan > * { order: 2; } .curtain .pagehead .calmode > * { order: 3; } .curtain .pagehead .row.pickhead { display: flex; align-items: center; gap: 8px; width: auto; flex: 0 0 auto; order: 4; position: sticky; right: 0; z-index: 3; margin-right: -2px; padding: 2px 2px 2px 16px; background: linear-gradient(90deg, color-mix(in srgb, var(--bg) 0%, transparent), var(--bg) 16px); } .curtain .pagehead .row.pickhead > * { order: 0; } } .pagehead { display: grid; grid-template-columns: minmax(40%, 1fr) minmax(0, auto); align-items: start; gap: 10px 12px; padding: 20px 0 12px; } .pagehead > * { min-width: 0; } .pagehead > :nth-child(2) { justify-self: end; } .pagehead-back { margin-bottom: 12px; } .pagehead.mid { padding-bottom: 10px; } .pagehead.snug { padding-bottom: 4px; } .headstack { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 0; max-width: 100%; flex: 0 1 auto; } .pickhead { width: 100%; justify-content: flex-end; flex-wrap: nowrap; min-width: 0; } .pickhead > [data-pick-start] { flex: 0 0 auto; } .pickhead > .pickundo { min-width: 0; overflow: hidden; } .pickhead > .pickundo .btn { min-width: 0; max-width: 100%; overflow: hidden; } .pickhead > .pickreset { min-width: 0; overflow: hidden; } @media (max-height: 480px) { .top-in { min-height: 44px; } .brand-mark { width: 26px; height: 26px; border-radius: 8px; } .topbtn { width: 36px; height: 36px; font-size: 18px; } .pagehead { padding: 9px 0 6px; flex-wrap: nowrap; gap: 10px; } .pagehead h1 { font-size: 17px; } .pagehead > :first-child { min-width: 0; } .pagehead .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pagehead .row { flex: 0 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .pagehead .row::-webkit-scrollbar { display: none; } .pagehead + .row.mb, .pagehead ~ .dirband:first-of-type { margin-top: 2px; } .pagehead ~ .row.mb { margin-bottom: 6px; } } @media (max-height: 480px) and (orientation: landscape) { .tabbar { padding: 3px; bottom: calc(4px + var(--safe-b)); } .tabshield { height: calc(56px + var(--safe-b)); } .tabbar a, .tabbar .tabink-t { min-height: 38px; gap: 2px; padding: 4px 2px; font-size: 8px; } .tabbar a i, .tabbar .tabink-t i { font-size: 15px; } .tabbar a.tab-main i, .tabbar .tabink-t.tab-main i { font-size: 20px; } html .pickdeck { bottom: calc(4px + var(--safe-b)); } html .pickdeck-bar { padding: 3px; } html .pickdeck-btn { min-height: 38px; gap: 2px; padding: 4px 2px; font-size: 8.5px; } html .pickdeck-btn svg { width: 17px; height: 17px; } html .pickdeck-sheet { max-height: calc(100vh - 120px); margin-bottom: 6px; border-radius: 18px; } html .askwrap.has-field { padding-top: calc(10px + env(safe-area-inset-top)); } .tablane { inset: 3px; } body { padding-bottom: calc(58px + var(--safe-b)); font-size: 13px; } :root { --fab-bottom: calc(54px + var(--safe-b)); --fab-add: 42px; --fab-h: 42px; } .fab { width: 42px; height: 42px; } .fab .fab-word { display: none; } .card { padding: 10px 12px; } .card.tight { padding: 8px 10px; } .plan { padding: 7px 0 7px 9px; } .plannote[data-note] { padding: 7px 0 calc(7px + var(--note-tear)) 10px; } .lane-head, .card-head { margin-bottom: 7px; } h1 { font-size: 19px; } h2 { font-size: 15px; } .sec { margin: 14px 0 8px; } .fileview-frame { height: 78vh; } .fab-pane[data-pane="task"] .fab-task-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; align-items: start; } .fab-pane[data-pane="task"] .fab-task-fields > * { margin-top: 0; } .fab-task-fields > .field:has(input[name="title"]) { grid-column: 1 / -1; grid-row: 1; } .fab-task-fields > .fields2:has(input[name="due_date"]) { grid-column: 1; grid-row: 2; } .fab-task-fields > .strictfold { grid-column: 2; grid-row: 2; } .fab-task-fields > .kindbox { grid-column: 1; grid-row: 3 / span 2; } .fab-task-fields > .field:has(input[name="estimate"]) { grid-column: 2; grid-row: 3; } .fab-task-fields > .starline { grid-column: 2; grid-row: 4; } .fab-task-fields > .fields2:has(select[name="direction_id"]) { grid-column: 1; grid-row: 5 / span 2; } .fab-task-fields > .field:has(input[name="tags"]) { grid-column: 2; grid-row: 5; } .fab-task-fields > .field:has(textarea[name="body"]) { grid-column: 2; grid-row: 6; } .fab-task-fields > .formend { grid-column: 1 / -1; grid-row: 7; margin-top: 6px; } .fab-task-fields .field textarea.slim[placeholder]:placeholder-shown:not(:focus) { min-height: 72px; height: 72px; } .fab-task-fields .fields2 { grid-template-columns: minmax(0, 1fr); } .fab-sheet .fab-tabbar { position: static; } html .fold-block:not(.strictfold):not(.repend):not(.tlog-alarms) > summary { padding-left: 12px; padding-right: 12px; } .calscroll .calstick { flex-wrap: nowrap; gap: 4px 10px; padding-top: 2px; margin-bottom: 4px; } .calscroll .calstick > .calhead { flex: none; padding: 2px 0 4px; font-size: 17px; } .calscroll .calstick > .calhead > .calhead-name { width: 8.6em; } .calscroll .calstick > .legend { order: 1; flex: 1 1 auto; min-width: 0; margin: 0; gap: 8px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .calscroll .calstick > .legend::-webkit-scrollbar { display: none; } .calscroll .calstick > .legend > * { flex: none; } .calscroll .calstick > .curtain-stick { order: 2; flex: none; } .calscroll .calstick .pagehead.mid { flex-wrap: nowrap; } .calscroll .cal.has-wt { --wtw: 64px; } } @media (max-width: 700px), (max-height: 480px) { .pagehead { gap: 8px; padding: 14px 0 4px; } .pagehead.mid, .pagehead.snug { padding-bottom: 4px; } .dirband:first-child { margin-top: 12px; } .pagehead ~ .runway { margin-top: 10px; } } .phead { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0 14px; padding: 18px 0 10px; } .phead-back { grid-column: 1 / -1; justify-self: start; } .secline { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; } .secline > .sec { flex: 0 1 auto; min-width: 0; } .secline > .pickhead { width: auto; flex: 0 0 auto; } .phead-face { grid-column: 1; min-width: 0; margin-top: 12px; } .phead-acts { grid-column: 2; justify-self: end; align-self: start; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; width: 100%; max-width: 430px; } .phead-acts > .btn { flex: 1 1 0; min-width: 0; justify-content: center; } .phead-acts > .pickundo { flex: 0 0 auto; } .phead-acts.lean { width: auto; } .phead-acts.lean > .btn { flex: 0 0 auto; } .phead + .fold-block { margin-top: 4px; } .actrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 8px; align-items: stretch; } .actrow > form { display: block; min-width: 0; } .actrow > .btn, .actrow > form > .btn { width: 100%; justify-content: center; } .actrow > .btn, .actrow > form > .btn { white-space: nowrap; } @media (max-width: 820px) { .phead { grid-template-columns: minmax(0, 1fr) auto; } .phead-back { grid-column: 1; grid-row: 1; } .phead-acts.lean { grid-column: 2; grid-row: 1; justify-self: end; align-self: center; justify-content: flex-end; margin-top: 0; } .phead-face { grid-column: 1 / -1; } .phead-acts:not(.lean) { grid-column: 1 / -1; justify-self: stretch; max-width: none; } } .pcard { position: relative; min-width: 0; padding: 14px 15px 13px 17px; background: var(--panel); border: 1px solid var(--edge2); border-radius: var(--rad); box-shadow: var(--shadow); transition: border-color .16s, transform .16s; } .pcard::before { content:""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--dc); } .pcard.pc::before { background: var(--hatch) left top / 3px 100% no-repeat; } .pcard:hover { border-color: color-mix(in srgb, var(--dc) 45%, var(--edge2)); } .pboard .pcard, .pboard .ppart, .pboard .prow-step { cursor: pointer; } .pcard-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 7px; } .pcard-title { flex: 1 1 auto; min-width: 0; border: 0; font: 700 15.5px/1.3 var(--ff); color: var(--ink); } .pcard-title:hover { color: var(--now); } html.sorting, html.sorting body { cursor: grabbing; user-select: none; } .pcard.sort-lift, .ppart.sort-lift, .part.sort-lift, .pinned-row.sort-lift { position: fixed; z-index: 200; pointer-events: none; border-top: 0; border-radius: var(--rad-s); background: var(--panel2); box-shadow: 0 12px 28px -6px rgba(0,0,0,.5), 0 0 0 1px var(--edge2); transform: scale(1.02) rotate(-.35deg); } .ppart.sort-lift, .part.sort-lift { margin-left: 0; padding: 8px 12px; } .pcard.sort-gone, .ppart.sort-gone, .part.sort-gone, .pinned-row.sort-gone { display: none; } .pinned-row.sort-lift { border-top: 1px solid var(--edge2); margin: 0; } .sort-hole { border-radius: var(--rad-s); background: color-mix(in srgb, var(--now) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--now) 40%, transparent); } .sort-away { opacity: .35; } @media (prefers-reduced-motion: reduce) { .sort-away { opacity: .5; } .pcard.sort-lift, .ppart.sort-lift, .part.sort-lift, .pinned-row.sort-lift { transform: none; } } .sort-settle { transition: transform .2s cubic-bezier(.2,.8,.2,1); } @media (prefers-reduced-motion: reduce) { .sort-settle { transition: none; } } .pcard-goal { display: flex; align-items: center; gap: 9px; margin-top: 9px; } .pcard-note { font-size: 12.5px; line-height: 1.55; color: var(--mut); margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ppeek { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; border-top: 1px solid var(--edge); color: var(--ink2); font-size: 12.5px; text-decoration: none; } .ppeek:first-child { border-top: 0; } [data-lane] .ppeek[data-pick] { cursor: pointer; } .ppeek:hover { color: var(--now); } .ppeek-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ppeek-when { flex: none; font: 600 10.5px/1.4 var(--fm); color: var(--mut); } .ppeek.late .ppeek-when { color: var(--bad); } .pcard-fold { margin-top: 10px; } .pcard-fold > summary { cursor: pointer; list-style: none; padding: 6px 9px; border-radius: var(--rad-s); background: var(--panel2); font: 600 12px/1.4 var(--ff); color: var(--ink2); } .pcard-fold > summary::-webkit-details-marker { display: none; } .pcard-fold > summary::before { content:"▸ "; color: var(--mut); } .pcard-fold[open] > summary::before { content:"▾ "; } .pcard-fold > summary:hover { color: var(--now); } .pparts { margin-top: 10px; } .ppart { display: flex; align-items: center; gap: 9px; margin-left: calc(var(--lvl, 0) * 14px); padding: 6px 0 6px 9px; border-top: 1px solid var(--edge); border-left: 3px solid color-mix(in srgb, var(--dc) 55%, transparent); border-radius: 0 var(--rad-s) var(--rad-s) 0; transition: background .15s; } .ppart:first-of-type { border-top: 0; } .ppart:hover { background: color-mix(in srgb, var(--dc) 7%, transparent); } .ppart.pc { border-left-color: transparent; background-image: var(--hatch); background-size: 3px 100%; background-repeat: no-repeat; background-position: left top; background-origin: border-box; background-clip: border-box; } .ppart-name { flex: 1 1 auto; min-width: 0; border: 0; font: 600 13px/1.4 var(--ff); color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ppart-name:hover { color: var(--now); } .ppart-dir { flex: none; font-size: 12px; opacity: .85; } .ppart-goal { display: none; flex: none; font: 600 10px/1.5 var(--fm); color: var(--mut); white-space: nowrap; padding: 1px 5px; border-radius: 5px; background: color-mix(in srgb, var(--dc) 10%, var(--bg2)); } @media (min-width: 900px) { .ppart-goal { display: inline-block; } } .ppart-n { font: 700 10.5px/1.5 var(--fm); color: var(--mut); flex: none; } .ppart-n.done { color: var(--ok); } .pcard-tasks { margin-top: 6px; } .pcard-tasks .plan { padding: 8px 0; } .pcard-tasks .plan-title { font-size: 13.5px; } .formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .formgrid .span2 { grid-column: 1 / -1; } @media (max-width: 620px) { .formgrid { grid-template-columns: 1fr; } } .part { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 7px 0 7px calc(var(--lvl, 1) * 14px - 14px); border-top: 1px solid var(--edge); } .part:first-child { border-top: 0; } .part-title { flex: 1 1 190px; min-width: 0; font-weight: 620; font-size: 13.5px; color: var(--ink); border: 0; } .part[style*="--lvl:2"] .part-title, .part[style*="--lvl:3"] .part-title { font-weight: 520; color: var(--ink2); } .part-title:hover { color: var(--now); } .part-meta { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; flex: none; } .part-bar { flex: 0 0 74px; height: 4px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--edge2) 40%, transparent); } .part-bar i { display: block; height: 100%; width: var(--w); border-radius: 999px; background: var(--dc); } @media (max-width: 760px), (max-height: 480px) { .row.mb, .plan-bar .row.tight { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; } .row.mb::-webkit-scrollbar, .plan-bar .row.tight::-webkit-scrollbar { display: none; } .row.mb > *, .plan-bar .row.tight > * { flex: none; } .lane-head { position: sticky; top: env(safe-area-inset-top); z-index: 4; background: var(--bg); } } .plan.is-copy { opacity: .82; border-left-style: dashed; border-left-color: color-mix(in srgb, var(--dc) 70%, transparent); background-image: none; } .plan.is-copy .tick { cursor: default; } .chip.copy-later { border-style: dashed; color: var(--mut); } .copy-note { margin: 4px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--ink2); } .plan-spent { display: flex; align-items: center; gap: 7px; margin-top: 5px; max-width: 320px; } .plan-spent i { flex: 1 1 auto; height: 3px; border-radius: 999px; position: relative; background: color-mix(in srgb, var(--edge2) 45%, transparent); } .plan-spent i::after { content:""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: 999px; background: var(--now); } .plan-spent span { flex: none; font: 600 10px/1.4 var(--fm); color: var(--now); } .plan-spent.is-live { max-width: 420px; } .plan-spent-rail { flex: 1 1 auto; display: flex; min-width: 40px; } .plan-spent-rail i { flex: 1 1 auto; } .plan-spent-rail.over i::after { background: var(--wait); } .plan-spent.is-live b { font-weight: 700; color: var(--now); } .chip.more { border-style: dashed; color: var(--mut); cursor: help; } .chip.proj { border-color: color-mix(in srgb, var(--dc) 82%, var(--edge)); background: color-mix(in srgb, var(--dc) 13%, transparent); color: color-mix(in srgb, var(--dc) 92%, var(--ink)); font-weight: 700; gap: 4px; } .chip.proj::before { content:"◰"; opacity: .7; } .chip.proj:hover { border-color: var(--dc); background: color-mix(in srgb, var(--dc) 22%, transparent); } .strictband { margin: 14px 0; } .strictband + .strictband { margin-top: 0; } .strict { position: relative; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 14px 16px; border-radius: var(--rad); overflow: hidden; background: var(--panel); border: 1px solid color-mix(in srgb, var(--dc, var(--wait)) 45%, var(--edge2)); border-left: 3px solid var(--dc, var(--wait)); } .strict::before, .strict::after { content:""; position: absolute; inset: -2px; z-index: 0; border-radius: inherit; background: conic-gradient(from var(--a, 0deg), color-mix(in srgb, var(--dc, var(--wait)) 85%, transparent), color-mix(in srgb, var(--wait) 80%, transparent) 25%, color-mix(in srgb, var(--dc, var(--wait)) 85%, transparent) 50%, color-mix(in srgb, var(--wait) 80%, transparent) 75%, color-mix(in srgb, var(--dc, var(--wait)) 85%, transparent)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 2px; pointer-events: none; } .strict::after { --a: 90deg; opacity: 0; animation: fireturn 3.5s ease-in-out 5 alternate forwards; } @keyframes fireturn { to { opacity: 1; } } .strict > * { position: relative; z-index: 1; } .strict.running { border-color: color-mix(in srgb, var(--bad) 60%, var(--edge2)); } .strict:has(.movepop[open]) { overflow: visible; z-index: 90; } .strict-when { flex: none; text-align: left; min-width: 108px; max-width: 150px; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; } .strict-clock { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; } .strict-clock b { font: 800 22px/1.1 var(--fm); color: var(--dc, var(--wait)); } [data-light] .strict-when b { color: color-mix(in srgb, var(--dc, var(--wait)) 78%, #0E1720); } .strict.running .strict-when b { color: var(--bad); } .strict-state { display: block; font: 600 9.5px/1.5 var(--fm); letter-spacing: .8px; text-transform: uppercase; color: var(--mut); white-space: nowrap; } .strict-clock u { text-decoration: none; font: 800 10px/1 var(--fm); letter-spacing: .7px; color: color-mix(in srgb, var(--dc, var(--wait)) 78%, var(--mut)); } [data-light] .strict-clock u { color: color-mix(in srgb, var(--dc, var(--wait)) 62%, #4A5568); } .strict.running .strict-clock u { color: color-mix(in srgb, var(--bad) 72%, var(--mut)); } @media (max-width: 620px) { .strict-when { min-width: 0; max-width: none; flex: 1 1 100%; } .strict-clock b { font-size: 20px; } } .strict-body { flex: 1 1 220px; min-width: 0; } .strict-title { display: block; font: 700 16px/1.3 var(--ff); color: var(--ink); border: 0; } .strict-title:hover { color: var(--now); } .strict-meta { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin-top: 5px; } .said { margin: 4px 0 0; max-width: 62ch; font: 600 13px/1.4 var(--ff); color: var(--ink); overflow-wrap: anywhere; } .said-sign { margin-right: 6px; font-size: .92em; } .strict .said { font-size: 14px; margin-top: 3px; } .strict-acts { display: flex; align-items: center; gap: 6px; flex: none; } .strict-acts > form { display: flex; align-items: center; } .strict-acts .btn, .strict-acts .iconbtn, .strict-acts .movepop > summary { height: 32px; min-height: 32px; padding-top: 0; padding-bottom: 0; } .strict-bar { flex: 1 0 100%; height: 4px; border-radius: 999px; margin-top: 2px; background: color-mix(in srgb, var(--edge2) 45%, transparent); overflow: hidden; } .strict-bar i { display: block; height: 100%; width: var(--w); border-radius: 999px; background: linear-gradient(90deg, var(--wait), var(--bad)); transition: width 1s linear; } @media (prefers-reduced-motion: reduce) { .strict::after { animation: none; } } .strictband > .strict + .strict { margin-top: 10px; } .strict.is-warn::before, .strict.is-warn::after { display: none; } .strict.is-warn .strict-clock b { font: 800 19px/1.15 var(--ff); letter-spacing: -.01em; } .chipform { display: inline-flex; max-width: 100%; } .chipbtn { cursor: pointer; border-style: dashed; font: 600 11px/1.5 var(--ff); letter-spacing: .1px; white-space: nowrap; max-width: 100%; color: var(--mut); background: transparent; } .chipbtn:hover { color: var(--now); border-color: var(--now); border-style: solid; } .seen { position: absolute; top: 0; right: 0; z-index: 3; line-height: 0; } .seen-eye { display: grid; place-items: center; width: 34px; height: 30px; margin: 5px 5px 0 0; padding: 0; cursor: pointer; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--mut); transition: color .15s, border-color .15s, background .15s, transform .12s; } .seen-eye svg { width: 19px; height: 12px; display: block; } .seen-eye:hover { color: var(--ink2); border-color: var(--edge2); background: color-mix(in srgb, var(--panel2) 80%, transparent); } .seen-eye:active { transform: scale(.9); } @media (max-width: 900px), (max-height: 480px) { .seen-eye { width: 40px; height: 36px; } } .strict:has(.seen), .focus:has(.seen) { padding-right: 46px; } .timer:has(.seen) { position: relative; } .timer:has(.seen) .timer-head { padding-right: 58px; } .parked { display: flex; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--edge); } .parked:first-child { border-top: 0; } .parked-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .parked-body b, .parked-name { font-size: 13.5px; font-weight: 620; } .parked-name { color: var(--ink); text-decoration: none; } .parked-name:hover { color: var(--now); } .tzpick { display: block; } .tzpick[hidden] { display: none; } .tzpick-label { display: block; margin: 0 0 5px; } .tzpick-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; } .tzopt { position: relative; display: block; margin: 0; cursor: pointer; min-height: 44px; padding: 7px 8px; border-radius: var(--rad-s); text-align: center; border: 1px solid var(--edge); background: var(--panel); text-transform: none; letter-spacing: normal; } .tzopt input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; -webkit-appearance: none; appearance: none; } .tzopt-in { pointer-events: none; } .tzopt:hover { border-color: var(--edge2); } .tzopt:has(input:focus-visible) { outline: 2px solid var(--now); outline-offset: 1px; } .tzopt-in { display: flex; flex-direction: column; gap: 1px; align-items: center; position: relative; z-index: 0; } .tzopt b { font: 700 11px/1.2 var(--ff); letter-spacing: .3px; color: var(--mut); } .tzopt-now { font: 700 15px/1.2 var(--fm); font-style: normal; color: var(--ink2); } .tzopt-gap { font: 600 10px/1.2 var(--fm); font-style: normal; color: var(--mut); } .tzopt.on, .tzopt:has(input:checked) { border-color: var(--now); background: var(--panel2); } .tzopt.on b, .tzopt:has(input:checked) b { color: var(--now); } .tzopt.on .tzopt-now, .tzopt:has(input:checked) .tzopt-now { color: var(--ink); } .tzpick.has-when .tzopt-now { color: var(--ink); } .tzpick-note { margin-top: 5px; } .tzpick-slim { flex: 1 1 100%; } .tzpick-slim .tzpick-row { gap: 5px; } .tzpick-slim .tzopt { padding: 4px 6px; min-height: 40px; } .tzpick-slim .tzopt-now { font-size: 13px; } .strictbox { padding: 12px 14px; border-radius: var(--rad-s); border: 1px dashed color-mix(in srgb, var(--wait) 45%, var(--edge2)); background: color-mix(in srgb, var(--wait) 5%, transparent); } .strictbox .inline-check b { color: var(--wait); } .strictfold.is-strict > summary { border-color: color-mix(in srgb, var(--wait) 55%, var(--edge)); background: color-mix(in srgb, var(--wait) 8%, var(--panel2)); color: var(--ink); } .strictfold.is-strict > summary [data-strict-hint] { color: var(--wait); font-weight: 700; } .strictwhen { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed color-mix(in srgb, var(--wait) 35%, var(--edge)); } .strictwhen[hidden] { display: none; } .sw { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; } .sw i { font-style: normal; font-size: 12px; line-height: 1; opacity: .85; } .sw b { font: 700 15px/1.2 var(--fm); color: var(--ink); white-space: nowrap; } .sw > span { font-size: 11px; line-height: 1.3; color: var(--mut); } .sw.past b { color: var(--mut); } .sw.past > span { color: var(--wait); } .notifybox .nlist { list-style: none; margin: 0; padding: 0; } .nrow { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding: 7px 0; border-top: 1px solid var(--edge); } .nrow > .nrow-body { flex: 1 1 auto; } .nrow:first-child { border-top: 0; padding-top: 2px; } .nrow-at { font: 700 15px/1.2 var(--fm); color: var(--ink); white-space: nowrap; } .nrow-at i { font: 600 10.5px/1 var(--fm); font-style: normal; color: var(--mut); } .nrow-at small { display: block; font: 500 10.5px/1.3 var(--ff); color: var(--mut); } .nrow-body { min-width: 0; } .nrow-body b { display: block; font-weight: 600; font-size: 13.5px; color: var(--ink); } .nrow-body small { display: block; font-size: 12.5px; line-height: 1.35; color: var(--ink2); overflow-wrap: anywhere; } .nrow-copy { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--edge2); font: 600 10.5px/1.5 var(--fm); color: var(--mut); background: var(--panel2); text-decoration: none; white-space: nowrap; } a.nrow-copy:hover { color: var(--now); border-color: var(--now); } .nrow-copy.is-here { color: var(--now); border-color: color-mix(in srgb, var(--now) 40%, var(--edge2)); background: color-mix(in srgb, var(--now) 8%, transparent); } .nrow-side { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; margin-left: auto; min-width: 0; } .nrow-why { font-size: 11.5px; line-height: 1.35; color: var(--ink2); } .nrow.is-off { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; } .nrow.is-off .nrow-body { flex: 0 1 auto; } @media (max-width: 700px) { .nrow, .nrow.is-off { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 4px; align-items: start; } .nrow > .nrow-at { grid-column: 1; grid-row: 1 / span 2; } .nrow > .nrow-body { grid-column: 2; grid-row: 1; } .nrow > .nrow-fix { grid-column: 3; grid-row: 1; margin: -6px -6px 0 0; } .nrow > .nrow-side { grid-column: 2 / 4; grid-row: 2; margin-left: 0; } .nrow > .nrow-side:not(:has(*)) { display: none; } } .nrow-state { font-size: 11px; white-space: nowrap; color: var(--mut); } .nrow.is-wait .nrow-state { color: var(--wait); } .nrow.is-sent .nrow-state { color: var(--ok); } .nrow.is-gone, .nrow.is-double { opacity: .62; } .nrow.is-sent .nrow-at { color: var(--ink2); } .nrow-fix { display: grid; place-items: center; width: 32px; height: 32px; text-decoration: none; font: 15px/1 var(--ff); border-radius: var(--rad-s); border: 1px solid transparent; color: var(--mut); } .nrow-fix:hover { color: var(--now); border-color: var(--edge2); background: var(--panel2); } .notifybox .nlist-off { margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--edge2); } .nrow.is-off { opacity: .8; } .nrow.is-off .nrow-at { font-size: 13px; } .nrow.is-off .nrow-body small { color: var(--ink2); } .nrow.is-off .nrow-state a { color: var(--now); text-decoration: none; } .alarmbox { padding: 12px 14px; border-radius: var(--rad-s); border: 1px dashed color-mix(in srgb, var(--now) 42%, var(--edge2)); background: color-mix(in srgb, var(--now) 4%, transparent); } .strictbox > .alarmbox { border: 0; background: none; border-radius: 0; padding: 0; } .alarmhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; } .alarmrow { margin-top: 9px; padding: 8px 10px; border-radius: var(--rad-s); border: 1px solid var(--edge); background: var(--panel); scroll-margin-top: 132px; } .alarmrow:target { border-color: var(--now); box-shadow: 0 0 0 1px color-mix(in srgb, var(--now) 45%, transparent); } .alarm-when { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .alarm-when select { flex: 1 1 100%; width: 100%; min-width: 0; } .alarm-pair[hidden], .alarm-when select[hidden] { display: none; } .alarm-pair { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1 1 100%; min-width: 0; } .alarm-when input[type="time"] { flex: 1 1 150px; width: auto; min-width: 0; } .alarm-when input[type="date"] { flex: 1 1 175px; width: auto; min-width: 0; } .alarm-when input { font-size: 12.5px; } .alarm-when input[type="date"][data-empty]::before, .alarm-when input[type="time"][data-empty]::before { font-size: 12px; } .alarm-note { margin-top: 7px; } .alarm-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-top: 6px; } .alarm-at { font: 700 12.5px/1.2 var(--fm); color: var(--now); } .alarm-at:empty { display: none; } .alarm-drop { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--mut); cursor: pointer; } .alarm-drop:has(input:checked) { color: var(--bad); } .chip.strict-chip { border-color: var(--wait); color: var(--heat-ink); font-weight: 700; background: var(--wait); letter-spacing: .2px; } .chip.rep-chip { border-color: color-mix(in srgb, var(--rd) 50%, var(--edge)); color: var(--rd); background: color-mix(in srgb, var(--rd) 10%, transparent); } .chip.rep-chip.rep-last { padding: 2px 8px; gap: 4px; font-weight: 700; letter-spacing: .2px; border-color: color-mix(in srgb, var(--rd) 80%, var(--edge)); background: color-mix(in srgb, var(--rd) 18%, transparent); } .factbox dl { display: grid; grid-template-columns: minmax(108px, 168px) minmax(0, 1fr); gap: 8px 18px; margin: 0; align-items: baseline; } .factbox dt { font: 700 9.5px/1.5 var(--fm); letter-spacing: 1px; text-transform: uppercase; color: var(--mut); } .factbox dd { margin: 0; font: 400 13px/1.5 var(--ff); color: var(--ink2); min-width: 0; } .factbox dd a { color: var(--ink2); } .factbox dd a:hover { color: var(--now); } .projpath { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; } .projpath-sep { color: var(--mut); } .leadsaid { display: block; margin-top: 3px; color: var(--ink); overflow-wrap: anywhere; } @media (max-width: 560px) { .factbox dl { grid-template-columns: 1fr; gap: 2px 0; } .factbox dd { margin-bottom: 8px; } } .chart .grid-t.now { fill: var(--now); font-weight: 700; } .skinopt.on, .calopt.on, .iconopt.on, .skinopt:has(input:checked), .calopt:has(input:checked), .iconopt:has(input:checked) { border-color: var(--now); background: var(--panel2); box-shadow: 0 0 0 1px var(--now); } .skinopt.on .skinname, .calopt.on .calname, .iconopt.on .iconname, .skinopt:has(input:checked) .skinname, .calopt:has(input:checked) .calname, .iconopt:has(input:checked) .iconname { color: var(--now); } .calopt.on .calwhat, .iconopt.on .iconwhat, .calopt:has(input:checked) .calwhat, .iconopt:has(input:checked) .iconwhat { color: var(--ink2); } .plan:target { box-shadow: inset 0 0 0 1px var(--now); border-radius: var(--rad-s); } .plan { scroll-margin-top: 90px; } .field textarea.slim { min-height: 34px; height: 34px; resize: none; overflow: hidden; transition: height .14s ease, min-height .14s ease; } .field textarea.slim:focus, .field textarea.slim:not(:empty) { min-height: 84px; height: 84px; resize: vertical; overflow: auto; } .field textarea.slim[placeholder]:placeholder-shown:not(:focus) { min-height: 44px; height: 44px; } @media (max-width: 760px) { .field textarea.slim[placeholder]:placeholder-shown:not(:focus) { min-height: 72px; height: 72px; } } h2.sec[id], .daygroup[id], [id="setup"] { scroll-margin-top: 96px; } #timelog, #notes, #attach, #attachadd, #subadd, #subs, #setupfold, #setup-when, #mattop, #matmap, #matparts, #partadd, #strict, #alarms, #repeat { scroll-margin-top: 96px; } .pcard-facts { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 4px; } .pcard-facts > span { display: flex; flex-direction: column; gap: 1px; } .pcard-facts i { font: 600 9.5px/1.4 var(--fm); letter-spacing: .9px; text-transform: uppercase; color: var(--mut); font-style: normal; } .pcard-facts b { font: 700 14px/1.2 var(--fm); color: var(--ink); } .pcard-facts u { text-decoration: none; font: 600 10px/1.3 var(--fm); color: var(--mut); } .pcard-facts .behind b { color: var(--wait); } .pcard.is-guest { border-style: dashed; } .pcard-about { margin-top: 8px; } .pcard-about > span { display: block; margin-bottom: 2px; font: 600 9.5px/1.4 var(--fm); letter-spacing: .9px; text-transform: uppercase; color: var(--mut); } .pcard-about .pcard-note { margin-top: 0; } .timewrap { position: relative; display: block; } .timewrap .timefield { padding-right: 34px; } .timeclear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border: 0; border-radius: 6px; cursor: pointer; background: transparent; color: var(--mut); font-size: 12px; line-height: 1; } .timeclear:hover { background: var(--panel2); color: var(--bad); } .chart .grid-t { font-size: 8px; font-weight: 500; } .chart .grid-t.mark { fill: var(--ink2); font-weight: 800; font-size: 9px; } .minimonth { flex: 0 0 auto; width: 210px; } .minimonth-head { display: flex; align-items: center; gap: 5px; margin-bottom: 6px; flex-wrap: wrap; } .minimonth-head b { font: 700 11px/1.4 var(--fm); color: var(--ink2); flex: 1 1 auto; text-align: center; } .minimonth-head .tiny { flex: 1 0 100%; text-align: center; } .minigrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .minihead { font: 700 8px/1.4 var(--fm); color: var(--mut); text-align: center; text-transform: uppercase; } .minicell { aspect-ratio: 1; display: grid; place-items: center; border-radius: 5px; border: 1px solid transparent; background: color-mix(in srgb, var(--edge) 45%, transparent); color: var(--mut); text-decoration: none; } .minicell i { font: 500 9px/1 var(--fm); font-style: normal; opacity: .5; } .minicell b { font: 800 12px/1 var(--fm); color: var(--dc, var(--ink)); } .minicell.has { border-color: color-mix(in srgb, var(--dc) 45%, transparent); } .minicell.has b { color: var(--heat-ink); text-shadow: 0 1px 2px rgba(0,0,0,.35); } .minicell.has:hover { filter: brightness(1.15); } .minilegend { margin-top: 8px; } .minilegend > summary { display: block; cursor: pointer; list-style: none; font: 600 10px/1.4 var(--fm); color: var(--mut); } .minilegend > summary .fold-line { align-items: center; gap: 7px; justify-content: flex-start; } .minilegend > summary::-webkit-details-marker { display: none; } .minilegend > summary .fold-line::before { content:"▸"; } .minilegend[open] > summary .fold-line::before { content:"▾"; } .minilegend > summary:hover { color: var(--now); } .minidots { display: inline-flex; gap: 3px; } .minilegend-body { display: flex; flex-direction: column; gap: 4px; margin-top: 7px; } .minilegend-body span { display: inline-flex; align-items: center; gap: 6px; font: 600 10px/1.4 var(--fm); color: var(--mut); } .minilegend i { width: 8px; height: 8px; border-radius: 2px; flex: none; } .minicell.out { opacity: .3; } .minicell.today { box-shadow: 0 0 0 1.5px var(--now); } @media (max-width: 760px) { .minimonth { width: 100%; } } .calplan { border: 1px solid var(--edge); border-radius: var(--rad); background: var(--panel); overflow: hidden; container-type: inline-size; } .calplan-head { display: none; } .calplan-week { display: grid; grid-template-columns: minmax(0, 1fr); } .pday { border-top: 1px solid var(--edge); padding: 9px 11px 11px; min-width: 0; display: flex; flex-direction: column; gap: 7px; } .calplan-week:first-of-type .pday:first-child { border-top: 0; } .pday.out { display: none; } .pday.past { opacity: .88; } .pday.empty { padding: 5px 11px; min-height: 0; } .pday.empty .pday-list { display: none; } .pday.empty .pday-num, .pday.empty .pday-wd { opacity: .55; } .pday.today { box-shadow: inset 2px 0 0 var(--now); background: color-mix(in srgb, var(--now) 5%, transparent); opacity: 1; } .pday.we .pday-num { color: color-mix(in srgb, var(--wait) 62%, var(--mut)); } .pday-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; } .pday-num { font: 700 14px/1 var(--fm); color: var(--ink2); border: 0; flex: none; min-width: 18px; } .pday-num:hover { color: var(--now); } .pday.today .pday-num { color: var(--now); } .pday-wd { font-size: 11px; color: var(--mut); text-transform: lowercase; } .pday-hrs { margin-left: auto; flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: clip; font: 700 10.5px/1 var(--fm); color: color-mix(in srgb, var(--wait) 78%, var(--mut)); padding: 2px 5px; border-radius: 999px; background: color-mix(in srgb, var(--wait) 11%, transparent); } .pday-list { display: flex; flex-direction: column; gap: 4px; min-height: 6px; } .pday > .pday-list { flex: 1 1 auto; } .pday > .pday-list > :nth-child(1 of :is(.is-event, .pnote-chip, .pdrop.is-low):not(.pick-off)) { margin-top: auto; } .pday > .pday-list > :nth-last-child(1 of :not(.is-event, .pnote-chip, .pdrop.is-low)):not(:last-child) { margin-bottom: 5px; } .pchip { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 5px 7px; border-radius: var(--rad-s); background: color-mix(in srgb, var(--dc, var(--mut)) var(--pfill, 52%), var(--panel2)); border: 1px solid color-mix(in srgb, var(--dc, var(--mut)) var(--pline, 72%), var(--edge)); font-size: 12.5px; line-height: 1.35; color: var(--ink2); } .pchip .pchip-name { color: var(--ink); } .pchip.is-copy { border-style: dashed; } .pchip.is-copy .pchip-name { color: var(--ink2); } .pchip.is-copy.peeked, .pchip.is-copy.picked { border-style: solid; } .pchip-copy-sign { color: var(--now); opacity: .8; font-size: 10px; } .chip.copy-mark { color: var(--now); border-color: color-mix(in srgb, var(--now) 35%, transparent); background: color-mix(in srgb, var(--now) 10%, transparent); } .pchip.more { background: var(--panel2); border-color: var(--edge); } .pchip.pc { border-color: color-mix(in srgb, var(--pc) 85%, var(--edge)); } .pchip.plain, .pchip.is-event.plain { background-color: color-mix(in srgb, var(--dc, var(--mut)) var(--plainfill, 0%), var(--panel)); background-image: none; border-color: color-mix(in srgb, var(--dc, var(--mut)) var(--plainline, 78%), var(--edge)); } :root:not([data-light]) { --pline: 58%; --pline-s: 58%; --eline: 64%; --plainfill: 12%; --plainline: 46%; } .pchip.plain.nodir { border-color: var(--edge2); } .pchip-name { flex: 1 1 auto; min-width: 0; color: var(--ink2); border: 0; overflow: hidden; text-overflow: clip; white-space: nowrap; } a.pchip-name:hover { color: var(--now); } .pchip-sign { font-size: 11px; line-height: 1; margin-right: 3px; white-space: nowrap; } .pchip-at { font: 700 11px/1 var(--fm); color: var(--mut); margin-right: 5px; white-space: nowrap; } .pchip-at u { margin-left: 3px; font-size: 9px; font-weight: 700; text-decoration: none; opacity: .8; } .pchip-grip { flex: none; color: var(--mut); font-size: 11px; line-height: 1; opacity: .5; cursor: grab; } .pchip-open { flex: none; color: var(--mut); border: 0; font-size: 12px; padding: 0 2px; opacity: .55; } .pchip-open:hover { color: var(--now); opacity: 1; } @media (hover: hover) and (pointer: fine) { .pchip-open { opacity: 0; width: 0; padding: 0; overflow: hidden; } .pchip:hover .pchip-open { opacity: .55; width: auto; padding: 0 2px; } } .pchip-est { flex: none; font: 600 10.5px/1 var(--fm); color: var(--mut); padding: 2px 4px; border-radius: 4px; background: var(--bg2); } .pchip.is-strict .pchip-at { color: var(--wait); } .pchip.is-running { border-color: var(--now); } .pchip.is-running .pchip-at { color: var(--now); } .pchip.is-gone, .pchip.is-event.is-gone { background: color-mix(in srgb, var(--bad) 30%, var(--panel2)); border-color: color-mix(in srgb, var(--bad) 85%, var(--edge)); } .pchip.is-gone .pchip-at, .pchip.is-gone .pchip-est { color: var(--bad); } .pchip.is-gone .pchip-name { color: var(--ink); } .pchip.is-gone .pchip-est { background: color-mix(in srgb, var(--bad) 12%, transparent); } .pchip.is-done { opacity: .74; } .pchip.is-done .pchip-text { text-decoration: line-through; text-decoration-thickness: max(1.5px, .13em); text-decoration-color: var(--ink); text-decoration-skip-ink: none; } .pchip.is-done .pchip-est { opacity: .7; } :root { --gold-line: rgba(240, 196, 40, .95); --gold-glow: rgba(252, 216, 82, .78); --gold-fall: 0 1px 7px 1px; } :root:not([data-light]) { --gold-line: color-mix(in srgb, #e9c13c 90%, transparent); --gold-glow: color-mix(in srgb, #e9c13c 30%, transparent); } .pchip.is-crit { box-shadow: 0 0 0 1px var(--gold-line), var(--gold-fall) var(--gold-glow); } .calplan .pday.past, .pchip.is-done { --pfill: 20%; --pline: 40%; --pfill-s: 15%; --pline-s: 30%; --efill: 24%; --eline: 46%; } @container (min-width: 720px) { .calplan-head { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--panel2); border-bottom: 1px solid var(--edge); } .calplan-head div { padding: 7px 8px; text-align: center; font: 700 10px/1 var(--fm); letter-spacing: 1.1px; text-transform: uppercase; color: var(--mut); } .calplan-head div.we { color: color-mix(in srgb, var(--wait) 70%, var(--mut)); } .calplan-week { grid-template-columns: repeat(7, minmax(0, 1fr)); } .pday { border-top: 1px solid var(--edge); border-right: 1px solid var(--edge); padding: 7px 7px 9px; min-height: 118px; gap: 5px; } .calplan-week:first-of-type .pday { border-top: 0; } .calplan-week .pday:last-child { border-right: 0; } .pday.out { display: flex; } .pday.empty { padding: 7px 7px 9px; min-height: 118px; } .pday.empty .pday-list { display: flex; } .pday.today { box-shadow: inset 0 0 0 2px var(--now); } .pday-wd { display: none; } .pchip { padding: 4px 5px; font-size: 11.5px; gap: 4px; } .pchip-grip { display: none; } } .calplan.editable .pchip, .boxrail .pchip { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } .boxrail .pchip { touch-action: none; } html.planning, html.planning body { cursor: grabbing; user-select: none; } html.planning .calplan .pday.out { pointer-events: auto; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--bad) 30%, transparent) 0 1px, transparent 1px 7px), color-mix(in srgb, var(--bad) 7%, var(--panel2)); transition: background .12s, box-shadow .12s; } html.planning .calplan .pday.out.trash-over { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--bad) 55%, transparent) 0 2px, transparent 2px 7px), color-mix(in srgb, var(--bad) 22%, var(--panel2)); box-shadow: inset 0 0 0 2px var(--bad); display: grid; place-items: center; } html.planning .calplan .pday.out.trash-over::after { content:"🗑 в корзину"; font: 700 10px/1.2 var(--fm); letter-spacing: .4px; color: var(--bad); text-align: center; pointer-events: none; } .pghost.to-trash .pchip { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 26%, var(--panel)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--bad) 45%, transparent); } .pghost.to-trash .pchip-text { text-decoration: line-through; } .plan.lane-lift, .ppeek.lane-lift { position: fixed; z-index: 200; pointer-events: none; border-top: 0; border-radius: var(--rad-s); background: var(--panel2); box-shadow: 0 12px 28px -6px rgba(0,0,0,.5), 0 0 0 1px var(--edge2); transform: scale(1.02) rotate(-.35deg); } .plan-hole { border-radius: var(--rad-s); background: color-mix(in srgb, var(--now) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--now) 40%, transparent); } .plan.lane-away, .ppeek.lane-away { opacity: .35; } @media (prefers-reduced-motion: reduce) { .plan.lane-away, .ppeek.lane-away { opacity: .5; } } .plan-settle { transition: transform .2s cubic-bezier(.2,.8,.2,1); } @media (prefers-reduced-motion: reduce) { .plan-settle { transition: none; } } @media (prefers-reduced-motion: reduce) { .plan.lane-lift { transform: none; } } .pchip.picked { border-color: var(--now); background: color-mix(in srgb, var(--now) 14%, var(--panel2)); box-shadow: 0 0 0 1px var(--now); } .pchip.picked .pchip-name { color: var(--ink); } .pchip.lifted { opacity: .3; } .pdrop { position: relative; flex: none; height: 4px; margin: 2px 0; border-radius: 4px; background: var(--now); box-shadow: 0 0 10px -1px var(--now); pointer-events: none; animation: pdrop-beat .9s ease-in-out infinite; } .pdrop::before { content:""; position: absolute; top: 50%; left: -7px; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--now); box-shadow: 0 0 8px -1px var(--now); } @keyframes pdrop-beat { 0%, 100% { opacity: 1; } 50% { opacity: .55; } } @media (prefers-reduced-motion: reduce) { .pdrop { animation: none; } } .pday.over, .boxrail.over { background: color-mix(in srgb, var(--now) 13%, var(--panel)); box-shadow: inset 0 0 0 2px var(--now); border-radius: var(--rad-s); } .pghost { position: fixed; top: 0; left: 0; z-index: 200; pointer-events: none; max-width: 260px; transform: translate3d(-999px, -999px, 0); filter: drop-shadow(0 10px 20px rgba(0,0,0,.45)); opacity: .92; } .pghost .pchip { background: var(--panel); border-color: var(--now); transform: rotate(-1.5deg) scale(1.04); } .pghost-n { position: absolute; top: -8px; right: -10px; background: var(--now); color: var(--heat-ink); font: 700 11px/1 var(--fm); padding: 3px 6px; border-radius: 999px; } .boxrail { position: fixed; z-index: 60; left: calc(18px + var(--safe-l)); bottom: var(--fab-bottom); max-width: min(360px, calc(100vw - 36px - var(--safe-l) - var(--safe-r) - var(--fab-clear))); display: flex; flex-direction: column-reverse; gap: 8px; padding: 8px 12px; border-radius: var(--rad); border: 1px solid color-mix(in srgb, var(--edge2) 80%, transparent); background: color-mix(in srgb, var(--panel2) 70%, transparent); backdrop-filter: saturate(var(--glass-sat)) blur(var(--glass-blur)); -webkit-backdrop-filter: saturate(var(--glass-sat)) blur(var(--glass-blur)); box-shadow: 0 8px 22px -8px rgba(0,0,0,.5); } .boxrail:has(.railfold:checked) { border-radius: 999px; padding: 0 14px; min-height: var(--fab-h); justify-content: center; } .boxrail-head { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; margin: 0; text-transform: none; letter-spacing: normal; color: var(--ink); cursor: pointer; user-select: none; } .boxrail-head b { font: 700 13px/1 var(--ff); white-space: nowrap; } .boxrail:hover { border-color: var(--now); } .boxrail.over { border-color: var(--now); } .boxrail:has(.railfold:checked).over { border-radius: 999px; } .railfold { position: absolute; opacity: 0; pointer-events: none; } .railfold:checked ~ .boxrail-list { display: none; } .boxrail-list { flex-direction: row; flex-wrap: wrap; gap: 5px; min-height: 30px; align-items: flex-start; max-height: 26vh; overflow-y: auto; overscroll-behavior: contain; } .boxrail-list .pchip { max-width: 100%; min-width: 0; background: var(--panel); } .boxrail-list .pchip > * { min-width: 0; } @media (max-height: 480px) { .boxrail-list { flex-wrap: nowrap; max-height: none; overflow-x: auto; overflow-y: hidden; padding-bottom: 2px; } .boxrail-list .pchip { flex: none; } } @media (max-width: 720px), (max-height: 480px) { .boxrail-list { max-height: 88px; } } @media (max-width: 859px), (max-height: 480px) { .boxrail:not(:has(.railfold:checked)) .boxrail-head { padding-right: 56px; } .boxrail:has(.railfold:checked) .boxrail-head { padding-right: 14px; } } .boxrail:has(.railfold:checked) { align-items: stretch; padding: 0; } .boxrail:has(.railfold:checked) .boxrail-head { justify-content: center; align-items: center; padding: 0 14px; min-height: var(--fab-h); } .boxrail:not(:has(.railfold:checked)) .boxrail-head { margin: -8px -12px; padding: 8px 12px; } .boxrail-head .mono { line-height: 1; } .boxrail-head { -webkit-user-select: none; -webkit-tap-highlight-color: transparent; } .planbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .planpick { position: fixed; z-index: 90; left: calc(10px + var(--safe-l)); right: calc(10px + var(--safe-r)); bottom: var(--fab-bottom); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px 11px; border-radius: var(--rad); background: var(--panel); border: 1px solid var(--edge2); box-shadow: 0 16px 40px -10px rgba(0,0,0,.55); } .planpick[hidden] { display: none; } .planpick-cnt { font: 700 12px/1 var(--fm); color: var(--ink); white-space: nowrap; } .planpick-acts { display: flex; gap: 5px; flex-wrap: wrap; flex: 1 1 auto; } .planpick .btn { flex: 1 1 auto; justify-content: center; min-height: 34px; } @media (min-width: 860px) and (min-height: 481px) { .planpick { left: 50%; right: auto; transform: translateX(-50%); bottom: var(--fab-bottom); max-width: calc(100vw - 32px); border-radius: 999px; } .planpick .btn { flex: 0 0 auto; min-height: 0; } } .calswap { display: contents; } .markfold { position: absolute; opacity: 0; pointer-events: none; } .markfold-bar { align-items: center; position: relative; } .markfold-sign, .markfold-tap { display: none; } @media (max-width: 700px), (max-height: 480px) { .markfold-bar { flex-wrap: nowrap; gap: 8px; } .markfold-bar h2 { flex: none; } .markfold-bar .mono { margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .markfold:not(:checked) ~ .markfold-bar { margin-bottom: 0; } .markfold-tap { display: block; position: absolute; inset: -13px; cursor: pointer; border-radius: var(--rad-s); } .markfold-sign { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: none; margin: -4px -4px -4px 0; border-radius: 999px; border: 1px solid var(--edge); background: var(--panel2); color: var(--ink2); font: 400 17px/1 var(--ff); cursor: pointer; transition: transform .16s cubic-bezier(.2,.8,.2,1); position: relative; z-index: 1; } .markfold:checked ~ .markfold-bar .markfold-sign { transform: rotate(180deg); } .markfold ~ .markfold-body { display: none; } .markfold:checked ~ .markfold-body { display: block; } } .calfold { position: absolute; opacity: 0; pointer-events: none; } .calfold ~ .calswap .cal-open { display: none; } .calfold:checked ~ .calswap .cal-shut { display: none; } .calfold:checked ~ .calswap .cal-open { display: block; } .calswap.is-filling { opacity: .55; transition: opacity .12s; } .calfold ~ .calswap .calswap-bar .cal-word-open { display: none; } .calfold:checked ~ .calswap .calswap-bar .cal-word-open { display: inline; } .calfold:checked ~ .calswap .calswap-bar .cal-word-shut { display: none; } .calfold:checked ~ .calswap .calswap-bar .cal-edit { display: inline-flex; } .calswap-bar .cal-edit { display: none; } .calplan-past-open { position: absolute; opacity: 0; pointer-events: none; } .calplan-past { display: none; } .calplan-past-open:checked ~ .calplan-past { display: block; } .calplan-past-door { display: block; cursor: pointer; padding: 6px 11px; margin: 0; font: 400 11.5px/1.4 var(--ff); color: var(--mut); text-transform: none; letter-spacing: normal; border-bottom: 1px solid var(--edge); background: var(--panel2); } .calplan-past-door::before { content:"▴ "; } .calplan-past-open:checked ~ .calplan-past-door::before { content:"▾ "; } .calplan-past-door:hover { color: var(--ink2); } .calplan-past-door .fold-open { display: none; } .calplan-past-open:checked ~ .calplan-past-door .fold-shut { display: none; } .calplan-past-open:checked ~ .calplan-past-door .fold-open { display: inline; } .calplan-past-open:checked ~ .calplan-past { border-bottom: 1px solid var(--edge); } .calplan-past-open ~ .calplan-head { border-bottom: 0; } .cal-strict { position: relative; z-index: 1; display: flex; align-items: center; gap: 1px; font: 800 10px/1 var(--fm); color: var(--wait); white-space: nowrap; } .strict.ahead { border-style: dashed; background: color-mix(in srgb, var(--panel) 92%, transparent); } .strict.ahead .strict-when b { color: var(--ink2); } .strict.ahead .strict-when span { color: var(--mut); } .strict.ahead .strict-when span u { color: var(--mut); } .strictband .morefold.strict-more { margin: 0; } .strictband .morefold.strict-more > summary { padding: 7px 12px; font-size: 11.5px; } .starline { align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--rad-s); border: 1px solid transparent; transition: background .16s, border-color .16s; } .starline b { font-weight: 700; } .starline:has(input:checked) { border-color: color-mix(in srgb, var(--wait) 60%, var(--edge)); background: color-mix(in srgb, var(--wait) 14%, transparent); color: var(--ink); } .calplan.shape-feed .calplan-head { display: none; } .calplan.shape-feed .calplan-week { grid-template-columns: minmax(0, 1fr); } .calplan.shape-feed .pday { min-height: 0; border-right: 0; } .calplan.shape-feed .pday.out { display: none; } .calplan.shape-feed .pday.empty { padding: 5px 11px; } .calplan.shape-feed .pday.empty .pday-list { display: none; } .calplan.shape-feed .pday-wd { display: inline; } .calplan.shape-feed .pchip-grip { display: inline-flex; } .calplan.shape-grid { overflow-x: auto; } .calplan.shape-grid .calplan-head, .calplan.shape-grid .calplan-week { min-width: 680px; } .calplan.shape-grid .calplan-head { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); } .calplan.shape-grid .calplan-week { grid-template-columns: repeat(7, minmax(0, 1fr)); } .calplan.shape-grid .pday { min-height: 118px; border-right: 1px solid var(--edge); } .calplan.shape-grid .pday.out { display: flex; } .calplan.shape-grid .pday.empty { min-height: 118px; padding: 7px 7px 9px; } .calplan.shape-grid .pday-wd { display: none; } @media (max-width: 700px) { .calscroll[data-mode="plan"] .planwrap { margin-left: calc(-1 * (12px + var(--safe-l))); margin-right: calc(-1 * (12px + var(--safe-r))); } .calscroll[data-mode="plan"] .planwrap .planmonth-head { padding-left: calc(12px + var(--safe-l)); padding-right: calc(12px + var(--safe-r)); } .planwrap .calplan.shape-grid { border-left: 0; border-right: 0; border-radius: 0; } .calplan.shape-grid { overflow: hidden; } .calplan.shape-grid .calplan-head, .calplan.shape-grid .calplan-week { min-width: 0; } .calplan.shape-grid .calplan-head div { padding: 5px 2px; font-size: 8.5px; letter-spacing: .6px; } .calplan.shape-grid .pday, .calplan.shape-grid .pday.empty { min-height: 88px; padding: 3px 2px 4px; gap: 3px; } .calplan.shape-grid .pday-top { gap: 3px; } .calplan.shape-grid .pday-num { font-size: 11px; min-width: 12px; } .calplan.shape-grid .pday-hrs { padding: 0; font-size: 9px; background: transparent; } .calplan.shape-grid .pday-list { gap: 2px; } .calplan.shape-grid { --gold-fall: 0 0 5px 0; } .calplan.shape-grid .pday > .pday-list > :nth-last-child(1 of :not(.is-event, .pnote-chip, .pdrop.is-low)):not(:last-child) { margin-bottom: 4px; } .calplan.shape-grid .pchip { padding: 3px 4px; gap: 3px; font-size: 10.5px; line-height: 1.2; border-radius: 4px; align-items: flex-start; } .calplan.shape-grid .pchip:not(.is-gone) { background-color: color-mix(in srgb, var(--dc, var(--mut)) var(--pfill-s, 52%), var(--panel2)); border-color: color-mix(in srgb, var(--dc, var(--mut)) var(--pline-s, 72%), var(--edge)); } .calplan.shape-grid .pchip.pc:not(.is-gone) { border-color: color-mix(in srgb, var(--pc) 85%, var(--edge)); } .calplan.shape-grid .pchip.plain:not(.is-gone) { background-color: color-mix(in srgb, var(--dc, var(--mut)) var(--plainfill, 0%), var(--panel)); background-image: none; border-color: color-mix(in srgb, var(--dc, var(--mut)) var(--plainline, 78%), var(--edge)); } .calplan.shape-grid .pchip.plain.nodir:not(.is-gone) { border-color: var(--edge2); } .calplan.shape-grid .pchip.is-running:not(.is-gone) { border-color: var(--now); } .calplan.shape-grid .pchip-grip, .calplan.shape-grid .pchip-open, .calplan.shape-grid .pchip-est, .calplan.shape-grid .pchip-at { display: none; } .calplan.shape-grid .pchip-sign { font-size: 9px; margin-top: 1px; } .calplan.shape-grid .pchip-name { white-space: normal; overflow-wrap: normal; word-break: normal; hyphens: none; line-height: 1.2; display: block; max-height: 2.4em; overflow: hidden; text-overflow: clip; } .calplan.shape-grid .pchip.more { font-size: 9.5px; padding: 2px 4px; } } @media (max-width: 700px) { [data-mode="lite"] .calmode { display: none; } [data-mode="lite"] .pcard-next { display: none; } [data-mode="lite"] .prow-folds:not(:has(.pcard-fold:not(.pcard-next))) { display: none; } } @media (max-width: 380px) { .calplan.shape-grid .pday, .calplan.shape-grid .pday.empty { min-height: 78px; padding: 3px 1px 4px; } .calplan.shape-grid .pchip { font-size: 9.5px; padding: 2px 3px; } .calplan.shape-grid .pday-num { font-size: 10px; } .calplan.shape-grid .pday-hrs { font-size: 8.5px; } } .pday#today, .feed-row#today { scroll-margin-top: 80px; } .seg { gap: 0 !important; } .seg { flex-wrap: nowrap; } .seg .btn { border-radius: 0; margin-left: -1px; } .seg .btn:first-child { border-radius: var(--rad-s) 0 0 var(--rad-s); margin-left: 0; } .seg .btn:last-child { border-radius: 0 var(--rad-s) var(--rad-s) 0; } .monthpick { position: relative; display: inline-block; } .monthpick > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; border-radius: var(--rad-s); padding: 0 4px; margin: 0 -4px; } .monthpick > summary::-webkit-details-marker { display: none; } .monthpick > summary { text-decoration: underline dotted; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: .22em; text-decoration-thickness: 1px; } .monthpick[open] > summary { text-decoration-style: solid; text-decoration-color: var(--now); } .monthpick > summary:hover { background: var(--panel2); text-decoration-color: color-mix(in srgb, currentColor 75%, transparent); } .monthpick-shade { display: none; } .monthpick[open] > .monthpick-shade { display: block; position: fixed; inset: 0; z-index: 39; cursor: pointer; background: transparent; -webkit-tap-highlight-color: transparent; } .monthpick-in { position: absolute; z-index: 80; top: calc(100% + 6px); left: 0; width: max-content; min-width: 232px; padding: 10px; border-radius: var(--rad-s); background: var(--panel); border: 1px solid var(--edge2); box-shadow: var(--shadow); font: 400 13px/1.3 var(--ff); letter-spacing: 0; text-transform: none; } .monthpick-year { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .monthpick-year b { font: 700 15px/1 var(--fm); color: var(--ink); } input.monthpick-yin { width: 5.6ch; padding: 4px 2px; border: 1px solid var(--edge2); background: var(--bg2); border-radius: var(--rad-s); box-shadow: none; font: 700 15px/1 var(--fm); color: var(--ink); text-align: center; -webkit-appearance: none; appearance: none; } .monthpick-yin:focus { outline: none; box-shadow: none; border-color: var(--now); color: var(--now); } .btn.monthpick-go { margin-top: 8px; justify-content: center; border-color: color-mix(in srgb, var(--now) 45%, var(--edge)); color: var(--now); } .btn.monthpick-go:hover { border-color: var(--now); background: color-mix(in srgb, var(--now) 12%, transparent); } .btn.monthpick-go[hidden] { display: none; } .monthpick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; } .monthpick-grid .btn { justify-content: center; padding-left: 4px; padding-right: 4px; } @media (max-width: 700px) { .monthpick-in { min-width: 208px; } } .calbar { gap: 8px; flex-wrap: wrap; } .pagehead > .calbar { grid-column: 1 / -1; justify-content: flex-end; } .pagehead > .statusbar { grid-column: 1 / -1; justify-content: flex-start; } @media (min-width: 701px) { .pagehead:has(> .statusbar), .pagehead:has(> .calbar) { grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, auto); } .pagehead > .statusbar, .pagehead > .calbar { grid-column: 2; grid-row: 1; justify-content: flex-end; flex-wrap: nowrap; } .pagehead:has(> .statusbar) > .headstack, .pagehead:has(> .calbar) > .headstack { grid-column: 3; grid-row: 1; } .pagehead > .statusbar, .pagehead > .calbar, .pagehead > .headstack { align-self: start; margin-top: 2px; } } .calhead { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; min-width: 0; } .calhead > span { flex: 0 0 auto; min-width: 0; max-width: min(44vw, 460px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .calhead .iconbtn { flex: none; } .calhead .iconbtn { width: 30px; height: 30px; font-size: 17px; flex: none; } @media (max-width: 700px), (max-height: 480px) { .pickundo .tiny { display: none; } .pickreset .tiny { display: none; } .row.tight.pickhead { flex-wrap: wrap; row-gap: 0; } .pickhead > .pickundo, .pickhead > .pickreset { order: 1; margin-top: 6px; } .pickhead:has(> .pickundo:not([hidden]), > .pickreset:not([hidden]))::after { content:""; flex: 0 0 100%; height: 0; order: 0; } .pagehead > .calbar { justify-content: flex-end; } .pagehead > .statusbar { margin-top: 4px; } .pagehead > .calbar { gap: 5px; row-gap: 6px; } .pagehead > .calbar > .seg { flex: 0 0 auto; } .pagehead > .calbar .seg .btn { padding-left: 8px; padding-right: 8px; } .pagehead > .calbar .cal-nav { flex: 1 1 100%; } } .picking [data-pick] { cursor: pointer; position: relative; } .picking [data-pick]::before { content:""; position: absolute; left: 6px; top: 6px; z-index: 4; width: 16px; height: 16px; border: 2px solid var(--edge2); border-radius: 5px; background: color-mix(in srgb, var(--panel) 88%, transparent); pointer-events: none; transition: .12s; } .picking .plan[data-pick]::before, .picking .item[data-pick]::before, .picking .mat[data-pick]::before { top: 50%; margin-top: -8px; } .picking [data-pick]:hover::before { border-color: var(--now); } .picking [data-pick].picked::before { border-color: var(--now); background: var(--now); box-shadow: inset 0 0 0 2px var(--panel); } .picking [data-pick].picked { box-shadow: inset 0 0 0 2px var(--now); border-radius: var(--rad-s); } .picking .plan[data-pick].picked, .picking .item[data-pick].picked { background-color: color-mix(in srgb, var(--now) 12%, transparent); } .picking .plan[data-pick], .picking .item[data-pick], .picking .mat[data-pick] { padding-left: 28px; } .picking [data-pick] a, .picking [data-pick] button, .picking [data-pick] .iconbtn { pointer-events: none; opacity: .35; } .picking .matrow[data-pick] { padding-left: 28px; } .picking .matrow[data-pick]::before { top: 14px; } .picking .matrow[data-pick] > .mat { opacity: 1; } .picking .matrow[data-pick] .mat-title { opacity: 1; } .picking .pchip[data-pick]::before { content: none; } .picking .pchip[data-pick] { padding-left: 7px; } .picking .pchip[data-pick] a, .picking .pchip[data-pick] button, .picking .pchip[data-pick] .iconbtn { opacity: 1; } .picking .pchip[data-pick].picked { box-shadow: 0 0 0 1px var(--now); } .picking [data-pick] .plan-check { display: none; } .picking .strict[data-pick] { padding-left: 34px; } .picking .strict[data-pick]::before { inset: auto; left: 10px; top: 50%; margin-top: -8px; width: 16px; height: 16px; padding: 0; border: 2px solid var(--edge2); border-radius: 5px; background: color-mix(in srgb, var(--panel) 88%, transparent); animation: none; -webkit-mask: none; mask: none; } .picking .strict[data-pick]:hover::before { border-color: var(--now); } .picking .strict[data-pick].picked::before { border-color: var(--now); background: var(--now); box-shadow: inset 0 0 0 2px var(--panel); } .picking .strict[data-pick].picked { background: color-mix(in srgb, var(--now) 12%, var(--panel)); } .pickundo { display: inline-flex; } .pickundo[hidden] { display: none; } html.picked-only .pick-off { display: none !important; } html.picked-only .daygroup:not(:has([data-pick]:not(.pick-off))), html.picked-only .strictband:not(:has([data-pick]:not(.pick-off))), html.picked-only .morefold:not(:has([data-pick]:not(.pick-off))) { display: none; } html.picked-only .lane:not(:has([data-pick]:not(.pick-off))) .card::after { content:"В отборе тут ничего нет."; display: block; padding: 12px 14px; font: 400 13px/1.5 var(--ff); color: var(--mut); } .pickreset[hidden] { display: none; } .pickreset { border-color: color-mix(in srgb, var(--now) 55%, var(--edge2)); color: var(--now); background: color-mix(in srgb, var(--now) 10%, transparent); } .pickundo .btn { border-color: color-mix(in srgb, var(--wait) 55%, var(--edge2)); color: var(--wait); } .pickheld-row { display: none; } @media (max-width: 700px) and (hover: none) { html.picked-only:not(.picking) .pickheld-row:has(.pickheld:not([hidden])) { display: flex; justify-content: flex-end; margin: 0 0 8px; } html:not(.picking) .curtain .pickreset { display: none; } } .pickbar { position: fixed; z-index: 95; left: calc(10px + var(--safe-l)); right: calc(10px + var(--safe-r)); bottom: var(--fab-bottom); background: var(--panel); border: 1px solid var(--edge2); border-radius: var(--rad); box-shadow: 0 18px 44px -12px rgba(0,0,0,.6); max-height: 62vh; overflow-y: auto; overscroll-behavior: contain; } .pickbar[hidden] { display: none; } .pickbar.busy { opacity: .55; pointer-events: none; } .pickbar-in { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; } .pickbar-cnt { font: 700 12px/1.3 var(--fm); color: var(--ink); } .pickbar.empty .pickbar-cnt { color: var(--ink2); font-weight: 600; } .pickbar.folded { border-color: color-mix(in srgb, var(--now) 42%, var(--edge2)); box-shadow: 0 14px 34px -12px rgba(0,0,0,.55), 0 0 0 1px color-mix(in srgb, var(--now) 14%, transparent); overflow: hidden; } .pickbar-grip { cursor: pointer; } .pickbar.folded .pickbar-grip { background: color-mix(in srgb, var(--now) 7%, transparent); } @media (prefers-reduced-motion: no-preference) { .pickbar.folded .pickbar-grip { background: linear-gradient(100deg, transparent 0 24%, color-mix(in srgb, var(--now) 4%, transparent) 34%, color-mix(in srgb, var(--now) 11%, transparent) 42%, color-mix(in srgb, var(--now) 15%, transparent) 50%, color-mix(in srgb, var(--now) 11%, transparent) 58%, color-mix(in srgb, var(--now) 4%, transparent) 66%, transparent 76% 100%), color-mix(in srgb, var(--now) 7%, transparent); background-size: 320% 100%, 100% 100%; animation: pickwave 6s cubic-bezier(.42, 0, .3, 1) infinite; } } @keyframes pickwave { 0% { background-position: 122% 0, 0 0; } 52%, 100% { background-position: -42% 0, 0 0; } } .pickbar.empty .picksect-do { opacity: .4; pointer-events: none; } .pickrow { display: flex; gap: 5px; align-items: center; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x proximity; padding-bottom: 8px; border-bottom: 1px solid var(--edge); scroll-padding-left: 76px; } .pickrow::-webkit-scrollbar { display: none; } .pickrow > * { flex: none; scroll-snap-align: start; } .pickrow .btn[hidden] { display: none; } .pickrow[hidden], .pickbar details.pickmore[hidden] { display: none; } .pick-n { font: 700 11px/1 var(--fm); color: var(--mut); font-weight: 700; } .pick-n:not(:empty)::before { content:"· "; } .pick-n:empty { display: none; } .btn.on .pick-n { color: inherit; } .pickrow > .pick-label { order: -2; } .pickrow .btn.is-near { order: -1; } .pickrow > .pick-label { position: sticky; left: 0; z-index: 2; background: linear-gradient(90deg, var(--panel) 78%, transparent); padding: 4px 10px 4px 0; margin: 0; } .pickbar-acts { display: flex; flex-direction: column; gap: 10px; } .pickbar .btn { min-height: 32px; } .pickrow .btn.danger { margin-left: 14px; } .picksect-do .pickrow { flex-wrap: wrap; overflow-x: visible; scroll-snap-type: none; align-items: flex-start; row-gap: 6px; gap: 5px; } .picksect-do .pickrow > .pick-label { position: static; background: none; padding: 4px 7px 4px 0; letter-spacing: .5px; } .picksect > .pick-label { align-self: flex-start; } .picksect-do .pickrow .btn { padding-left: 8px; padding-right: 8px; } .picksect-do .pickrow .btn.danger { margin-left: 8px; border-left-width: 1px; box-shadow: -9px 0 0 -8px var(--edge2); } .pickclear { display: inline-flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; flex-wrap: nowrap; } .pickclear .btn { flex: 0 1 auto; min-width: 0; white-space: nowrap; } .picksect-head { row-gap: 6px; } .picksect { display: flex; flex-direction: column; gap: 7px; } .picksect-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .picksect-do { padding-top: 9px; margin-top: 1px; border-top: 1px solid color-mix(in srgb, var(--edge2) 90%, transparent); } .picksect-take > .pickrow:last-child { padding-bottom: 0; border-bottom: 0; } .pickmore { border: 0; margin: 0; } .pickmore > summary { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; padding: 3px 9px; border: 1px dashed var(--edge2); border-radius: 999px; font: 600 11px/1.5 var(--fm); color: var(--mut); list-style: none; width: max-content; } .pickmore > summary::-webkit-details-marker { display: none; } .pickmore > summary:hover { border-color: var(--now); color: var(--now); } .pickmore > summary .pickmore-sign { font-size: 9px; line-height: 1; } .pickmore[open] > summary .pickmore-sign { transform: rotate(180deg); } .pickmore-in { display: flex; flex-direction: column; gap: 7px; padding-top: 8px; } .pickmore-in > .pickrow:last-child { padding-bottom: 0; border-bottom: 0; } .tlog-open { position: absolute; opacity: 0; pointer-events: none; } .tlog-tools { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; gap: 8px; margin: 2px 0 10px; } .tlog-tools .btn { cursor: pointer; white-space: nowrap; min-height: 32px; width: 100%; justify-content: center; text-align: center; padding-left: 8px; padding-right: 8px; } .tlog-foot { display: flex; justify-content: flex-end; margin-top: 2px; padding-top: 6px; border-top: 1px solid var(--edge); } .tlog-foot .tlog-clear { border-color: transparent; background: transparent; color: var(--mut); font-weight: 500; } .tlog-foot .tlog-clear:hover { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, var(--edge)); background: color-mix(in srgb, var(--bad) 8%, transparent); } #tlog-add:checked ~ .tlog-tools label[for="tlog-add"], #tlog-plan:checked ~ .tlog-tools label[for="tlog-plan"] { border-color: var(--now); color: var(--now); background: color-mix(in srgb, var(--now) 10%, transparent); } .tlog-row.tlog-add, form.tlog-plan { display: none; } #tlog-add:checked ~ .tlog-row.tlog-add { display: grid; } #tlog-plan:checked ~ form.tlog-plan { display: flex; } .tlog-plan { align-items: center; flex-wrap: wrap; gap: 6px 8px; padding: 2px 0 10px; border-bottom: 1px dashed var(--edge2); margin-bottom: 16px; } .tlog-plan-label { margin: 0; font: 600 12.5px/1.4 var(--ff); color: var(--ink2); text-transform: none; letter-spacing: normal; } .tlog-plan .tlog-day { padding: 3px 6px; border-radius: var(--rad-s); border-color: var(--edge); background: var(--panel2); } .tlog-plan .tlog-acts { margin-left: auto; } .tlog { display: flex; flex-direction: column; } .tlog-line { border-top: 1px solid var(--edge); } .tlog-line:first-of-type { border-top: 0; } .tlog-switch { position: absolute; opacity: 0; pointer-events: none; } .tlog-read { display: grid; align-items: baseline; gap: 2px 10px; grid-template-columns: minmax(0, 1fr) auto auto auto auto; grid-template-areas:"title day at spent pen""why   why why why  why""note  note note note note"; padding: 6px 0; font: 500 12.5px/1.45 var(--ff); } .tlog-why { grid-area: why; justify-self: start; font: 500 11px/1.4 var(--ff); color: var(--mut); text-decoration: none; } .tlog-why:hover { color: var(--now); } .tlog-c-day { grid-area: day; font: 600 12.5px/1.45 var(--fm); color: var(--ink2); } .tlog-c-at { grid-area: at; font: 500 12.5px/1.45 var(--fm); color: var(--mut); } .tlog-c-spent { grid-area: spent; font: 700 12.5px/1.45 var(--fm); color: var(--ink); white-space: nowrap; } .tlog-c-title { grid-area: title; color: var(--ink2); } .tlog-c-note { grid-area: note; color: var(--mut); font-size: 11.5px; display: flex; align-items: baseline; gap: 6px; margin: 0; text-transform: none; letter-spacing: normal; font-weight: 400; } label.tlog-c-note { cursor: pointer; } label.tlog-c-note:hover .tlog-note-word, label.tlog-c-note:hover .tlog-note-none { color: var(--now); } .tlog-note-word { flex: none; font: 600 9.5px/1.6 var(--fm); font-style: normal; text-transform: uppercase; letter-spacing: .5px; color: var(--mut); } .tlog-note-none { color: var(--mut); opacity: .7; } .tlog-head { display: grid; align-items: end; gap: 2px 10px; grid-template-columns: minmax(0, 1fr) auto auto auto auto; grid-template-areas:"title day at spent pen"; padding: 0 0 5px; } .tlog-head > span { font: 600 10.5px/1.2 var(--fm); color: var(--mut); text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; } .tlog-c-title, .tlog-c-note { min-width: 0; white-space: normal; overflow-wrap: anywhere; } .tlog-c-at i { font: 600 9.5px/1 var(--fm); font-style: normal; color: var(--mut); } .tlog-pen { grid-area: pen; justify-self: end; cursor: pointer; user-select: none; color: var(--mut); font-size: 13px; line-height: 1; padding: 3px 6px; border-radius: var(--rad-s); border: 1px solid transparent; } .tlog-pen:hover { color: var(--ink); border-color: var(--edge2); background: var(--panel2); } @media (hover: hover) { .tlog-pen { opacity: .4; transition: opacity .16s, color .16s; } .tlog-line:hover .tlog-pen, .tlog-line:focus-within .tlog-pen { opacity: 1; } } .tlog-line.is-run { background: color-mix(in srgb, var(--ok) 7%, transparent); } .tlog-live { color: var(--ok); font: 700 12.5px/1.45 var(--fm); white-space: nowrap; } .tlog-sign { font: 700 11px/1 var(--fm); color: var(--mut); cursor: help; margin-left: 3px; } .tlog-edit { display: none; } .tlog-switch:checked ~ .tlog-read { display: none; } .tlog-switch:checked ~ .tlog-edit { display: grid; } .tlog-line:has(> .tlog-switch:checked) { margin: 8px -10px; padding: 2px 10px 4px; border: 1px solid color-mix(in srgb, var(--now) 45%, var(--edge)); border-radius: var(--rad-s); background: color-mix(in srgb, var(--now) 6%, var(--panel)); box-shadow: 0 2px 12px color-mix(in srgb, var(--now) 12%, transparent); } .tlog-line:has(> .tlog-switch:checked) + .tlog-line { border-top-color: transparent; } .tlog:has(.tlog-switch:checked) .tlog-line:not(:has(> .tlog-switch:checked)) { opacity: .5; transition: opacity .16s; } @supports (grid-template-columns: subgrid) { .tlog { display: grid; column-gap: 14px; grid-template-columns: minmax(0, 1fr) auto auto auto auto; } .tlog-line { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; } .tlog-read { grid-column: 1 / -1; grid-template-columns: subgrid; column-gap: inherit; } .tlog-head { grid-column: 1 / -1; grid-template-columns: subgrid; column-gap: inherit; } .tlog-edit { grid-column: 1 / -1; } } .tlog-row { align-items: center; gap: 4px 6px; grid-template-columns: auto auto minmax(0, .9fr) minmax(0, 1.1fr) minmax(0, 1.4fr) auto; grid-template-areas:"day  at   spent title note acts""when when say   say   say  say""tz   tz   tz    tz    tz   tz"; padding: 6px 0; } .tlog-row .tlog-when { grid-area: when; margin-top: 0; white-space: nowrap; } .tlog-row .tlog-say { grid-area: say; margin-top: 0; } .tlog-row .tlog-tz { grid-area: tz; margin-top: 2px; } .tlog-row .tlog-tz .tzpick-label { font: 600 9.5px/1.3 var(--fm); letter-spacing: .5px; margin-bottom: 4px; } .tlog-planedit { grid-template-areas:"day  at   spent title note acts""when when say   say   say  say""tz   tz   tz    tz    tz   tz""bell bell bell bell bell bell"; } .tlog-row .tlog-alarms { grid-area: bell; margin-top: 6px; } .tlog-row .tlog-alarms > summary { padding: 4px 0; } .tlog-new { display: grid; border-bottom: 1px dashed var(--edge2); padding-bottom: 10px; margin-bottom: 16px; } .tlog-day { grid-area: day; } .tlog-at { grid-area: at; } .tlog-spent, .tlog-edit .tlog-live { grid-area: spent; } .tlog-title { grid-area: title; } .tlog-note { grid-area: note; } .tlog-acts { grid-area: acts; } .tlog-row input { padding: 3px 6px; box-sizing: border-box; border-radius: var(--rad-s); min-width: 0; width: auto; border-color: var(--edge); background: var(--panel2); } .tlog-row input:focus { border-color: var(--now); } .tlog-day, .tlog-at, .tlog-spent { font: 600 12.5px/1.4 var(--fm); } .tlog-title, .tlog-note { font: 400 12.5px/1.4 var(--ff); } input.tlog-day[type=date] { width: 128px; } input.tlog-at[type=time] { width: 112px; overflow: hidden; } .tlog-row input[type="time"][data-empty]::before { content:"час"; } .tlog-row input[type="date"][data-empty]::before { content:"день"; } .tlog-acts { display: flex; gap: 3px; } .tlog-acts .btn { flex: 0 0 auto; min-height: 26px; padding: 0 7px; border-color: transparent; background: transparent; display: inline-flex; align-items: center; justify-content: center; } .tlog-acts .btn:hover { border-color: var(--edge2); background: var(--panel2); } .tlog-acts .btn.primary { border-color: transparent; padding: 0 12px; background: var(--now); color: var(--heat-ink); } .tlog-acts .btn.primary:hover { background: color-mix(in srgb, var(--now) 88%, var(--ink)); } .tlog-acts label.btn { cursor: pointer; } .tlog-acts .tlog-drop { order: -1; } .tlog-acts .btn.primary { order: 1; } .tlog-acts .tlog-undone, .tlog-acts .tlog-done { order: -1; } .tlog-acts { flex-wrap: wrap; row-gap: 4px; } .tlog-acts .tlog-drop { margin-right: auto; } .tlog-unpen { margin: 0; padding: 0; border: 0; } .tlog-unpen button { font: inherit; font-size: 14px; line-height: 1; color: var(--mut); cursor: pointer; padding: 3px 6px; border-radius: var(--rad-s); border: 1px solid transparent; background: none; } .tlog-unpen button:hover { color: var(--ink); border-color: var(--edge2); background: var(--panel2); } @media (max-width: 700px) { .tlog-read { row-gap: 2px; column-gap: 7px; padding: 8px 0; max-width: 100%; } .tlog-c-title { font-size: 12.5px; } .tlog-c-day, .tlog-c-at, .tlog-c-spent { font-size: 11px; white-space: nowrap; } .tlog-c-note { font-size: 11.5px; } .tlog-c-note:has(.tlog-note-none) { display: none; } .tlog-c-note .tlog-note-word { display: none; } .tlog-head { column-gap: 7px; padding: 0 0 4px; } .tlog-head > span { font-size: 9.5px; letter-spacing: .4px; } .tlog-pen { align-self: center; margin-block: -4px; } @supports (grid-template-columns: subgrid) { .tlog { column-gap: 7px; } } .tlog-tools .btn { min-height: 40px; } .tlog-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas:"day   at""when  when""tz    tz""spent title""say   say""note  note""acts  acts"; row-gap: 6px; column-gap: 6px; } .tlog-row .tlog-tz { grid-area: tz; margin-top: 0; } .tlog-planedit { grid-template-areas:"day   at""when  when""tz    tz""spent title""say   say""note  note""bell  bell""acts  acts"; } input.tlog-day[type=date], input.tlog-at[type=time] { font-family: var(--ff); font-weight: 500; white-space: nowrap; } .tlog-row input:not([type=checkbox]):not([type=radio]), .tlog-plan input:not([type=checkbox]):not([type=radio]) { min-width: 0; width: 100%; height: 40px; box-sizing: border-box; } input.tlog-day[type=date], input.tlog-at[type=time] { width: 100%; max-width: none; } .tlog-acts { justify-self: end; } .tlog-edit .tlog-acts { justify-self: stretch; } .tlog-edit .tlog-drop { margin-right: auto; } .tlog-acts .btn { min-height: 34px; } .tlog-plan .tlog-day { flex: 1 1 150px; } } .pickmove { border: 0; margin: 0; } .pickmove > summary { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; padding: 3px 9px; border-radius: 999px; width: max-content; border: 1px solid color-mix(in srgb, var(--wait) 55%, transparent); background: color-mix(in srgb, var(--wait) 10%, transparent); font: 700 11px/1.5 var(--fm); color: var(--ink); list-style: none; } .pickmove > summary::-webkit-details-marker { display: none; } .pickmove > summary:hover { border-color: var(--wait); } .pickmove > summary .pickmore-sign { font-size: 9px; line-height: 1; } .pickmove[open] > summary .pickmore-sign { transform: rotate(180deg); } .pickmove-in { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding: 9px 10px; border-radius: var(--rad-s); border: 1px solid color-mix(in srgb, var(--wait) 40%, transparent); background: color-mix(in srgb, var(--wait) 6%, transparent); } .pickmove-note { font: 400 11px/1.5 var(--ff); color: var(--mut); margin: 0; } .pickmove-in .pickrow { flex-wrap: wrap; overflow-x: visible; scroll-snap-type: none; row-gap: 6px; padding-bottom: 8px; } .pickmove-in .pickrow:last-child { padding-bottom: 0; border-bottom: 0; } .pickmove-in .pickrow > .pick-label { position: static; background: none; } .pickpick { width: auto; max-width: 100%; min-width: 132px; padding: 5px 8px; font-size: 12px; border-radius: var(--rad-s); } .pickmove-in [data-proj-sub][hidden] { display: none; } .pickmove-go { margin-top: 2px; padding-top: 9px; border-top: 1px solid color-mix(in srgb, var(--wait) 30%, transparent); align-items: center; } .pickmove-hint { transition: color .15s ease; } .pickmove-hint.is-warn { color: var(--wait); font-weight: 600; } .askrow { padding: 14px; border: 1px solid var(--edge); border-radius: var(--rad-s); background: var(--panel2); } .askrow .btn { margin-bottom: 8px; text-align: left; justify-content: flex-start; } .pick-label { font: 700 9.5px/1.3 var(--fm); letter-spacing: 1px; text-transform: uppercase; color: var(--mut); align-self: center; margin-right: 2px; } .pickrow + .pickrow { border-top: 0; padding-top: 0; } .pickbar .btn.on, .pick-more-item { display: none; } .pick-more-box:checked ~ .pickrow .pick-more-item { display: inline-flex; } .pick-more { border-style: dashed; color: var(--now); } .pick-more-on { display: none; } .pick-more-box:checked ~ .pickrow .pick-more-off { display: none; } .pick-more-box:checked ~ .pickrow .pick-more-on { display: inline; } .pickrow .btn.on { border-color: var(--now); color: var(--now); background: color-mix(in srgb, var(--now) 14%, transparent); } .chippeek { position: fixed; z-index: 96; max-width: min(320px, calc(100vw - 16px)); padding: 10px 12px; border-radius: var(--rad-s); background: var(--panel); border: 1px solid var(--edge2); box-shadow: 0 18px 40px -14px rgba(0,0,0,.65); } .chippeek[hidden] { display: none; } .chippeek-name { font: 700 13.5px/1.35 var(--ff); color: var(--ink); } .chippeek-later { margin: 2px 0 6px; font: 600 11.5px/1.35 var(--ff); color: var(--now); } .chippeek-star { font-size: 12px; vertical-align: 1px; } .chippeek-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 10px; align-items: baseline; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--edge); } .chippeek-facts b { font: 700 9px/1.6 var(--fm); letter-spacing: .9px; text-transform: uppercase; color: var(--mut); white-space: nowrap; } .chippeek-facts span { font-size: 12px; line-height: 1.45; color: var(--ink2); } .chippeek-tint { color: color-mix(in srgb, var(--dc, var(--ink2)) 72%, var(--ink)) !important; font-weight: 600; } .chippeek-open { display: block; width: 100%; margin-top: 9px; padding: 7px 10px; border: 1px solid var(--edge2); border-radius: var(--rad-s); background: var(--panel2); color: var(--ink2); cursor: pointer; font: 600 11.5px/1.4 var(--fm); text-align: center; } .chippeek .chippeek-open:hover { border-color: var(--now); color: var(--now); position: relative; } .chippeek-open + .chippeek-last { margin-top: -1px; border-top-left-radius: 0; border-top-right-radius: 0; } .chippeek-open:has(+ .chippeek-last) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .pchip.peeked { box-shadow: 0 0 0 2px color-mix(in srgb, var(--now) 70%, transparent); } .calplan-week:not(:has(.pchip)) .pday { min-height: 0; padding-top: 4px; padding-bottom: 4px; } .calplan-week:not(:has(.pchip)) .pday-list { display: none; } .calplan:not(.shape-feed) .calplan-week:not(:has(.pchip)) .pday { min-height: 34px; } .calplan:not(.shape-feed) .calplan-week:has(.pchip):not(:has(.pday-list > .pchip:nth-child(3))) .pday, .calplan:not(.shape-feed) .calplan-week:has(.pchip):not(:has(.pday-list > .pchip:nth-child(3))) .pday.empty { min-height: 74px; } .calplan:not(.shape-feed) .calplan-week:has(.pchip):not(:has(.pday-list > .pchip:nth-child(2))) .pday, .calplan:not(.shape-feed) .calplan-week:has(.pchip):not(:has(.pday-list > .pchip:nth-child(2))) .pday.empty { min-height: 52px; } .calplan .pday.empty.out { min-height: 0; padding: 2px 4px; } .bars.sh-wave, .feed-bars.sh-wave { display: block; width: 100%; } .bars.sh-wave svg, .feed-bars.sh-wave svg { width: 100%; height: 100%; min-height: 26px; display: block; } .wave-fill { opacity: .34; } .wave-line { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; } .timer-bar.thick { height: 16px; background: color-mix(in srgb, var(--wait) 22%, var(--panel2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wait) 45%, transparent); } .timer-bar.thick i { background: linear-gradient(90deg, var(--wait), var(--ok)); box-shadow: 0 0 12px -2px color-mix(in srgb, var(--wait) 70%, transparent); } .planwrap { display: block; } .planmonths { display: grid; gap: 18px 16px; grid-template-columns: repeat(auto-fit, minmax(var(--mw, 100%), 1fr)); } .planmonths.dense-1 { --mw: 100%; } .planmonths.dense-3 { --mw: min(100%, 372px); } .planmonths.dense-6 { --mw: min(100%, 302px); } .planmonths.dense-12 { --mw: min(100%, 246px); } .planmonths.busy { opacity: .5; pointer-events: none; } .planmonth { min-width: 0; display: flex; flex-direction: column; } .planmonth > .calplan { flex: 1 1 auto; } .planmonth-head { display: flex; align-items: baseline; gap: 8px; margin: 0 2px 6px; font-size: 13px; } .planmonth-head b { text-transform: capitalize; } .planmonth-head .mono { margin-left: auto; } @media (min-width: 701px) and (min-height: 481px) { .calplan.dense:not(.shape-feed) { overflow: hidden; } .calplan.dense:not(.shape-feed) .pday-top { gap: 3px; flex-wrap: wrap; } .calplan.dense:not(.shape-feed) .pday-hrs { min-width: 0; } .calplan.dense:not(.shape-feed) .calplan-head, .calplan.dense:not(.shape-feed) .calplan-week { min-width: 0; grid-template-columns: repeat(7, minmax(0, 1fr)); } .calplan.dense:not(.shape-feed) .calplan-head { display: grid; padding: 5px 0 4px; font: 700 8.5px/1 var(--fm); letter-spacing: .6px; text-transform: uppercase; color: var(--mut); background: var(--panel2); border-bottom: 1px solid var(--edge); text-align: center; } .calplan.dense:not(.shape-feed) .calplan-head div.we { color: color-mix(in srgb, var(--wait) 70%, var(--mut)); } .calplan.dense:not(.shape-feed) .pday { min-height: 62px; padding: 4px 4px 5px; gap: 3px; border-right: 1px solid var(--edge); } .calplan.dense:not(.shape-feed) .calplan-week .pday:last-child { border-right: 0; } .calplan.dense:not(.shape-feed) .pday.out { display: flex; } .calplan.dense:not(.shape-feed) .pday.empty { min-height: 62px; padding: 4px 4px 5px; } .calplan.dense:not(.shape-feed) .pday.empty .pday-list { display: flex; } .calplan.dense:not(.shape-feed) .pday.empty.out { min-height: 62px; padding: 4px; } .calplan.dense:not(.shape-feed) .pday-wd { display: none; } .calplan.dense:not(.shape-feed) .pday-num { font-size: 10.5px; min-width: 13px; } .calplan.dense:not(.shape-feed) .pday-hrs { padding: 0; font-size: 9px; background: transparent; } .calplan.dense:not(.shape-feed) .pday.today { box-shadow: inset 0 0 0 2px var(--now); } .calplan.dense:not(.shape-feed) .pchip { padding: 2px 3px; gap: 3px; font-size: 9.5px; line-height: 1.25; border-radius: 4px; } .calplan.dense:not(.shape-feed) .pchip-grip, .calplan.dense:not(.shape-feed) .pchip-open, .calplan.dense:not(.shape-feed) .pchip-est { display: none; } .calplan.dense:not(.shape-feed) .pchip-at, .calplan.dense:not(.shape-feed) .pchip-sign { font-size: 8.5px; } .calplan.dense:not(.shape-feed) .pday-list { gap: 2px; } .calplan.d6:not(.shape-feed) .pchip, .calplan.d12:not(.shape-feed) .pchip { font-size: 8.5px; padding: 1px 3px; } .calplan.d12:not(.shape-feed) .pchip-at { display: none; } .calplan.d12:not(.shape-feed) .pday { min-height: 50px; } .calplan.d12:not(.shape-feed) .pday.empty { min-height: 50px; } .calplan.d12:not(.shape-feed) .pday-num { font-size: 9.5px; } @container (max-width: 520px) { .calplan.dense:not(.shape-feed) .pchip-at { display: none; } } @container (max-width: 430px) { .calplan.dense:not(.shape-feed) .pchip { font-size: 8.5px; padding: 1px 3px; } .calplan.dense:not(.shape-feed) .pday { min-height: 52px; } .calplan.dense:not(.shape-feed) .pday.empty { min-height: 52px; } } @container (max-width: 252px) { .calplan.dense:not(.shape-feed) .pday { min-height: 40px; padding: 3px 3px 4px; } .calplan.dense:not(.shape-feed) .pday.empty { min-height: 40px; } .calplan.dense:not(.shape-feed) .pday-num { font-size: 9px; } .calplan.dense:not(.shape-feed) .pday-hrs { font-size: 8px; } .calplan.dense:not(.shape-feed) .pchip { display: block; height: 4px; padding: 0; border: 0; font-size: 0; border-radius: 2px; background: var(--dc, var(--mut)); } .calplan.dense:not(.shape-feed) .pchip > * { display: none; } .calplan.dense:not(.shape-feed) .pchip.is-done { opacity: .3; } .calplan.dense:not(.shape-feed) .pchip.is-gone { background: var(--bad); box-shadow: 0 0 0 1px var(--bad); } .calplan.dense:not(.shape-feed) .pchip.picked { box-shadow: 0 0 0 2px var(--now); background: var(--now); } } } .pickbar-grip { display: flex; align-items: center; gap: 8px; margin: -10px -12px 0; padding: 7px 12px; border-bottom: 1px solid var(--edge); border-radius: calc(var(--rad) - 1px) calc(var(--rad) - 1px) 0 0; } .pickbar.folded .pickbar-grip { border-radius: calc(var(--rad) - 1px); } .pickbar-grip .pickbar-cnt { flex: 1 1 auto; } .pickbar.folded .picksect, .pickbar.folded .pickrow, .pickbar.folded .pickbar-acts { display: none; } .pickbar.folded .pickbar-grip { border-bottom: 0; margin-bottom: -10px; } .pickdock { display: none; } .pickdock:has(.pickbar:not([hidden])) { display: block; width: 100%; min-width: 0; max-width: 100%; margin: 2px 0 14px; } .pickbar.docked { position: static; width: auto; max-height: none; transform: none; overflow: visible; box-shadow: 0 12px 26px -18px rgba(0,0,0,.55); max-width: 100%; } .pickbar.docked .pickbar-in { min-width: 0; } @media (min-width: 701px) and (min-height: 481px) { .pickdock:has(.pickbar.folded:not([hidden])) { position: sticky; top: calc(57px + env(safe-area-inset-top)); z-index: 30; } .pickbar.docked { background: var(--panel); max-height: calc(100vh - 84px); overflow-y: auto; overscroll-behavior: contain; } .pickbar.docked.folded { max-height: none; overflow: hidden; } .pickbar.docked .pickbar-in { gap: 6px; padding: 9px 12px; } .pickbar.docked .pickrow { padding-bottom: 6px; } .pickbar.docked .picksect { gap: 5px; } .pickbar.docked .picksect-do { padding-top: 7px; } @media (min-width: 1000px) { .pickbar.docked .pickbar-in { display: grid; grid-template-columns: minmax(0, 43fr) minmax(0, 57fr); gap: 0 18px; align-items: stretch; } .pickbar.docked .pickbar-grip { grid-column: 1 / -1; margin-bottom: 8px; } .pickbar.docked .picksect-do { border-top: 0; padding-top: 0; margin-top: 0; border-left: 1px solid color-mix(in srgb, var(--edge2) 90%, transparent); padding-left: 18px; margin-left: -18px; } .pickbar.docked .picksect-take > :last-child { padding-bottom: 0; border-bottom: 0; } .pickbar.docked .picksect-take .pickrow { flex-wrap: wrap; overflow-x: visible; scroll-snap-type: none; row-gap: 5px; } .pickbar.docked .picksect-take .pickrow > .pick-label { position: static; background: none; } .pickbar.docked .picksect-take { max-height: 172px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } } } .picking .part[data-pick] { cursor: pointer; position: relative; padding-left: 28px; } .picking .part[data-pick]::before { top: 50%; margin-top: -8px; } .picking .part[data-pick].picked { background: color-mix(in srgb, var(--now) 12%, transparent); } @media (max-width: 700px), (max-height: 480px) { .calplan.shape-grid { overflow: hidden; } .calplan.shape-grid .calplan-head, .calplan.shape-grid .calplan-week { min-width: 0; grid-template-columns: repeat(7, minmax(0, 1fr)); } .calplan.shape-grid .calplan-head { display: grid; padding: 5px 0 4px; font: 700 8.5px/1 var(--fm); letter-spacing: .6px; text-transform: uppercase; color: var(--mut); background: var(--panel2); border-bottom: 1px solid var(--edge); text-align: center; } .calplan.shape-grid .calplan-head div.we { color: color-mix(in srgb, var(--wait) 70%, var(--mut)); } .calplan.shape-grid .pday { min-height: 56px; padding: 4px 3px 5px; gap: 3px; border-right: 1px solid var(--edge); } .calplan.shape-grid .calplan-week .pday:last-child { border-right: 0; } .calplan.shape-grid .pday.out { display: flex; } .calplan.shape-grid .pday.empty { min-height: 56px; padding: 4px 3px 5px; } .calplan.shape-grid .pday.empty .pday-list { display: flex; } .calplan.shape-grid .pday.empty.out { min-height: 56px; } .calplan.shape-grid .calplan-week:not(:has(.pchip)) .pday.empty.out { min-height: 34px; } .calplan.shape-grid .pday-wd { display: none; } .calplan.shape-grid .pday-num { font-size: 10.5px; min-width: 13px; } .calplan.shape-grid .pday-top { gap: 3px; flex-wrap: wrap; } .calplan.shape-grid .pday-hrs { min-width: 0; padding: 0; font-size: 9px; background: transparent; } .calplan.shape-grid .pday.today { box-shadow: inset 0 0 0 2px var(--now); } .calplan.shape-grid .pday-list { gap: 2px; } .calplan.shape-grid .pchip { padding: 1px 2px; gap: 2px; font-size: 8.5px; line-height: 1.25; border-radius: 4px; } .calplan.shape-grid .pchip-grip, .calplan.shape-grid .pchip-open, .calplan.shape-grid .pchip-est, .calplan.shape-grid .pchip-at { display: none; } .calplan.shape-grid .pchip-sign { font-size: 8px; } .calplan.shape-grid .pchip.pnote-chip .pchip-name { flex: 1 1 auto; min-width: 0; font-size: 8.5px; line-height: 1.2; letter-spacing: 0; white-space: normal; overflow-wrap: normal; word-break: normal; hyphens: none; display: block; max-height: 2.4em; overflow: hidden; text-overflow: clip; } .calplan.shape-grid .pnote-dot { font-size: 8px; margin-top: 0; } .calplan:not(.shape-grid) .calplan-head { display: none; } .calplan:not(.shape-grid) .calplan-week { grid-template-columns: minmax(0, 1fr); min-width: 0; } .calplan:not(.shape-grid) .pday { min-height: 0; border-right: 0; padding: 8px 11px; } .calplan:not(.shape-grid) .pday.out { display: none; } .calplan:not(.shape-grid) .pday.empty { min-height: 0; padding: 5px 11px; } .calplan:not(.shape-grid) .pday.empty .pday-list { display: none; } .calplan:not(.shape-grid) .pday-wd { display: inline; } .calplan:not(.shape-grid) .pday-hrs { display: inline; } .calplan:not(.shape-grid) .pday.today { box-shadow: inset 2px 0 0 var(--now); } .calplan:not(.shape-grid) .pchip-grip { display: inline-flex; } .planmonths { --mw: 100% !important; gap: 22px; } } .bars.sh-mosaic, .feed-bars.sh-mosaic { display: flex; align-items: stretch; justify-content: space-between; gap: 3px; height: 34px; margin-top: auto; } .feed-bars.sh-mosaic { height: 26px; } .mos { flex: 1 1 0; min-width: 3px; display: flex; flex-direction: column; gap: 1.5px; justify-content: flex-end; } .mos i { display: block; flex: 1 1 0; min-height: 2px; border-radius: 1.5px; background: color-mix(in srgb, var(--edge2) 42%, transparent); transition: background .35s, box-shadow .35s; } .mos i.on { background: var(--dc); box-shadow: 0 0 6px -2px color-mix(in srgb, var(--dc) 80%, transparent); } .mos.empty i { opacity: .3; } .mos.mosf { display: block; --g: 1.5px; --mos-on: var(--dc); --mos-off: color-mix(in srgb, var(--edge2) 42%, transparent); --step: calc((100% + var(--g)) / max(var(--n, 0), 1)); border-radius: 1.5px; background: repeating-linear-gradient(to top, var(--mos-on) 0, var(--mos-on) calc(var(--step) - var(--g)), transparent 0, transparent var(--step)) bottom / 100% max(0px, calc(var(--n, 0) * (100% + var(--g)) / 5 - var(--g))) no-repeat, repeating-linear-gradient(to top, var(--mos-off) 0, var(--mos-off) calc((100% + var(--g)) / 5 - var(--g)), transparent 0, transparent calc((100% + var(--g)) / 5)); } .mos.mosf.empty { opacity: .3; } [data-light] .mos.mosf { --mos-on: color-mix(in srgb, var(--dc) 82%, #12202C); } @container (min-width: 560px) { .cal-day .bars.sh-mosaic { align-self: stretch; height: auto; min-height: 34px; margin-top: 0; } .cal-day .bars.sh-mosaic .mos { gap: 3px; --g: 3px; } } @media (prefers-reduced-motion: no-preference) { .mos i.on { animation: mos-light .5s ease-out both; animation-delay: calc((4 - var(--i, 0)) * .07s); } } @keyframes mos-light { from { opacity: 0; transform: scaleY(.2); } } .planmonth.is-late .mos i.on { animation: none; } .calscroll .mos i.on { animation: none; } [data-light] .mos i.on { background: color-mix(in srgb, var(--dc) 82%, #12202C); } [data-skin="neon"] .card, [data-skin="neon"] .cal, [data-skin="neon"] .calplan, [data-skin="neon"] .pickbar { border-color: color-mix(in srgb, var(--now) 26%, var(--edge)); } [data-skin="neon"] .card { position: relative; } [data-skin="neon"] .card::after { content:""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; pointer-events: none; z-index: 2; background: linear-gradient(90deg, transparent, var(--now) 22%, #3DF5C0 78%, transparent); opacity: .9; } [data-skin="neon"] .card::before { content:""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; pointer-events: none; z-index: 1; box-shadow: 0 0 12px -2px var(--now); } [data-skin="neon"] h2 { text-transform: uppercase; letter-spacing: 1.2px; font-weight: 700; } [data-skin="neon"] .btn.primary { background: var(--now); border-color: var(--now); color: #06040D; box-shadow: 0 0 18px -4px var(--now); } [data-skin="neon"] .brand-mark { box-shadow: 0 0 16px -2px var(--now); } [data-skin="neon"] .cal-day.today, [data-skin="neon"] .pday.today { box-shadow: inset 0 0 0 1px var(--now), 0 0 20px -6px var(--now); } [data-skin="neon"] .chip { border-radius: 2px; } [data-skin="coal"] .card { box-shadow: inset 0 1px 0 rgba(255,255,255,.05), var(--shadow); } [data-skin="mercury"] .card { position: relative; } [data-skin="mercury"] .card::after { content:""; position: absolute; inset: 0; pointer-events: none; z-index: 3; border-radius: inherit; clip-path: inset(0 round var(--rad)); background: linear-gradient(105deg, transparent 38%, color-mix(in srgb, #FFFFFF 78%, transparent) 47%, color-mix(in srgb, #CFE0EC 55%, transparent) 52%, transparent 61%); opacity: 0; } @media (prefers-reduced-motion: no-preference) { [data-skin="mercury"] .card::after { animation: mercury-sheen 11s ease-in-out 1; } } @keyframes mercury-sheen { 0%, 62%, 100% { opacity: 0; } 80% { opacity: .55; } } [data-skin="mercury"] .top, [data-skin="mercury"] .tabbar { background: linear-gradient(180deg, color-mix(in srgb, #FFFFFF 70%, var(--panel)), var(--panel)); } [data-skin="mercury"] .btn.primary { background: linear-gradient(180deg, color-mix(in srgb, #FFFFFF 26%, var(--now)), var(--now)); border-color: color-mix(in srgb, var(--now) 70%, #0B2733); } [data-skin="mercury"] .brand-mark { background: linear-gradient(140deg, color-mix(in srgb, var(--now) 40%, #FFFFFF), var(--now)); } [data-skin="cyber"] body::before { content:""; position: fixed; inset: -14vmax; z-index: -1; pointer-events: none; background: radial-gradient(54vmax 46vh at calc(14vmax + 14vw) calc(14vmax + 84vh), color-mix(in srgb, #00E5FF 13%, transparent), transparent 66%), radial-gradient(46vmax 40vh at calc(14vmax + 88vw) calc(14vmax + 12vh), color-mix(in srgb, #FF3D7F 10%, transparent), transparent 68%), linear-gradient(178deg, transparent 52%, color-mix(in srgb, #00121C 46%, transparent)); } @media (prefers-reduced-motion: no-preference) { [data-skin="cyber"] body::before { animation: cyber-glow 74s steps(37) infinite; } } @keyframes cyber-glow { 0%, 100% { opacity: .82; } 50% { opacity: 1; } } [data-skin="heather"] body::before { content:""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(84vw 40vh at 50% 112%, color-mix(in srgb, #C98FAE 11%, transparent), transparent 68%), radial-gradient(52vw 34vh at 84% 4%, color-mix(in srgb, #8C7F97 6%, transparent), transparent 70%); } @media (prefers-reduced-motion: no-preference) { [data-skin="heather"] body::before { animation: heather-breath 58s steps(24) infinite; } } @keyframes heather-breath { 0%, 100% { opacity: .74; } 42% { opacity: 1; } 76% { opacity: .6; } } [data-skin="tint"] body::before, [data-skin="tintlight"] body::before { content:""; position: fixed; inset: -18vmax; z-index: -1; pointer-events: none; background: radial-gradient(46vmax 52vh at calc(18vmax + 68vw) calc(18vmax + 22vh), color-mix(in srgb, var(--tint) 9%, transparent), transparent 66%), radial-gradient(38vmax 44vh at calc(18vmax + 18vw) calc(18vmax + 76vh), color-mix(in srgb, var(--tint) 6%, transparent), transparent 64%); } [data-skin="tintlight"] body::before { opacity: .55; } @media (prefers-reduced-motion: no-preference) { [data-skin="tint"] body::before, [data-skin="tintlight"] body::before { animation: tint-drift 84s steps(42) infinite; } } @keyframes tint-drift { 0%, 100% { opacity: 1; } 50% { opacity: .72; } } [data-skin="orbit"] body::before, [data-skin="orbit"] body::after { content:""; position: fixed; left: 0; right: 0; z-index: -1; pointer-events: none; background-repeat: repeat; } [data-skin="orbit"] body::before { top: -300px; height: calc(100dvh + 600px); background-image: radial-gradient(1px 1px at 38px 46px, color-mix(in srgb, #EDEDFF 62%, transparent), transparent), radial-gradient(1px 1px at 152px 24px, color-mix(in srgb, #C0C0E6 55%, transparent), transparent), radial-gradient(1px 1px at 92px 168px, color-mix(in srgb, #EDEDFF 48%, transparent), transparent), radial-gradient(1px 1px at 246px 118px, color-mix(in srgb, #8A97FF 58%, transparent), transparent), radial-gradient(1px 1px at 208px 262px, color-mix(in srgb, #EDEDFF 42%, transparent), transparent), radial-gradient(1px 1px at 14px 226px, color-mix(in srgb, #C0C0E6 46%, transparent), transparent), radial-gradient(1px 1px at 284px 196px, color-mix(in srgb, #EDEDFF 38%, transparent), transparent); background-size: 300px 300px; } [data-skin="orbit"] body::after { top: -220px; height: calc(100dvh + 440px); background-image: radial-gradient(1.7px 1.7px at 58px 96px, color-mix(in srgb, #FFFFFF 88%, transparent), transparent), radial-gradient(1.7px 1.7px at 176px 42px, color-mix(in srgb, #8A97FF 82%, transparent), transparent), radial-gradient(1.5px 1.5px at 124px 184px, color-mix(in srgb, #7CF0C0 62%, transparent), transparent), radial-gradient(1.7px 1.7px at 12px 152px, color-mix(in srgb, #FFFFFF 70%, transparent), transparent); background-size: 220px 220px; } @media (prefers-reduced-motion: no-preference) { [data-skin="orbit"] body::before { animation: orbit-far 150s steps(300) infinite; } [data-skin="orbit"] body::after { animation: orbit-near 52s steps(104) infinite; } } @keyframes orbit-far { to { transform: translate3d(0, 300px, 0); } } @keyframes orbit-near { to { transform: translate3d(0, 220px, 0); } } [data-skin="orbit"] .brand-mark::before { content:""; position: absolute; inset: -5px; border-radius: 50%; pointer-events: none; z-index: -1; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--now) 26%, transparent); background: radial-gradient(2.6px 2.6px at 50% 0%, var(--ok), transparent 70%), radial-gradient(7px 7px at 50% 0%, color-mix(in srgb, var(--ok) 22%, transparent), transparent 70%); background-repeat: no-repeat; } @media (prefers-reduced-motion: no-preference) { [data-skin="orbit"] .brand-mark::before { animation: orbit-moon 33s steps(66) infinite; } } @keyframes orbit-moon { to { transform: rotate(360deg); } } [data-skin="steel"] body::before { content:""; position: fixed; top: 0; bottom: 0; left: 0; width: 100vw; z-index: -1; pointer-events: none; transform: translate3d(-110vw, 0, 0); background: linear-gradient(100deg, transparent 8%, color-mix(in srgb, #6AA9F0 9%, transparent) 42%, color-mix(in srgb, #E7EEF6 6%, transparent) 52%, transparent 88%); } @media (prefers-reduced-motion: no-preference) { [data-skin="steel"] body::before { animation: steel-sweep 54s steps(90) infinite; } } @keyframes steel-sweep { 0%, 58% { transform: translate3d(-110vw, 0, 0); } 100% { transform: translate3d(110vw, 0, 0); } } [data-skin="steel"] .card, [data-skin="steel"] .cal, [data-skin="steel"] .calplan { box-shadow: inset 0 1px 0 color-mix(in srgb, #E7EEF6 12%, transparent), var(--shadow); } [data-skin="fog"] body::before, [data-skin="fog"] body::after { content:""; position: fixed; inset: 0; z-index: -1; pointer-events: none; } [data-skin="fog"] body::before { background: radial-gradient(64vmax 26vh at 26vw 68vh, color-mix(in srgb, #D9DFE7 6%, transparent), transparent 70%); opacity: .78; } [data-skin="fog"] body::after { background: radial-gradient(52vmax 22vh at 82vw 34vh, color-mix(in srgb, #9DBBE6 5%, transparent), transparent 72%); opacity: 1; } @media (prefers-reduced-motion: no-preference) { [data-skin="fog"] body::before { animation: fog-drift 96s steps(48) infinite; } [data-skin="fog"] body::after { animation: fog-drift 96s steps(48) -48s infinite; } } @keyframes fog-drift { 0%, 100% { opacity: .6; } 50% { opacity: 1; } } :root[data-skin="paper"] { --mark-task: #9A6100; --mark-mat: #3A5FA0; --mark-note: #2C6A4C; --bg: #F4EFE4; --bg2: #EDE7DA; --panel: #FBF8F1; --panel2: #F3EEE3; --edge: #E2DACA; --edge2: #C4B9A3; --ink: #201B14; --ink2: #463E32; --mut: #6F6656; --ok: #2C6A4C; --wait: #96631A; --now: #8A5B2B; --bad: #A63B33; --glow: 0 0 0; --shadow: 0 6px 20px rgba(60,48,30,.10); --grad1: 0%; --grad2: 0%; --rad: 12px; --rad-s: 8px; --heat-ink: #FBF8F1; --rt: #9A4E10; --rd: #16775A; } :root[data-skin="lavender"] { --mark-task: #8A5A00; --mark-mat: #4A48B0; --mark-note: #24684C; --bg: #F1EDFA; --bg2: #E9E4F5; --panel: #F8F6FD; --panel2: #F0ECFA; --edge: #E0DAF0; --edge2: #BEB5D8; --ink: #16131F; --ink2: #3A3450; --mut: #665F7C; --ok: #24684C; --wait: #8A5A00; --now: #6B5BC4; --bad: #A32D4E; --glow: 0 0 0; --shadow: 0 6px 20px rgba(50,40,80,.10); --grad1: 0%; --grad2: 0%; --rad: 12px; --rad-s: 8px; --heat-ink: #F8F6FD; --rt: #9A4E10; --rd: #16775A; } :root[data-skin="mint"] { --mark-task: #8F5E00; --mark-mat: #35589B; --mark-note: #226848; --bg: #EEF2EF; --bg2: #E6EBE7; --panel: #F7F9F7; --panel2: #EEF2EF; --edge: #DCE3DE; --edge2: #B9C6BE; --ink: #141A16; --ink2: #36433B; --mut: #616D66; --ok: #2F6A50; --wait: #8F5E00; --now: #3D7563; --bad: #A5343A; --glow: 0 0 0; --shadow: 0 6px 20px rgba(30,60,45,.10); --grad1: 0%; --grad2: 0%; --rad: 12px; --rad-s: 8px; --heat-ink: #F4FAF6; --rt: #9A4E10; --rd: #16775A; } :root[data-skin="sky"] { --mark-task: #8B5A00; --mark-mat: #285FA9; --mark-note: #1F674B; --bg: #EAF5FD; --bg2: #DFEDF8; --panel: #F4FAFF; --panel2: #EAF4FC; --edge: #D4E4F1; --edge2: #A9C7DF; --ink: #101923; --ink2: #2D4155; --mut: #556E83; --ok: #1F674B; --wait: #8D5B00; --now: #246EB1; --bad: #A43142; --glow: 0 0 0; --shadow: 0 9px 26px rgba(30,83,125,.10); --grad1: 0%; --grad2: 0%; --rad: 16px; --rad-s: 10px; --heat-ink: #F4FAFF; --rt: #9A4E10; --rd: #16775A; } [data-skin="paper"] body::before, [data-skin="lavender"] body::before, [data-skin="mint"] body::before { content:""; position: fixed; inset: -16vmax; z-index: -1; pointer-events: none; background: radial-gradient(44vmax 54vh at calc(16vmax + 20vw) calc(16vmax + 10vh), color-mix(in srgb, var(--sun, #E4C98C) 22%, transparent), transparent 66%), radial-gradient(40vmax 44vh at calc(16vmax + 88vw) calc(16vmax + 78vh), color-mix(in srgb, var(--now) 7%, transparent), transparent 70%); } [data-skin="paper"] { --sun: #E7CE9A; } .doodles { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } .doodles .dd { position: absolute; width: var(--sz, 64px); height: var(--sz, 64px); overflow: visible; transform: rotate(var(--turn, 0deg)); } .doodles path { fill: none; stroke: var(--ink, #8A5B2B); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; } @media (prefers-reduced-motion: no-preference) and (hover: hover) { .doodles path { animation: doodle var(--dur, 60s) steps(16) var(--del, 0s) infinite; } } @media (prefers-reduced-motion: reduce), (hover: none) { .doodles path { stroke-dashoffset: var(--stop, 0); opacity: .2; } } @keyframes doodle { 0% { stroke-dashoffset: 1; opacity: 0; } 1% { opacity: .32; } 13% { stroke-dashoffset: var(--stop, 0); opacity: .32; } 29% { stroke-dashoffset: var(--stop, 0); opacity: .32; } 36% { stroke-dashoffset: var(--stop, 0); opacity: 0; } 100% { stroke-dashoffset: var(--stop, 0); opacity: 0; } } @media (max-width: 700px) { .doodles .dd { width: calc(var(--sz, 64px) * .72); height: calc(var(--sz, 64px) * .72); } } [data-skin="lavender"] { --sun: #CFC3F0; } [data-skin="mint"] { --sun: #C8D9CE; } @media (prefers-reduced-motion: no-preference) { [data-skin="paper"] body::before, [data-skin="lavender"] body::before, [data-skin="mint"] body::before { animation: linen-sun 104s steps(52) infinite; } } [data-skin="tintlight"] .card, [data-skin="tintlight"] .cal, [data-skin="tintlight"] .calplan { box-shadow: inset 0 1px 0 rgba(255,255,255,.72), var(--shadow); } [data-skin="sky"] body::before { content:""; position: fixed; inset: -12vmax; z-index: -1; pointer-events: none; background: radial-gradient(94vmax 42vh at calc(12vmax + 50vw) calc(12vmax - 6vh), color-mix(in srgb, #FFFFFF 74%, transparent), transparent 68%), radial-gradient(58vmax 28vh at calc(12vmax + 82vw) calc(12vmax + 78vh), color-mix(in srgb, #8BC3EA 13%, transparent), transparent 72%), radial-gradient(46vmax 22vh at calc(12vmax + 18vw) calc(12vmax + 64vh), color-mix(in srgb, #B5D9F1 10%, transparent), transparent 74%); } [data-skin="sky"] .top, [data-skin="sky"] .tabbar { box-shadow: inset 0 -1px 0 rgba(255,255,255,.72); } [data-skin="sky"] body::after { content:""; position: fixed; left: -1200px; right: -1200px; z-index: -1; top: 5vh; height: 44vh; pointer-events: none; background-repeat: repeat-x; background-size: 1200px 100%; background-image: radial-gradient(110px 46px at 150px 24%, rgba(255,255,255,.84) 0 62%, transparent 74%), radial-gradient(72px 34px at 68px 30%, rgba(255,255,255,.74) 0 62%, transparent 76%), radial-gradient(66px 30px at 232px 31%, rgba(255,255,255,.70) 0 62%, transparent 76%), radial-gradient(88px 36px at 690px 58%, rgba(255,255,255,.80) 0 62%, transparent 74%), radial-gradient(58px 26px at 622px 63%, rgba(255,255,255,.70) 0 62%, transparent 76%), radial-gradient(54px 24px at 752px 64%, rgba(255,255,255,.68) 0 62%, transparent 76%), radial-gradient(74px 30px at 1010px 18%, rgba(255,255,255,.66) 0 62%, transparent 74%), radial-gradient(48px 22px at 958px 23%, rgba(255,255,255,.58) 0 62%, transparent 76%); -webkit-mask-image: linear-gradient(180deg, #000 0 52%, transparent 100%); mask-image: linear-gradient(180deg, #000 0 52%, transparent 100%); } @media (prefers-reduced-motion: no-preference) { [data-skin="sky"] body::before { animation: sky-air 92s steps(46) infinite; } [data-skin="sky"] body::after { animation: sky-clouds 260s steps(520) infinite; } } @keyframes sky-air { 0%, 100% { opacity: .74; } 50% { opacity: 1; } } @keyframes sky-clouds { to { transform: translate3d(1200px, 0, 0); } } [data-skin="linen"] body::before { content:""; position: fixed; inset: -16vmax; z-index: -1; pointer-events: none; background: radial-gradient(44vmax 54vh at calc(16vmax + 20vw) calc(16vmax + 10vh), color-mix(in srgb, #E4C98C 20%, transparent), transparent 66%), radial-gradient(40vmax 44vh at calc(16vmax + 88vw) calc(16vmax + 78vh), color-mix(in srgb, #2F6F5E 6%, transparent), transparent 70%); } @media (prefers-reduced-motion: no-preference) { [data-skin="linen"] body::before { animation: linen-sun 104s steps(52) infinite; } } @keyframes linen-sun { 0%, 100% { opacity: .72; } 50% { opacity: 1; } } [data-skin="apricot"] body::before { content:""; position: fixed; inset: -30vmax; z-index: -1; pointer-events: none; background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 176, 90, .12) 0deg 7deg, rgba(255, 176, 90, 0) 7deg 20deg), radial-gradient(closest-side at 50% 50%, rgba(255, 190, 110, .32), rgba(255, 190, 110, 0) 70%); -webkit-mask-image: radial-gradient(closest-side at 50% 50%, #000 12%, transparent 72%); mask-image: radial-gradient(closest-side at 50% 50%, #000 12%, transparent 72%); translate: calc(-50vw + 14vw) calc(-50vh + 10vh); } @media (prefers-reduced-motion: no-preference) { [data-skin="apricot"] body::before { animation: apricot-rays 360s steps(720) infinite; } } @keyframes apricot-rays { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: no-preference) { .wave-fill, .wave-line { animation: wave-roll 7s steps(14) infinite; } .wave-line { animation-delay: -.4s; } } @keyframes wave-roll { 0%, 100% { transform: translateX(0) scaleY(1); } 50% { transform: translateX(-2.5px) scaleY(1.06); } } @property --fill { syntax:"<number>"; inherits: true; initial-value: 0; } .bars:is(.sh-candles, .sh-crowd, .sh-rings, .sh-fan, .sh-city, .sh-flask, .sh-bubbles) { position: relative; display: flex; width: 100%; height: 34px; margin-top: auto; flex: none; gap: 0; } @container (min-width: 560px) { .cal-day .bars:is(.sh-candles, .sh-crowd, .sh-rings, .sh-fan, .sh-city, .sh-flask, .sh-bubbles) { align-self: stretch; height: auto; min-height: 34px; margin-top: 0; } } .feed-bars:is(.sh-candles, .sh-crowd, .sh-city, .sh-bubbles) { position: relative; display: flex; width: 96px; height: 27px; flex: none; gap: 0; } .feed-bars:is(.sh-rings, .sh-flask) { display: flex; width: 30px; height: 27px; flex: none; } .feed-bars.sh-fan { display: flex; width: 46px; height: 27px; flex: none; } :is(.bars, .feed-bars):is(.sh-rings, .sh-fan, .sh-flask) svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; } :is(.bars, .feed-bars).sh-candles { align-items: flex-end; justify-content: center; column-gap: 7%; padding: 0 6%; } .sh-candles .cnd { position: relative; flex: 0 1 12%; min-width: 3.5px; max-width: 9px; height: calc(12% + var(--u, 0) * (88% - 17px)); border-radius: 2px 2px 1.5px 1.5px; background: linear-gradient(90deg, rgba(255,255,255,.34), rgba(255,255,255,0) 46%, rgba(0,0,0,.14)), var(--dc); } .sh-candles .cnd::before { content:""; position: absolute; left: 50%; bottom: 100%; width: 1px; height: 3px; margin-left: -.5px; border-radius: 1px; background: color-mix(in srgb, var(--ink) 60%, transparent); } .sh-candles .cnd i { position: absolute; left: 50%; bottom: calc(100% + 2px); width: calc(100% + 3px); max-width: 12px; min-width: 6px; aspect-ratio: 1 / 1.55; transform: translateX(-50%); transform-origin: 50% 88%; border-radius: 50% 50% 50% 50% / 64% 64% 36% 36%; background: radial-gradient(58% 52% at 50% 70%, #FFFBE6 0 24%, #FFD45C 44%, #FF9A2E 70%, rgba(255,140,40,0) 74%); box-shadow: 0 0 5px -1px rgba(255,170,60,.55); } .sh-candles .cnd i::before, .sh-candles .cnd i::after { content:""; position: absolute; inset: 0; border-radius: inherit; background: inherit; transform-origin: 50% 88%; opacity: 0; } .sh-candles .cnd i::before { transform: scale(.84, 1.2) rotate(3deg); } .sh-candles .cnd i::after { transform: scale(1.1, .88) rotate(-3deg); } .sh-candles .cnd.empty { height: 12%; background: color-mix(in srgb, var(--edge2) 70%, transparent); } [data-light] .sh-candles .cnd:not(.empty) { background: linear-gradient(90deg, rgba(255,255,255,.3), rgba(255,255,255,0) 46%, rgba(0,0,0,.14)), color-mix(in srgb, var(--dc) 82%, #12202C); } @media (prefers-reduced-motion: no-preference) { .sh-candles .cnd i::before { animation: flame-up var(--fl, 2.6s) ease-in-out var(--fd, 0s) infinite; } .sh-candles .cnd i::after { animation: flame-down var(--fl, 2.6s) ease-in-out var(--fd, 0s) infinite; } .sh-candles .cnd:nth-child(2n) i { --fl: 3.2s; --fd: -1.1s; } .sh-candles .cnd:nth-child(3n) i { --fl: 2.2s; --fd: -.6s; } } @keyframes flame-up { 0%, 12%, 58%, 100% { opacity: 0; } 32% { opacity: .95; } } @keyframes flame-down { 0%, 46%, 88%, 100% { opacity: 0; } 64% { opacity: .9; } } :is(.bars, .feed-bars).sh-crowd { align-items: flex-end; justify-content: center; column-gap: 4%; padding: 0 5%; } .sh-crowd .man { position: relative; flex: none; height: calc(34% + var(--u, 0) * 66%); aspect-ratio: 1 / 2; max-width: 17%; transform-origin: 50% 100%; } .sh-crowd .man i { position: absolute; left: 50%; top: 0; width: 42%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: var(--dc); } .sh-crowd .man b { position: absolute; left: 50%; top: 23%; width: 22%; height: 40%; transform: translateX(-50%); border-radius: 40% 40% 30% 30%; background: var(--dc); } .sh-crowd .man b::before { content:""; position: absolute; left: 50%; top: 8%; width: 430%; height: 13%; min-height: 1.2px; border-radius: 99px; background: var(--dc); transform: translateX(-50%) rotate(-18deg); } .sh-crowd .man b::after { content:""; position: absolute; left: 50%; top: 92%; width: 330%; height: 95%; transform: translateX(-50%); background: var(--dc); clip-path: polygon(38% 0, 62% 0, 100% 100%, 74% 100%, 50% 30%, 26% 100%, 0 100%); } .sh-crowd .man.empty { opacity: .3; height: 34%; } .sh-crowd .man.champ i { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--dc) 45%, transparent); } [data-light] .sh-crowd .man:not(.empty) { --dc-ink: color-mix(in srgb, var(--dc) 82%, #12202C); } [data-light] .sh-crowd .man:not(.empty) i, [data-light] .sh-crowd .man:not(.empty) b::before, [data-light] .sh-crowd .man:not(.empty) b::after { background: var(--dc-ink); } [data-light] .sh-crowd .man:not(.empty) b { background: var(--dc-ink); } @media (prefers-reduced-motion: no-preference) { .sh-crowd .man { animation: brawl-r 3.4s ease-in-out infinite; } .sh-crowd .man:nth-child(2n) { animation-name: brawl-l; animation-duration: 3.9s; animation-delay: -1.3s; } .sh-crowd .man:nth-child(3n) { animation-duration: 2.9s; animation-delay: -.7s; } .sh-crowd .man.champ { animation-duration: 5.2s; } .sh-crowd .man b::before { animation: punch 1.7s ease-in-out infinite; } .sh-crowd .man:nth-child(2n) b::before { animation-duration: 2.1s; animation-delay: -.8s; } .shook .sh-crowd .man { animation: tumble 1.5s cubic-bezier(.3,.7,.35,1) both; } .shook .sh-crowd .man:nth-child(2n) { animation-name: tumble-l; animation-delay: .08s; } .shook .sh-crowd .man:nth-child(3n) { animation-delay: .15s; } } @keyframes brawl-r { 0%, 100% { transform: translateX(0) rotate(-3deg); } 38% { transform: translateX(22%) rotate(10deg); } 52% { transform: translateX(10%) rotate(4deg); } } @keyframes brawl-l { 0%, 100% { transform: translateX(0) rotate(3deg); } 38% { transform: translateX(-22%) rotate(-10deg); } 52% { transform: translateX(-10%) rotate(-4deg); } } @keyframes punch { 0%, 100% { transform: translateX(-50%) rotate(-22deg); } 45% { transform: translateX(-30%) rotate(14deg); } } @keyframes tumble { 0% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-38%) rotate(160deg); } 60% { transform: translateY(-8%) rotate(320deg); } 78% { transform: translateY(-14%) rotate(350deg); } 100% { transform: translateY(0) rotate(360deg); } } @keyframes tumble-l { 0% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-34%) rotate(-150deg); } 60% { transform: translateY(-6%) rotate(-330deg); } 78% { transform: translateY(-12%) rotate(-352deg); } 100% { transform: translateY(0) rotate(-360deg); } } .sh-rings .trk { fill: none; stroke: color-mix(in srgb, var(--dc) 17%, transparent); stroke-width: 2.6; } .sh-rings .arc { fill: none; stroke: var(--dc); stroke-width: 2.6; stroke-linecap: round; transform-box: view-box; transform-origin: 20px 20px; transform: rotate(-90deg); } .sh-rings .rg.empty .trk { stroke: color-mix(in srgb, var(--edge2) 45%, transparent); stroke-width: 1; } [data-light] .sh-rings .arc { stroke: color-mix(in srgb, var(--dc) 82%, #12202C); } @media (prefers-reduced-motion: no-preference) { .sh-rings .arc { animation: ring-spin 11s linear infinite; } .sh-rings .rg:nth-child(2n) .arc { animation-duration: 15s; animation-direction: reverse; } .sh-rings .rg:nth-child(3n) .arc { animation-duration: 8s; } } @keyframes ring-spin { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } } .sh-fan .leaf { fill: var(--dc); fill-opacity: .9; stroke: color-mix(in srgb, var(--dc) 70%, #fff); stroke-width: .35; } .sh-fan .vein { fill: none; stroke: rgba(255,255,255,.55); stroke-width: .5; stroke-linecap: round; } .sh-fan .pt.empty .leaf { fill: color-mix(in srgb, var(--edge2) 60%, transparent); stroke: none; } .sh-fan .core { fill: color-mix(in srgb, var(--wait) 70%, var(--ink2)); } [data-light] .sh-fan .pt:not(.empty) .leaf { fill: color-mix(in srgb, var(--dc) 82%, #12202C); } .sh-fan .leaf, .sh-fan .vein { transform-box: view-box; transform-origin: 24px 28.5px; } @media (prefers-reduced-motion: no-preference) { .sh-fan .pt .leaf, .sh-fan .pt .vein { animation: petal-sway 6.5s ease-in-out infinite; } .sh-fan .pt:nth-child(2n) .leaf, .sh-fan .pt:nth-child(2n) .vein { animation-duration: 7.8s; animation-delay: -2.4s; } .sh-fan .pt:nth-child(3n) .leaf, .sh-fan .pt:nth-child(3n) .vein { animation-duration: 5.6s; animation-delay: -4.1s; } } @keyframes petal-sway { 0%, 100% { transform: rotate(-4deg) scale(.97); } 50% { transform: rotate(4deg) scale(1.02); } } :is(.bars, .feed-bars).sh-city { align-items: flex-end; justify-content: center; column-gap: 3%; padding: 0 5%; } .sh-city .twr { --wall: color-mix(in srgb, var(--dc) 62%, #1A1F2B); --win: rgba(255, 226, 150, .92); position: relative; flex: 1 1 0; min-width: 4px; max-width: 18px; height: calc(14% + var(--u, 0) * (86% - 7px)); border-radius: 1.5px 1.5px 0 0; background-color: var(--wall); background-image: repeating-linear-gradient(180deg, var(--wall) 0 1.6px, transparent 1.6px 4px), linear-gradient(90deg, transparent 0 18%, var(--win) 18% 40%, transparent 40% 60%, var(--win) 60% 82%, transparent 82%); background-position: 0 2px, 0 0; } .sh-city .twr.empty { height: 10%; background: color-mix(in srgb, var(--edge2) 60%, transparent); } .sh-city .twr.champ::before { content:""; position: absolute; left: 50%; bottom: 100%; width: 1.2px; height: 5px; margin-left: -.6px; background: var(--wall); } .sh-city .twr.champ::after { content:""; position: absolute; left: 50%; bottom: calc(100% + 4px); width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%; background: #FF5A4A; box-shadow: 0 0 4px 1px rgba(255, 90, 74, .7); } [data-light] .sh-city .twr:not(.empty) { --wall: color-mix(in srgb, var(--dc) 78%, #12202C); } @media (prefers-reduced-motion: no-preference) { .sh-city .twr:not(.empty) { animation: city-glow 7s ease-in-out infinite; } .sh-city .twr:nth-child(2n) { animation-duration: 9.5s; animation-delay: -3s; } .sh-city .twr:nth-child(3n) { animation-duration: 5.8s; animation-delay: -1.4s; } .sh-city .twr.champ::after { animation: beacon 1.8s steps(1, end) infinite; } } @keyframes city-glow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.18); } } @keyframes beacon { 0%, 100% { opacity: 1; } 50% { opacity: .15; } } .sh-flask .glass { fill: color-mix(in srgb, var(--panel) 55%, transparent); } .sh-flask .lay { fill: var(--dc); } [data-light] .sh-flask .lay { fill: color-mix(in srgb, var(--dc) 84%, #12202C); } .sh-flask .edge { fill: none; stroke: color-mix(in srgb, var(--ink) 38%, transparent); stroke-width: .9; stroke-linejoin: round; } .sh-flask .shine { fill: none; stroke: rgba(255,255,255,.6); stroke-width: .9; stroke-linecap: round; } .sh-flask .surf { fill: none; stroke: rgba(255,255,255,.75); stroke-width: .8; } @media (prefers-reduced-motion: no-preference) { .sh-flask .surf { animation: surf-roll 3.2s linear infinite; } } @keyframes surf-roll { to { transform: translateX(12px); } } :is(.bars, .feed-bars).sh-bubbles { container-type: size; overflow: hidden; } .sh-bubbles .bbl { --d: min(calc((18 + var(--u, 0) * 38) * 1cqh), calc((10 + var(--u, 0) * 16) * 1cqw)); position: absolute; width: var(--d); height: var(--d); border-radius: 50%; left: calc((14 + var(--i, 0) * (72 / max(var(--n, 5) - 1, 1))) * 1cqw - var(--d) / 2); top: calc(52cqh - var(--d) / 2); background: radial-gradient(circle at 33% 30%, rgba(255,255,255,.8) 0 11%, rgba(255,255,255,0) 13%), radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--dc) 45%, transparent) 0 52%, var(--dc) 100%); box-shadow: inset 0 0 0 .8px color-mix(in srgb, var(--dc) 70%, transparent); } .sh-bubbles .bbl.empty { --d: calc(14 * 1cqh); background: color-mix(in srgb, var(--edge2) 55%, transparent); box-shadow: none; opacity: .6; } [data-light] .sh-bubbles .bbl:not(.empty) { background: radial-gradient(circle at 33% 30%, rgba(255,255,255,.85) 0 11%, rgba(255,255,255,0) 13%), radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--dc) 40%, transparent) 0 52%, color-mix(in srgb, var(--dc) 84%, #12202C) 100%); } @media (prefers-reduced-motion: no-preference) { .sh-bubbles .bbl:not(.empty) { animation: brown-a 19s ease-in-out infinite alternate; } .sh-bubbles .bbl:nth-child(2n):not(.empty) { animation-name: brown-b; animation-duration: 23s; animation-delay: -7s; } .sh-bubbles .bbl:nth-child(3n):not(.empty) { animation-name: brown-c; animation-duration: 16s; animation-delay: -11s; } .sh-bubbles .bbl:nth-child(5n):not(.empty) { animation-duration: 27s; } } @keyframes brown-a { 0% { transform: translate(0, 0); } 17% { transform: translate(5cqw, -16cqh); } 36% { transform: translate(-4cqw, -6cqh); } 55% { transform: translate(6cqw, 12cqh); } 78% { transform: translate(-6cqw, 6cqh); } 100% { transform: translate(2cqw, -10cqh); } } @keyframes brown-b { 0% { transform: translate(0, 0); } 22% { transform: translate(-6cqw, 10cqh); } 41% { transform: translate(3cqw, 16cqh); } 63% { transform: translate(-3cqw, -14cqh); } 84% { transform: translate(6cqw, -4cqh); } 100% { transform: translate(-2cqw, 8cqh); } } @keyframes brown-c { 0% { transform: translate(0, 0); } 25% { transform: translate(4cqw, 14cqh); } 48% { transform: translate(-6cqw, 4cqh); } 70% { transform: translate(2cqw, -16cqh); } 100% { transform: translate(-4cqw, -4cqh); } } .calplan .pday.today .pday-num { background: var(--now); color: var(--heat-ink); padding: 2px 6px; border-radius: 999px; font-weight: 800; } .calplan .pday.today { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--now) 55%, transparent); } .calplan.dense:not(.shape-feed) .pday.today .pday-num { padding: 1px 4px; } .calplan:not(.shape-feed) .calplan-week + .calplan-week .pday { border-top: 1px solid color-mix(in srgb, var(--edge2) 55%, var(--edge)); } .calplan .pday.past { opacity: .88; } .calplan .pday.past.today { opacity: 1; } .planmonth-load { margin-left: auto; display: inline-flex; align-items: baseline; gap: 7px; font: 500 11px/1 var(--fm); color: var(--mut); white-space: nowrap; } .planmonth-load b { font-weight: 800; color: color-mix(in srgb, var(--wait) 78%, var(--ink2)); } @media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) { html { overscroll-behavior-y: contain; } } .pull { position: fixed; z-index: 90; left: 50%; top: 0; width: 34px; height: 34px; margin-left: -17px; display: grid; place-items: center; border-radius: 50%; background: var(--panel); border: 1px solid var(--edge2); box-shadow: var(--shadow); transform: translate3d(0, calc(var(--pull, 0px) - 46px), 0) scale(calc(.6 + var(--part, 0) * .4)); opacity: var(--part, 0); pointer-events: none; } .pull:not(.ready):not(.on) { transition: transform .22s ease, opacity .22s ease; } .pull-ring { width: 18px; height: 18px; border-radius: 50%; background: conic-gradient(var(--now) calc(var(--part, 0) * 360deg), transparent 0); -webkit-mask: radial-gradient(closest-side, transparent 58%, #000 62%); mask: radial-gradient(closest-side, transparent 58%, #000 62%); } .pull.ready { border-color: var(--now); box-shadow: var(--glow) var(--now), var(--shadow); } .pull.on { opacity: 1; } @media (prefers-reduced-motion: no-preference) { .pull.on .pull-ring { background: conic-gradient(transparent 0 25%, var(--now) 92%, transparent 0); animation: pull-spin .8s linear infinite; } } @keyframes pull-spin { to { transform: rotate(360deg); } } .wshots { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; } .wshot { display: flex; flex-direction: column; flex: none; border-radius: 22px; padding: 14px 14px 12px; overflow: hidden; font: 11px/1.25 var(--ff); white-space: nowrap; border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); box-shadow: 0 12px 26px -16px rgba(0,0,0,.75); } .wshot-mid { width: 329px; height: 155px; max-width: 100%; } .wshot-sm { width: 155px; height: 155px; } .wshot-head { display: flex; justify-content: space-between; gap: 8px; } .wshot-head b { font-weight: 600; } .wshot-top { display: flex; align-items: flex-end; gap: 8px; margin-top: 6px; } .wshot-num { font: 700 31px/1 var(--ff); letter-spacing: -.03em; } .wshot-sm .wshot-num { font-size: 28px; } .wshot-num.wshot-blank, .wshot-sm .wshot-num.wshot-blank { font-size: 22px; } .wshot-side { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .wshot-side b { font-weight: 600; font-size: 11px; } .wshot-side i { font-style: normal; font-size: 10px; } .wshot-strip { display: flex; align-items: flex-end; gap: 4px; margin: 3px 0; } .wshot-strip u { display: flex; align-items: flex-end; height: 100%; border-radius: 3px; text-decoration: none; overflow: hidden; } .wshot-strip i { display: block; width: 100%; border-radius: 3px; } .wshot-row { display: flex; align-items: center; gap: 5px; margin-top: 2px; min-width: 0; } .wshot-strip + .wshot-row { margin-top: 7px; } .wshot-row u { text-decoration: none; font-size: 10px; flex: none; } .wshot-row b { min-width: 0; font-weight: 400; font-size: 12px; overflow: hidden; text-overflow: ellipsis; } .wshot-row span { margin-left: auto; padding-left: 8px; font-size: 10.5px; flex: none; } .wshot-sm > .wshot-strip { margin-top: 7px; } .wshot-now { margin-top: 5px; } .wshot-now b { font-weight: 600; } .wshot-now span { font-weight: 700; font-size: 11px; } .wshot-tally { flex: none; margin-top: 5px; font: 700 10.5px/1.35 var(--fm); letter-spacing: .2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wshot-section { flex: none; margin-top: 6px; font: 700 9px/1.2 var(--fm); letter-spacing: .08em; } .wshot-section-next { margin-top: 5px; } .wshot-foot { margin-top: auto; } .wshot-foot b, .wshot-foot span { font-weight: 600; font-size: 11px; } .script { white-space: pre; word-break: normal; font-size: 11.5px; line-height: 1.55; } .howto { margin: 8px 0 0; padding-left: 22px; } .howto li { font-size: 13.5px; line-height: 1.65; color: var(--ink2); margin-top: 6px; } .howto li b { color: var(--ink); } :root { --paper: #D8CCA9; --paper2: #C8BC93; --paper-ink: #23293A; --paper-ink2: #6A6752; --paper-line: rgba(50,70,120,.22); --paper-red: #B23A2E; --pin1: #E4594C; --pin2: #97271F; --paper-fiber: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .30 0 0 0 0 .22 0 0 0 0 .08 .35 0 0 0 -.12'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url%28%23f%29'/%3E%3C/svg%3E"); --paper-wash: rgba(0,0,0,.045); --paper-wash2: rgba(0,0,0,.08); --paper-glass: rgba(255,255,255,.3); --paper-glass2: rgba(255,255,255,.6); --paper-on-red: #FFF3EC; --ff-hand:"Bradley Hand","Segoe Print","Noteworthy","Marker Felt","Segoe Script","Comic Neue","Kalam","Chilanka","Comic Sans MS", var(--ff); --hand-slant: italic; } .paper { --pad-x: 16px; --rule-in: 34px; --tear: 10px; --rule-h: 30px; position: relative; margin: 26px 2px 14px; padding: calc(var(--tear) + 12px) var(--pad-x) calc(var(--tear) + 6px); color: var(--paper-ink); background-image: var(--paper-fiber), radial-gradient(140% 100% at 50% 30%, transparent 58%, rgba(90,70,30,.09) 100%), linear-gradient(163deg, var(--paper) 0%, var(--paper2) 100%); border-radius: 0; transform: rotate(-.45deg); -webkit-mask-image: radial-gradient(circle var(--tear) at 50% 100%, #000 97%, transparent 100%), radial-gradient(circle calc(var(--tear) - 3px) at 50% 100%, #000 97%, transparent 100%), radial-gradient(circle var(--tear) at 50% 0%, #000 97%, transparent 100%), radial-gradient(circle calc(var(--tear) - 3px) at 50% 0%, #000 97%, transparent 100%), linear-gradient(#000, #000); -webkit-mask-size: 23px var(--tear), 14px calc(var(--tear) - 3px), 23px var(--tear), 14px calc(var(--tear) - 3px), 100% calc(100% - var(--tear) * 2 + 2px); -webkit-mask-position: 3px 0, 0 3px, 7px 100%, 5px calc(100% - 3px), 0 calc(var(--tear) - 1px); -webkit-mask-repeat: repeat-x, repeat-x, repeat-x, repeat-x, no-repeat; mask-image: radial-gradient(circle var(--tear) at 50% 100%, #000 97%, transparent 100%), radial-gradient(circle calc(var(--tear) - 3px) at 50% 100%, #000 97%, transparent 100%), radial-gradient(circle var(--tear) at 50% 0%, #000 97%, transparent 100%), radial-gradient(circle calc(var(--tear) - 3px) at 50% 0%, #000 97%, transparent 100%), linear-gradient(#000, #000); mask-size: 23px var(--tear), 14px calc(var(--tear) - 3px), 23px var(--tear), 14px calc(var(--tear) - 3px), 100% calc(100% - var(--tear) * 2 + 2px); mask-position: 3px 0, 0 3px, 7px 100%, 5px calc(100% - 3px), 0 calc(var(--tear) - 1px); mask-repeat: repeat-x, repeat-x, repeat-x, repeat-x, no-repeat; filter: drop-shadow(0 10px 14px rgba(0,0,0,.45)); } [data-light] { --paper: #FCF6E4; --paper2: #F1E7C9; --paper-ink: #1E2536; --paper-ink2: #6E6A55; --paper-line: rgba(40,60,110,.20); } :root[data-skin="fog"] { --paper-base: #313946; --paper-base2: #2B323D; } :root[data-skin="graphite"] { --paper-base: #34302B; --paper-base2: #2C2824; } :root[data-skin="heather"] { --paper-base: #332B34; --paper-base2: #2B242C; } :root[data-skin="orbit"] { --paper-base: #26284A; --paper-base2: #212343; } :root[data-skin="steel"] { --paper-base: #1F2A38; --paper-base2: #1A2330; } :root[data-skin="coal"] { --paper-base: #1A1C20; --paper-base2: #15171A; } :root[data-skin="neon"] { --paper-base: #281D3B; --paper-base2: #211831; } :root[data-skin="cyber"] { --paper-base: #13213A; --paper-base2: #0F1A2F; } :root[data-skin="tint"] { --paper-base: color-mix(in srgb, var(--tint) 12%, #222731); --paper-base2: color-mix(in srgb, var(--tint) 10%, #1C2029); } :root[data-skin="fog"], :root[data-skin="graphite"], :root[data-skin="heather"], :root[data-skin="orbit"], :root[data-skin="steel"], :root[data-skin="coal"], :root[data-skin="neon"], :root[data-skin="cyber"], :root[data-skin="tint"] { --paper: color-mix(in srgb, var(--paper-base) 10%, #8E8262); --paper2: color-mix(in srgb, var(--paper-base2) 10%, #7D7152); --paper-ink: #15161B; --paper-ink2: #2A251C; --paper-line: rgba(24,36,78,.26); --paper-red: #74201A; --pin1: #D9594C; --pin2: #7E231B; --paper-wash: rgba(0,0,0,.07); --paper-wash2: rgba(0,0,0,.12); --paper-glass: rgba(255,255,255,.12); --paper-glass2: rgba(255,255,255,.22); --paper-on-red: #FFF3EC; } .paper { --wave-1: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%206'%20preserveAspectRatio='none'><path%20d='M2%203.5%20C%2080%202.7%2C%20150%204.0%2C%20220%203.1%20C%20258%202.7%2C%20280%203.3%2C%20298%203.0'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'/></svg>"); --wave-2: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%206'%20preserveAspectRatio='none'><path%20d='M2%202.8%20C%2090%203.8%2C%20170%202.5%2C%20250%203.4%20L%20298%203.0'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'/></svg>"); --wave-3: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%206'%20preserveAspectRatio='none'><path%20d='M2%202.7%20C%20100%203.0%2C%20200%203.3%2C%20298%203.6'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'/></svg>"); --wave-4: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%206'%20preserveAspectRatio='none'><path%20d='M2%203.6%20C%20100%203.3%2C%20200%203.0%2C%20298%202.6'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'/></svg>"); --wave-5: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%206'%20preserveAspectRatio='none'><path%20d='M2%203.1%20C%2070%203.8%2C%20130%202.5%2C%20190%203.4%20C%20240%204.0%2C%20270%202.8%2C%20298%203.2'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'/></svg>"); --wave-6: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%206'%20preserveAspectRatio='none'><path%20d='M2%203.0%20C%20110%202.8%2C%20210%203.2%2C%20298%203.0'%20fill='none'%20stroke='%23000'%20stroke-width='1.9'%20stroke-linecap='round'/></svg>"); --wave-7: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%206'%20preserveAspectRatio='none'><path%20d='M2%203.3%20C%2060%202.6%2C%20120%203.9%2C%20180%203.0%20C%20230%202.4%2C%20265%203.4%2C%20298%202.9'%20fill='none'%20stroke='%23000'%20stroke-width='1.4'%20stroke-linecap='round'/></svg>"); } [data-light] .paper { filter: drop-shadow(0 9px 12px rgba(70,58,28,.28)); } .paper::before { content:""; position: absolute; left: calc(var(--pad-x) + var(--rule-in) - 17px); top: 0; bottom: 0; width: 1px; background: var(--paper-red); opacity: .5; } .paper.long { transform: none; } .paper-in { position: relative; z-index: 1; } .paper:not(.slip) .paper-in { background-image: repeating-linear-gradient( to bottom, transparent 0 calc(var(--rule-h) - 1px), var(--paper-line) calc(var(--rule-h) - 1px) var(--rule-h)); background-origin: content-box; background-repeat: repeat; } .paper-pin { position: absolute; left: 50%; top: 6px; z-index: 2; width: 17px; height: 17px; margin-left: -8px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.85) 0 16%, transparent 46%), linear-gradient(150deg, var(--pin1), var(--pin2)); box-shadow: 0 3px 7px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.18) inset; } .paper-pin::after { content:""; position: absolute; left: 50%; top: 12px; width: 11px; height: 6px; margin-left: -5px; border-radius: 50%; background: rgba(0,0,0,.22); filter: blur(2px); } .paper-in { padding-left: var(--rule-in); } .paper-head, .pnote, .paper-add, .paper-fill, .paper-empty { margin-left: calc(-1 * (var(--pad-x) + var(--rule-in))); margin-right: calc(-1 * var(--pad-x)); padding-left: calc(var(--pad-x) + var(--rule-in)); padding-right: var(--pad-x); } .paper-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 22px 2px 8px; } .paper-title h2 { margin: 0; } .paper-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; box-sizing: border-box; height: var(--rule-h); font: var(--hand-slant) 700 15px/var(--rule-h) var(--ff-hand); letter-spacing: .2px; padding-bottom: 0; border-bottom: 0; box-shadow: inset 0 -1px var(--paper-line); } .paper-head b { font-weight: 700; } .paper-count { font: var(--hand-slant) 600 12px/var(--rule-h) var(--ff-hand); color: var(--paper-ink2); white-space: nowrap; } .paper-list { list-style: none; margin: 0; padding: 0; } .pnote { position: relative; padding-bottom: 0; line-height: var(--rule-h); border-bottom: 0; box-shadow: none; padding-bottom: var(--rule-h); } .pnote:not(:last-child)::after { content:""; position: absolute; pointer-events: none; -webkit-mask-size: 82% 100%; mask-size: 82% 100%; left: calc(var(--pad-x) + var(--rule-in)); right: var(--pad-x); bottom: calc(var(--rule-h) / 2 - 3px); height: 6px; background-color: color-mix(in srgb, var(--paper-ink2) 78%, transparent); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .pnote:nth-child(7n+1)::after { -webkit-mask-image: var(--wave-1); mask-image: var(--wave-1); } .pnote:nth-child(7n+2)::after { -webkit-mask-image: var(--wave-2); mask-image: var(--wave-2); } .pnote:nth-child(7n+3)::after { -webkit-mask-image: var(--wave-3); mask-image: var(--wave-3); } .pnote:nth-child(7n+4)::after { -webkit-mask-image: var(--wave-4); mask-image: var(--wave-4); } .pnote:nth-child(7n+5)::after { -webkit-mask-image: var(--wave-5); mask-image: var(--wave-5); } .pnote:nth-child(7n+6)::after { -webkit-mask-image: var(--wave-6); mask-image: var(--wave-6); } .pnote:nth-child(7n)::after { -webkit-mask-image: var(--wave-7); mask-image: var(--wave-7); } .pnote-hit { display: block; margin: 0; padding: 0; color: inherit; text-decoration: none; border-radius: 4px; border: 0; transition: background .14s; font: var(--hand-slant) 400 19px/var(--rule-h) var(--ff-hand); } .pnote-hit:hover { background: var(--paper-wash); } [data-light] .pnote-hit:hover { background: rgba(40,50,80,.05); } .pnote-hit:active { background: var(--paper-wash2); } .pnote-text { display: inline; font: var(--hand-slant) 400 19px/var(--rule-h) var(--ff-hand); color: var(--paper-ink); white-space: pre-wrap; word-break: break-word; background-image: linear-gradient(var(--paper-red), var(--paper-red)); background-repeat: no-repeat; background-position: 0 58%; background-size: 0% 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size .26s cubic-bezier(.2,.8,.2,1), color .26s; } .pnote.is-struck .pnote-text { background-size: 100% 2px; color: var(--paper-ink2); } .pnote.is-struck { opacity: .72; } .pnote-when.gone { color: var(--paper-red); opacity: .8; } .pnote-side { position: absolute; bottom: var(--rule-h); height: var(--rule-h); right: var(--pad-x); display: flex; align-items: center; gap: 2px; font: 500 10.5px/1.3 var(--ff); color: var(--paper-ink2); } .pnote-when { opacity: .7; white-space: nowrap; font: var(--hand-slant) 600 11px/1.3 var(--ff-hand); } .pnote-when.due { opacity: 1; font: var(--hand-slant) 700 11.5px/1.3 var(--ff-hand); color: color-mix(in srgb, var(--paper-red) 55%, var(--paper-ink)); } .pnote.heat-soon .pnote-text { font-weight: 600; } .pnote.heat-now .pnote-text { font-weight: 700; } .pnote.heat-now .pnote-when.due { color: var(--paper-red); } .pnote-gap { display: inline-block; vertical-align: bottom; width: var(--pnote-side); height: 1px; } .pnote.has-when .pnote-gap { width: var(--pnote-side-when); } .pnote { --pnote-side: 130px; --pnote-side-when: 152px; --pnote-side-time: 202px; } .pnote.has-time .pnote-gap { width: var(--pnote-side-time); } .pnote.is-struck .pnote-text { font-weight: 400; } .pnote-from { display: inline-block; margin: 0; max-width: 70%; vertical-align: middle; font: 500 10.5px/var(--rule-h) var(--ff); color: var(--paper-ink2); text-decoration: none; border-bottom: 1px dotted currentColor; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pnote-from:hover { color: var(--paper-ink); } .pnote-from.none { border: 0; opacity: .75; } .pnote-from .chip { border: 0; background: none; padding: 0; font: inherit; color: inherit; } .pnote-edit, .pnote-copy { padding: 2px 5px; line-height: 1; border-radius: 4px; color: var(--paper-ink2); opacity: .5; font: 600 12px/1 var(--ff); text-decoration: none; transition: .14s; } .pnote-edit:hover, .pnote-copy:hover { opacity: 1; color: var(--paper-ink); background: var(--paper-wash2); } .pnote-act { margin: 0; } .pnote-act button { margin: 0; padding: 2px 5px; min-width: 0; line-height: 1; background: none; border: 0; box-shadow: none; cursor: pointer; color: var(--paper-ink2); opacity: .55; font: 600 12px/1 var(--ff); border-radius: 4px; transition: .14s; } .pnote-act button:hover { opacity: 1; color: var(--paper-ink); background: var(--paper-wash2); } .pnote.is-struck .pnote-act button { opacity: .8; color: var(--paper-red); } .pnote-off { margin: 0; } .pnote-off button { margin: 0; padding: 2px 5px; min-width: 0; line-height: 1; background: none; border: 0; box-shadow: none; cursor: pointer; color: var(--paper-ink2); opacity: .5; font: 600 12px/1 var(--ff); border-radius: 4px; transition: .14s; } .pnote-off button:hover { opacity: 1; color: var(--paper-red); background: var(--paper-wash2); } .pnote.is-gone { opacity: 0; transform: translateX(-14px); transition: opacity .16s, transform .16s; pointer-events: none; } .paper-empty { margin-top: 0; margin-bottom: 0; font: var(--hand-slant) 400 17px/var(--rule-h) var(--ff-hand); color: var(--paper-ink2); box-shadow: none; padding-bottom: var(--rule-h); } .paper-fill { height: calc(var(--rule-h) * 8); } .paper-add { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto var(--rule-h); align-items: center; align-content: start; column-gap: 10px; row-gap: 0; padding-top: 0; padding-bottom: 0; min-height: calc(var(--rule-h) * 3); border-bottom: 0; box-shadow: none; } .paper-add textarea { grid-column: 1 / -1; box-sizing: border-box; min-width: 0; min-height: calc(var(--rule-h) * 2); height: calc(var(--rule-h) * 2); margin: 0; padding: 0 2px; resize: none; border: 0; border-radius: 0; box-shadow: none; color: var(--paper-ink); background: none; font: var(--hand-slant) 400 19px/var(--rule-h) var(--ff-hand); overflow: hidden; } .paper-add textarea:focus { outline: none; background: rgba(255,255,255,.10); } [data-light] .paper-add textarea:focus { background: rgba(255,255,255,.5); } .paper-add textarea::placeholder { color: var(--paper-ink2); opacity: .75; } .paper-add button { grid-column: 2; box-sizing: border-box; height: max(20px, calc(var(--rule-h) - 8px)); margin: 0; padding: 0 13px; border-radius: 999px; background: var(--paper-red); color: var(--paper-on-red); border: 0; font: 700 11.5px/1 var(--ff); letter-spacing: .3px; cursor: pointer; box-shadow: 0 4px 10px -4px rgba(0,0,0,.5); transition: transform .14s, filter .14s; } .paper-add button:hover { filter: brightness(1.08); transform: translateY(-1px); } .paper-add button:active { transform: translateY(0) scale(.97); } .paper.slip { transform: none; margin: 10px 0 0; min-height: 0; padding-top: calc(var(--tear) + 8px); } .paper.slip .paper-pin { display: none; } .paper.slip .paper-head { font-size: 13px; padding-bottom: 7px; } .paper.slip .pnote-text { font-size: 14.5px; line-height: 1.6; } .paper.big { transform: none; margin: 4px 0 0; } .paper.big .paper-pin { display: none; } .paper.big .paper-head { font-size: 16px; } .attach { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .attach-word { font: 700 10.5px/1 var(--ff); letter-spacing: .8px; text-transform: uppercase; color: var(--mut); margin-right: 2px; } .btn.note { border-color: color-mix(in srgb, var(--note2) 55%, var(--edge)); color: color-mix(in srgb, var(--note1) 80%, var(--ink)); background: color-mix(in srgb, var(--note2) 10%, transparent); } .btn.note:hover { border-color: var(--note2); color: color-mix(in srgb, var(--note1) 92%, var(--ink)); background: color-mix(in srgb, var(--note2) 20%, transparent); } [data-light] .btn.note { color: color-mix(in srgb, #A2601C 88%, var(--ink)); } [data-light] .btn.note:hover { color: #8A4E12; } .fab.notefab { right: auto; left: 18px; background: linear-gradient(140deg, color-mix(in srgb, var(--note1) 30%, var(--panel2)), color-mix(in srgb, var(--note2) 38%, var(--panel))); color: var(--ink); border: 1px solid color-mix(in srgb, var(--note2) 42%, var(--edge2)); box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--note2) 40%, transparent), 0 2px 6px rgba(0,0,0,.20); } [data-light] .fab.notefab { background: linear-gradient(140deg, color-mix(in srgb, var(--note1) 46%, var(--panel)), color-mix(in srgb, var(--note2) 52%, var(--panel))); border-color: color-mix(in srgb, var(--note2) 62%, var(--edge2)); } .fab.notefab:hover { border-color: color-mix(in srgb, var(--note2) 70%, var(--edge2)); } .fab.notefab .fab-plus { font-size: 17px; } .fab-sheet.notesheet { right: auto; left: 18px; width: min(640px, calc(100vw - 36px)); } @media (max-width: 760px), (max-height: 480px) { .fab.notefab { left: calc(14px + var(--safe-l)); } .fab-sheet.notesheet { left: calc(8px + var(--safe-l)); right: calc(8px + var(--safe-r)); width: auto; } .paper { --pad-x: 12px; --rule-in: 26px; } .paper.big { min-height: 40vh; } .pnote-off button { padding: 4px 7px; opacity: .65; } } .boot { position: fixed; inset: 0; z-index: 38; display: grid; place-items: center; background: var(--bg); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease, visibility 0s .18s; } .boot.on { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .12s ease; } .boot-in { display: flex; align-items: center; gap: 14px; position: relative; padding-bottom: 24px; } .boot-mark { width: 48px; height: 48px; border-radius: 14px; font-size: 20px; padding-top: 3px; } .boot-word { display: inline-flex; color: var(--ink); font: 700 27px/1 var(--fm); letter-spacing: .5px; } .boot-word .bl { display: inline-block; } .boot-line { display: none; position: absolute; left: 3px; right: 3px; bottom: 0; height: 2px; border-radius: 2px; overflow: hidden; background: color-mix(in srgb, var(--edge2) 75%, transparent); } .boot-line i { display: block; height: 100%; width: 40%; border-radius: inherit; background: linear-gradient(90deg, transparent, var(--now), transparent); } @media (prefers-reduced-motion: no-preference) { .boot.on .boot-mark { animation: boot-mark .42s cubic-bezier(.2, .8, .2, 1) both; } .boot.on .boot-word .bl { animation: boot-letter .4s cubic-bezier(.2, .75, .2, 1) both; animation-delay: calc(80ms + var(--i, 0) * 28ms); } .boot.on .boot-line { display: block; animation: boot-line-in .25s .5s ease both; } .boot.on .boot-line i { animation: boot-line-run 1.15s .5s linear infinite; } } .calwait { z-index: 39; animation: calwait-gone 0s 4.5s forwards; } @media (max-width: 700px) and (hover: none) { .calwait::before { content:""; position: absolute; left: 0; right: 0; top: var(--top-h); height: 22px; background: var(--bar, color-mix(in srgb, var(--bg2) 64%, var(--bg))); box-shadow: 0 1px 0 var(--edge); } .calwait::after { content:""; position: absolute; left: 50%; margin-left: -18px; top: calc(var(--top-h) + 9px); width: 36px; height: 4px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 24%, transparent); } } .calwait.on .boot-mark, .calwait.on .boot-word .bl { animation: none; } @media (prefers-reduced-motion: no-preference) { .calwait.on .boot-line { display: block; animation: none; } .calwait.on .boot-line i { animation: boot-line-run 1.15s linear infinite; } } @keyframes calwait-gone { to { opacity: 0; visibility: hidden; pointer-events: none; } } @keyframes boot-mark { from { opacity: 0; transform: scale(.74); } to { opacity: 1; transform: none; } } @keyframes boot-letter { from { opacity: 0; transform: translateX(calc(var(--i, 0) * -15px - 10px)) scale(.72); } to { opacity: 1; transform: none; } } @keyframes boot-line-in { from { opacity: 0; } to { opacity: 1; } } @keyframes boot-line-run { from { transform: translateX(-110%); } to { transform: translateX(360%); } } @media (max-width: 560px) { .boot-mark { width: 42px; height: 42px; border-radius: 12px; font-size: 18px; } .boot-word { font-size: 22px; } } .calmark b { color: var(--ink2); } .mt { margin-top: 12px; } .mt2 { margin-top: 20px; } .mb { margin-bottom: 12px; } .formend { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--edge); } .wide-only { display: none; } .wide-inline { display: none; } @media (min-width: 900px) and (min-height: 481px) { .wide-only { display: flex; } .wide-inline { display: inline; } .narrow-only { display: none; } } .shelfsw { margin: 2px 0 20px; } .shelfsw .modeside { display: flex; align-items: baseline; justify-content: center; gap: 7px; padding: 9px 8px; } .shelfsw .modeside b { display: inline; font-size: 13.5px; } .shelfsw.three { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); } .shelfsw.three .modeside { position: relative; z-index: 1; min-width: 0; } .shelfsw.three .modeside b { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .shelfsw.three .modeside.on { background: transparent; border-color: transparent; } .shelfsw.three::before { content:""; position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; box-sizing: border-box; width: calc((100% - 8px - 8px) / 3); border-radius: var(--rad-s); background: var(--panel); border: 1px solid color-mix(in srgb, var(--now) 45%, var(--edge2)); transition: transform .24s cubic-bezier(.2, .8, .2, 1); transform: translateX(calc((100% + 4px) * var(--at, 0))); } @media (prefers-reduced-motion: reduce) { .shelfsw.three::before { transition: none; } } @media (max-width: 560px) { .shelfsw.three .modeside { padding: 9px 3px; gap: 4px; } .shelfsw.three .modeside b { font-size: 12px; } .shelfsw.three .modeside-n { padding: 1px 4px; font-size: 9px; } } .modeside-n { display: inline-block; padding: 1px 6px; border-radius: 999px; font: 700 10px/1.5 var(--fm); color: var(--mut); background: color-mix(in srgb, currentColor 14%, transparent); } .modeside.on .modeside-n { color: var(--now); } .notespage { margin-top: 2px; } .notespage .paper.big { min-height: 52vh; } .chip.shelf-pad { border-color: var(--edge2); color: var(--mut); } .chip.shelf-brain { border-color: color-mix(in srgb, var(--now) 45%, var(--edge)); color: var(--now); background: color-mix(in srgb, var(--now) 10%, transparent); } .shelfbox { border: 0; padding: 0 0 13px; background: none; border-bottom: 1px solid var(--edge); } .shelfpick.three { grid-template-columns: repeat(3, 1fr); } @media (max-width: 560px) { .shelfpick.three .modeside small { display: none; } .shelfpick.three .modeside { padding: 9px 4px; } .shelfpick.three .modeside b { font-size: 12px; } } .shelfpick .modeside { padding: 7px 8px; } .shelfpick .modeside { text-transform: none; letter-spacing: normal; margin-bottom: 0; } .shelfradio { appearance: none; -webkit-appearance: none; display: block; width: 0; height: 0; margin: 0; padding: 0; border: 0; opacity: 0; } .shelfpick .modeside { position: relative; } .shelfpick .modeside b { font-size: 12.5px; line-height: 1.2; } .shelfpick .modeside small { display: block; margin-top: 1px; font: 400 9.5px/1.25 var(--ff); color: var(--mut); } .shelfradio[value="note"]:checked ~ .shelfbox .sh-note, .shelfradio[value="pad"]:checked ~ .shelfbox .sh-pad, .shelfradio[value="brain"]:checked ~ .shelfbox .sh-brain { background: var(--panel); border-color: color-mix(in srgb, var(--now) 45%, var(--edge2)); } .shelfpick .modeside b { color: var(--ink2); } .shelfradio[value="note"]:checked ~ .shelfbox .sh-note b, .shelfradio[value="pad"]:checked ~ .shelfbox .sh-pad b, .shelfradio[value="brain"]:checked ~ .shelfbox .sh-brain b { color: var(--now); } .shelfradio[value="note"]:checked ~ .shelfbox .sh-note.side-note { border-color: color-mix(in srgb, var(--wait) 60%, var(--edge)); background: color-mix(in srgb, var(--wait) 10%, transparent); } .shelfradio[value="note"]:checked ~ .shelfbox .sh-note.side-note b { color: var(--wait); } .shelfmore { margin-top: 9px; display: none; } .shelfradio[value="pad"]:checked ~ .shelfbox .shelfmore { display: block; } .notewhen { margin-top: 11px; display: none; } .shelfradio[value="note"]:checked ~ .shelfbox .notewhen, .shelfradio[value="note"]:checked ~ .notewhen { display: block; } .shelfradio[value="note"]:checked ~ [data-mat-only], .shelfradio[value="note"]:checked ~ * [data-mat-only] { display: none; } .fmtbar { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 5px; } .fmtbtn { min-width: 26px; height: 24px; padding: 0 6px; margin: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--edge); border-radius: 6px; background: transparent; color: var(--mut); font: 600 12px/1 var(--ff); cursor: pointer; transition: .15s; } .fmtbtn:hover { border-color: var(--now); color: var(--now); } .fmtbtn .mono { font-family: var(--fcode); } @media (pointer: coarse), (max-width: 700px), (max-height: 480px) { .fmtbar { display: none !important; } } .body-text.rich code.mono { font: 12.5px/1.5 var(--fm); padding: 1px 5px; border-radius: 5px; border: 1px solid var(--edge2); background: var(--panel2); color: var(--ink); cursor: pointer; word-break: break-all; } .body-text.rich code.mono:hover { border-color: var(--now); color: var(--now); } .body-text.rich code.mono.mono-took { border-color: var(--ok); color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); } .body-text.rich code.mono-block { display: block; padding: 8px 10px; margin: 6px 0; white-space: pre; overflow-x: auto; word-break: normal; line-height: 1.55; } .body-text.rich a { color: var(--now); } .body-text.rich u { text-underline-offset: 2px; } .matfind { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; margin: 0 0 10px; } .matfind input[type=search] { flex: 1 1 80px; min-width: 0; height: 32px; padding: 0 10px; font-size: 13px; border-radius: 999px; } .matfind .btn { flex: 0 0 auto; } .matsect { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 18px; } .mat-lock { opacity: .75; margin-right: 2px; } .mat.is-secret .mat-title { color: var(--mut); } .mat.is-secret:hover .mat-title { color: var(--now); } .found-shut { font-size: 12px; color: var(--mut); margin-top: 4px; } .found-shut a { color: var(--now); } .filebox-top { padding-top: 10px; padding-bottom: 4px; } .filebox-top .filelist { margin-bottom: 0; } .filelist { list-style: none; margin: 0 0 10px; padding: 0; } .filelist li { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 7px 0; border-top: 1px solid var(--edge); } .filelist li > .file-name { flex: 1 1 100%; } @media (min-width: 560px) { .filelist li > .file-name { flex: 1 1 200px; } } .filelist li:first-child { border-top: 0; } .file-name { flex: 1 1 200px; min-width: 0; font-size: 13px; color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .file-name:hover { color: var(--now); } .file-off { display: inline-flex; } .file-size { flex: 0 0 auto; } .file-acts { display: flex; align-items: center; gap: 6px; margin-left: auto; } @media (max-width: 700px) { .filelist li { gap: 4px 10px; padding: 8px 0; } .filelist .btn.xs { min-height: 30px; padding-left: 12px; padding-right: 12px; } .filelist .iconbtn.xs { width: 30px; height: 30px; font-size: 13px; } } .filebox input[type=file] { max-width: 100%; font-size: 12px; color: var(--mut); } .uploadpick input[type=file] { display: block; width: 100%; max-width: 100%; margin-top: 5px; font-size: 12px; color: var(--mut); } .uploadpick small { display: block; margin-top: 4px; } .filedrop { border: 1px dashed var(--edge2); border-radius: var(--rad-s); padding: 9px 11px 10px; transition: border-color .12s, background .12s; } .filedrop.over { border-color: var(--now); background: color-mix(in srgb, var(--now) 7%, transparent); } .filedrop-list { margin: 6px 0 0; word-break: break-word; color: var(--ink2); } .foundnotes { list-style: none; margin: 0; padding: 0; } .foundnotes li { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 9px 0; border-top: 1px solid var(--edge); } .foundnotes li:first-child { border-top: 0; } .foundnotes li.is-struck .fn-text { text-decoration: line-through; color: var(--mut); } .fn-text { flex: 1 1 220px; min-width: 0; font-size: 13px; color: var(--ink2); } .fn-from { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .pnote-from { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0; max-width: 100%; border: 0; min-height: var(--rule-h); } .pnote-from-gap { flex: none; width: var(--pnote-side); height: var(--rule-h); } .pnote.has-when .pnote-from-gap { width: var(--pnote-side-when); } .pnote.has-time .pnote-from-gap { width: var(--pnote-side-time); } .pnote.has-from .pnote-gap { display: none; } .pnote-from a { font: 500 10.5px/1.3 var(--ff); color: var(--paper-ink2); text-decoration: none; border-bottom: 1px dotted currentColor; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pnote-from a:hover { color: var(--paper-ink); } .pnote-from .chip { padding: 1px 6px; font-size: 9.5px; background: transparent; } .paper-add .paper-dir { grid-column: 1; box-sizing: border-box; min-width: 0; width: 100%; max-width: none; margin: 0; padding: 0 8px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid var(--paper-line); color: var(--paper-ink); font: 600 11px/1.2 var(--ff); box-shadow: none; height: max(20px, calc(var(--rule-h) - 8px)); min-height: 0; } [data-light] .paper-add .paper-dir { background: rgba(255,255,255,.6); } .paper-add .paper-dir:focus { outline: none; border-color: var(--paper-red); } .pnote-from .chip.dc { color: var(--paper-ink2); border: 0; background: none; padding: 0; } @media (pointer: coarse) { input[type=text], input[type=password], input[type=date], input[type=time], input[type=number], input[type=search], input[type=url], select, textarea, textarea.tall, .dirline textarea, .rep-form select, .rep-form label:not(.flagbox) input, .rep-end label:not(.flagbox) input, .leadown input, .tlog-spent, .tlog-note, .tlog-title, .monthpick-yin, .paper-add textarea { font-size: 16px; } .dirline textarea { min-height: 36px; height: 36px; } } .plannote { --note-tear: 3px; position: relative; z-index: 1; display: flex; gap: 9px; align-items: flex-start; padding: 9px 0 calc(9px + var(--note-tear)) 11px; margin-bottom: 2px; margin-left: -1px; border-top: 1px solid color-mix(in srgb, var(--paper-line) 60%, transparent); border-left: 3px solid color-mix(in srgb, var(--paper-red) 60%, transparent); border-radius: 0 var(--rad-s) var(--rad-s) 0; background-image: var(--paper-fiber), linear-gradient(163deg, var(--paper) 0%, var(--paper2) 100%); color: var(--paper-ink); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none; -webkit-mask-image: radial-gradient(circle var(--note-tear) at 50% 0%, #000 97%, transparent 100%), linear-gradient(#000, #000); -webkit-mask-size: 26px var(--note-tear), 100% calc(100% - var(--note-tear) + 1px); -webkit-mask-position: 3px 100%, 0 0; -webkit-mask-repeat: repeat-x, no-repeat; mask-image: radial-gradient(circle var(--note-tear) at 50% 0%, #000 97%, transparent 100%), linear-gradient(#000, #000); mask-size: 26px var(--note-tear), 100% calc(100% - var(--note-tear) + 1px); mask-position: 3px 100%, 0 0; mask-repeat: repeat-x, no-repeat; } .plannote:first-child { border-top: 0; } .plannote-check { flex: none; } .plannote-check .tick { border-color: color-mix(in srgb, var(--paper-red) 45%, transparent); color: transparent; background: var(--paper-glass); } .plannote-check .tick:hover { border-color: var(--paper-red); color: color-mix(in srgb, var(--paper-red) 55%, transparent); } .plannote-check .tick.on { background: var(--paper-red); border-color: var(--paper-red); color: var(--paper-on-red); } .plannote-body { flex: 1 1 auto; min-width: 0; } .plannote-hit { display: flex; align-items: baseline; gap: 8px; min-width: 0; text-decoration: none; color: inherit; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--paper-line) 50%, transparent); padding-bottom: 3px; } .plannote-hit:hover .plannote-text { color: var(--paper-red); } .plannote-pin { position: relative; top: 1px; flex: none; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.85) 0 16%, transparent 46%), linear-gradient(150deg, var(--pin1), var(--pin2)); box-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 0 1px rgba(0,0,0,.18) inset; } .plannote-text { min-width: 0; overflow-wrap: anywhere; font: 600 var(--hand-slant) 15.5px/1.35 var(--ff-hand); letter-spacing: .1px; color: var(--paper-ink); } .plannote.is-struck .plannote-text { text-decoration: line-through; text-decoration-color: var(--paper-red); opacity: .55; } .plannote-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 9px; min-width: 0; margin-top: 3px; } .plannote-meta .chip { border: 0; background: none; padding: 0; font: 700 10.5px/1.4 var(--fm); color: var(--paper-ink2); } .plannote-meta .chip.dc { color: var(--paper-ink2); } .plannote-meta .chip.late { color: var(--paper-red); } .plannote-meta a.chip:hover { color: var(--paper-red); text-decoration: underline; } .plannote-acts { display: flex; gap: 4px; flex: none; align-items: center; } .plannote-acts form { margin: 0; } .plannote-acts .iconbtn { border-color: color-mix(in srgb, var(--paper-ink2) 35%, transparent); background: var(--paper-glass); color: var(--paper-ink2); font-size: 13px; } .plannote-acts .iconbtn:hover { border-color: var(--paper-red); color: var(--paper-red); background: var(--paper-glass2); } .plannote-acts .movepop > summary { border-color: color-mix(in srgb, var(--paper-ink2) 35%, transparent); background: var(--paper-glass); color: var(--paper-ink2); font-size: 15px; } .plannote-acts .movepop > summary:hover, .plannote-acts .movepop[open] > summary { border-color: var(--paper-red); color: var(--paper-red); background: var(--paper-glass2); } @media (max-width: 620px), (max-height: 480px) { .plan-acts, .plannote-acts { flex-direction: column; gap: 3px; } } .plannote:has(.movepop[open]) { -webkit-mask-image: none; mask-image: none; z-index: 60; } .plannote.lane-lift { position: fixed; z-index: 200; pointer-events: none; border-top: 0; border-radius: var(--rad-s); box-shadow: 0 12px 28px -6px rgba(0,0,0,.5), 0 0 0 1px rgba(120,100,50,.5); transform: scale(1.02) rotate(-.35deg); } @keyframes swapwait { 50% { opacity: .4; } } html.swapping .shelfsw.three::before { animation: swapwait .9s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { html.swapping .shelfsw.three::before { animation: none; opacity: .55; } } html[data-calfill] .cal-fill-door { display: none; } .cal-fill-wait { display: none; padding: 18px 4px; text-align: center; font: 600 12px/1.4 var(--fm); color: var(--mut); } html[data-calfill] .cal-fill-wait { display: block; } .pinned-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; } .pinned-row { cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 7px 10px 7px 12px; background: var(--panel); border: 1px solid var(--edge); border-left: 3px solid var(--dc, var(--edge)); border-radius: var(--rad-s); } .pinned-row.nodir { border-left-color: var(--edge2); } .pinned-row.pc { border-left-color: transparent; background-image: var(--hatch); background-size: 3px 100%; background-repeat: no-repeat; background-position: left top; background-origin: border-box; background-clip: border-box; } .pinned-row { transition: background-color .15s; } .pinned-row:hover { background-color: color-mix(in srgb, var(--dc, var(--edge)) 7%, var(--panel)); } .pinned-body { flex: 1 1 auto; min-width: 0; } .pinned-title { display: block; font: 600 14px/1.3 var(--ff); color: var(--ink); overflow-wrap: anywhere; border: 0; } .pinned-title:hover { color: var(--now); } .pinned-row, .pinned-title { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; } .pinned-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 3px; } .pinned-fact { font: 500 12px/1.45 var(--ff); color: var(--ink2); } .pinned-fact.is-plan { color: var(--now); font-weight: 600; } .pinned-fact.is-plan.is-late { color: var(--bad); } .pinned-fact.is-quiet, .pinned-fact.is-where { color: var(--mut); } .pinned-fact.is-where:has(.chip) { display: inline-flex; gap: 4px; } .pinned-fact.is-where .chip { display: inline-block; max-width: 100%; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pinned-fact.is-where .chip.proj::before { margin-right: 4px; } .pinned-fact.is-macro { display: inline-flex; min-width: 0; } .pinned-fact.is-macro .chip { white-space: nowrap; } .pinned-list.stacked .pinned-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas:"title acts""facts acts"; column-gap: 10px; row-gap: 0; align-items: center; } .pinned-list.stacked .pinned-acts { align-self: center; } .pinned-list.stacked .pinned-body { display: contents; } .pinned-list.stacked .pinned-title { grid-area: title; } .pinned-list.stacked .pinned-facts { grid-area: facts; } .pinned-list.stacked .pinned-acts { grid-area: acts; width: auto; } .pinned-list.stacked .pinned-facts { row-gap: 1px; margin-top: 3px; } .pinned-list.stacked .pinned-fact.is-plan, .pinned-list.stacked .pinned-fact.is-quiet:first-child, .pinned-list.stacked .pinned-facts > .pinned-fact:first-child { flex-basis: 100%; } .pinned-list.stacked .pinned-fact.is-where { min-width: 0; max-width: 100%; } .pinned-acts { display: flex; align-items: center; gap: 6px; flex: none; } .pinned-acts form { margin: 0; } .pinned-row.is-done .pinned-title { color: var(--ink2); } .pcard-tasks .pinned-list { margin-bottom: 4px; } @media (max-width: 700px) { .pinned-row { gap: 8px; padding-left: 11px; padding-right: 13px; } .pinned-acts { flex-direction: column; align-items: stretch; gap: 6px; } .pinned-acts .btn { width: 100%; justify-content: center; padding-left: 8px; padding-right: 8px; } .pinned-list.stacked .pinned-row { column-gap: 8px; } } .tlog-line.is-plan .tlog-c-day, .tlog-line.is-plan .tlog-c-title { color: var(--now); } .tlog-planword { font-weight: 600; color: var(--now); } .tlog-planword.is-late { color: var(--bad); } .howlong { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; } .row > input.grow[data-howlong] { flex: 1 1 200px; width: auto; } div.howlong { display: flex; } .howlong .btn.grow { flex: 1 1 auto; } .howlong-say { font: 600 12.5px/1.2 var(--ff); color: var(--now); white-space: nowrap; } .howlong-say:empty { display: none; } .estimate-say { display: block; margin-top: 5px; font: 600 12.5px/1.3 var(--ff); color: var(--now); } .estimate-say:empty { display: none; } .estimate-say.is-bad { color: var(--wait); } .when-say { display: block; margin-top: 5px; font: 600 12.5px/1.3 var(--ff); color: var(--now); } .when-say:empty { display: none; } .when-say.is-past { color: var(--wait); } .movepop-at > .when-say { margin-top: 0; } .rep-add > .when-say, .again-day > .when-say { grid-column: 1 / -1; margin-top: 0; } .rep-end label:not(.flagbox) > .when-say { margin-top: 2px; } .fold-line .fold-peek { flex: 1 1 auto; min-width: 0; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tlog-total { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -4px 0 12px; } .tlog-total .chip.tlog-main { color: var(--ink); } .tlog-bell { margin-left: 4px; font-size: 11px; opacity: .75; text-decoration: none; color: inherit; white-space: nowrap; } .tlog-bell:hover { opacity: 1; } .tlog-bell.is-off { opacity: .9; } .tlog-line.is-plan.is-late .tlog-c-day { color: var(--wait); } .tlog-c-title a { color: inherit; border: 0; } .tlog-c-title a:hover { color: var(--now); } .picking .tlog-line[data-pick] { padding-left: 28px; } .picking .tlog-line[data-pick]::before { top: 50%; margin-top: -8px; } .picking .tlog-line[data-pick].picked { background-color: color-mix(in srgb, var(--now) 12%, transparent); } .picking .tlog-line .tlog-pen { visibility: hidden; } #tlog-none:checked ~ .tlog-row.tlog-add, #tlog-none:checked ~ form.tlog-plan { display: none; } #tlog-plan:checked ~ form.tlog-plan { display: block; } .tlog-plan .plan-how { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; } .tlog-plan .plan-how .flagbox { justify-content: center; min-height: 32px; } .tlog-plan .plan-how .flagbox { white-space: nowrap; } .tlog-plan .plan-how .flagbox input { width: 16px; height: 16px; flex: none; } .tlog-plan .plan-when { align-items: start; } .tlog-plan .rep-form { display: grid; gap: 11px; align-items: end; } @media (min-width: 620px) { .tlog-plan .rep-form { grid-template-columns: 1fr 1fr; } } .tlog-plan .rep-form > label:not(.flagbox) { width: 100%; } .tlog-plan .rep-form select, .tlog-plan .rep-form label:not(.flagbox) input { width: 100%; max-width: none; } .tlog-plan .plan-clone { display: none; margin-top: 10px; } .tlog-plan .plan-many { display: none; } .tlog-plan:has(input[name=how][value=clone]:checked) .plan-clone { display: block; } .tlog-plan:has(input[name=how][value=clone]:checked) .plan-many { display: inline; } .tlog-plan:has(input[name=how][value=clone]:checked) .plan-one { display: none; } .tlog-plan > .tlog-acts { display: flex; justify-content: flex-end; margin-top: 10px; } .tlog-plan .plan-alarms .alarm-when select { min-width: 0; } .tlog-rule { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; padding: 6px 10px; border-radius: var(--rad-s); border: 1px dashed color-mix(in srgb, var(--now) 45%, var(--edge)); font: 500 12.5px/1.4 var(--ff); color: var(--ink2); } .tlog-rule-text { min-width: 0; overflow-wrap: anywhere; } .card-head > .pickhead { width: auto; flex: 0 0 auto; margin-left: auto; } .tlog-plan .plan-alarms > label { text-transform: none; letter-spacing: normal; font: 600 12.5px/1.4 var(--ff); color: var(--ink2); } .tlog-plan .plan-from { font: 500 11.5px/1.4 var(--ff); color: var(--mut); } .phead .chip.copy-mark { color: var(--now); border-color: color-mix(in srgb, var(--now) 45%, var(--edge)); } .pday.pday-wait { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--now) 45%, transparent); } @media (prefers-reduced-motion: no-preference) { .pday.pday-wait { animation: pday-wait 1s ease-in-out infinite alternate; } @keyframes pday-wait { from { background-color: transparent; } to { background-color: color-mix(in srgb, var(--now) 8%, transparent); } } } .fab-pinned-bar { display: flex; justify-content: flex-start; margin: 0 0 10px; } .fab-pinned-bar .btn { cursor: pointer; } .fab-pinned-on { display: none; } .fab-pinned { display: none; } .fab-pinned-open:checked ~ .fab-task-fields { display: none; } .fab-pinned-open:checked ~ .fab-pinned { display: flex; flex-direction: column; gap: 6px; } .fab-pinned-open:checked ~ .fab-pinned-bar .fab-pinned-on { display: inline; } .fab-pinned-open:checked ~ .fab-pinned-bar .fab-pinned-off { display: none; } .fab-pinned-open:checked ~ .fab-pinned-bar .btn { border-color: var(--now); color: var(--now); background: color-mix(in srgb, var(--now) 10%, transparent); } .fab-pin { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 7px 10px 7px 12px; border-radius: var(--rad-s); border: 1px solid var(--edge); border-left: 3px solid var(--dc, var(--edge)); background: var(--panel); } .fab-pin.nodir { border-left-color: var(--edge2); } .fab-pin.pc { border-left-color: transparent; background-image: var(--hatch); background-size: 3px 100%; background-repeat: no-repeat; background-position: left top; background-origin: border-box; background-clip: border-box; } .fab-pin-body { flex: 1 1 220px; min-width: 0; } .fab-pin-title { display: block; font: 600 14px/1.3 var(--ff); color: var(--ink); border: 0; overflow-wrap: anywhere; } .fab-pin-title:hover { color: var(--now); } .fab-pin-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; margin-top: 3px; } .fab-pin-plan { font: 600 12px/1.4 var(--ff); color: var(--now); } .fab-pin-plan.is-late { color: var(--bad); } .fab-pin-quiet { font: 500 12px/1.4 var(--ff); color: var(--mut); } .fab-pin-facts .chip { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fab-pin-acts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; margin-left: auto; } .fab-pin-acts .btn { width: 100%; min-height: 32px; text-align: center; justify-content: center; padding-left: 8px; padding-right: 8px; } @media (max-width: 700px) { .fab-pin-acts { width: 100%; margin-left: 0; } .fab-pin-body { flex: 1 1 100%; } } .matscroll { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; } .matpart { background: var(--card); border: 1px solid var(--edge); border-radius: var(--rad); padding: 14px 16px; } .matpart.is-edit { border-color: var(--now); } .matpart:target { border-color: var(--now); } .matpart-head { display: flex; align-items: flex-start; gap: 10px; justify-content: space-between; margin-bottom: 8px; } .matpart-name { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; } .matpart-name b { font: 700 14px/1.35 var(--ff); color: var(--ink); overflow-wrap: anywhere; } .matpart-when { flex: none; } .matpart-acts { display: flex; gap: 4px; flex: none; align-items: center; } .matpart-acts form { display: flex; } .markrow { display: flex; flex-wrap: wrap; gap: 6px; } .markchip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--mk, var(--now)) 78%, transparent); background: color-mix(in srgb, var(--mk, var(--now)) 34%, transparent); box-shadow: inset 4px 0 0 var(--mk, var(--now)); font: 700 11.5px/1.5 var(--ff); color: var(--ink); } .markchip form { display: flex; } .markchip .iconbtn.xs { width: 20px; height: 20px; font-size: 11px; } .markchip-word { overflow-wrap: anywhere; } a.markchip.is-link { padding: 3px 10px; border-bottom: 0; } a.markchip.is-link:hover { border-color: var(--mk, var(--now)); } @keyframes markhit { from { box-shadow: 0 0 0 6px color-mix(in srgb, var(--mk, var(--now)) 30%, transparent); } } .mark-hit { animation: markhit .5s ease-out; } .markcolors { display: flex; gap: 8px; flex-wrap: wrap; } .markcolor { cursor: pointer; } .markcolor input { position: absolute; opacity: 0; pointer-events: none; } .markcolor > span { display: block; width: 22px; height: 22px; border-radius: 50%; background: var(--mk); border: 2px solid transparent; } .markform .markcolors { gap: 6px; flex-wrap: wrap; } .markform .markready { gap: 5px; } .markform .markready .btn { padding-left: 9px; padding-right: 9px; } .markcolor input:checked + span { border-color: var(--ink); } .markform .row .btn { border-left: 3px solid var(--mk, var(--edge)); } .partdrop { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .partdrop form { display: flex; } .partdrop-off { margin-left: auto; } .editdock-say { flex-basis: 100%; display: flex; align-items: center; gap: 8px; font: 600 11.5px/1.4 var(--ff); color: var(--mut); } .editdock-say.is-stale { color: var(--wait); } .toolong { margin-top: 6px; font: 600 11.5px/1.45 var(--ff); color: var(--bad); } textarea.is-toolong { border-color: var(--bad); } .joinfind { position: relative; display: flex; align-items: center; margin-bottom: 8px; } .joinfind-sign { position: absolute; left: 10px; font-size: 13px; opacity: .7; pointer-events: none; } .joinfind input { padding-left: 32px; } .markpick { display: flex; flex-wrap: wrap; gap: 6px; } .markpick-one { border-left: 3px solid var(--mk, var(--edge)); } .matmap { margin-top: 14px; } .matmap-row { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; } .matnav { position: fixed; left: calc(18px + var(--safe-l)); bottom: var(--fab-bottom); z-index: 60; display: flex; align-items: center; gap: 4px; padding: 5px 8px; border-radius: 999px; background: color-mix(in srgb, var(--card) 88%, transparent); border: 1px solid var(--edge2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 6px 20px rgba(0, 0, 0, .14); } .matnav-btn { min-height: 26px; padding: 0 6px; border: 0; border-radius: 999px; background: transparent; display: flex; align-items: center; justify-content: center; gap: 3px; font: 600 11px/1 var(--ff); color: var(--ink2); cursor: pointer; white-space: nowrap; text-transform: none; letter-spacing: normal; margin: 0; } a.matnav-btn { border-bottom: 0; } .matnav-btn:hover { background: var(--soft); color: var(--now); } .matnav-btn[hidden] { display: none; } .matnav { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 2px; border-radius: 16px; padding: 5px; max-width: 192px; opacity: .93; transition: opacity .15s; } .matnav:hover, .matnav:focus-within { opacity: 1; } .matnav-hues { display: flex; align-items: center; justify-content: center; gap: 5px; grid-column: 1 / -1; padding-top: 4px; margin-top: 2px; border-top: 1px solid var(--edge); flex-wrap: wrap; } .matnav-hue { width: 16px; height: 16px; padding: 0; border-radius: 50%; cursor: pointer; border: 1px solid color-mix(in srgb, var(--mk, var(--mut)) 90%, transparent); background: var(--mk, var(--mut)); } .matnav-hue[data-matnav-hue=""] { width: auto; height: 18px; padding: 0 8px; border-radius: 999px; background: transparent; border-color: var(--edge2); color: var(--mut); font: 600 10px/1 var(--ff); text-transform: none; letter-spacing: normal; } .matnav-hue.on { box-shadow: 0 0 0 2px color-mix(in srgb, var(--now) 55%, transparent); } .matnav-hue[data-matnav-hue=""].on { color: var(--now); border-color: var(--now); } .joinlist { display: flex; flex-direction: column; border: 1px solid var(--edge); border-radius: var(--rad-s); overflow: hidden; } .joinrow { display: flex; align-items: flex-start; gap: 9px; padding: 9px 11px; border-top: 1px solid var(--edge); cursor: pointer; min-width: 0; text-transform: none; letter-spacing: normal; font-family: var(--ff); font-weight: 400; } .joinrow:first-child { border-top: 0; } .joinrow:hover { background: var(--soft); } .joinrow input { margin-top: 3px; flex: none; } .joinrow-face { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .joinrow-face b { font: 600 13px/1.35 var(--ff); color: var(--ink); overflow-wrap: anywhere; } .joinrow-why { display: flex; flex-wrap: wrap; gap: 4px; } .joinrow:has(input:checked) { background: color-mix(in srgb, var(--now) 10%, transparent); } .matmore-row { display: flex; justify-content: flex-end; gap: 6px; margin: -4px 0 12px; } .matsect-label { font: 700 9.5px/1 var(--fm); letter-spacing: 1.1px; text-transform: uppercase; color: var(--mut); flex: none; margin-right: 2px; } .matsect-proj, .matsect-parts, .matsect-tags { margin-bottom: 10px; } .matsect-tags { margin-bottom: 18px; } .mattags .mattags-more { display: none; flex: 1 0 100%; flex-wrap: wrap; } .mat-tags-open:checked ~ .mattags-more { display: flex; } .markchip.is-inline { vertical-align: baseline; margin: 0 4px; padding: 1px 4px 1px 8px; font-size: 10.5px; line-height: 1.5; cursor: grab; } .markchip.is-inline .iconbtn.xs { width: 16px; height: 16px; font-size: 9px; } @media (hover: none) { .markchip .iconbtn.xs { position: relative; } .markchip .iconbtn.xs::after { content:""; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; transform: translate(-50%, -50%); } } .markchip.is-drag { opacity: .85; cursor: grabbing; z-index: 80; position: relative; } body[data-matmode="mark"] .matpart, body[data-matmode="mark"] .body-text, body[data-matmode="mark"] .filelist li { cursor: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28'><text x='2' y='20' font-size='19'>🔖</text></svg>") 2 2, crosshair; } body[data-matmode="mark"] .body-text:hover { background: color-mix(in srgb, var(--now) 5%, transparent); } body[data-matmode="edit"] .body-text { cursor: text; } body[data-matmode="edit"] .body-text:hover { background: color-mix(in srgb, var(--now) 5%, transparent); outline: 1px dashed color-mix(in srgb, var(--now) 45%, transparent); outline-offset: 3px; border-radius: var(--rad-s); } .markform { display: flex; flex-direction: column; } .markform-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; order: 1; margin-bottom: 8px; } .markshut { flex: none; padding-left: 14px; padding-right: 14px; } .markform .markgo { flex-wrap: wrap; } .markwhere { font: 600 11px/1.4 var(--fm); letter-spacing: .4px; text-transform: uppercase; color: var(--now); min-width: 0; overflow-wrap: anywhere; } .markform .markword { order: 2; } .markform .markready { order: 3; } .markform .markhue { order: 4; } .markform .markgo { order: 5; } .markmore { display: none; } [data-js] .markmore { display: inline-flex; } .markmore:has(input:checked) { border-color: var(--now); color: var(--now); background: color-mix(in srgb, var(--now) 14%, transparent); } .matpart { position: relative; } .markhere { position: absolute; left: 10px; right: 10px; z-index: 40; } .markhere .markform { margin: 0; border-color: color-mix(in srgb, var(--now) 55%, transparent); box-shadow: 0 14px 40px rgba(0, 0, 0, .22); } .markhere.is-many { position: fixed; left: 12px; right: 12px; top: auto; bottom: calc(var(--fab-bottom) + 8px); z-index: 70; } .markhere.is-many .markready, .markhere.is-many .markhue { display: none; } body.mark-open .fab, body.mark-open [data-markrail] { visibility: hidden; } .markhere.is-tall .markform { max-height: var(--markmax, none); overflow-y: auto; overscroll-behavior: contain; } .markhere.is-tall .markgo { position: sticky; bottom: -16px; z-index: 1; margin-bottom: -16px; padding: 8px 0 16px; background: var(--panel); } .markrename { width: min(220px, 60vw); padding: 2px 6px; border-radius: var(--rad-s); border: 1px solid var(--now); background: var(--bg2); color: var(--ink); font: 600 12px/1.4 var(--ff); } .markgroup { margin-top: 10px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; } .markgroup + .markgroup { border-top: 1px solid var(--edge); padding-top: 10px; } .markgroup-head { display: flex; align-items: center; gap: 6px; flex: none; } .markgroup-name { cursor: text; padding: 1px 10px; min-height: 20px; border-radius: 999px; color: var(--ink); border: 2px solid color-mix(in srgb, var(--mk) 70%, transparent); background: color-mix(in srgb, var(--mk) 42%, var(--panel)); font: 700 12px/1.3 var(--ff); text-transform: none; letter-spacing: normal; } .markgroup-name:hover { background: color-mix(in srgb, var(--mk) 56%, var(--panel)); border-color: var(--mk); } .markgroup-name.is-bare { width: 18px; height: 18px; padding: 0; border-radius: 50%; background: var(--mk); box-shadow: none; cursor: pointer; border: 2px solid color-mix(in srgb, var(--mk) 55%, transparent); } .markgroup-name.is-bare:hover { background: var(--mk); border-color: var(--ink); } .markgroup-n { flex: none; } .markgroup-drop { margin-left: auto; flex: none; } .markgroup-drop .btn { display: inline-flex; align-items: center; gap: 6px; } .markgroup-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--mk); display: inline-block; flex: none; } .markgroup > .matmap-row { flex: 1 1 auto; } .markchip.is-ghost { border-style: dashed; cursor: grab; background: color-mix(in srgb, var(--mk, var(--now)) 18%, transparent); animation: ghost-beat 1.6s ease-in-out infinite; } @keyframes ghost-beat { 50% { opacity: .55; } } .markchip.is-ghost .markchip-word { opacity: .9; } .markready { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .markready .btn { border-left: 3px solid var(--mk, var(--edge)); } .markform .markready .btn { border-color: color-mix(in srgb, var(--mk, var(--edge)) 70%, transparent); background: color-mix(in srgb, var(--mk, transparent) 16%, transparent); color: var(--ink); } .markform .markready .btn:hover { background: color-mix(in srgb, var(--mk, transparent) 30%, transparent); border-color: var(--mk, var(--now)); } .markready[hidden] { display: none; } .markown { display: flex; flex-direction: column; gap: 8px; } .markrail { position: fixed; z-index: 60; left: calc(18px + var(--safe-l) + 200px); bottom: var(--fab-bottom); display: flex; flex-direction: column; gap: 4px; max-height: calc(5 * 13px + 4 * 4px + 12px); overflow-y: hidden; padding: 6px 4px; border-radius: 999px; scrollbar-width: none; background: color-mix(in srgb, var(--card) 88%, transparent); border: 1px solid var(--edge2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .markrail::-webkit-scrollbar { display: none; } .markrail[hidden] { display: none; } .markdot { width: 13px; height: 13px; flex: none; border-radius: 50%; cursor: pointer; border: 1px solid color-mix(in srgb, var(--mk) 90%, transparent); background: var(--mk); padding: 0; } .markdot.on { box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk) 35%, transparent); } .markrail { touch-action: none; overscroll-behavior: contain; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } .markdot { position: relative; transition: transform .14s cubic-bezier(.2, .8, .2, 1); } .markdot.edge { margin-top: 5px; } .markdot.edge::before { content:""; position: absolute; left: -3px; right: -3px; top: -6px; height: 1px; background: var(--edge2); } .markrail { transition: opacity .12s ease; } .markrail.is-scrub { opacity: 0; } .markrail.is-keys { box-shadow: 0 0 0 2px color-mix(in srgb, var(--now) 45%, transparent); } main[data-keys-home]:focus { outline: none; } .marklens { position: fixed; z-index: 64; width: 34px; box-sizing: border-box; border-radius: 999px; overflow: hidden; pointer-events: none; background: color-mix(in srgb, var(--panel) 96%, transparent); border: 1px solid var(--edge2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--now) 30%, transparent), 0 14px 34px -12px rgba(0, 0, 0, .45); transform-origin: 50% var(--origin, 50%); transform: scaleY(.3); opacity: 0; transition: transform .16s cubic-bezier(.2, .8, .2, 1), opacity .12s ease; } .marklens.on { transform: none; opacity: 1; } .marklens-list { position: absolute; left: 0; right: 0; top: 10px; transition: transform .14s cubic-bezier(.2, .8, .2, 1); } .marklens-dot { position: absolute; left: 50%; top: calc(var(--i, 0) * var(--pitch, 20px) + var(--pitch, 20px) / 2); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--mk); transition: transform .1s ease-out; } .marklens-dot.on { transform: scale(1.3); } .marklens-dot.edge::before { content:""; position: absolute; left: -5px; right: -5px; height: 1px; top: calc(6px - var(--pitch, 20px) / 2); background: var(--edge2); } .marklens-ring { position: absolute; left: 50%; top: 0; width: 24px; height: 24px; margin-left: -12px; border-radius: 50%; box-sizing: border-box; border: 2px solid var(--now); background: color-mix(in srgb, var(--now) 14%, transparent); transition: transform .09s ease-out; } .marklens.still .marklens-list, .marklens.still .marklens-ring, .marklens.still .marklens-dot { transition: none; } .marksay { position: fixed; z-index: 66; left: 0; top: 0; transform: translate(var(--x, 0px), var(--y, 0px)) translateY(-50%); display: none; max-width: min(260px, 64vw); padding: 6px 10px; border-radius: 12px; pointer-events: none; background: var(--panel); border: 1px solid var(--edge2); box-shadow: 0 10px 28px -10px rgba(0, 0, 0, .45); font: 600 12.5px/1.3 var(--ff); color: var(--ink); } .marksay.on { display: block; } .marksay.leftward { transform: translate(var(--x, 0px), var(--y, 0px)) translate(-100%, -50%); } .marksay.glides { transition: transform .1s ease-out; } .marksay-word { display: flex; align-items: center; gap: 6px; } .marksay-text, .marksay-where { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .marksay-word i { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--mk, var(--now)); } .marksay-where { margin-top: 2px; font: 600 10.5px/1.35 var(--fm); color: var(--mut); } .matnav-modes, .matnav-go { display: none; grid-template-columns: 1fr 1fr; gap: 2px 4px; grid-column: 1 / -1; } .matnav-go { padding-top: 2px; border-top: 1px solid var(--edge); margin-top: 2px; } .matnav-fold { order: 9; grid-column: 1 / -1; display: grid; align-items: center; justify-items: start; justify-content: start; min-height: 34px; font-size: 15px; line-height: 1; padding: 0; } .matnav-fold-on, .matnav-fold-off { place-items: center; width: 44px; } .matnav-box:checked ~ .matnav-fold { box-shadow: inset 0 1px 0 var(--edge); margin-top: 2px; } .matnav-fold-off { display: grid; } .matnav-fold-on { display: none; } .matnav-box:checked ~ .matnav-fold .matnav-fold-off { display: none; } .matnav-box:checked ~ .matnav-fold .matnav-fold-on { display: grid; } .matnav-hues { display: none; } .matnav-box:checked ~ .matnav-modes, .matnav-box:checked ~ .matnav-go { display: grid; } .matnav-box:checked ~ .matnav-hues { display: flex; } .matnav-box:not(:checked) ~ .matnav-fold { min-width: 44px; } .matnav-mode.on { background: color-mix(in srgb, var(--now) 16%, transparent); color: var(--now); } .btn.on[data-matmode-btn] { background: color-mix(in srgb, var(--now) 16%, transparent); border-color: var(--now); color: var(--now); font-weight: 700; } body[data-matmode="mark"] .matnav .matnav-go, body[data-matmode="mark"] .matnav .matnav-hues, body[data-matmode="mark"] .matnav .matnav-fold, body[data-matmode="edit"] .matnav .matnav-go, body[data-matmode="edit"] .matnav .matnav-hues, body[data-matmode="edit"] .matnav .matnav-fold { display: none; } body[data-matmode="mark"] .matnav .matnav-modes, body[data-matmode="edit"] .matnav .matnav-modes { display: grid; } .pagenav [data-pagenav-up], .pagenav [data-pagenav-down] { border-top: 1px solid var(--edge); margin-top: 2px; padding-top: 3px; } #fileend { display: block; height: calc(var(--fab-bottom) + 56px); } .mdlive { position: relative; margin: 2px 0; } .mdlive-back, .mdlive-in { font: 400 14px/1.72 var(--ff); white-space: pre-wrap; word-break: break-word; padding: 8px 10px; margin: 0; border-radius: var(--rad-s); letter-spacing: normal; } .mdlive-back { position: absolute; inset: 0; overflow: hidden; pointer-events: none; color: var(--ink2); border: 1px solid transparent; } .mdlive-in { position: relative; width: 100%; display: block; resize: none; color: transparent; background: var(--card); caret-color: var(--now); border: 1px solid var(--now); overflow: hidden; } .mdlive-in::selection { background: color-mix(in srgb, var(--now) 28%, transparent); } .md-sign { color: var(--mut); font-style: normal; opacity: .65; } .md-b { font-weight: 700; color: var(--ink); } .md-i { font-style: italic; } .md-u { text-decoration: underline; } .md-s { text-decoration: line-through; color: var(--mut); } .md-c { font-family: var(--fcode); font-size: 13px; } .md-l { color: var(--now); } .editdock-float { position: fixed; z-index: 70; left: calc(18px + var(--safe-l)); bottom: calc(var(--fab-bottom) + 46px); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; max-width: calc(100vw - 36px - var(--safe-l) - var(--safe-r)); padding: 7px 10px; border-radius: 999px; background: color-mix(in srgb, var(--card) 92%, transparent); border: 1px solid var(--edge2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 8px 26px rgba(0, 0, 0, .18); } @media (max-width: 700px) { .markrail { left: auto; right: calc(18px + var(--safe-r)); bottom: calc(var(--fab-bottom) + 72px); } } .body-text.is-fresh { background: color-mix(in srgb, var(--ok) 12%, transparent); border-radius: var(--rad-s); } .editdock { position: sticky; bottom: calc(var(--bar-lift) + 8px); z-index: 20; background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 8px 0; border-top: 1px solid var(--edge); } .partfiles { border-bottom: 1px dashed var(--edge); padding-bottom: 10px; } .matsect-head { position: sticky; top: 56px; z-index: 30; display: block; margin: 0 0 12px; padding: 6px 0; background: transparent; transition: background-color .15s; } .matsect-head.is-stuck { background: color-mix(in srgb, var(--bar, color-mix(in srgb, var(--bg2) 64%, var(--bg))) 46%, transparent); backdrop-filter: saturate(var(--glass-sat)) blur(8px); -webkit-backdrop-filter: saturate(var(--glass-sat)) blur(8px); box-shadow: 0 1px 0 var(--edge); } .stuck-mark { display: block; height: 0; } @media (max-width: 700px) and (hover: none) { .matsect-head { top: 0; } } @media (max-width: 700px) { .matsect-head { margin-left: calc(-1 * (12px + var(--safe-l))); margin-right: calc(-1 * (12px + var(--safe-r))); padding-left: calc(12px + var(--safe-l)); padding-right: calc(12px + var(--safe-r)); } } .matsect-row { display: flex; flex-wrap: nowrap; gap: 6px; align-items: flex-start; } .matsect-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; flex: 1 1 auto; min-width: 0; } .matsect-chips .chip.on { box-shadow: 0 0 0 2px color-mix(in srgb, var(--dc, var(--now)) 55%, transparent); border-color: color-mix(in srgb, var(--dc, var(--now)) 75%, var(--edge2)); font-weight: 800; } .matsect-chips .chip.dc.on { background: color-mix(in srgb, var(--dc) 24%, transparent); } .matsect-chips .chip.on:not(.dc) { color: var(--now); } .matsect-on { margin-top: 6px; flex-wrap: wrap; align-items: center; gap: 6px; } .matsect-on-word { flex: none; font: 700 9px/1.2 var(--fm); letter-spacing: .9px; text-transform: uppercase; color: var(--mut); } .matsect-more { flex: none; align-self: flex-start; white-space: normal; text-align: left; } .chip-pin.on, .chip-clear { border-color: var(--now); color: var(--now); } .chip-clear { border-style: dashed; } .tagfind { display: inline-flex; align-items: center; gap: 4px; flex: none; } .tagfind-eye { cursor: pointer; font-size: 13px; line-height: 1; margin: 0; text-transform: none; letter-spacing: normal; } .tagfind input[type=search].tagfind-in { width: 0; min-width: 0; padding: 0; border: 0; height: 26px; border-radius: 999px; font-size: 12px; transition: width .14s ease, padding .14s ease; } .tagfind input[type=search].tagfind-in.on, .tagfind input[type=search].tagfind-in:focus { width: 118px; padding: 0 10px; border: 1px solid var(--edge2); } .tagfind-go { display: none; } .tagfind-in.on ~ .tagfind-go, .tagfind-in:focus ~ .tagfind-go { display: inline-flex; } [data-mode="lite"] #attach.noattach { display: none; } .startask { position: fixed; z-index: 96; width: min(300px, calc(100vw - 16px)); padding: 10px 12px 11px; border-radius: var(--rad-s); background: var(--panel); border: 1px solid var(--edge2); box-shadow: 0 18px 40px -14px rgba(0,0,0,.55); display: flex; flex-direction: column; gap: 8px; } .startask-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 700 13px/1.3 var(--ff); color: var(--ink); } .startask-row { display: flex; gap: 8px; align-items: stretch; } .startask-row input { flex: 1 1 auto; min-width: 0; font: 700 15px/1.2 var(--fm); padding: 7px 10px; } .startask-row .btn { flex: none; } .startask-row .btn:disabled { opacity: .45; cursor: not-allowed; } .startask-say { font: 600 11.5px/1.35 var(--ff); color: var(--mut); min-height: 1em; } .startask-say:empty { display: none; } .startask-say.is-bad { color: var(--bad); } @media (pointer: coarse) { .startask-row input { font-size: 16px; } } .matnav-save { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; padding-bottom: 5px; margin-bottom: 3px; border-bottom: 1px solid var(--edge); } .matnav-save[hidden] { display: none; } .matnav-save .btn { flex: 1 1 auto; justify-content: center; } .matnav-save .editdock-say { flex-basis: 100%; } .matnav:has(.matnav-save:not([hidden])), .matnav.is-asking { max-width: min(300px, calc(100vw - 36px - var(--safe-l) - var(--safe-r))); background: color-mix(in srgb, var(--panel) 95%, transparent); } @media (min-width: 701px) { .matnav.is-asking ~ .markrail, .matnav:has(.matnav-save:not([hidden])) ~ .markrail { left: calc(18px + var(--safe-l) + 308px); } } .matnav.is-asking { z-index: 61; } .matnav-ask { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; padding: 2px 2px 4px; } .matnav-ask-q { font: 700 12.5px/1.35 var(--ff); color: var(--ink); } .matnav-ask-row { display: flex; gap: 5px; flex-wrap: wrap; } .matnav-ask-row .btn { flex: 1 1 auto; justify-content: center; } .matnav.is-asking > :not(.matnav-ask):not(.matnav-box) { display: none; } html.matnav-on body.has-matedit form.mat-edit .editdock { display: none; } .mat-lamp { display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; vertical-align: .12em; flex: none; background: var(--lamp); box-shadow: 0 0 0 2px color-mix(in srgb, var(--lamp) 22%, transparent), 0 0 7px 1px color-mix(in srgb, var(--lamp) 55%, transparent); } .calstick { position: sticky; top: var(--top-h, 57px); z-index: 25; padding-top: 4px; margin-bottom: 8px; transition: background-color .15s; } .calstick.is-stuck { background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--edge); } @media (max-width: 700px) and (hover: none) { .calstick, .calstick.is-stuck { background: color-mix(in srgb, var(--bar, color-mix(in srgb, var(--bg2) 64%, var(--bg))) 46%, transparent); backdrop-filter: saturate(var(--glass-sat)) blur(8px); -webkit-backdrop-filter: saturate(var(--glass-sat)) blur(8px); box-shadow: 0 1px 0 var(--edge); } .calstick { z-index: 39; } html:not(.turning) main:not(.page-in) .calstick { position: fixed; left: 0; right: 0; margin-left: 0; margin-right: 0; } html:not(.turning) main:not(.page-in) .calstick-room { display: block; } } .calstick-room { display: none; height: 68px; margin-bottom: 6px; } .calaside { position: absolute; left: 0; right: 0; top: 0; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; contain: layout style; } .calmode .btn { transition: none; } .calstick > .calhead { margin: 0; padding: 4px 0 6px; font-size: 22px; } .calstick > .legend { margin: 0 0 6px; } .calhead .caltoday { margin-left: 6px; flex: none; color: var(--now); font-weight: 650; border-color: color-mix(in srgb, var(--now) 50%, var(--edge)); background: color-mix(in srgb, var(--now) 10%, var(--panel)); } .calhead .caltoday:hover { background: color-mix(in srgb, var(--now) 18%, var(--panel)); } .calscroll .planmonths { overflow-anchor: none; } .calscroll .planmonth { contain-intrinsic-size: auto 640px; } .calscroll .planmonth.is-fresh { opacity: 0; } .calscroll:not(.is-zoom) .planmonth.is-slept { content-visibility: auto; } .calscroll:not(.is-zoom) .planmonth.is-slept.is-far { content-visibility: hidden; } .calscroll .cal-week, .calscroll .calplan-week { contain-intrinsic-size: auto 100px; } .calscroll:not(.is-zoom) .planmonth.is-slept .cal-week, .calscroll:not(.is-zoom) .planmonth.is-slept .calplan-week { content-visibility: auto; } .calscroll .planmonth-head { margin: 4px 2px 8px; font-size: 13px; } .calscroll .planmonth-head > b { font-size: 16px; letter-spacing: -.01em; } .calscroll .calplan.shape-grid, .calscroll .cal { overflow: clip; } .calscroll .calplan.shape-grid .calplan-head, .calscroll .calplan.shape-grid .calplan-week { min-width: 0; } .calscroll .calplan.shape-grid .calplan-head, .calscroll .cal-head { position: sticky; top: var(--calstick, 110px); z-index: 4; background: var(--panel2); } @media (min-width: 701px), (hover: hover) { .calstick { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; } .calstick > .calhead { order: 0; } .calstick > .curtain-stick { order: 1; margin-left: auto; } .calstick > .legend { order: 2; flex: 1 0 100%; } .calstick > .pickdock { order: 3; flex: 1 0 100%; } .calstick .pagehead.mid { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; padding: 0; } .calstick .pagehead > .headstack { order: 2; } .calstick .pagehead > .calbar { order: 1; margin: 0; flex-wrap: nowrap; } .calstick .pagehead > * { margin-top: 0; align-self: center; } .calstick .pickdock:has(.pickbar.folded:not([hidden])) { position: static; } } @media (max-width: 700px) and (hover: none) { .calstick { padding-top: 0; margin-bottom: 6px; display: flow-root; } .calscroll .calstick > .legend, .calscroll .calstick > .pickdock { margin-bottom: 0; } .calstick > .calhead { padding: 2px 0 6px; font-size: 20px; } .calstick > .legend { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 10px; padding-bottom: 6px; } .calstick > .legend::-webkit-scrollbar { display: none; } .calstick > .legend span, .calstick > .legend.calhl > button[data-hl] { flex: none; font-size: 11px; } } @media (max-width: 700px) { .calstick { margin-left: calc(-1 * (12px + var(--safe-l))); margin-right: calc(-1 * (12px + var(--safe-r))); padding-left: calc(12px + var(--safe-l)); padding-right: calc(12px + var(--safe-r)); } } .calscroll .planwrap { padding-bottom: calc(100vh - 120px); } .calstick .pickbar.docked:not(.folded) { max-height: min(42vh, 380px); overflow-y: auto; overscroll-behavior: contain; } .speedo { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 150px)); gap: 14px 22px; align-items: start; justify-content: start; } .gauge { --c: var(--rd); display: flex; flex-direction: column; align-items: center; min-width: 0; } .gauge.time { --c: var(--rt); } .gauge.days { --c: var(--now); } .gauge-dial { position: relative; width: 116px; height: 116px; } .gauge-arc { width: 100%; height: 100%; display: block; } .gauge-track, .gauge-fill { fill: none; stroke-width: 7; stroke-linecap: round; } .gauge-track { stroke: color-mix(in srgb, var(--edge2) 55%, transparent); } .gauge-fill { stroke: var(--c); } .gauge-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 30px; gap: 3px; color: var(--ink); } .gauge-face b { font: 700 28px/1 var(--ff); letter-spacing: -.03em; } .gauge-face small { font: 600 11.5px/1 var(--ff); color: var(--mut); } .gauge.is-empty .gauge-face b { color: var(--mut); font-weight: 500; } .gauge-cap { position: absolute; left: 0; right: 0; bottom: 9px; text-align: center; font: 700 9.5px/1.2 var(--fm); letter-spacing: .9px; text-transform: uppercase; color: color-mix(in srgb, var(--c) 70%, var(--mut)); } .gauge-sub { margin-top: 2px; font: 600 12px/1.35 var(--ff); color: var(--ink2); text-align: center; } .gauge-note { margin-top: 1px; font: 600 10.5px/1.3 var(--fm); color: var(--mut); text-align: center; } .speedo-card .goal-side { justify-content: center; } @media (max-width: 560px) { .speedo { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; justify-content: stretch; } .gauge-dial { width: 98px; height: 98px; } .gauge-face { padding-top: 25px; } .gauge-face b { font-size: 24px; } .gauge-cap { bottom: 7px; font-size: 8.5px; letter-spacing: .6px; } .gauge-sub { font-size: 11.5px; } } .prow { grid-template-columns: minmax(0, 1fr) 210px; } @media (min-width: 561px) { .prow:not(:has(.prow-side)) { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 1000px) { .prow { grid-template-columns: minmax(0, 1fr); } } .pulse-line { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 2px; font: inherit; color: inherit; } .pulse-tile { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 7px 12px 8px; border-radius: var(--rad-s); border: 1px solid var(--edge); background: var(--panel2); } .pulse-k { font: 700 9px/1.2 var(--fm); letter-spacing: .9px; text-transform: uppercase; color: var(--mut); } .pulse-v { font: 700 16px/1.25 var(--ff); color: var(--ink); letter-spacing: -.01em; } .pulse-last.is-hot { border-color: color-mix(in srgb, var(--bad) calc(var(--heat) * 90%), var(--edge)); background: color-mix(in srgb, var(--bad) calc(var(--heat) * 22%), var(--panel2)); box-shadow: 0 0 calc(var(--heat) * 24px) calc(var(--heat) * 2px) color-mix(in srgb, var(--bad) calc(var(--heat) * 70%), transparent); } .pulse-last.is-hot .pulse-v { color: color-mix(in srgb, var(--bad) calc(var(--heat) * 100%), var(--ink)); } .pulse-last.is-hot .pulse-k { color: color-mix(in srgb, var(--bad) calc(var(--heat) * 70%), var(--mut)); } .pulse-next.is-now { border-color: color-mix(in srgb, var(--now) 45%, var(--edge)); } .pulse-next.is-now .pulse-v { color: var(--now); } .gauge-tick { stroke: var(--panel); stroke-width: 2.4; stroke-linecap: butt; } .gauge-tick.past { stroke: color-mix(in srgb, var(--panel) 55%, transparent); } .chip.chip-today { gap: 6px; } .chip.chip-today .mat-lamp { margin-left: 0; width: 7px; height: 7px; vertical-align: 0; } .chip.chip-today.on { border-color: color-mix(in srgb, var(--lamp) 60%, var(--edge)); background: color-mix(in srgb, var(--lamp) 14%, var(--panel)); color: var(--ink); } .chip.chip-today { max-width: 100%; white-space: nowrap; } .chip-today-name { min-width: 0; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 700px) { .chip-today-name { max-width: 16ch; } } .matrow { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } .matrow a { -webkit-tap-highlight-color: transparent; } .matgrid > .matrow.is-card { transition: border-color .14s, transform .14s, background-color .14s; } .matgrid > .matrow.is-card:active { transform: scale(.985); background-color: color-mix(in srgb, var(--dc, var(--now)) 9%, var(--panel)); border-color: color-mix(in srgb, var(--dc, var(--now)) 55%, var(--edge)); transition-delay: 60ms; } :root { --top-h: calc(57px + env(safe-area-inset-top)); } @media (max-height: 480px) { :root { --top-h: calc(45px + env(safe-area-inset-top)); } } .calhead > .calhead-name { flex: 0 0 auto; width: 8.3em; max-width: none; overflow: visible; display: flex; justify-content: center; min-width: 0; } .calhead-name > .monthpick { display: block; width: 100%; } .calhead-name > .monthpick > summary { display: block; margin: 0; padding: 0 2px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 700px) and (hover: none) { .calstick .curtain .pagehead { justify-content: flex-start; } .calstick .curtain .pagehead .row.pickhead { margin-left: auto; } } @media (max-width: 999px) { .calzoom { display: none !important; } } .calscroll.is-zoom .planmonth-head > b { opacity: 1; } .calscroll.is-zoom .planmonths { gap: 22px 16px; } .calscroll.is-zoom .planmonths > .planmonth:first-child { grid-column-start: var(--calgap, auto); } .cal.has-wt { --wtw: 104px; } .cal.has-wt .cal-head, .cal.has-wt .cal-week { grid-template-columns: var(--wtw) repeat(7, minmax(0, 1fr)); } .wt { position: relative; display: block; min-width: 0; cursor: pointer; border-right: 1px solid var(--edge); background: color-mix(in srgb, var(--panel2) 70%, transparent); -webkit-tap-highlight-color: transparent; } .wt:focus-visible { outline: 2px solid var(--now); outline-offset: -2px; } .wt.is-on { background: color-mix(in srgb, var(--now) 10%, var(--panel2)); } .wt svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .wl { fill: none; stroke-width: 1.4px; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .45; transition: opacity .15s; } .wl.is-index { stroke: var(--ink); stroke-width: 2.4px; opacity: .92; } .wt-dot { position: absolute; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--ink); pointer-events: none; } .wt-scale { display: flex; justify-content: space-between; align-items: center; min-width: 0; padding: 0 6px; border-right: 1px solid var(--edge); font: 700 8.5px/1.2 var(--fm); letter-spacing: .6px; text-transform: uppercase; color: var(--mut); } .calscroll[data-hl] .wl { opacity: .12; } .calscroll[data-hl] .wl.is-index { opacity: .3; } .calscroll[data-hl="i"] .wl.is-index { opacity: .95; } .calscroll[data-hl] .wt-dot { opacity: .3; } .calscroll[data-hl="i"] .wt-dot { opacity: 1; } .calscroll.is-zoom .cal.has-wt { --wtw: 60px; } .calscroll.is-zoom .wt-scale { padding: 0 4px; letter-spacing: .3px; } .calscroll.is-zoom .cal.has-wt .cal-day { padding-left: 3px; padding-right: 3px; } .calscroll.is-zoom .cal.has-wt .cal-num { font-size: 12px; } @media (max-width: 700px) { .cal.has-wt { --wtw: 34px; } .wt-scale { padding: 0 3px; } .wl { stroke-width: 1.2px; } .wl.is-index { stroke-width: 2px; } .wt-dot { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; } } .legend.calhl { align-items: center; } .legend.calhl > button[data-hl] { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 3px 8px; margin: -3px -2px; border: 1px solid transparent; border-radius: 99px; background: none; font: inherit; font-size: 12px; color: var(--mut); cursor: pointer; -webkit-tap-highlight-color: transparent; } .legend.calhl > button[data-hl][aria-pressed="true"] { color: var(--ink); border-color: color-mix(in srgb, var(--dc, var(--ink)) 60%, var(--edge)); background: color-mix(in srgb, var(--dc, var(--ink)) 10%, transparent); } .legend .legend-index i { background: var(--ink); border-radius: 50%; } .calscroll { position: relative; } .wt-peek { position: absolute; z-index: 30; display: flex; flex-direction: column; gap: 2px; max-width: min(260px, calc(100% - 8px)); padding: 8px 11px 9px; border: 1px solid var(--edge2); border-radius: var(--rad-s); background: var(--panel); box-shadow: 0 8px 24px rgba(0, 0, 0, .18); font-size: 12.5px; line-height: 1.35; color: var(--ink2); pointer-events: none; } .wt-peek b { font-size: 13px; color: var(--ink); } .cal-day.is-high { box-shadow: inset 0 0 0 calc(1px + var(--hi) * 1.4px) color-mix(in srgb, var(--ok) calc(var(--hi) * 75%), transparent); background-color: color-mix(in srgb, var(--ok) calc(var(--hi) * 13%), transparent); } @media (max-width: 700px) and (hover: none) { .curtain-stick { position: sticky; top: var(--top-h); z-index: 39; margin-left: calc(-1 * (12px + var(--safe-l))); margin-right: calc(-1 * (12px + var(--safe-r))); padding-left: calc(12px + var(--safe-l)); padding-right: calc(12px + var(--safe-r)); background: var(--bar, color-mix(in srgb, var(--bg2) 64%, var(--bg))); box-shadow: 0 1px 0 var(--edge); } .curtain-stick { margin-bottom: 12px; } .curtain-stick.is-stuck { box-shadow: 0 1px 0 var(--edge), 0 10px 18px -14px rgba(0,0,0,.45); } .calstick .curtain-stick { position: static; margin: 0; padding: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .matsect-head[data-stack] { top: var(--stack, var(--top-h)); } } @media (max-width: 700px), (max-height: 480px) { .top { background: var(--bar, color-mix(in srgb, var(--bg2) 64%, var(--bg))); backdrop-filter: none; -webkit-backdrop-filter: none; } .top { position: fixed; top: 0; left: 0; right: 0; } body { padding-top: var(--top-h); } } .pagecover { position: fixed; inset: 0; z-index: 35; pointer-events: none; opacity: 0; background: radial-gradient(120vw 82vh at 16% -8%, color-mix(in srgb, var(--now) var(--grad1), transparent), transparent 62%), radial-gradient(100vw 74vh at 92% 0%, color-mix(in srgb, var(--ok) var(--grad2), transparent), transparent 58%), var(--bg); will-change: opacity; } .calscroll .planmonths { container-type: inline-size; } .calscroll .calplan, .calscroll .cal { container-type: normal; } .calscroll.is-zoom .planmonths { container-type: normal; } .calscroll.is-zoom .calplan, .calscroll.is-zoom .cal { container-type: inline-size; } .gscale { margin: 8px 0 4px; } .gscale-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; } .gscale-head b { font: 700 20px/1.1 var(--ff); letter-spacing: -.02em; color: var(--ink); } .gscale-head span { font: 600 13px/1.25 var(--ff); color: var(--ink2); } .gscale-head small { margin-left: auto; font: 600 11px/1.25 var(--fm); color: var(--mut); } .gscale-track { position: relative; height: 8px; margin: 7px 0 5px; } .gscale-seg { position: absolute; top: 0; bottom: 0; left: calc(var(--a) + 1.5px); width: max(2px, calc(var(--w) - 3px)); border-radius: 2px; --seg-rest: color-mix(in srgb, var(--edge2) 60%, transparent); background: linear-gradient(90deg, var(--now) var(--f), var(--seg-rest) var(--f)); } .gscale-seg.is-now { --seg-rest: color-mix(in srgb, var(--now) 22%, color-mix(in srgb, var(--edge2) 60%, transparent)); } .gscale-seg:first-child { left: var(--a); width: max(2px, calc(var(--w) - 1.5px)); border-radius: 99px 2px 2px 99px; } .gscale-seg:nth-last-child(2) { width: max(2px, calc(var(--w) - 1.5px)); border-radius: 2px 99px 99px 2px; } .gscale-seg:first-child:nth-last-child(2) { width: var(--w); border-radius: 99px; } .gscale-now { position: absolute; top: 50%; left: var(--t); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--now); box-shadow: 0 0 0 2.5px var(--panel), 0 1px 3px 2px rgba(0, 0, 0, .18); } .gscale.is-soon .gscale-now { background: var(--panel); box-shadow: 0 0 0 2px var(--now); } .gscale-ends { display: flex; justify-content: space-between; gap: 10px; font: 600 11px/1.25 var(--fm); color: var(--mut); } @media (max-width: 359px) { .calstick > .calhead { font-size: 17px; gap: 6px; } .calhead > .calhead-name { width: 7.6em; } .calhead .caltoday { margin-left: 0; padding-left: 8px; padding-right: 8px; } } .caledge { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 10px 0; padding: 10px 12px; border-radius: var(--rad-s); border: 1px dashed var(--edge2); color: var(--ink2); font-size: 13px; background: color-mix(in srgb, var(--panel2) 70%, transparent); } .planmonth[data-now] > .planmonth-head > b { color: var(--now); } .planmonth[data-now] > .cal, .planmonth[data-now] > .calplan { border-color: color-mix(in srgb, var(--now) 55%, var(--edge)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--now) 30%, transparent); } .calhead.is-now .calhead-name summary { color: var(--now); } @keyframes cal-placed { to { opacity: 1; } } .calscroll.is-placing .planwrap { opacity: 0; animation: cal-placed 0s 4s forwards; } .calscroll.is-placing .calstick { opacity: 0; animation: cal-placed 0s 4s forwards; } .alert.copynote { margin-bottom: 14px; } .fold-block:not(.strictfold):not(.repend):not(.tlog-alarms) > summary { min-height: 50px; padding: 12px 14px 12px 16px; background: var(--panel); border-color: var(--edge); border-radius: var(--rad); font: 650 15px/1.3 var(--ff); color: var(--ink); } .fold-block:not(.strictfold):not(.repend):not(.tlog-alarms) > summary .fold-line { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 10px; row-gap: 0; align-items: center; min-height: 24px; align-content: center; } .fold-block:not(.strictfold):not(.repend):not(.tlog-alarms) > summary .fold-line > :first-child { grid-column: 1; grid-row: 1; } .fold-block:not(.strictfold):not(.repend):not(.tlog-alarms) > summary .fold-line > .tiny.muted:not(.laneload) { grid-column: 1; grid-row: 2; min-width: 0; text-align: left; margin-top: 2px; font: 500 12.5px/1.35 var(--ff); letter-spacing: normal; text-transform: none; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fold-block:not(.strictfold):not(.repend):not(.tlog-alarms) > summary .fold-line > .laneload { grid-column: 2; grid-row: 1 / span 2; margin-left: 0; } .fold-block:not(.strictfold):not(.repend):not(.tlog-alarms) > summary .fold-line::after { content:"›"; grid-column: 3; grid-row: 1 / span 2; font: 400 22px/.8 var(--ff); color: var(--mut); transition: transform .2s cubic-bezier(.33, 1, .68, 1); } .fold-block:not(.strictfold):not(.repend):not(.tlog-alarms)[open] > summary .fold-line::after { content:"›"; transform: rotate(90deg); } @media (max-width: 700px) { .fold-block:not(.strictfold):not(.repend):not(.tlog-alarms) > summary { padding-left: 13px; padding-right: 13px; } } [data-js] form[data-apply-now] .view-apply { display: none; } .repkind { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; } .repbox:has(input[name=rep_kind][value=clone]:checked) .repkind-dup { display: none; } .repbox:has(input[name=rep_kind][value=dup]:checked) .repkind-clone { display: none; } .repkind-clone { display: flex; flex-direction: column; gap: 2px; } .repkind-clone > .btn { align-self: flex-start; } .fab-sheet { background: color-mix(in srgb, var(--panel) 84%, transparent); backdrop-filter: saturate(var(--glass-sat)) blur(var(--glass-blur)); -webkit-backdrop-filter: saturate(var(--glass-sat)) blur(var(--glass-blur)); border: 1px solid color-mix(in srgb, var(--edge2) 70%, transparent); border-radius: 22px; box-shadow: 0 24px 60px -18px rgba(0,0,0,.45); } .fab-sheet .fab-head { background: color-mix(in srgb, var(--panel) 90%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom-color: color-mix(in srgb, var(--edge) 70%, transparent); border-radius: 22px 22px 0 0; } .fab-sheet .fab-head h2 { font: 700 16px/1.25 var(--ff); letter-spacing: -.01em; } .fab-sheet .fab-head .iconbtn { width: 32px; height: 32px; border-radius: 50%; font-size: 14px; border-color: transparent; background: color-mix(in srgb, var(--ink) 7%, transparent); } .fab-sheet .fab-tabbar { border-color: transparent; border-radius: 999px; padding: 3px; background: color-mix(in srgb, var(--ink) 6%, transparent); } .fab-sheet .fab-tabbar label { border-radius: 999px; padding-top: 8px; padding-bottom: 8px; } #fabtab-task:checked ~ .fab-tabbar label[for="fabtab-task"], #fabtab-mat:checked ~ .fab-tabbar label[for="fabtab-mat"], #fabtab-timer:checked ~ .fab-tabbar label[for="fabtab-timer"], #fabtab-sub:checked ~ .fab-tabbar label[for="fabtab-sub"] { background: color-mix(in srgb, var(--now) 15%, var(--panel)); color: var(--now); font-weight: 700; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--now) 32%, transparent); } .fab-sheet input[type=text], .fab-sheet input[type=date], .fab-sheet input[type=time], .fab-sheet input[type=number], .fab-sheet input[type=url], .fab-sheet select, .fab-sheet textarea { border-color: transparent; border-radius: 12px; background: color-mix(in srgb, var(--ink) 6%, transparent); } .fab-sheet input[type=text]:focus, .fab-sheet input[type=date]:focus, .fab-sheet input[type=time]:focus, .fab-sheet input[type=number]:focus, .fab-sheet input[type=url]:focus, .fab-sheet select:focus, .fab-sheet textarea:focus { border-color: color-mix(in srgb, var(--now) 60%, transparent); background: color-mix(in srgb, var(--panel) 80%, transparent); } .fab-sheet .fold-block > summary { border-color: transparent; border-radius: 12px; background: color-mix(in srgb, var(--ink) 6%, transparent); } .fab-sheet .kindbox { padding: 0; border: 0; background: none; } .fab-sheet .kindpick { gap: 0; border-radius: 12px; overflow: hidden; background: color-mix(in srgb, var(--ink) 6%, transparent); } .fab-sheet .kindopt { border: 0; border-radius: 0; background: none; padding: 10px 12px; align-items: center; border-top: 1px solid color-mix(in srgb, var(--edge) 80%, transparent); } .fab-sheet .kindopt:first-child { border-top: 0; } .fab-sheet .kindopt:has(input:checked) { background: color-mix(in srgb, var(--now) 10%, transparent); } .fab-sheet .kindopt b { font-size: 13px; text-transform: none; letter-spacing: 0; } .fab-sheet .kindopt small { font-size: 11px; text-transform: none; letter-spacing: 0; } .fab-sheet .formend { margin-top: 18px; padding-top: 14px; border-top-color: color-mix(in srgb, var(--edge) 70%, transparent); } .fab-sheet .formend .btn.primary { min-height: 46px; border-radius: 14px; font-size: 15px; } @media (max-width: 700px), (max-height: 480px) { .fab-sheet { border-radius: 22px; } .fab-sheet .fab-head::before { content:""; position: absolute; left: 50%; top: 6px; width: 36px; height: 4px; margin-left: -18px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 18%, transparent); } .fab-sheet .fab-head { padding-top: 18px; } .fab-sheet .fab-tabbar { background: color-mix(in srgb, var(--ink) 6%, var(--panel)); } } @media (max-width: 619px) and (min-height: 481px) { .fab-sheet .fields2:has(> div > input[type="date"]), .fab-sheet .notewhen .fields2 { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } .fab-sheet .fields2 input[type="time"][data-empty]::before { content:"час"; } } .fab-sheet .shelfbox { border: 0; padding: 0; background: none; } .fab-sheet .shelfpick { border-color: transparent; border-radius: 999px; padding: 3px; gap: 2px; background: color-mix(in srgb, var(--ink) 6%, transparent); } .fab-sheet .shelfpick .modeside { border-radius: 999px; border-color: transparent; background: none; } .fab-sheet .shelfradio[value="note"]:checked ~ .shelfbox .sh-note, .fab-sheet .shelfradio[value="pad"]:checked ~ .shelfbox .sh-pad, .fab-sheet .shelfradio[value="brain"]:checked ~ .shelfbox .sh-brain { background: color-mix(in srgb, var(--panel) 92%, transparent); border-color: transparent; box-shadow: 0 1px 3px rgba(0,0,0,.14); } .fab-sheet .howlong .btn.primary { min-height: 46px; border-radius: 14px; font-size: 15px; } .top-in { gap: 14px; } .nav { flex: 0 1 auto; min-width: 0; margin: 0 auto; gap: 2px; padding: 4px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--edge2) 70%, transparent); background: color-mix(in srgb, var(--panel) 62%, transparent); box-shadow: 0 6px 18px -12px rgba(0,0,0,.4); } .nav a { position: relative; gap: 6px; padding: 8px 13px; border: 0; font: 600 12.5px/1 var(--ff); letter-spacing: .1px; transition: color .18s cubic-bezier(.22,1,.36,1), background-color .18s; } .nav a i { font-size: 14px; line-height: 1; } .nav a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); } .nav a.on { color: var(--now); font-weight: 700; border: 0; background: color-mix(in srgb, var(--now) 15%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--now) 32%, transparent); } @media (max-width: 860px) { .nav { width: auto; max-width: 100%; margin: 2px auto 8px; } } .nav a[href="/search"], .nav a[href="/settings"] { display: none; } .topdoors { display: flex; } @media (min-width: 701px) and (min-height: 481px) { .topbtn { width: 36px; height: 36px; font-size: 17px; border-color: color-mix(in srgb, var(--edge2) 70%, transparent); background: color-mix(in srgb, var(--panel) 62%, transparent); } .topbtn:hover { color: var(--ink); border-color: var(--edge2); } .topbtn.on { color: var(--now); border-color: transparent; background: color-mix(in srgb, var(--now) 15%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--now) 32%, transparent); } } .pickcap, .pickdeck { display: none; } @media (max-width: 700px), (max-height: 480px) { .top-in { position: relative; } .pickcap { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: absolute; inset: 0; z-index: 2; padding: 0 calc(12px + var(--safe-r)) 0 calc(12px + var(--safe-l)); background: var(--bar, color-mix(in srgb, var(--bg2) 64%, var(--bg))); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease, visibility 0s linear .18s; } html.picking .pickcap { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .18s ease; } .pickcap-cnt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 650 17px/1.25 var(--ff); color: var(--ink); letter-spacing: -.01em; font-variant-numeric: tabular-nums; } .pickcap-done { flex: none; min-width: 86px; border-radius: 999px; } html.picking .curtain-pull { visibility: hidden; pointer-events: none; } .tabbar, .fab, .boxrail { transition: transform .32s cubic-bezier(.22,1,.36,1), opacity .2s ease; } html.picking .tabbar { transform: translateY(calc(100% + 44px)); opacity: 0; pointer-events: none; } html.picking .fab, html.picking .boxrail { transform: translateY(24px) scale(.86); opacity: 0; pointer-events: none; } html.picking .tabshield { pointer-events: none; } .pickdeck { display: flex; flex-direction: column; position: fixed; z-index: 58; left: calc(10px + var(--safe-l)); right: calc(10px + var(--safe-r)); bottom: var(--bar-lift); pointer-events: none; } .pickdeck[hidden] { display: none; } .pickdeck-bar, .pickdeck-sheet { pointer-events: auto; background: color-mix(in srgb, var(--panel) 72%, transparent); backdrop-filter: saturate(var(--glass-sat)) blur(var(--glass-blur)); -webkit-backdrop-filter: saturate(var(--glass-sat)) blur(var(--glass-blur)); border: 1px solid color-mix(in srgb, var(--edge2) 70%, transparent); box-shadow: 0 10px 30px -8px rgba(0,0,0,.45), 0 2px 8px -4px rgba(0,0,0,.3); transform: translateZ(0); } .pickdeck-bar { display: flex; gap: 2px; padding: 5px; border-radius: 999px; animation: pickdeck-up .34s cubic-bezier(.22,1,.36,1); } .pickdeck-btn { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 56px; padding: 6px 2px; border: 0; border-radius: 999px; background: transparent; color: var(--ink2); font: 600 10px/1 var(--ff); letter-spacing: .1px; -webkit-tap-highlight-color: transparent; touch-action: manipulation; -webkit-user-select: none; user-select: none; transition: color .16s ease, background-color .16s ease, transform .12s ease, opacity .16s ease; } .pickdeck-btn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .pickdeck-btn svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .pickdeck-btn[data-deck="do"] svg { fill: currentColor; stroke: none; } .pickdeck-btn:active { transform: scale(.93); } .pickdeck-btn.on { color: var(--now); background: color-mix(in srgb, var(--now) 14%, transparent); } .pickdeck-btn.is-danger { color: var(--bad); } .pickdeck.empty .pickdeck-btn:not([data-deck="take"]) { opacity: .36; pointer-events: none; } .pickdeck-sheet { display: none; margin-bottom: 8px; max-height: min(60vh, 540px); overflow-y: auto; overscroll-behavior: contain; border-radius: 24px; background: color-mix(in srgb, var(--panel) 88%, transparent); box-shadow: 0 18px 44px -14px rgba(0,0,0,.5), 0 2px 8px -4px rgba(0,0,0,.25); transform-origin: 50% 100%; } .pickdeck[data-show] .pickdeck-sheet { display: block; animation: pickdeck-sheet .26s cubic-bezier(.22,1,.36,1); } .pickbar.decked { position: static; width: auto; max-width: none; max-height: none; transform: none; overflow: visible; box-shadow: none; border: 0; border-radius: 0; background: transparent; } .pickbar.decked .pickbar-in { padding: 14px 14px 10px; } .pickbar.decked .pickbar-grip { display: none; } .pickdeck[data-show="take"] .picksect-do, .pickdeck[data-show="do"] .picksect-take, .pickdeck[data-show="move"] .picksect-take, .pickdeck[data-show="move"] .picksect-do > .pick-label, .pickdeck[data-show="move"] .pickbar-acts > :not(.pickrow-move), .pickdeck[data-show="move"] .pickmove { display: none; } .pickbar.decked .pickrow { flex-wrap: wrap; overflow: visible; row-gap: 7px; } .pickbar.decked .pickrow:last-child { border-bottom: 0; padding-bottom: 0; } .pickdeck[data-show="do"] .picksect-do, .pickdeck[data-show="move"] .picksect-do { border-top: 0; margin-top: 0; padding-top: 0; } } @keyframes pickdeck-up { from { transform: translateY(calc(100% + 30px)) translateZ(0); opacity: 0; } to { transform: translateY(0) translateZ(0); opacity: 1; } } @keyframes pickdeck-sheet { from { transform: translateY(14px) scale(.97) translateZ(0); opacity: 0; } to { transform: none; opacity: 1; } } @media (prefers-reduced-motion: reduce) { .pickdeck-bar, .pickdeck[data-show] .pickdeck-sheet { animation: none; } } .picking [data-pick]::before { width: 20px; height: 20px; left: 4px; box-sizing: border-box; border: 1.6px solid color-mix(in srgb, var(--ink) 32%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--panel) 92%, transparent); box-shadow: none; } .picking .plan[data-pick]::before, .picking .item[data-pick]::before, .picking .mat[data-pick]::before, .picking .part[data-pick]::before, .picking .tlog-line[data-pick]::before { margin-top: -10px; } .picking [data-pick]:hover::before { border-color: var(--now); } .picking [data-pick].picked::before, .picking .plan[data-pick].picked .plan-check::after { border: 0; background: var(--now); box-shadow: none; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='20' height='20' fill='white'/%3E%3Cpath d='M5.6 10.3l2.9 2.9 5.9-6.2' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='10' cy='10' r='10' fill='white' mask='url(%23m)'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='20' height='20' fill='white'/%3E%3Cpath d='M5.6 10.3l2.9 2.9 5.9-6.2' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='10' cy='10' r='10' fill='white' mask='url(%23m)'/%3E%3C/svg%3E") center / 100% 100% no-repeat; } .picking .plan[data-pick] { padding-left: 10px; } .picking .plan[data-pick]::before { content: none; } .picking [data-pick] .plan-check { display: block; position: relative; } .picking [data-pick] .plan-check .tick { visibility: hidden; } .picking .plan[data-pick] .plan-check::after { content:""; position: absolute; left: 1px; top: 3px; width: 20px; height: 20px; box-sizing: border-box; border-radius: 50%; border: 1.6px solid color-mix(in srgb, var(--ink) 32%, transparent); background: color-mix(in srgb, var(--panel) 92%, transparent); pointer-events: none; transition: background-color .12s ease, border-color .12s ease; } .picking .strict[data-pick]::before { width: 20px; height: 20px; margin-top: -10px; box-sizing: border-box; border: 1.6px solid color-mix(in srgb, var(--ink) 32%, transparent); border-radius: 50%; } .picking .strict[data-pick].picked::before { border: 0; background: var(--now); } .picking .strict.is-warn[data-pick]::before { display: block; } .picking [data-pick] a { opacity: 1; } .picking [data-pick] button, .picking [data-pick] .iconbtn, .picking [data-pick] .movepop { visibility: hidden; } .picking .pchip[data-pick] button, .picking .pchip[data-pick] .iconbtn { visibility: visible; } .picking .plannote { opacity: .45; } .picking .plannote * { pointer-events: none; } .undotoast { display: none; } @media (max-width: 700px), (max-height: 480px) { .undotoast { display: flex; align-items: center; gap: 10px; position: fixed; z-index: 70; left: 50%; bottom: calc(var(--fab-bottom) + var(--fab-h) + 14px); width: max-content; max-width: calc(100vw - 32px); padding: 7px 7px 7px 16px; border-radius: 999px; background: color-mix(in srgb, var(--panel) 82%, transparent); backdrop-filter: saturate(var(--glass-sat)) blur(var(--glass-blur)); -webkit-backdrop-filter: saturate(var(--glass-sat)) blur(var(--glass-blur)); border: 1px solid color-mix(in srgb, var(--edge2) 70%, transparent); box-shadow: 0 12px 30px -10px rgba(0,0,0,.45); color: var(--ink); font: 600 14px/1.25 var(--ff); transform: translateX(-50%) translateZ(0); animation: undotoast-in .3s cubic-bezier(.22,1,.36,1); transition: opacity .22s ease, transform .22s ease; } .undotoast.is-out { opacity: 0; transform: translateX(-50%) translateY(10px) translateZ(0); } .undotoast-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .undotoast-btn { flex: none; border: 0; border-radius: 999px; padding: 9px 15px; background: color-mix(in srgb, var(--now) 16%, transparent); color: var(--now); font: 700 14px/1 var(--ff); -webkit-tap-highlight-color: transparent; } .undotoast-btn:active { transform: scale(.95); } } @keyframes undotoast-in { from { opacity: 0; transform: translateX(-50%) translateY(12px) translateZ(0); } to { opacity: 1; transform: translateX(-50%) translateZ(0); } } .picking .plan[data-pick] .plan-check { touch-action: none; } @media (max-width: 700px), (max-height: 480px) { html.picking [data-pick-start] { visibility: hidden; } } :root { --btn-rad: 999px; --btn-fill: color-mix(in srgb, var(--panel) 70%, transparent); --btn-edge: color-mix(in srgb, var(--ink) 9%, transparent); --btn-hi: inset 0 1px 0 rgba(255, 255, 255, .72); --btn-drop: 0 1px 1px rgba(15, 23, 32, .04), 0 2px 8px -3px rgba(15, 23, 32, .14); --btn-tone: color-mix(in srgb, var(--ink) 5%, transparent); } :root:not([data-light]) { --btn-fill: color-mix(in srgb, #FFFFFF 7%, transparent); --btn-edge: color-mix(in srgb, #FFFFFF 11%, transparent); --btn-hi: inset 0 1px 0 rgba(255, 255, 255, .07); --btn-drop: 0 2px 10px -4px rgba(0, 0, 0, .45); --btn-tone: color-mix(in srgb, #FFFFFF 6%, transparent); } :root[data-skin="neon"], :root[data-skin="cyber"] { --btn-rad: var(--rad-s); } body { font-variant-numeric: tabular-nums; } .btn { border-radius: var(--btn-rad); border-color: var(--btn-edge); background: var(--btn-fill); box-shadow: var(--btn-hi), var(--btn-drop); transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s, transform .12s; -webkit-tap-highlight-color: transparent; } .btn:hover { border-color: color-mix(in srgb, var(--now) 38%, var(--btn-edge)); color: var(--now); } .btn:active { transform: scale(.97); } .btn.xs { border-radius: var(--btn-rad); } .btn.primary, [data-skin="mercury"] .btn.primary { background: var(--now); border-color: transparent; color: var(--heat-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 4px 14px -6px color-mix(in srgb, var(--now) 75%, transparent); } .btn.primary:hover { color: var(--heat-ink); } .btn.ghost { background: var(--btn-tone); border-color: transparent; box-shadow: none; color: var(--ink2); } .btn.ghost:hover { background: color-mix(in srgb, var(--ink) 9%, transparent); color: var(--ink); } .btn.danger { background: color-mix(in srgb, var(--bad) 9%, transparent); border-color: transparent; box-shadow: none; color: var(--bad); } .btn.danger:hover { background: color-mix(in srgb, var(--bad) 16%, transparent); } .iconbtn { border-radius: var(--btn-rad); border-color: var(--btn-edge); background: var(--btn-fill); box-shadow: var(--btn-hi), var(--btn-drop); -webkit-tap-highlight-color: transparent; transition: color .15s, border-color .15s, transform .12s; } .iconbtn:active { transform: scale(.94); } .topbtn { border-color: var(--btn-edge); background: var(--btn-fill); box-shadow: var(--btn-hi), var(--btn-drop); } .seg .btn:first-child { border-radius: var(--btn-rad) 0 0 var(--btn-rad); } .seg .btn:last-child { border-radius: 0 var(--btn-rad) var(--btn-rad) 0; } .seg .btn:only-child { border-radius: var(--btn-rad); } .chip { border-color: transparent; background: var(--btn-tone); } :where(:root:not([data-skin="neon"]):not([data-skin="cyber"])) :is( .chip.dc, .chip.late, .chip.soon, .chip.ok, .chip.now, .chip.tag, .chip.link, .chip.proj, .chip.copy-mark, .chip.rep-chip, .chip.goal-behind, .chip.goal-ahead, .chip.flag:not(.opt), .chip.shelf-pad ) { border-color: transparent; } .is-pressed { box-shadow: inset 0 0 0 100vmax color-mix(in srgb, var(--ink) 7%, transparent); transition: box-shadow 0s; } :root:not([data-light]) .is-pressed { box-shadow: inset 0 0 0 100vmax color-mix(in srgb, #FFFFFF 7%, transparent); } .is-hover { background: color-mix(in srgb, var(--now) 16%, transparent) !important; border-color: color-mix(in srgb, var(--now) 45%, transparent) !important; transform: scale(.97); transition: transform .08s ease, background-color .08s ease; } html.sliding, html.sliding * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } .movepop:not(.chipmove) > summary { border-radius: var(--btn-rad); border-color: var(--btn-edge); background: var(--btn-fill); box-shadow: var(--btn-hi), var(--btn-drop); -webkit-tap-highlight-color: transparent; transition: color .15s, border-color .15s, transform .12s; } .movepop:not(.chipmove) > summary:active { transform: scale(.94); } .movepop:not(.chipmove)[open] > summary { color: var(--now); background: color-mix(in srgb, var(--now) 14%, transparent); border-color: transparent; } .movepop-menu { border-radius: 20px; padding: 12px; background: color-mix(in srgb, var(--panel) 84%, transparent); backdrop-filter: saturate(var(--glass-sat)) blur(var(--glass-blur)); -webkit-backdrop-filter: saturate(var(--glass-sat)) blur(var(--glass-blur)); border: 1px solid color-mix(in srgb, var(--edge2) 70%, transparent); box-shadow: 0 18px 44px -14px rgba(0, 0, 0, .45), 0 2px 8px -4px rgba(0, 0, 0, .2); } .movetab { border-color: transparent; border-radius: 12px; background: var(--btn-tone); min-height: 38px; transition: background-color .12s ease, color .12s ease, transform .1s ease; } .movetab:hover { border-color: transparent; background: color-mix(in srgb, var(--ink) 9%, transparent); } .movetab:has(input:checked) { border-color: transparent; color: var(--now); background: color-mix(in srgb, var(--now) 15%, transparent); } .movepop.chipmove > summary.chip { border-color: transparent; background: var(--btn-tone); font-family: var(--ff); } .movepop.chipmove > summary.chip.now { border-color: transparent; } .periodpick { flex-wrap: nowrap; align-items: center; gap: 8px; } .periodpick .seg { display: inline-flex; } .periodpick .seg .btn { min-width: 36px; padding-left: 8px; padding-right: 8px; } .periodpick-word { color: var(--mut); font-size: 12.5px; } @media (max-width: 700px), (max-height: 480px) { footer.foot { padding-bottom: calc(var(--fab-add) - 6px); } } :root { color-scheme: dark; accent-color: var(--now); } :root[data-light] { color-scheme: light; } .askwrap { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; place-items: safe center; overflow-y: auto; overscroll-behavior: contain; padding: calc(20px + env(safe-area-inset-top)) 22px calc(20px + var(--safe-b)); background: rgba(12, 16, 22, .3); animation: ask-dim .18s ease both; -webkit-tap-highlight-color: transparent; } :root:not([data-light]) .askwrap { background: rgba(0, 0, 0, .5); } .askwrap.is-out { opacity: 0; pointer-events: none; transition: opacity .16s ease; } .askbox { width: min(340px, 100%); padding: 20px 16px 14px; text-align: center; border-radius: 24px; background: color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter: saturate(var(--glass-sat)) blur(var(--glass-blur)); -webkit-backdrop-filter: saturate(var(--glass-sat)) blur(var(--glass-blur)); border: 1px solid color-mix(in srgb, var(--edge2) 70%, transparent); box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .55), 0 2px 10px -4px rgba(0, 0, 0, .25); animation: ask-in .22s cubic-bezier(.22, 1, .36, 1) both; } .ask-head { margin: 0; padding: 0 4px; white-space: pre-line; font: 650 17px/1.3 var(--ff); letter-spacing: -.01em; color: var(--ink); } .ask-tail { margin: 7px 0 0; padding: 0 4px; white-space: pre-line; font: 400 14px/1.45 var(--ff); color: var(--ink2); } .askbox .ask-field { display: block; width: 100%; margin: 14px 0 0; text-align: center; font-size: 17px; min-height: 44px; border-radius: 14px; } .ask-line { display: flex; gap: 8px; margin-top: 14px; } .askbox .ask-line .ask-field { margin: 0; flex: 1 1 0; min-width: 0; } .ask-acts { display: flex; gap: 8px; margin-top: 18px; } .ask-acts .btn { flex: 1 1 0; min-width: 0; min-height: 44px; padding-left: 8px; padding-right: 8px; font-size: 15px; } .ask-acts.is-stack { flex-direction: column-reverse; } .ask-acts.is-stack .btn { flex: none; width: 100%; white-space: normal; line-height: 1.25; } @media (pointer: coarse) { .askwrap.has-field { place-items: start center; padding-top: calc(15vh + env(safe-area-inset-top)); } } @keyframes ask-dim { from { opacity: 0; } } @keyframes ask-in { from { opacity: 0; transform: scale(.94) translateY(8px); } } @media (prefers-reduced-motion: reduce) { .askwrap, .askbox { animation: none; } } select:not([multiple]):not([size]) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%237d8a97' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 12px 8px; padding-right: 34px; text-overflow: ellipsis; } .periodpick .seg { gap: 2px !important; padding: 3px; border: 1px solid var(--edge2); border-radius: 999px; background: var(--bg2); } .periodpick .seg .btn, .periodpick .seg .btn:first-child, .periodpick .seg .btn:last-child { margin-left: 0; min-width: 34px; border-radius: 999px; border: 1px solid transparent; background: transparent; box-shadow: none; color: var(--ink2); font-weight: 600; } .periodpick .seg .btn.primary { background: var(--panel); color: var(--now); border-color: color-mix(in srgb, var(--now) 45%, var(--edge2)); } @media (hover: hover) { .periodpick .seg .btn.ghost:hover { background: var(--panel2); color: var(--ink); } } .card .tile { border-color: transparent; background: transparent; padding: 6px 4px; } .card .tile.warn { border-color: color-mix(in srgb, var(--wait) 45%, var(--edge)); padding: 6px 9px; } .topbtn svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } @media (max-width: 700px), (max-height: 480px) { .fab, .fab.boxfab, .boxrail { background: color-mix(in srgb, var(--panel) 72%, transparent); border-color: color-mix(in srgb, var(--edge2) 70%, transparent); box-shadow: 0 10px 30px -8px rgba(0,0,0,.45), 0 2px 8px -4px rgba(0,0,0,.3); } .fab:not(.boxfab):not(.notefab) .fab-plus::before { height: 11.5%; } .fab:not(.boxfab):not(.notefab) .fab-plus::after { width: 11.5%; } } @media (max-width: 700px), (max-height: 480px) { footer.foot { padding-top: 14px; } footer.foot:has(> *) { padding-top: 30px; } } @media (max-width: 700px), (max-height: 480px) { .fab:not(.boxfab):not(.notefab) { background: color-mix(in srgb, var(--now) 18%, color-mix(in srgb, var(--panel) 74%, transparent)); border-color: color-mix(in srgb, var(--now) 36%, transparent); } .fab:not(.boxfab):not(.notefab) .fab-plus { width: 42%; height: 42%; } .fab:not(.boxfab):not(.notefab) .fab-plus::before { height: 14%; } .fab:not(.boxfab):not(.notefab) .fab-plus::after { width: 14%; } } .shelfpick, .shelfpick.three { grid-template-columns: 1fr; gap: 6px; padding: 0; border: 0; background: none; } .shelfpick .modeside, .shelfpick.three .modeside { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 10px; align-items: center; text-align: left; padding: 8px 11px; border: 1px solid var(--edge); border-radius: var(--rad-s); background: var(--panel); } .shelfpick .modeside::before { content:""; grid-row: 1 / span 2; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--mut) 75%, transparent); } .shelfpick .modeside b, .shelfpick.three .modeside b { font: 700 13px/1.3 var(--ff); } .shelfpick .modeside small, .shelfpick.three .modeside small { display: block; grid-column: 2; margin: 1px 0 0; font: 400 11px/1.3 var(--ff); color: var(--mut); } .shelfradio[value="note"]:checked ~ .shelfbox .sh-note, .shelfradio[value="pad"]:checked ~ .shelfbox .sh-pad, .shelfradio[value="brain"]:checked ~ .shelfbox .sh-brain { border-color: var(--now); background: var(--panel2); box-shadow: none; } .shelfradio[value="note"]:checked ~ .shelfbox .sh-note::before, .shelfradio[value="pad"]:checked ~ .shelfbox .sh-pad::before, .shelfradio[value="brain"]:checked ~ .shelfbox .sh-brain::before { box-shadow: inset 0 0 0 1.5px var(--now); background: radial-gradient(circle, var(--now) 0 4.5px, transparent 5px); } .shelfradio[value="note"]:checked ~ .shelfbox .sh-note.side-note::before { box-shadow: inset 0 0 0 1.5px var(--wait); background: radial-gradient(circle, var(--wait) 0 4.5px, transparent 5px); } .shelfradio:focus-visible ~ .shelfbox .shelfpick { outline: 2px solid color-mix(in srgb, var(--now) 60%, transparent); outline-offset: 2px; } .fab-sheet .shelfpick { gap: 0; padding: 0; border-radius: 12px; overflow: hidden; background: color-mix(in srgb, var(--ink) 6%, transparent); } .fab-sheet .shelfpick .modeside { border: 0; border-radius: 0; background: none; padding: 10px 12px; border-top: 1px solid color-mix(in srgb, var(--edge) 80%, transparent); } .fab-sheet .shelfpick .modeside:first-child { border-top: 0; } .fab-sheet .shelfradio[value="note"]:checked ~ .shelfbox .sh-note, .fab-sheet .shelfradio[value="pad"]:checked ~ .shelfbox .sh-pad, .fab-sheet .shelfradio[value="brain"]:checked ~ .shelfbox .sh-brain { background: color-mix(in srgb, var(--now) 10%, transparent); border-color: color-mix(in srgb, var(--edge) 80%, transparent); box-shadow: none; } .fab-sheet .shelfradio[value="note"]:checked ~ .shelfbox .sh-note:first-child, .fab-sheet .shelfradio[value="pad"]:checked ~ .shelfbox .sh-pad:first-child { border-top-color: transparent; } .pin-more { display: inline-block; margin-left: 3px; padding: 0 6px; border-radius: 999px; font: 700 11px/17px var(--ff); white-space: nowrap; vertical-align: 1px; color: inherit; background: color-mix(in srgb, currentColor 14%, transparent); } .fab-pin-head { display: flex; align-items: baseline; gap: 10px; } .fab-pin-head .fab-pin-title { flex: 1 1 auto; min-width: 0; } .fab-pin-off { position: relative; flex: none; margin: 0; padding: 0; min-height: 0; border: 0; background: none; cursor: pointer; font: 600 13px/1.3 var(--ff); color: var(--mut); } .fab-pin-off::after { content:""; position: absolute; inset: -12px -10px; } .fab-pin-off:hover { color: var(--ink); } .fab-pin-off:disabled { opacity: .5; cursor: default; } .fab-pin.is-off { opacity: .75; } .fab-pin.is-off .fab-pin-facts, .fab-pin.is-off .fab-pin-acts { display: none; } .fab-pin.is-off .fab-pin-title { color: var(--mut); text-decoration: line-through; text-decoration-thickness: 1px; } .fab-pin.is-off .fab-pin-off { color: var(--now); } .dirline-projs { display: flex; flex-wrap: wrap; gap: 5px; margin: -2px 0 9px 26px; } .dirproj { display: inline-flex; align-items: baseline; gap: 5px; max-width: 100%; padding: 2px 8px; border-radius: 999px; font: 600 11.5px/1.45 var(--ff); color: var(--mut); border: 1px dashed color-mix(in srgb, var(--mut) 40%, transparent); overflow-wrap: anywhere; } .dirproj.is-lit { border: 1px solid color-mix(in srgb, var(--pc) 45%, transparent); background: color-mix(in srgb, var(--pc) 14%, transparent); color: color-mix(in oklab, var(--pc) 55%, var(--ink)); } [data-light] .dirproj.is-lit { color: color-mix(in oklab, var(--pc) 62%, #0E1720); } .dirproj b { font-weight: 800; color: var(--ink2); } [data-light] .dirproj b { color: var(--ink); } .dayhead-rate { margin-left: auto; } @media (min-width: 900px) and (min-height: 481px) { .dayhead-rate { display: none; } } #rate { scroll-margin-top: calc(var(--top-h, 57px) + 14px); } .strict.is-warn .strict-acts { align-self: flex-end; } .strict.is-warn .strict-acts { margin-right: -34px; justify-content: flex-end; } @media (max-width: 620px), (max-height: 480px) { .strict.is-warn .strict-acts { width: 38px; justify-content: center; } } [data-skin="neon"] .card::before { box-shadow: 0 0 8px -3px var(--now); } [data-skin="neon"] .card::after { opacity: .6; background: linear-gradient(90deg, transparent, var(--now) 22%, var(--ok) 78%, transparent); } [data-skin="neon"] .btn.primary { box-shadow: 0 0 10px -5px var(--now); } [data-skin="neon"] .brand-mark { box-shadow: 0 0 10px -4px var(--now); } [data-skin="neon"] .cal-day.today, [data-skin="neon"] .pday.today { box-shadow: inset 0 0 0 1px var(--now), 0 0 10px -6px var(--now); } [data-skin="cyber"] body::before { background: radial-gradient(54vmax 46vh at calc(14vmax + 14vw) calc(14vmax + 84vh), color-mix(in srgb, var(--now) 9%, transparent), transparent 66%), radial-gradient(46vmax 40vh at calc(14vmax + 88vw) calc(14vmax + 12vh), color-mix(in srgb, var(--bad) 7%, transparent), transparent 68%), linear-gradient(178deg, transparent 52%, color-mix(in srgb, #00121C 46%, transparent)); } @keyframes mercury-sheen { 0%, 62%, 100% { opacity: 0; } 80% { opacity: .26; } } @supports (color: oklch(from red l c h)) { :root:not([data-light]) .chip.dc, :root:not([data-light]) .chip.proj { color: oklch(from var(--dc) min(max(l, 0.78), 0.88) min(c, 0.11) h); } :root:not([data-light]) .dirproj.is-lit { color: oklch(from var(--pc) min(max(l, 0.78), 0.88) min(c, 0.11) h); } :root:not([data-light]) .strict-clock b { color: oklch(from var(--dc, var(--wait)) min(max(l, 0.76), 0.86) min(c, 0.12) h); } :root:not([data-light]) .strict.running .strict-when b { color: var(--bad); } [data-light] .chip.dc, [data-light] .chip.proj { color: oklch(from var(--dc) min(max(l, 0.36), 0.50) min(c, 0.14) h); } [data-light] .dirproj.is-lit { color: oklch(from var(--pc) min(max(l, 0.36), 0.50) min(c, 0.14) h); } [data-light] .strict-when b { color: oklch(from var(--dc, var(--wait)) min(max(l, 0.38), 0.52) min(c, 0.14) h); } [data-light] .strict.running .strict-when b { color: var(--bad); } :root[data-skin="tint"] { --now: oklch(from var(--tint) min(max(l, 0.76), 0.84) min(c, 0.13) h); } :root[data-skin="tintlight"] { --now: oklch(from var(--tint) min(max(l, 0.36), 0.50) min(c, 0.15) h); } } .wl:not(.is-index) { stroke-width: 1px; opacity: .3; } .wl.is-focus { stroke-width: calc(1.6px + var(--fw, 0) * 2.6px); opacity: calc(.6 + var(--fw, 0) * .36); } @media (max-width: 700px) { .wl:not(.is-index) { stroke-width: .9px; } .wl.is-focus { stroke-width: calc(1.3px + var(--fw, 0) * 2.2px); } } .wt-scale { justify-content: center; } .scalemark { display: inline-flex; align-items: flex-end; line-height: 0; } .scalemark svg { display: block; width: 40px; height: 16px; overflow: visible; } @media (max-width: 700px) { .scalemark svg { width: 26px; height: 13px; } } .calscroll.is-zoom .scalemark svg { width: 30px; height: 13px; } .legend .legend-index-mark i { width: 14px; height: 3px; border-radius: 2px; } body[data-page="panel"] footer.foot { margin-top: calc(-1 * var(--panel-cut, 0px)); pointer-events: none; } .legend.has-fw i { width: 16px; height: 1.5px; border-radius: 2px; opacity: .45; } .legend.has-fw .legend-index-mark i { height: 3px; opacity: 1; } .legend.has-fw .is-take i { height: calc(2.5px + var(--fw, 0) * 4px); opacity: calc(.65 + var(--fw, 0) * .35); } .legend .is-focus { color: var(--ink); font-weight: 700; } .kindopt { gap: 10px; } .kindopt input[type="radio"] { -webkit-appearance: none; appearance: none; flex: none; width: 18px; height: 18px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--mut) 75%, transparent); } .kindopt input[type="radio"]:checked { box-shadow: inset 0 0 0 1.5px var(--now); background: radial-gradient(circle, var(--now) 0 4.5px, transparent 5px); } .kindopt input[type="radio"]:focus-visible { outline: 2px solid color-mix(in srgb, var(--now) 60%, transparent); outline-offset: 2px; } .kindopt small { font: 400 11px/1.3 var(--ff); } .fab-sheet .kindopt:has(input:checked) { border-top-color: color-mix(in srgb, var(--edge) 80%, transparent); } .fab-sheet .kindopt:first-child:has(input:checked) { border-top-color: transparent; } @supports (color: oklch(from red l c h)) { :root:not([data-light]) .pchip:not(.pnote-chip) { background: color-mix(in oklab, oklch(from var(--dc, var(--mut)) min(max(l, 0.60), 0.74) min(c, 0.12) h) var(--pfill-d, 32%), var(--panel2)); border-color: color-mix(in oklab, oklch(from var(--dc, var(--mut)) min(max(l, 0.60), 0.74) min(c, 0.12) h) var(--pline-d, 26%), transparent); } :root:not([data-light]) .pchip.pc, :root:not([data-light]) .pchip.is-event.pc { border-color: color-mix(in oklab, oklch(from var(--pc) min(max(l, 0.62), 0.76) min(c, 0.12) h) 60%, transparent); } :root:not([data-light]) .pchip.is-event { background-color: color-mix(in oklab, oklch(from var(--dc, var(--mut)) min(max(l, 0.60), 0.74) min(c, 0.12) h) var(--efill-d, 40%), var(--panel)); border-color: color-mix(in oklab, oklch(from var(--dc, var(--mut)) min(max(l, 0.60), 0.74) min(c, 0.12) h) 34%, transparent); } :root:not([data-light]) .pchip.plain:not(.pnote-chip) { background: color-mix(in oklab, oklch(from var(--dc, var(--mut)) min(max(l, 0.60), 0.74) min(c, 0.12) h) 10%, var(--panel2)); border-color: color-mix(in oklab, oklch(from var(--dc, var(--mut)) min(max(l, 0.60), 0.74) min(c, 0.12) h) 34%, transparent); } } :root:not([data-light]) .calplan .pday.past, :root:not([data-light]) .pchip.is-done { --pfill-d: 16%; --pline-d: 18%; --efill-d: 20%; } :root:not([data-light]) .pchip.is-done .pchip-name { color: var(--mut); text-decoration-color: color-mix(in srgb, var(--mut) 60%, transparent); } :root:not([data-light]) .pday.today, :root:not([data-light]) .calplan.dense:not(.shape-feed) .pday.today, :root:not([data-light]) .calplan.shape-grid .pday.today { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--now) 42%, transparent); background: color-mix(in srgb, var(--now) 4%, transparent); } :root:not([data-light]) .calplan:not(.shape-grid) .pday.today { box-shadow: inset 2px 0 0 color-mix(in srgb, var(--now) 70%, transparent); } :root:not([data-light]) .planmonth[data-now] > .cal, :root:not([data-light]) .planmonth[data-now] > .calplan { border-color: color-mix(in srgb, var(--now) 28%, var(--edge2)); box-shadow: none; } .focuspick .row { padding-left: 0; padding-right: 0; gap: 8px; } .pchip.pnote-chip .pchip-name { font: inherit; font-style: normal; letter-spacing: 0; } .dbv-door { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--edge); border-radius: var(--rad-s); color: var(--ink); text-decoration: none; } .dbv-title { font-size: 22px; margin: 14px 0 6px; overflow-wrap: anywhere; } .dbv-lead { margin: 0 0 12px; } .dbv-crumbs { margin: 12px 0 0; } .dbv-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--tc, var(--mut)); margin-right: 6px; vertical-align: 1px; } .dbv-dot.big { width: 14px; height: 14px; } .dbv-bars { display: grid; gap: 4px; } .dbv-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 2px 12px; align-items: baseline; color: var(--ink); text-decoration: none; padding: 4px 0; } .dbv-bar-num { text-align: right; font-size: 12px; white-space: nowrap; } .dbv-bar-line { grid-column: 1 / -1; position: relative; height: 6px; border-radius: 3px; background: var(--panel2); overflow: hidden; } .dbv-bar-line i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--tc); border-radius: 3px; } .dbv-bar-line i.ix { background: color-mix(in srgb, var(--tc) 40%, transparent); left: auto; right: auto; } .dbv-pages, .dbv-stage { position: relative; color: var(--mut); } .dbv-pages canvas { display: block; touch-action: none; } .dbv-tip { position: absolute; z-index: 3; max-width: 340px; padding: 6px 9px; border-radius: var(--rad-s); background: var(--panel); border: 1px solid var(--edge2); color: var(--ink); font-size: 12px; pointer-events: none; box-shadow: var(--shadow); } .dbv-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; } .dbv-key { display: inline-flex; align-items: center; background: none; border: 0; padding: 2px 0; color: var(--ink2); font: inherit; cursor: pointer; } .dbv-key.off { opacity: .4; text-decoration: line-through; } .dbv-key.ix .dbv-dot { opacity: .45; } .dbv-key.free .dbv-dot { border: 1px solid var(--mut); } .dbv-net-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0; } .dbv-net-bar .grow { flex: 1; } .dbv-net { display: grid; gap: 12px; } .dbv-stage { --dbv-ink: var(--ink); height: 70vh; min-height: 360px; border: 1px solid var(--edge); border-radius: var(--rad); background: var(--panel); overflow: hidden; } .dbv-stage canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; } .dbv-wait { position: absolute; left: 14px; top: 10px; margin: 0; } .dbv-side { max-height: 70vh; overflow: auto; } .dbv-side .dbv-title { font-size: 17px; } @media (min-width: 1000px) { .dbv-net { grid-template-columns: minmax(0, 1fr) 360px; } } .dbv-feed { list-style: none; margin: 0; padding: 0; font-size: 13px; } .dbv-feed li { display: flex; flex-wrap: wrap; gap: 2px 8px; padding: 4px 0; border-bottom: 1px solid var(--edge); } .dbv-feed li:last-child { border-bottom: 0; } .dbv-feed a { color: var(--ink); text-decoration: none; } .dbv-feed-what { color: var(--ink2); font-weight: 600; } .dbv-feed-title { color: var(--ink2); min-width: 0; overflow-wrap: anywhere; } .dbv-feed li.dbv-new { background: color-mix(in srgb, var(--ok) 16%, transparent); } .dbv-calcs { display: grid; gap: 8px; } .dbv-calc-row { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 4px; align-items: baseline; } .dbv-flag { color: var(--wait); } .dbv-kind { font-size: 14px; margin: 16px 0 6px; color: var(--ink2); } .dbv-tables a { color: var(--ink); text-decoration: none; } .dbv-list { margin: 6px 0; padding-left: 18px; } .dbv-list li { margin: 3px 0; overflow-wrap: anywhere; } .dbv-fk { color: var(--ok); } .dbv-code { color: var(--wait); } .dbv-pre { white-space: pre-wrap; } .dbv-sql { white-space: pre-wrap; font: 12px/1.5 var(--fm); margin: 8px 0 0; } .dbv-v.null, .dbv-v.empty, .dbv-v.secret { color: var(--mut); font-style: italic; } .dbv-v { overflow-wrap: anywhere; } .dbv-val { white-space: pre-wrap; } table.tbl.dbv-fields td { text-align: left; } table.tbl.dbv-fields th { text-align: left; width: 1%; vertical-align: top; padding-right: 14px; font: 600 12px/1.4 var(--fm); letter-spacing: 0; text-transform: none; color: var(--ink); } .dbv-why { margin-top: 3px; } @media (max-width: 700px) and (hover: none) { .calstick > .legend { flex-wrap: wrap; overflow: visible; gap: 3px 12px; } } .legend.calhl > button.is-focus { color: var(--ink); font-weight: 700; } .lane-prog { margin-bottom: 14px; } .prog-link { position: relative; color: inherit; text-decoration: none; } .prog-link::before { content:""; position: absolute; inset: -14px -12px; } .prog-link::after { content:"\00a0›"; opacity: .7; } .prog-ix b { color: var(--ink); font-weight: 700; } .prog-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); gap: 11px 18px; } .prog-cell { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 8px; row-gap: 5px; min-width: 0; } .prog-name { min-width: 0; font-size: 13px; line-height: 1.25; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .prog-val { font-size: 13px; line-height: 1.25; font-weight: 600; color: var(--ink2); font-variant-numeric: tabular-nums; } .prog-bar { grid-column: 1 / -1; position: relative; border-radius: 99px; height: calc(2.5px + var(--fw, 0) * 4px); background: color-mix(in srgb, var(--ink) 9%, transparent); } .prog-cell.is-other .prog-bar { height: 2px; } .prog-bar > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; width: max(3px, calc(var(--v, 0) * 1%)); background: color-mix(in srgb, var(--dc) var(--mix, 100%), var(--panel)); } [data-light] .prog-bar > i { background: color-mix(in srgb, color-mix(in srgb, var(--dc) 82%, #12202C) var(--mix, 100%), var(--panel)); } .prog-cell.is-low.has-norm .prog-bar::before { content:""; position: absolute; top: 0; bottom: 0; border-radius: inherit; left: calc(var(--v) * 1%); width: calc((var(--n) - var(--v)) * 1%); background: color-mix(in srgb, var(--dc) 30%, transparent); } .prog-cell.has-norm .prog-bar::after { content:""; position: absolute; top: -3px; bottom: -3px; width: 2px; left: calc(var(--n) * 1%); margin-left: -1px; border-radius: 1px; background: color-mix(in srgb, var(--ink) 55%, transparent); } .prog-cell.is-other .prog-name, .prog-cell.is-other .prog-val { color: var(--mut); font-weight: 500; } .prog-cell.is-first .prog-name, .prog-cell.is-first .prog-val { color: var(--ink); font-weight: 700; } .prog-none { margin: 10px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--mut); } .prog-empty { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; } .prog-empty .prog-none { margin: 0; } .went { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0 12px; margin: 12px 0 0; padding: 0 14px; } .went-label { font: 600 11px/1.2 var(--ff); letter-spacing: .06em; text-transform: uppercase; color: var(--mut); white-space: nowrap; } .went .scorebar { min-width: 0; } .went.is-live .went-save { display: none; } .went-said { grid-column: 2 / -1; justify-self: end; min-height: 0; } .went-said:empty { display: none; } .askbox .went-ask-bar { margin-top: 14px; text-align: left; } .mat-lamp.pnote-lamp { margin: 0 7px 0 0; vertical-align: .14em; } .pnote-more { margin-left: 2px; white-space: nowrap; font: var(--hand-slant) 500 14px/var(--rule-h) var(--ff-hand); color: var(--paper-ink2); } .plannote-text .pnote-more { font: inherit; font-size: .85em; color: var(--mut); } .prog-cell.is-first .prog-bar { height: 8px; } @media (max-width: 560px) { .prog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(var(--rows, 3), auto); } } .card .went { padding: 0; margin-top: 14px; } .wentscale { gap: 5px; } .wentscale-was { align-self: center; font: 600 12px/1 var(--fm); color: var(--mut); } .askbox .wentscale { justify-content: center; } .chippeek-row { display: flex; gap: 6px; margin-top: 9px; } .chippeek-row .chippeek-open { margin-top: 0; flex: 1 1 auto; min-width: 0; } .chippeek-done { flex: 0 0 auto; padding: 7px 10px; white-space: nowrap; cursor: pointer; border: 1px solid color-mix(in srgb, var(--ok) 45%, var(--edge2)); border-radius: var(--rad-s); background: color-mix(in srgb, var(--ok) 14%, var(--panel2)); color: var(--ink); font: 600 11.5px/1.4 var(--fm); } .chippeek-done.is-undo { border-color: var(--edge2); background: var(--panel2); color: var(--ink2); } .chippeek-row + .chippeek-last { margin-top: 6px; } .field textarea.note-text { resize: none; line-height: 1.5; min-height: 120px; } .wentscale { display: grid; grid-template-columns: repeat(auto-fit, minmax(38px, 1fr)); } .wentscale label { min-width: 0; } @media (max-width: 560px) { .went.is-steps { grid-template-columns: minmax(0, 1fr); row-gap: 8px; } .went.is-steps .went-said { grid-column: 1 / -1; } }