:root { color-scheme: dark; --ink: #f6f8fb; --muted: #b4becd; --quiet: #8e9aaa; --accent: #91dec5; --accent-strong: #5fc5a7; --accent-dark: #10241e; --accent-light: #a4dcca; --accent-alpha-5: rgba(145, 222, 197, 0.05); --accent-alpha-10: rgba(145, 222, 197, 0.10); --accent-alpha-15: rgba(145, 222, 197, 0.15); --accent-alpha-20: rgba(145, 222, 197, 0.20); --accent-alpha-25: rgba(145, 222, 197, 0.25); --accent-alpha-30: rgba(145, 222, 197, 0.30); --accent-alpha-35: rgba(145, 222, 197, 0.35); --accent-alpha-40: rgba(145, 222, 197, 0.40); --accent-alpha-45: rgba(145, 222, 197, 0.45); --accent-alpha-50: rgba(145, 222, 197, 0.50); --accent-alpha-55: rgba(145, 222, 197, 0.55); --accent-alpha-60: rgba(145, 222, 197, 0.60); --accent-alpha-85: rgba(145, 222, 197, 0.85); --danger: #ff9b9b; --surface: rgba(15, 20, 29, .68); --surface-strong: rgba(13, 17, 25, .84); --surface-soft: rgba(255, 255, 255, .075); --stroke: rgba(255, 255, 255, .13); --shadow: 0 18px 54px rgba(0, 0, 0, .31); --radius: 23px; --glass-blur: 20px; --bg-image: url('./assets/harbor-night.jpg'); --bg-position: center; } * { box-sizing: border-box; } html { min-width: 320px; background: #10131a; } body { min-height: 100vh; margin: 0; color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #10131a; overflow-x: hidden; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } button, input, textarea, select { font: inherit; } button { color: inherit; } button, a { -webkit-tap-highlight-color: transparent; } ::selection { background: var(--accent-alpha-35); } /* Background layer must be above the document canvas, never at a negative z-index. Negative stacking placed the wallpaper behind the opaque paint layer. */ .background { position: fixed; inset: 0; z-index: 0; overflow:hidden; pointer-events:none; background: #07111b; transform: scale(1.03); } .background-image { position:absolute; inset:0; z-index:0; display:block; width:100%; height:100%; object-fit:cover; object-position:var(--bg-position); } .background::after { content: ""; position: absolute; z-index:1; inset: -3%; background: radial-gradient(circle at 76% 14%, rgba(75, 133, 156, .18), transparent 31%), radial-gradient(circle at 12% 81%, rgba(36, 109, 92, .2), transparent 34%), linear-gradient(116deg, rgba(8, 12, 19, .84) 0%, rgba(10, 14, 22, .54) 47%, rgba(8, 11, 16, .73) 100%); backdrop-filter: blur(1px); } .app { position:relative; z-index:1; width: min(1440px, calc(100% - 44px)); margin: 0 auto; padding: 27px 0 42px; } .topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 28px; } .brand { display: flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; font-size: 17px; font-weight: 750; letter-spacing: -.025em; } .brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--accent-alpha-30); border-radius: 12px; background: var(--accent-alpha-15); color: var(--accent); box-shadow: inset 0 1px 0 rgba(255,255,255,.14); } .brand-mark svg { width: 19px; height: 19px; } .brand-mark svg { width:19px; height:19px; } .topbar-actions { display: flex; align-items: center; gap: 9px; } .icon-button, .button { border: 1px solid var(--stroke); background: rgba(13, 17, 25, .50); box-shadow: inset 0 1px 0 rgba(255,255,255,.07); border-radius: 13px; cursor: pointer; transition: transform .28s cubic-bezier(0.16, 1, 0.3, 1), background .28s cubic-bezier(0.16, 1, 0.3, 1), border-color .28s cubic-bezier(0.16, 1, 0.3, 1); } .icon-button { width: 39px; height: 39px; display: grid; place-items: center; } .icon-button svg { width: 18px; height: 18px; } .button { min-height: 39px; padding: 0 13px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; font-weight: 700; } .button svg { width: 16px; height: 16px; } .button.primary { background: var(--accent); border-color: transparent; color: var(--accent-dark); box-shadow: 0 8px 22px var(--accent-alpha-25); } .button.quiet { background: rgba(13, 17, 25, .3); } .icon-button:hover, .button:hover { transform: translateY(-1px); background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.24); } .button.primary:hover { background: var(--accent-light); } button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--accent-alpha-60); outline-offset: 2px; } .hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .68fr); gap: 19px; margin-bottom: 19px; } .glass { background: linear-gradient(140deg, rgba(255,255,255,.11), rgba(255,255,255,.035)); border: 1px solid var(--stroke); border-radius: var(--radius); box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.1); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); } .welcome { min-height: 289px; padding: 34px 37px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; overflow: hidden; position: relative; } .welcome::before { content:""; position:absolute; width: 320px; height: 320px; right:-120px; bottom:-210px; border-radius:50%; background: var(--accent-alpha-15); filter: blur(18px); pointer-events:none; } .eyebrow { margin: 0 0 9px; color: var(--accent); text-transform: uppercase; letter-spacing: .15em; font-size: 10px; font-weight: 800; } h1 { font-size: clamp(29px, 4vw, 47px); line-height: 1.03; letter-spacing: -.055em; margin: 0; max-width: 610px; } h1 span { color: var(--accent); } .hero-copy { margin: 14px 0 0; color: var(--muted); max-width: 480px; line-height: 1.55; font-size: 14px; } .quote { position: relative; margin-top: 23px; color: #dce6e9; font-size: 12.5px; font-weight: 550; } .quote::before { content: "— "; color: var(--accent); } .time-card { min-height: 289px; padding: 31px 32px; display: flex; flex-direction: column; justify-content: space-between; } .time-card-top { display:flex; align-items:center; justify-content:space-between; gap: 12px; } .widget-label { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .01em; } .live-dot { display: flex; align-items: center; gap: 6px; color: var(--quiet); font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: .11em; } .live-dot i { width: 6px; height: 6px; display:block; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-alpha-15); } #clock { margin-top: 13px; font-weight: 300; letter-spacing: -.07em; line-height: .9; font-size: clamp(49px, 5.7vw, 77px); font-variant-numeric: tabular-nums; } #date { color: var(--muted); font-size: 13px; margin-top: 12px; } .time-footer { border-top: 1px solid rgba(255,255,255,.1); padding-top: 15px; color: var(--quiet); display:flex; justify-content:space-between; gap: 12px; font-size: 11px; } #timezone { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .search-card { padding: 14px; margin-bottom: 19px; display:flex; gap: 10px; align-items: center; } .search-icon { flex:none; margin-left: 5px; color: var(--muted); } .search-icon svg { width: 19px; height:19px; } #search-input { appearance:none; min-width: 0; flex:1; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 15px; padding: 8px 2px; } #search-input::placeholder { color: #b0b9c5; opacity: .78; } .search-engine { background: rgba(0,0,0,.16); color: var(--muted); border: 1px solid rgba(255,255,255,.09); border-radius: 10px; padding: 8px 9px; outline: none; font-size: 12px; cursor: pointer; } .dashboard-grid { display:grid; grid-template-columns: minmax(0, 1.2fr) minmax(310px, .8fr); gap: 19px; align-items:start; } .stack { display:grid; gap: 19px; } .panel { padding: 25px; min-width: 0; } .panel-header { display:flex; align-items:center; justify-content:space-between; gap: 14px; margin-bottom: 19px; } .panel-title { display:flex; align-items:center; gap: 9px; margin:0; font-size: 15px; font-weight: 760; letter-spacing: -.018em; } .panel-title svg { width:18px; height:18px; color:var(--accent); } .panel-meta { color:var(--quiet); font-size:11px; font-weight:650; } .text-button { appearance:none; cursor:pointer; color:var(--accent); font-size:12px; padding:4px 0; border:0; background:transparent; font-weight:750; } .text-button:hover { color:var(--accent-light); } .links-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap: 10px; } .link-tile { position:relative; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; min-height:101px; padding: 13px 7px; border:1px solid rgba(255,255,255,.095); background: rgba(0,0,0,.12); border-radius:16px; color:var(--ink); text-decoration:none; cursor:pointer; transition: transform .28s cubic-bezier(0.16, 1, 0.3, 1), background .28s cubic-bezier(0.16, 1, 0.3, 1), border-color .28s cubic-bezier(0.16, 1, 0.3, 1), opacity .28s cubic-bezier(0.16, 1, 0.3, 1); } .link-tile:hover { transform: translateY(-3px); background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.2); } .link-tile.dragging { opacity:.38; } .link-tile.drag-over { border-color:var(--accent); box-shadow: 0 0 0 2px var(--accent-alpha-20); } .link-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; background: rgba(255, 255, 255, 0.06); color: var(--link-color, var(--accent)); font-size: 19px; font-weight: 700; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 4px 12px rgba(0, 0, 0, 0.12); transition: color 0.28s cubic-bezier(0.16, 1, 0.3, 1), background 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s cubic-bezier(0.16, 1, 0.3, 1); } .link-name { width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; text-align:center; color:#e8eef2; font-size:11px; font-weight:650; } .link-edit, .link-delete { display:none; position:absolute; top:6px; width:21px; height:21px; place-items:center; padding:0; border:0; border-radius:7px; background:rgba(15,18,25,.88); color:#dfe7eb; cursor:pointer; font-size:14px; } .link-edit { right:31px; font-size:13px; } .link-delete { right:6px; } .link-edit:hover { color:var(--accent); background:rgba(45,87,78,.88); } .link-delete:hover { color:#ffc9c9; background:rgba(105,45,48,.88); } .editing .link-tile { cursor:grab; } .editing .link-edit, .editing .link-delete { display:grid; } .link-add .link-icon { background:transparent; border:1px dashed rgba(255,255,255,.29); color:var(--muted); font-size:23px; } .link-add { border-style:dashed; color:var(--muted); } .note-area { width:100%; min-height:210px; resize:vertical; color:#eaf0f2; border:1px solid transparent; border-radius:14px; outline:0; background:rgba(0,0,0,.13); padding:15px; line-height:1.63; font-size:13px; transition:background .18s,border-color .18s; } .note-area:focus { background:rgba(0,0,0,.23); border-color:var(--accent-alpha-40); } .note-area::placeholder { color:#9da9b5; } .note-foot { margin-top:11px; display:flex; justify-content:space-between; align-items:center; gap:12px; color:var(--quiet); font-size:10px; } .save-status { color:var(--accent); transition:opacity .2s; } .mini-list { list-style:none; padding:0; margin:0; display:grid; gap:9px; } .mini-list li { padding:12px 13px; display:flex; align-items:center; gap:11px; border:1px solid rgba(255,255,255,.075); border-radius:13px; background:rgba(0,0,0,.11); } .mini-icon { width:30px; height:30px; border-radius:10px; display:grid; place-items:center; color:var(--accent); background:var(--accent-alpha-10); flex:none; } .mini-icon svg { width:15px; height:15px; } .mini-copy { min-width:0; } .mini-copy strong { display:block; font-size:12px; color:#e6edf0; margin-bottom:2px; } .mini-copy span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--quiet); font-size:10.5px; } .local-badge { display:inline-flex; align-items:center; gap:5px; border:1px solid var(--accent-alpha-15); border-radius:99px; padding:5px 8px; color:var(--accent-light); background:var(--accent-alpha-10); font-size:10px; font-weight:700; } .local-badge svg { width:12px; height:12px; } .hidden { display:none !important; } .empty { color:var(--quiet); text-align:center; padding:29px 14px; font-size:12px; } dialog { color:var(--ink); width:min(476px, calc(100% - 32px)); border:1px solid rgba(255,255,255,.18); padding:0; border-radius:23px; background:linear-gradient(120deg, rgb(20 30 42 / var(--dialog-glass-top)), rgb(10 18 28 / var(--dialog-glass-bottom))); box-shadow:0 30px 100px rgba(0,0,0,.58); backdrop-filter:blur(26px); } dialog::backdrop { background:rgb(2 4 9 / var(--dialog-backdrop)); backdrop-filter:blur(4px); } .dialog-body { padding:26px; } .dialog-title { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:7px; } .dialog-title h2 { margin:0; font-size:19px; letter-spacing:-.035em; } .dialog-description { margin:0 0 22px; color:var(--muted); font-size:12px; line-height:1.55; } .close-dialog { appearance:none; width:31px; height:31px; display:grid; place-items:center; padding:0; border:0; border-radius:10px; color:var(--muted); background:rgba(255,255,255,.08); cursor:pointer; font-size:18px; } .form-row { display:grid; grid-template-columns:1fr 1fr; gap:13px; } .field { display:grid; gap:7px; margin-bottom:14px; } .field label { color:#d7e0e5; font-size:11px; font-weight:720; } .field input, .field select { color:var(--ink); width:100%; border:1px solid rgba(255,255,255,.12); border-radius:11px; outline:0; background:rgba(0,0,0,.19); padding:10px 11px; font-size:13px; } .field input:focus, .field select:focus { border-color:var(--accent-alpha-55); } .dialog-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:22px; } .setting-section { padding:16px 0; border-top:1px solid rgba(255,255,255,.10); } .setting-section:first-of-type { border-top:0; padding-top:5px; } .setting-heading { display:block; margin-bottom:11px; color:#e7edef; font-size:12px; font-weight:730; } .background-options { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; } .background-card { position:relative; min-width:0; } .background-choice { position:relative; display:block; width:100%; aspect-ratio:1.08; overflow:hidden; padding:0; border:2px solid transparent; border-radius:11px; background-size:cover; background-position:center; cursor:pointer; } .background-thumbnail { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; } .custom-wallpapers { margin-top:16px; padding-top:15px; border-top:1px solid rgba(255,255,255,.09); } .custom-wallpapers-heading { display:block; margin-bottom:10px; color:#dfe8eb; font-size:11px; font-weight:750; } .custom-background-options { grid-template-columns:repeat(5,1fr); } .wallpaper-remove { position:absolute; z-index:3; top:5px; right:5px; display:grid; place-items:center; width:21px; height:21px; padding:0; border:1px solid rgba(255,255,255,.15); border-radius:7px; color:#ffe0e0; background:rgba(24,18,24,.82); cursor:pointer; font-size:15px; line-height:1; opacity:0; transition:opacity .16s,background .16s; } .background-card:hover .wallpaper-remove, .wallpaper-remove:focus-visible { opacity:1; } .wallpaper-remove:hover { background:rgba(129,55,61,.92); } .choose-photo-row { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:15px; padding:13px; border:1px solid rgba(255,255,255,.09); border-radius:13px; background:rgba(0,0,0,.10); } .choose-photo-title { color:#e5edef; font-size:12px; font-weight:720; } .choose-photo-row .setting-help { max-width:245px; margin:4px 0 0; } .choose-photo-button { flex:none; white-space:nowrap; } .background-choice::after { content:""; position:absolute;inset:0;background:linear-gradient(150deg,rgba(0,0,0,.06),rgba(0,0,0,.48)); } .background-choice.active { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-alpha-15); } .background-choice.active::before { content:"✓"; position:absolute; z-index:1; top:5px; right:6px; color:var(--accent-dark); display:grid;place-items:center; width:18px;height:18px;border-radius:50%;background:var(--accent);font-weight:900;font-size:11px; } .toggle-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:7px 0; } .toggle-row span { color:#dde5e9; font-size:12px; } .switch { position:relative; width:39px; height:23px; flex:none; } .switch input { appearance:none; width:100%; height:100%; margin:0; border:0; border-radius:99px; background:rgba(255,255,255,.16); cursor:pointer; transition:.2s; } .switch input::after { content:""; position:absolute; left:3px; top:3px; width:17px;height:17px;border-radius:50%;background:#c6d0d8; transition:.2s; } .switch input:checked { background:var(--accent-strong); } .switch input:checked::after { transform:translateX(16px); background:var(--accent-dark); } .setting-help { margin:8px 0 0; color:var(--quiet); font-size:10.5px; line-height:1.45; } /* Custom dark colour controls replace the browser's unstyleable native colour picker. */ .accent-picker { position:relative; display:inline-flex; align-items:center; } .colour-swatch { appearance:none; display:grid; place-items:center; flex:none; width:36px; height:36px; padding:0; border:2px solid rgba(238,247,248,.78); border-radius:50%; background:var(--selected-colour, #91dec5); box-shadow:0 0 0 3px rgba(0,0,0,.18), inset 0 1px 2px rgba(255,255,255,.38); cursor:pointer; transition:transform .16s, box-shadow .16s; } .colour-swatch:hover { transform:scale(1.07); box-shadow:0 0 0 3px var(--accent-alpha-25), inset 0 1px 2px rgba(255,255,255,.38); } .colour-menu { position:absolute; z-index:20; top:calc(100% + 10px); left:0; width:244px; padding:13px; border:1px solid rgba(234,247,248,.18); border-radius:14px; background:rgba(15,24,34,.98); box-shadow:0 18px 40px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter:blur(18px); } .colour-menu-title { display:block; margin-bottom:10px; color:#e7eeef; font-size:11px; font-weight:750; } .colour-presets, .link-colour-presets { display:flex; flex-wrap:wrap; gap:8px; } .colour-preset { appearance:none; width:25px; height:25px; padding:0; border:2px solid rgba(255,255,255,.24); border-radius:50%; background:var(--preset-colour); cursor:pointer; transition:transform .16s,border-color .16s,box-shadow .16s; } .colour-preset:hover { transform:scale(1.12); } .colour-preset.active { border-color:#fff; box-shadow:0 0 0 2px var(--accent-alpha-40); } .colour-hex-label { display:grid; grid-template-columns:1fr 92px; align-items:center; gap:10px; margin-top:13px; color:var(--muted); font-size:10.5px; font-weight:650; } .colour-hex-label input, .link-colour-control input { min-width:0; color:var(--ink); border:1px solid rgba(255,255,255,.13); border-radius:9px; outline:0; background:rgba(0,0,0,.22); padding:8px 9px; font-size:11px; text-transform:uppercase; } .colour-hex-label input:focus, .link-colour-control input:focus { border-color:var(--accent-alpha-55); } .link-colour-control { display:flex; align-items:center; gap:10px; min-height:37px; } .emoji-field { position:relative; } .emoji-input-wrap { position:relative; display:flex; } .emoji-input-wrap #link-emoji { padding-right:40px; } .emoji-picker-toggle { position:absolute; right:5px; top:50%; transform:translateY(-50%); width:30px; height:30px; display:grid; place-items:center; padding:0; border:1px solid rgba(255,255,255,.12); border-radius:8px; color:var(--accent); background:rgba(255,255,255,.07); cursor:pointer; font-size:18px; line-height:1; } .emoji-picker-toggle:hover, .emoji-picker-toggle[aria-expanded="true"] { border-color:var(--accent-alpha-50); background:var(--accent-alpha-10); } .emoji-picker-menu { position:absolute; z-index:60; top:calc(100% + 7px); right:0; width:306px; padding:10px; border:1px solid rgba(234,247,248,.18); border-radius:13px; background:rgba(15,24,34,.98); box-shadow:0 18px 42px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter:blur(18px); } .emoji-picker-top input { width:100%; color:var(--ink); border:1px solid rgba(255,255,255,.12); border-radius:8px; outline:0; background:rgba(0,0,0,.2); padding:8px 9px; font-size:11px; } .emoji-picker-top input:focus { border-color:var(--accent-alpha-50); } .emoji-category-tabs { display:flex; gap:4px; overflow:auto; margin:9px 0 7px; padding-bottom:2px; } .emoji-category-tabs button { flex:none; min-width:28px; height:26px; display:grid; place-items:center; padding:0 6px; border:1px solid transparent; border-radius:7px; color:var(--muted); background:transparent; cursor:pointer; font-size:14px; } .emoji-category-tabs button:hover { background:rgba(255,255,255,.08); } .emoji-category-tabs button.active { border-color:var(--accent-alpha-35); color:var(--accent-dark); background:var(--accent); } .emoji-picker-grid { display:grid; grid-template-columns:repeat(9,1fr); gap:3px; max-height:190px; overflow:auto; padding-right:2px; } .emoji-picker-grid button { aspect-ratio:1; display:grid; place-items:center; padding:0; border:1px solid transparent; border-radius:7px; background:transparent; cursor:pointer; font-size:18px; } .emoji-picker-grid button:hover, .emoji-picker-grid button:focus-visible { border-color:var(--accent-alpha-45); background:rgba(255,255,255,.10); outline:0; } .emoji-empty { grid-column:1/-1; padding:16px; color:var(--quiet); text-align:center; font-size:11px; } .link-colour-swatch { width:30px; height:30px; cursor:default; } .link-colour-presets { flex:1; gap:6px; } .link-colour-presets .colour-preset { width:20px; height:20px; } .link-colour-control input { width:78px; } .data-actions { display:flex; flex-wrap:wrap; gap:9px; } .danger-button { color:#ffd0d0; border-color:rgba(255,150,150,.24); } .toast { position:fixed; z-index:10; left:50%; bottom:26px; transform:translate(-50%, 30px); opacity:0; pointer-events:none; min-width:200px; max-width:calc(100% - 30px); padding:11px 14px; border:1px solid rgba(255,255,255,.15); border-radius:12px; color:#edf6f4; background:rgba(20,29,36,.94); box-shadow:0 14px 30px rgba(0,0,0,.35); backdrop-filter:blur(18px); text-align:center; font-size:12px; font-weight:650; transition:opacity .22s,transform .22s; } .toast.show { opacity:1; transform:translate(-50%,0); } @media (max-width: 880px) { .hero, .dashboard-grid { grid-template-columns:1fr; } .time-card { min-height:220px; } .welcome { min-height:250px; } } @media (max-width: 580px) { .app { width:min(100% - 26px, 1440px); padding-top:15px; } .topbar { margin-bottom:16px; } .topbar-actions .button span { display:none; } .topbar-actions .button { width:39px; padding:0; } .hero,.dashboard-grid,.stack { gap:13px; } .hero { margin-bottom:13px; } .search-card { margin-bottom:13px; } .welcome,.time-card,.panel { padding:22px; } .welcome { min-height:245px; } .time-card { min-height:196px; } h1 { font-size:34px; } #clock { font-size:62px; } .links-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .form-row { grid-template-columns:1fr; gap:0; } .search-engine { max-width:88px; } .background-options { grid-template-columns:repeat(3,1fr); } .choose-photo-row { align-items:flex-start; flex-direction:column; } } @media (max-width: 360px) { .links-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .topbar-actions { gap:5px; } } /* ─────────────────────────────────────────────────────────────── Harbor Home v2 — compact, links-first dashboard pass ─────────────────────────────────────────────────────────────── */ :root { --ink: #f3f6f9; --muted: #b7c3ce; --quiet: #8f9ead; --accent: #9de8d0; --accent-strong: #67c9aa; --accent-dark: #10241e; --accent-light: #a4dcca; --accent-alpha-5: rgba(157, 232, 208, 0.05); --accent-alpha-10: rgba(157, 232, 208, 0.10); --accent-alpha-15: rgba(157, 232, 208, 0.15); --accent-alpha-20: rgba(157, 232, 208, 0.20); --accent-alpha-25: rgba(157, 232, 208, 0.25); --accent-alpha-30: rgba(157, 232, 208, 0.30); --accent-alpha-35: rgba(157, 232, 208, 0.35); --accent-alpha-40: rgba(157, 232, 208, 0.40); --accent-alpha-45: rgba(157, 232, 208, 0.45); --accent-alpha-50: rgba(157, 232, 208, 0.50); --accent-alpha-55: rgba(157, 232, 208, 0.55); --accent-alpha-60: rgba(157, 232, 208, 0.60); --accent-alpha-85: rgba(157, 232, 208, 0.85); --stroke: rgba(225, 241, 246, .16); --radius: 20px; --glass-blur: 24px; --glass-top: .74; --glass-bottom: .61; --dialog-glass-top: .92; --dialog-glass-bottom: .86; --dialog-backdrop: .64; --shadow: 0 18px 50px rgba(1, 6, 12, .35); } body { background: transparent; position:relative; isolation:isolate; } .background { transform: translateZ(0); will-change: transform; background-position: center; } .background::after { inset: 0; background: radial-gradient(ellipse 58% 62% at 86% 4%, rgba(62, 133, 146, .19), transparent 66%), linear-gradient(105deg, rgba(3, 11, 19, .48) 0%, rgba(5, 14, 23, .25) 46%, rgba(3, 10, 16, .43) 100%); backdrop-filter: blur(.5px); } .app { width: min(1480px, calc(100% - 48px)); padding: 19px 0 44px; } .topbar { min-height: 43px; margin-bottom: 16px; } .brand { font-size: 16px; } .brand-mark { width: 33px; height: 33px; border-radius: 11px; } .topbar-actions { gap: 8px; } .icon-button, .button { background: rgba(4, 13, 21, .45); border-color: rgba(231,245,249,.14); } .icon-button { width: 38px; height: 38px; } .button { min-height: 38px; border-radius: 12px; } .glass { background: linear-gradient(120deg, rgb(19 30 41 / var(--glass-top)), rgb(11 20 30 / var(--glass-bottom))); border-color: rgba(220, 241, 246, .17); box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.10); } .command-deck { position: relative; z-index:5; display: grid; grid-template-columns: minmax(310px, 1fr) minmax(310px, 1.15fr) minmax(215px, .57fr); gap: 25px; align-items: center; min-height: 218px; margin-bottom: 16px; padding: 26px 29px; overflow: visible; } .command-deck::before { content:""; position:absolute; width:330px; height:330px; left:-110px; bottom:-210px; background:var(--accent-alpha-15); border-radius:50%; filter: blur(25px); pointer-events:none; } .deck-welcome, .deck-search, .deck-time { position:relative; z-index:1; min-width:0; } .deck-welcome .eyebrow { margin-bottom:9px; color:var(--accent); font-size:9px; } .deck-welcome h1 { font-size:clamp(28px, 3vw, 39px); max-width:430px; line-height:1.05; } .deck-welcome .hero-copy { max-width:405px; margin-top:11px; font-size:12.5px; } .quote { display:none; } .deck-search { display:flex; align-items:center; gap:10px; padding: 9px 12px; margin:0; min-height:60px; border:1px solid rgba(237,247,249,.15); border-radius:15px; background:rgba(1, 10, 17, .35); box-shadow:inset 0 1px 0 rgba(255,255,255,.06); } #search-input { font-size:14px; } .search-engine { padding:8px; background:rgba(255,255,255,.055); } .deck-time { align-self:stretch; display:flex; flex-direction:column; justify-content:center; padding-left:25px; border-left:1px solid rgba(232,246,248,.14); } .time-card-top { margin-bottom:8px; } #clock { margin:0; font-size:clamp(37px, 4vw, 58px); } #date { margin-top:8px; font-size:12px; } .time-footer { padding-top:12px; margin-top:17px; font-size:10px; } .dashboard-grid { grid-template-columns:minmax(0, 1.65fr) minmax(290px, .75fr); gap:16px; align-items:start; } .stack { gap:16px; } .panel { padding:22px; border-radius:var(--radius); } .panel-header { margin-bottom:16px; } .panel-title { font-size:14px; } .panel-title svg { width:17px; height:17px; } .link-panel-actions { display:flex; align-items:center; gap:11px; } .link-panel-actions .button { min-height:31px; padding:0 10px; border-radius:10px; font-size:11px; } .link-panel-actions .button svg { width:14px; height:14px; } .links-grid { grid-template-columns:repeat(6, minmax(0, 1fr)); gap:9px; } .link-tile { min-height:112px; gap:9px; border-radius:15px; background:rgba(2, 11, 19, .22); } .link-tile:hover { background:rgba(229,245,245,.12); } .link-icon { width:38px; height:38px; border-radius:13px; } .link-name { font-size:10.5px; } .note-area { min-height:172px; background:rgba(1, 10, 17, .19); padding:14px; } .note-foot { margin-top:10px; } .focus-panel { min-height:270px; } .focus-list { display:grid; gap:7px; margin:0; padding:0; list-style:none; } .focus-item { display:flex; align-items:center; min-height:40px; gap:9px; padding:7px 8px; border:1px solid rgba(255,255,255,.075); border-radius:11px; background:rgba(1, 10, 17, .18); } .focus-check { appearance:none; flex:none; width:17px; height:17px; margin:0; display:grid; place-content:center; border:1px solid rgba(222,245,241,.3); border-radius:6px; background:rgba(255,255,255,.04); cursor:pointer; } .focus-check:checked { border-color:var(--accent); background:var(--accent); } .focus-check:checked::after { content:"✓"; color:var(--accent-dark); font-size:12px; font-weight:900; } .focus-text { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#e4edf0; font-size:12px; } .focus-item.complete .focus-text { color:var(--quiet); text-decoration:line-through; } .focus-delete { opacity:0; display:grid; place-items:center; flex:none; width:23px; height:23px; padding:0; border:0; border-radius:7px; color:var(--muted); background:transparent; cursor:pointer; font-size:15px; transition:.16s; } .focus-item:hover .focus-delete, .focus-delete:focus-visible { opacity:1; } .focus-delete:hover { color:#ffd2d2; background:rgba(255,165,165,.14); } .focus-empty { padding:24px 8px 18px; color:var(--quiet); text-align:center; font-size:11.5px; line-height:1.55; } .focus-form { display:flex; gap:7px; margin-top:11px; } .focus-form input { min-width:0; flex:1; color:var(--ink); padding:9px 10px; border:1px solid rgba(255,255,255,.10); border-radius:10px; outline:0; background:rgba(1, 10, 17, .23); font-size:11.5px; } .focus-form input:focus { border-color:var(--accent-alpha-50); } .focus-form button { width:34px; padding:0; flex:none; font-size:18px; } .at-glance { padding:20px 22px; } .glance-row { display:grid; grid-template-columns:42px 1fr; gap:12px; align-items:center; } .glance-number { display:grid; place-items:center; width:42px; height:42px; border:1px solid var(--accent-alpha-20); border-radius:13px; color:var(--accent); background:var(--accent-alpha-10); font-size:15px; font-weight:800; } .glance-copy strong { display:block; color:#e9f0f2; font-size:12px; } .glance-copy span { display:block; margin-top:3px; color:var(--quiet); font-size:10.5px; } .glance-progress { height:5px; margin-top:17px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.1); } .glance-progress i { display:block; height:100%; width:var(--day-percent, 0%); border-radius:inherit; background:linear-gradient(90deg, var(--accent-strong), var(--accent)); } /* Global quick-capture inbox. */ .inbox-button { position:relative; } .inbox-badge { position:absolute; top:-5px; right:-5px; min-width:16px; height:16px; display:grid; place-items:center; padding:0 4px; border:2px solid rgba(16,23,33,.96); border-radius:99px; color:var(--accent-dark); background:var(--accent); font-size:9px; font-weight:900; } .capture-type-picker { display:flex; overflow:hidden; border:1px solid rgba(255,255,255,.12); border-radius:10px; } .capture-type-picker button { flex:1; min-height:34px; border:0; border-left:1px solid rgba(255,255,255,.1); color:var(--muted); background:rgba(0,0,0,.14); cursor:pointer; font-size:11px; font-weight:700; } .capture-type-picker button:first-child { border-left:0; } .capture-type-picker button.active { color:var(--accent-dark); background:var(--accent); } #capture-text { width:100%; min-height:118px; resize:vertical; color:var(--ink); border:1px solid rgba(255,255,255,.12); border-radius:11px; outline:0; background:rgba(0,0,0,.18); padding:10px 11px; line-height:1.55; font-size:13px; } #capture-text:focus { border-color:var(--accent-alpha-55); } .inbox-list { display:grid; gap:8px; max-height:390px; overflow:auto; } .inbox-item { display:grid; grid-template-columns:27px minmax(0,1fr) auto; align-items:start; gap:9px; padding:10px; border:1px solid rgba(255,255,255,.09); border-radius:12px; background:rgba(0,0,0,.13); } .inbox-type { display:grid; place-items:center; width:27px; height:27px; border-radius:8px; color:var(--accent-dark); background:var(--inbox-colour,var(--accent)); font-size:12px; font-weight:900; } .inbox-copy { min-width:0; } .inbox-copy strong { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#e7eef0; font-size:12px; } .inbox-copy span { display:block; margin-top:3px; color:var(--quiet); font-size:9.5px; } .inbox-actions { display:flex; gap:4px; } .inbox-actions button { min-height:25px; padding:0 7px; border:1px solid rgba(255,255,255,.11); border-radius:7px; color:var(--muted); background:transparent; cursor:pointer; font-size:9px; font-weight:700; } .inbox-actions button:hover { color:var(--accent); background:rgba(255,255,255,.08); } .inbox-actions .inbox-delete:hover { color:#ffc7c7; background:rgba(155,55,61,.17); } .inbox-empty { padding:28px 10px; color:var(--quiet); text-align:center; font-size:12px; line-height:1.55; } /* Millennial mode — deliberately plain, compact, and GitHub-inspired. */ html.millennial-mode { color-scheme:light; --ink:#24292f; --muted:#57606a; --quiet:#6e7781; --accent:#0969da; --accent-strong:#0969da; --stroke:#8c959f; --shadow:none; --radius:6px; } html.millennial-mode body { background:#ffffff; color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; } html.millennial-mode .background { display:none; } html.millennial-mode .app { width:min(1280px, calc(100% - 40px)); padding-top:18px; } html.millennial-mode .topbar { min-height:38px; margin-bottom:14px; } html.millennial-mode .brand { color:#24292f; font-size:15px; } html.millennial-mode .brand-mark { color:#ffffff; background:#0969da; border-color:#0969da; box-shadow:none; border-radius:6px; } html.millennial-mode .glass, html.millennial-mode dialog, html.millennial-mode .space-menu, html.millennial-mode .select-menu, html.millennial-mode .colour-menu { background:#ffffff; border:1px solid #8c959f; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; } html.millennial-mode dialog::backdrop { background:rgba(31,35,40,.25); backdrop-filter:none; } html.millennial-mode .command-deck { min-height:152px; padding:21px 24px; border-radius:6px; } html.millennial-mode .command-deck::before, html.millennial-mode .background::after { display:none; } html.millennial-mode .deck-welcome h1 { color:#24292f; font-size:31px; letter-spacing:-.025em; } html.millennial-mode h1 span, html.millennial-mode .eyebrow, html.millennial-mode .text-button, html.millennial-mode .space-item-check, html.millennial-mode .local-badge { color:#0969da; } html.millennial-mode .deck-search, html.millennial-mode .link-tile, html.millennial-mode .note-area, html.millennial-mode .task-item, html.millennial-mode .habit-item, html.millennial-mode .focus-item, html.millennial-mode .mini-list li, html.millennial-mode .weather-day, html.millennial-mode .anime-card, html.millennial-mode .calendar-day:hover { background:#f6f8fa; border-color:#8c959f; } html.millennial-mode .panel { padding:18px; border-radius:6px; } html.millennial-mode .panel-title, html.millennial-mode .task-copy, html.millennial-mode .habit-copy, html.millennial-mode .focus-text, html.millennial-mode .link-name, html.millennial-mode .mini-copy strong { color:#24292f; } html.millennial-mode .link-tile { border-radius:6px; min-height:90px; transform:none; } html.millennial-mode .link-tile:hover, html.millennial-mode .anime-card:hover { transform:none; background:#eef1f4; border-color:#8c959f; } html.millennial-mode .link-icon { border-radius:6px; box-shadow:none; background: var(--stroke) !important; color: var(--ink) !important; } html.millennial-mode .button, html.millennial-mode .icon-button, html.millennial-mode .space-switcher-button, html.millennial-mode .select-trigger { color:#24292f; background:#f6f8fa; border-color:#8c959f; box-shadow:none; border-radius:6px; } html.millennial-mode .button.primary { color:#ffffff; background:#1f883d; border-color:#1f883d; box-shadow:none; } html.millennial-mode .button.primary:hover { background:#1a7f37; } html.millennial-mode .space-switcher-icon, html.millennial-mode .space-menu-item .space-item-icon { color:#ffffff; background:#0969da; } html.millennial-mode .space-menu-item.active, html.millennial-mode .space-menu-item:hover, html.millennial-mode .select-menu button.active, html.millennial-mode .select-menu button:hover { color:#24292f; background:#ddf4ff; } html.millennial-mode .field input, html.millennial-mode .field select, html.millennial-mode .task-form input, html.millennial-mode .task-form select, html.millennial-mode .habit-form input, html.millennial-mode .weather-location-form input, html.millennial-mode .command-search, html.millennial-mode .task-priority-trigger { color:#24292f; background:#ffffff; border-color:#8c959f; } html.millennial-mode .note-area::placeholder, html.millennial-mode input::placeholder { color:#8c959f; } html.millennial-mode .calendar-day.today, html.millennial-mode .task-check:checked, html.millennial-mode .habit-check:checked, html.millennial-mode .priority-picker button.active { color:#ffffff; background:#0969da; border-color:#0969da; } html.millennial-mode .timer-display, html.millennial-mode #clock { color:#24292f; } html.millennial-mode .weather-symbol { color:#ffffff; background:#0969da; } html.millennial-mode .widget-size-choice.active { color:#ffffff; background:#0969da; } html.millennial-mode .widget-coming-soon { background:#f6f8fa; border-color:#8c959f; } html.millennial-mode .millennial-label { color:#24292f; font-size:12px; } /* Light Millennial mode is intentionally high-contrast: user-entered text is always black. */ html.millennial-mode:not(.millennial-dark) .app, html.millennial-mode:not(.millennial-dark) input, html.millennial-mode:not(.millennial-dark) textarea, html.millennial-mode:not(.millennial-dark) select, html.millennial-mode:not(.millennial-dark) #search-input, html.millennial-mode:not(.millennial-dark) .note-area, html.millennial-mode:not(.millennial-dark) .weather-temp, html.millennial-mode:not(.millennial-dark) .anime-copy strong { color:#24292f !important; } html.millennial-mode:not(.millennial-dark) .note-area::placeholder, html.millennial-mode:not(.millennial-dark) input::placeholder { color:#6e7781 !important; opacity:1; } html.millennial-mode .panel-title { font-size:16px; font-weight:800; } html.millennial-mode .panel-meta, html.millennial-mode .widget-label, html.millennial-mode .task-meta, html.millennial-mode .habit-copy, html.millennial-mode .focus-text, html.millennial-mode .mini-copy span, html.millennial-mode .weather-place, html.millennial-mode .weather-feels { font-size:11px; font-weight:650; } html.millennial-mode .link-name, html.millennial-mode .task-copy, html.millennial-mode .habit-copy, html.millennial-mode .focus-text, html.millennial-mode .note-area, html.millennial-mode .field input, html.millennial-mode .task-form input, html.millennial-mode .habit-form input, html.millennial-mode .weather-location-form input, html.millennial-mode .command-search { font-size:13px; font-weight:600; } html.millennial-mode .note-area { line-height:1.65; } html.millennial-mode .button, html.millennial-mode .text-button, html.millennial-mode .select-trigger, html.millennial-mode .space-switcher-label { font-size:12px; font-weight:750; } .toggle-row small { display:block; margin-top:2px; color:var(--quiet); font-size:9.5px; font-weight:500; } .millennial-theme-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:7px 0; color:#dde5e9; font-size:12px; } .theme-segmented { display:flex; overflow:hidden; border:1px solid rgba(255,255,255,.13); border-radius:8px; } .theme-segmented button { min-width:51px; height:28px; border:0; border-left:1px solid rgba(255,255,255,.12); color:var(--muted); background:rgba(0,0,0,.14); cursor:pointer; font-size:10px; font-weight:700; } .theme-segmented button:first-child { border-left:0; } .theme-segmented button.active { color:var(--accent-dark); background:var(--accent); } html.millennial-mode .theme-segmented { border-color:#8c959f; } html.millennial-mode .theme-segmented button { color:#57606a; border-color:#8c959f; background:#f6f8fa; } html.millennial-mode .theme-segmented button.active { color:#ffffff; background:#0969da; } /* Millennial dark — GitHub Dark inspired, still plain and compact. */ html.millennial-mode.millennial-dark { color-scheme:dark; --ink:#c9d1d9; --muted:#8b949e; --quiet:#7d8590; --accent:#58a6ff; --accent-strong:#58a6ff; --stroke:#30363d; } html.millennial-mode.millennial-dark body { background:#0d1117; color:#c9d1d9; } html.millennial-mode.millennial-dark .brand, html.millennial-mode.millennial-dark .deck-welcome h1, html.millennial-mode.millennial-dark .panel-title, html.millennial-mode.millennial-dark .task-copy, html.millennial-mode.millennial-dark .habit-copy, html.millennial-mode.millennial-dark .focus-text, html.millennial-mode.millennial-dark .link-name, html.millennial-mode.millennial-dark .mini-copy strong, html.millennial-mode.millennial-dark .millennial-label { color:#c9d1d9; } html.millennial-mode.millennial-dark .brand-mark, html.millennial-mode.millennial-dark .space-switcher-icon, html.millennial-mode.millennial-dark .space-menu-item .space-item-icon { color:#ffffff; background:#1f6feb; border-color:#1f6feb; } html.millennial-mode.millennial-dark .glass, html.millennial-mode.millennial-dark dialog, html.millennial-mode.millennial-dark .space-menu, html.millennial-mode.millennial-dark .select-menu, html.millennial-mode.millennial-dark .colour-menu { background:#0d1117; border-color:#30363d; } html.millennial-mode.millennial-dark .deck-search, html.millennial-mode.millennial-dark .link-tile, html.millennial-mode.millennial-dark .note-area, html.millennial-mode.millennial-dark .task-item, html.millennial-mode.millennial-dark .habit-item, html.millennial-mode.millennial-dark .focus-item, html.millennial-mode.millennial-dark .mini-list li, html.millennial-mode.millennial-dark .weather-day, html.millennial-mode.millennial-dark .anime-card, html.millennial-mode.millennial-dark .calendar-day:hover { background:#161b22; border-color:#30363d; } html.millennial-mode.millennial-dark .button, html.millennial-mode.millennial-dark .icon-button, html.millennial-mode.millennial-dark .space-switcher-button, html.millennial-mode.millennial-dark .select-trigger { color:#c9d1d9; background:#21262d; border-color:#30363d; } html.millennial-mode.millennial-dark .button.primary { color:#ffffff; background:#238636; border-color:#238636; } html.millennial-mode.millennial-dark .button.primary:hover { background:#2ea043; } html.millennial-mode.millennial-dark .space-menu-item.active, html.millennial-mode.millennial-dark .space-menu-item:hover, html.millennial-mode.millennial-dark .select-menu button.active, html.millennial-mode.millennial-dark .select-menu button:hover { color:#c9d1d9; background:#1f6feb; } html.millennial-mode.millennial-dark .field input, html.millennial-mode.millennial-dark .field select, html.millennial-mode.millennial-dark .task-form input, html.millennial-mode.millennial-dark .task-form select, html.millennial-mode.millennial-dark .habit-form input, html.millennial-mode.millennial-dark .weather-location-form input, html.millennial-mode.millennial-dark .command-search, html.millennial-mode.millennial-dark .task-priority-trigger { color:#c9d1d9; background:#0d1117; border-color:#30363d; } html.millennial-mode.millennial-dark .theme-segmented { border-color:#30363d; } html.millennial-mode.millennial-dark .theme-segmented button { color:#8b949e; border-color:#30363d; background:#21262d; } html.millennial-mode.millennial-dark .theme-segmented button.active, html.millennial-mode.millennial-dark .widget-size-choice.active { color:#ffffff; background:#1f6feb; } html.millennial-mode.millennial-dark .calendar-day.today, html.millennial-mode.millennial-dark .task-check:checked, html.millennial-mode.millennial-dark .habit-check:checked, html.millennial-mode.millennial-dark .priority-picker button.active { color:#ffffff; background:#1f6feb; border-color:#1f6feb; } html.millennial-mode.millennial-dark .timer-display, html.millennial-mode.millennial-dark #clock { color:#c9d1d9; } html.millennial-mode.millennial-dark h1 span, html.millennial-mode.millennial-dark .eyebrow, html.millennial-mode.millennial-dark .text-button, html.millennial-mode.millennial-dark .space-item-check, html.millennial-mode.millennial-dark .local-badge { color:#58a6ff; } /* Widget board + highly optimized, auto-adjusting responsive 12-column CSS Grid. */ .widget-board { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 16px; align-items: start; } .widget-board > .panel { min-width: 0; grid-column: span 4; } .widget-board .focus-panel { min-height: 0; } .widget-board .panel-header { margin-bottom: 14px; } .widget-board .timer-widget, .widget-board .calendar-widget, .widget-board .at-glance { min-height: 0; } .widget-board .timer-display { margin: 8px 0 13px; } .app-v2 .glass { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* Dynamic column span rules for compact, wide, and full sizes */ .widget-board > .widget-size-compact { grid-column: span 4; } .widget-board > .widget-size-wide { grid-column: span 8; } .widget-board > .widget-size-full { grid-column: 1 / -1; } /* Highly responsive media queries that auto-adjust spans dynamically to avoid empty gaps on smaller screens */ @media (max-width: 1100px) { .widget-board { grid-template-columns: repeat(8, minmax(0, 1fr)); } .widget-board > .widget-size-compact { grid-column: span 4; } .widget-board > .widget-size-wide { grid-column: span 8; } .widget-board > .widget-size-full { grid-column: 1 / -1; } } @media (max-width: 760px) { .widget-board { grid-template-columns: 1fr; gap: 13px; } .widget-board > .panel, .widget-board > .widget-size-compact, .widget-board > .widget-size-wide, .widget-board > .widget-size-full { grid-column: 1; } .app-v2 .glass { backdrop-filter: none; -webkit-backdrop-filter: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; } } /* Custom dark menus — avoids the browser-controlled white native select popup. */ .select-picker { position:relative; flex:none; } .select-trigger { min-height:35px; display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--muted); border:1px solid rgba(255,255,255,.12); border-radius:10px; outline:0; background:rgba(0,0,0,.16); padding:7px 9px; cursor:pointer; font-size:11px; } .select-trigger:hover, .select-trigger[aria-expanded="true"] { color:#e7eef0; border-color:var(--accent-alpha-50); background:rgba(255,255,255,.07); } .select-trigger svg { width:14px; height:14px; } .search-engine-picker { max-width:120px; } .search-engine-picker .select-trigger { width:100%; min-width:104px; } .field-select-trigger { width:100%; min-height:40px; padding:10px 11px; font-size:13px; } .timer-mode-picker .timer-mode { min-height:29px; padding:5px 7px; font-size:10px; } .select-menu { position:absolute; z-index:45; top:calc(100% + 6px); right:0; min-width:100%; overflow:hidden; border:1px solid rgba(232,246,248,.18); border-radius:11px; background:rgba(14,23,33,.99); box-shadow:0 15px 38px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter:blur(18px); } .select-menu button { display:block; width:100%; min-height:32px; padding:0 10px; border:0; color:#dfe9eb; background:transparent; cursor:pointer; text-align:left; font-size:11px; } .select-menu button:hover, .select-menu button.active { color:var(--accent-light); background:rgba(145,222,197,.16); } #tasks-widget { position:relative; overflow:visible; content-visibility:visible; } #tasks-widget.priority-menu-open { z-index:80; } .task-priority-picker { position:relative; z-index:81; width:112px; } .task-priority-trigger { width:100%; min-height:39px; padding:8px 9px; color:var(--ink); font-size:11px; } /* The task row sits at the bottom of its card, so this menu opens upward into the card rather than under the next widget. */ .task-priority-picker .select-menu { z-index:90; top:auto; bottom:calc(100% + 7px); left:0; right:auto; width:128px; } .task-priority-picker .select-menu button { display:flex; align-items:center; gap:7px; } .priority-dot { width:7px; height:7px; display:inline-block; flex:none; border-radius:50%; background:#8b949e; } .priority-dot.high { background:#f47067; } .priority-dot.normal { background:#58a6ff; } .priority-dot.low { background:#3fb950; } .task-priority-trigger[data-value="high"] { color:#ffb4ae; } .task-priority-trigger[data-value="low"] { color:#92e6a7; } .template-picker { display:flex; flex-wrap:wrap; gap:6px; } .template-picker button { padding:7px 9px; border:1px solid rgba(255,255,255,.11); border-radius:9px; color:var(--muted); background:rgba(0,0,0,.14); cursor:pointer; font-size:10px; } .template-picker button:hover { color:#e8eff1; background:rgba(255,255,255,.08); } .template-picker button.active { color:var(--accent-dark); border-color:transparent; background:var(--accent); font-weight:800; } /* All-in-one local widget foundation */ .widget-hidden { display:none !important; } .task-list, .habit-list { display:grid; gap:7px; min-height:36px; margin:0; padding:0; list-style:none; } .task-item, .habit-item { display:flex; align-items:center; gap:9px; min-height:39px; padding:7px 9px; border:1px solid rgba(255,255,255,.075); border-radius:11px; background:rgba(1,10,17,.17); } .task-check, .habit-check { appearance:none; flex:none; width:17px; height:17px; margin:0; display:grid; place-content:center; border:1px solid rgba(222,245,241,.32); border-radius:6px; background:rgba(255,255,255,.04); cursor:pointer; } .task-check:checked, .habit-check:checked { border-color:var(--accent); background:var(--accent); } .task-check:checked::after, .habit-check:checked::after { content:"✓"; color:var(--accent-dark); font-size:12px; font-weight:900; } .task-copy, .habit-copy { flex:1; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#e7eef0; font-size:12px; } .task-item.complete .task-copy { color:var(--quiet); text-decoration:line-through; } .task-meta { flex:none; color:var(--quiet); font-size:9.5px; white-space:nowrap; } .task-meta.high { color:#ffb2b2; } .task-meta.low { color:#a9c8e8; } .task-remove, .habit-remove { opacity:0; width:22px; height:22px; display:grid; place-items:center; flex:none; padding:0; border:0; border-radius:7px; color:var(--muted); background:transparent; cursor:pointer; font-size:15px; transition:.16s; } .task-item:hover .task-remove, .habit-item:hover .habit-remove, .task-remove:focus-visible, .habit-remove:focus-visible { opacity:1; } .task-remove:hover, .habit-remove:hover { color:#ffc9c9; background:rgba(166,57,63,.17); } .task-form { display:grid; grid-template-columns:minmax(0,1fr) 116px 112px auto; gap:7px; margin-top:11px; } .task-form input, .task-form select, .habit-form input { min-width:0; color:var(--ink); border:1px solid rgba(255,255,255,.11); border-radius:10px; outline:0; background:rgba(1,10,17,.23); padding:9px 10px; font-size:11px; } .task-form input:focus, .task-form select:focus, .habit-form input:focus { border-color:var(--accent-alpha-50); } .task-form .button { min-height:35px; padding:0 11px; font-size:11px; } .task-empty, .habit-empty { padding:17px 7px; color:var(--quiet); text-align:center; font-size:11px; line-height:1.5; } .timer-widget { text-align:center; } .timer-widget .panel-header { text-align:left; } .timer-mode { max-width:86px; color:var(--muted); border:1px solid rgba(255,255,255,.11); border-radius:9px; outline:0; background:rgba(0,0,0,.16); padding:6px 7px; font-size:10px; } .timer-display { margin:5px 0 14px; color:#f4f9f8; font-size:44px; font-weight:280; letter-spacing:-.065em; font-variant-numeric:tabular-nums; } .timer-actions { display:flex; justify-content:center; gap:8px; } .timer-actions .button { min-height:33px; padding:0 14px; font-size:11px; } .habit-days { display:flex; gap:3px; margin-left:auto; } .habit-day { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.14); } .habit-day.done { background:var(--accent); box-shadow:0 0 0 2px var(--accent-alpha-10); } .habit-form { display:flex; gap:7px; margin-top:11px; } .habit-form input { flex:1; } .habit-form .button { min-height:34px; padding:0 10px; font-size:11px; } .calendar-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:11px; } .calendar-header strong { font-size:12px; } .calendar-nav { width:25px; height:25px; display:grid; place-items:center; border:0; border-radius:8px; color:var(--muted); background:rgba(255,255,255,.06); cursor:pointer; font-size:17px; } .calendar-nav:hover { color:var(--accent); background:rgba(255,255,255,.12); } .calendar-weekdays, .calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; text-align:center; } .calendar-weekdays { margin-bottom:5px; color:var(--quiet); font-size:9px; font-weight:750; } .calendar-day { position:relative; aspect-ratio:1; display:grid; place-items:center; padding:0; border:0; border-radius:8px; color:#dce6e8; background:transparent; cursor:pointer; font-size:10px; } .calendar-day:hover { background:rgba(255,255,255,.11); } .calendar-day.today { color:var(--accent-dark); background:var(--accent); font-weight:850; } .calendar-day.selected:not(.today) { box-shadow:inset 0 0 0 1px var(--accent); } .calendar-day.muted { color:rgba(180,193,202,.35); } .calendar-day.has-tasks::after { content:""; position:absolute; bottom:3px; width:3px; height:3px; border-radius:50%; background:var(--accent); } .calendar-day.today.has-tasks::after { background:#17352c; } .widget-toggle-list { display:grid; gap:7px; } .widget-toggle { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 11px; border:1px solid rgba(255,255,255,.09); border-radius:12px; background:rgba(0,0,0,.13); } .widget-toggle strong { display:block; color:#e8eff1; font-size:12px; } .widget-toggle span { display:block; margin-top:2px; color:var(--quiet); font-size:10px; } .widget-toggle .switch { margin-left:auto; } .widget-library-group { margin-top:14px; } .widget-library-group:first-child { margin-top:0; } .widget-library-heading { display:block; margin:0 0 7px 3px; color:var(--quiet); font-size:9px; font-weight:850; letter-spacing:.12em; text-transform:uppercase; } .widget-toggle-list { gap:0; } .widget-toggle { border-radius:0; border-top:0; } .widget-toggle:first-of-type { border-top:1px solid rgba(255,255,255,.09); border-radius:12px 12px 0 0; } .widget-toggle:last-child { border-radius:0 0 12px 12px; } .widget-toggle-tools { display:flex; align-items:center; gap:4px; margin-top:8px; } .widget-size-choice, .widget-order-button { height:24px; display:grid; place-items:center; padding:0 6px; border:1px solid rgba(255,255,255,.10); border-radius:7px; color:var(--quiet); background:rgba(0,0,0,.16); cursor:pointer; font-size:9px; } .widget-size-choice:hover, .widget-order-button:hover { color:#e7efef; background:rgba(255,255,255,.09); } .widget-size-choice.active { color:var(--accent-dark); border-color:transparent; background:var(--accent); font-weight:850; } .widget-order-button { width:24px; padding:0; font-size:13px; } .widget-order-button:disabled { opacity:.32; cursor:not-allowed; } .widget-coming-soon { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 11px; border:1px dashed rgba(255,255,255,.11); border-radius:12px; color:var(--quiet); font-size:11px; } .widget-coming-soon strong { display:block; color:#cfd9dc; font-size:11px; } .widget-coming-soon span { display:block; margin-top:2px; font-size:9.5px; } .command-dialog-body { padding-bottom:18px; } .command-search { width:100%; color:var(--ink); border:1px solid rgba(255,255,255,.15); border-radius:12px; outline:0; background:rgba(0,0,0,.20); padding:11px 12px; font-size:12px; } .command-search:focus { border-color:var(--accent-alpha-55); } .command-list { display:grid; gap:4px; max-height:310px; overflow:auto; margin-top:12px; } .command-item { width:100%; display:flex; align-items:center; gap:10px; min-height:39px; padding:0 9px; border:0; border-radius:10px; color:#e5edef; background:transparent; cursor:pointer; text-align:left; } .command-item:hover { background:rgba(255,255,255,.09); } .command-item-icon { display:grid; place-items:center; width:23px; height:23px; border-radius:7px; color:#11251f; background:var(--command-colour,var(--accent)); font-size:11px; font-weight:850; } .command-item-copy { min-width:0; flex:1; } .command-item-copy strong { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:11.5px; } .command-item-copy span { display:block; margin-top:1px; color:var(--quiet); font-size:9.5px; } .command-hint { margin:12px 0 0; color:var(--quiet); text-align:center; font-size:10px; } kbd { padding:2px 4px; border:1px solid rgba(255,255,255,.14); border-radius:4px; color:#dce6e8; background:rgba(255,255,255,.06); font:inherit; font-size:9px; } @media (max-width: 480px) { .task-form { grid-template-columns:minmax(0,1fr) 104px; } .task-form .task-priority-picker, .task-form .button { grid-row:2; } .task-form .button { grid-column:2; } .link-colour-control { flex-wrap:wrap; } .link-colour-presets { order:3; flex-basis:100%; } } /* Live provider widget — Weather pilot */ .weather-setup { display:grid; gap:9px; } .weather-header-actions { display:flex; align-items:center; gap:10px; } .weather-location-form { display:flex; gap:7px; } .weather-location-form input { min-width:0; flex:1; color:var(--ink); border:1px solid rgba(255,255,255,.11); border-radius:10px; outline:0; background:rgba(1,10,17,.23); padding:9px 10px; font-size:11px; } .weather-location-form input:focus { border-color:var(--accent-alpha-50); } .weather-location-form .button { min-height:34px; padding:0 10px; font-size:11px; } .weather-location-results { display:grid; gap:5px; } .weather-location-choice { width:100%; display:flex; align-items:center; justify-content:space-between; gap:9px; padding:8px 9px; border:1px solid rgba(255,255,255,.08); border-radius:10px; color:#e8eff1; background:rgba(0,0,0,.13); cursor:pointer; text-align:left; } .weather-location-choice:hover { border-color:var(--accent-alpha-35); background:rgba(255,255,255,.08); } .weather-location-choice strong { display:block; font-size:11px; } .weather-location-choice span { display:block; margin-top:2px; color:var(--quiet); font-size:9.5px; } .weather-current { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; } .weather-symbol { display:grid; place-items:center; width:39px; height:39px; border-radius:13px; color:var(--accent-dark); background:var(--accent-alpha-85); font-size:21px; } .weather-temp { color:#f3f8f8; font-size:30px; font-weight:320; letter-spacing:-.065em; font-variant-numeric:tabular-nums; } .weather-place { display:block; margin-top:2px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:var(--muted); font-size:10px; } .weather-feels { color:var(--quiet); text-align:right; font-size:10px; line-height:1.55; } .weather-days { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin-top:12px; padding-top:11px; border-top:1px solid rgba(255,255,255,.09); } .weather-day { min-width:0; padding:6px 4px; border-radius:9px; background:rgba(0,0,0,.12); text-align:center; } .weather-day strong { display:block; color:#e8eff1; font-size:9.5px; } .weather-day span { display:block; margin:3px 0; font-size:15px; } .weather-day small { display:block; color:var(--quiet); font-size:9px; } .weather-foot { display:flex; justify-content:space-between; gap:8px; margin-top:9px; color:var(--quiet); font-size:9px; } .weather-foot a { color:var(--accent); text-decoration:none; } .weather-foot button { padding:0; border:0; color:var(--accent); background:transparent; cursor:pointer; font-size:9px; } .weather-status { padding:12px 3px; color:var(--quiet); font-size:11px; line-height:1.5; } .weather-status.error { color:#ffc3c3; } /* Spaces — top-level local dashboard switcher */ .topbar-start { display:flex; align-items:center; gap:13px; min-width:0; } .space-switcher { position:relative; } .space-switcher-button { min-width:138px; max-width:230px; height:37px; display:flex; align-items:center; gap:8px; padding:0 10px; border:1px solid rgba(230,244,246,.16); border-radius:12px; color:#e6edef; background:rgba(4,13,21,.43); box-shadow:inset 0 1px 0 rgba(255,255,255,.07); cursor:pointer; transition:background .16s,border-color .16s,transform .16s; } .space-switcher-button:hover { background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.27); transform:translateY(-1px); } .space-switcher-button svg { width:14px; height:14px; margin-left:auto; color:var(--muted); } .space-switcher-icon { display:grid; place-items:center; width:22px; height:22px; border-radius:8px; color:#0b211a; background:var(--accent); font-size:13px; font-weight:900; } .space-switcher-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; font-weight:750; } .space-menu { position:absolute; z-index:30; top:calc(100% + 9px); left:0; width:264px; padding:10px; border:1px solid rgba(231,246,248,.18); border-radius:16px; background:rgba(13,23,33,.97); box-shadow:0 20px 55px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter:blur(20px); } .space-menu-label { display:block; padding:2px 5px 7px; color:var(--quiet); font-size:9px; font-weight:850; letter-spacing:.12em; text-transform:uppercase; } .space-menu-list { display:grid; gap:3px; } .space-menu-item { width:100%; display:flex; align-items:center; gap:9px; min-height:37px; padding:0 8px; border:0; border-radius:10px; color:#e8eff2; background:transparent; cursor:pointer; text-align:left; } .space-menu-item:hover { background:rgba(255,255,255,.09); } .space-menu-item.active { color:#e5fbf4; background:rgba(104,207,176,.14); } .space-menu-item .space-item-icon { display:grid; place-items:center; width:23px; height:23px; border-radius:8px; color:var(--accent-dark); background:var(--space-colour,var(--accent)); font-size:13px; font-weight:900; } .space-menu-item .space-item-name { flex:1; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:12px; font-weight:700; } .space-menu-item .space-item-check { color:var(--accent); font-size:13px; } .space-menu-actions { display:grid; gap:3px; margin-top:8px; padding-top:8px; border-top:1px solid rgba(255,255,255,.10); } .space-menu-action { display:flex; align-items:center; gap:8px; min-height:32px; padding:0 7px; border:0; color:var(--muted); border-radius:9px; background:transparent; cursor:pointer; text-align:left; font-size:11px; font-weight:700; } .space-menu-action:hover { color:var(--accent); background:rgba(255,255,255,.07); } .space-menu-action span { width:17px; text-align:center; font-size:16px; } .space-manager-list { display:grid; gap:9px; max-height:360px; overflow:auto; padding-right:2px; } .space-manager-card { display:grid; grid-template-columns:36px minmax(0,1fr) auto; align-items:center; gap:9px; padding:9px; border:1px solid rgba(255,255,255,.10); border-radius:13px; background:rgba(0,0,0,.14); } .space-manager-card.active { border-color:var(--accent-alpha-40); background:var(--accent-alpha-10); } .space-manager-icon { width:32px; height:32px; padding:0; border:1px solid rgba(255,255,255,.15); border-radius:10px; color:var(--accent-dark); background:var(--space-colour,var(--accent)); text-align:center; font-size:15px; font-weight:800; } .space-manager-fields { display:grid; grid-template-columns:minmax(0,1fr) 42px; gap:6px; } .space-manager-fields input { min-width:0; height:31px; color:var(--ink); border:1px solid rgba(255,255,255,.11); border-radius:8px; outline:0; background:rgba(0,0,0,.18); padding:6px 8px; font-size:11px; } .space-manager-fields input:focus { border-color:var(--accent-alpha-55); } .space-manager-controls { display:flex; gap:3px; } .space-manager-controls button { width:25px; height:27px; display:grid; place-items:center; padding:0; border:0; border-radius:7px; color:var(--muted); background:transparent; cursor:pointer; font-size:13px; } .space-manager-controls button:hover { color:var(--accent); background:rgba(255,255,255,.10); } .space-manager-controls .space-remove:hover { color:#ffcaca; background:rgba(158,61,66,.18); } @media (max-width: 1100px) { .command-deck { grid-template-columns:1fr 1fr; } .deck-search { grid-column:1 / -1; grid-row:2; } .deck-time { grid-column:2; grid-row:1; } .deck-welcome { grid-column:1; } .dashboard-grid { grid-template-columns:minmax(0,1.38fr) minmax(280px,.72fr); } .links-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } } @media (max-width: 760px) { .app { width:min(100% - 26px, 1480px); padding-top:14px; } .task-form { grid-template-columns:minmax(0,1fr) 100px 112px auto; } .calendar-widget { max-width:none; } .topbar-start { gap:8px; } .brand > span:last-child { display:none; } .space-switcher-button { min-width:124px; max-width:calc(100vw - 125px); } .space-menu { left:-42px; width:min(264px, calc(100vw - 30px)); } .space-manager-card { grid-template-columns:32px minmax(0,1fr); } .space-manager-controls { grid-column:1 / -1; justify-content:flex-end; margin-top:-3px; } .command-deck { display:block; min-height:0; padding:22px; } .deck-search { margin-top:20px; } .deck-time { display:block; margin-top:19px; padding:17px 0 0; border-left:0; border-top:1px solid rgba(232,246,248,.14); } .time-footer { display:none; } .dashboard-grid { grid-template-columns:1fr; gap:13px; } .stack { gap:13px; } .panel { padding:19px; } .links-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .link-tile { min-height:94px; } } @media (max-width: 410px) { .topbar-actions .button span { display:none; } .topbar-actions .button { width:38px; padding:0; } .links-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; } .link-tile { min-height:86px; padding:8px 4px; } .link-icon { width:33px; height:33px; font-size:16px; } } /* Final contrast guard: these are intentionally last to beat legacy dark-theme control styles. */ html.millennial-mode:not(.millennial-dark) textarea.note-area, html.millennial-mode:not(.millennial-dark) #notes, html.millennial-mode:not(.millennial-dark) input:not([type="checkbox"]):not([type="file"]), body.millennial-mode:not(.millennial-dark) textarea.note-area, body.millennial-mode:not(.millennial-dark) #notes, body.millennial-mode:not(.millennial-dark) input:not([type="checkbox"]):not([type="file"]) { color:#0d1117 !important; -webkit-text-fill-color:#0d1117 !important; caret-color:#0d1117 !important; opacity:1 !important; font-size:15px !important; font-weight:700 !important; } html.millennial-mode:not(.millennial-dark) .note-area::placeholder, html.millennial-mode:not(.millennial-dark) input::placeholder, body.millennial-mode:not(.millennial-dark) .note-area::placeholder, body.millennial-mode:not(.millennial-dark) input::placeholder { color:#57606a !important; -webkit-text-fill-color:#57606a !important; opacity:1 !important; } /* Millennial mode intentionally favours legibility over density. */ html.millennial-mode .app { font-size:16px; } html.millennial-mode .panel-title { font-size:18px !important; font-weight:800; } html.millennial-mode .panel-meta, html.millennial-mode .widget-label, html.millennial-mode .task-meta, html.millennial-mode .habit-copy, html.millennial-mode .focus-text, html.millennial-mode .mini-copy span, html.millennial-mode .weather-place, html.millennial-mode .weather-feels { font-size:12.5px !important; font-weight:650; } html.millennial-mode .link-name, html.millennial-mode .task-copy, html.millennial-mode .habit-copy, html.millennial-mode .focus-text { font-size:14px !important; font-weight:700; } html.millennial-mode .focus-empty, html.millennial-mode .task-empty, html.millennial-mode .habit-empty, html.millennial-mode .weather-status, html.millennial-mode .hero-copy { font-size:13.5px !important; line-height:1.6; } html.millennial-mode .note-area { font-size:16px !important; font-weight:700 !important; } html.millennial-mode .field input, html.millennial-mode .task-form input, html.millennial-mode .habit-form input, html.millennial-mode .weather-location-form input, html.millennial-mode .command-search, html.millennial-mode #search-input { font-size:15px !important; font-weight:650; } html.millennial-mode .button, html.millennial-mode .text-button, html.millennial-mode .select-trigger, html.millennial-mode .space-switcher-label { font-size:13px !important; font-weight:750; } html.millennial-mode .link-tile { min-height:101px; } html.millennial-mode .link-icon { width:40px; height:40px; font-size:19px; } html.millennial-mode:not(.millennial-dark) .capture-type-picker, html.millennial-mode:not(.millennial-dark) #capture-text, html.millennial-mode:not(.millennial-dark) .inbox-item { background:#f6f8fa; border-color:#8c959f; color:#24292f; } html.millennial-mode:not(.millennial-dark) .capture-type-picker button { color:#57606a; background:#f6f8fa; border-color:#8c959f; } html.millennial-mode:not(.millennial-dark) .capture-type-picker button.active { color:#ffffff; background:#0969da; } html.millennial-mode:not(.millennial-dark) .inbox-copy strong { color:#24292f; } html.millennial-mode:not(.millennial-dark) .inbox-actions button { color:#57606a; border-color:#8c959f; } html.millennial-mode.millennial-dark .capture-type-picker, html.millennial-mode.millennial-dark #capture-text, html.millennial-mode.millennial-dark .inbox-item { background:#161b22; border-color:#30363d; color:#c9d1d9; } html.millennial-mode.millennial-dark .capture-type-picker button { color:#8b949e; background:#21262d; border-color:#30363d; } html.millennial-mode.millennial-dark .capture-type-picker button.active { color:#ffffff; background:#1f6feb; } html.millennial-mode.millennial-dark .inbox-copy strong { color:#c9d1d9; } html.millennial-mode.millennial-dark .inbox-actions button { color:#8b949e; border-color:#30363d; } html.millennial-mode:not(.millennial-dark) .emoji-picker-menu { background:#ffffff; border-color:#8c959f; box-shadow:0 10px 24px rgba(31,35,40,.16); backdrop-filter:none; } html.millennial-mode:not(.millennial-dark) .emoji-picker-top input { color:#24292f; background:#ffffff; border-color:#8c959f; } html.millennial-mode:not(.millennial-dark) .emoji-picker-toggle { color:#0969da; background:#f6f8fa; border-color:#8c959f; } html.millennial-mode:not(.millennial-dark) .emoji-category-tabs button { color:#57606a; } html.millennial-mode:not(.millennial-dark) .emoji-category-tabs button.active { color:#ffffff; background:#0969da; border-color:#0969da; } html.millennial-mode:not(.millennial-dark) .emoji-picker-grid button:hover { background:#ddf4ff; border-color:#0969da; } html.millennial-mode.millennial-dark .emoji-picker-menu { background:#161b22; border-color:#30363d; } html.millennial-mode.millennial-dark .emoji-picker-top input { color:#c9d1d9; background:#0d1117; border-color:#30363d; } html.millennial-mode.millennial-dark .emoji-picker-toggle { color:#58a6ff; background:#21262d; border-color:#30363d; } html.millennial-mode.millennial-dark .emoji-category-tabs button.active { color:#ffffff; background:#1f6feb; border-color:#1f6feb; } /* Millennial Light: the Space menu is a white surface, so every menu label must use real black text. */ html.millennial-mode:not(.millennial-dark) .space-menu, body.millennial-mode:not(.millennial-dark) .space-menu { color:#24292f !important; } html.millennial-mode:not(.millennial-dark) .space-menu-label, html.millennial-mode:not(.millennial-dark) .space-menu-item, html.millennial-mode:not(.millennial-dark) .space-menu-item .space-item-name, html.millennial-mode:not(.millennial-dark) .space-menu-action, html.millennial-mode:not(.millennial-dark) .space-menu-action span, body.millennial-mode:not(.millennial-dark) .space-menu-label, body.millennial-mode:not(.millennial-dark) .space-menu-item, body.millennial-mode:not(.millennial-dark) .space-menu-item .space-item-name, body.millennial-mode:not(.millennial-dark) .space-menu-action, body.millennial-mode:not(.millennial-dark) .space-menu-action span { color:#24292f !important; opacity:1 !important; } html.millennial-mode:not(.millennial-dark) .space-menu-item.active, html.millennial-mode:not(.millennial-dark) .space-menu-item:hover { color:#24292f !important; } /* In Millennial Light, secondary UI copy is deliberately black too—clarity beats decorative low contrast. */ html.millennial-mode:not(.millennial-dark), body.millennial-mode:not(.millennial-dark) { --ink:#24292f; --muted:#24292f; --quiet:#24292f; } html.millennial-mode:not(.millennial-dark) .panel-meta, html.millennial-mode:not(.millennial-dark) .widget-label, html.millennial-mode:not(.millennial-dark) .task-meta, html.millennial-mode:not(.millennial-dark) .mini-copy span, html.millennial-mode:not(.millennial-dark) .weather-place, html.millennial-mode:not(.millennial-dark) .weather-feels, html.millennial-mode:not(.millennial-dark) .time-footer, html.millennial-mode:not(.millennial-dark) .note-foot, html.millennial-mode:not(.millennial-dark) .quote, html.millennial-mode:not(.millennial-dark) .dialog-description { color:#24292f !important; opacity:1 !important; } /* Millennial Light settings panels: no low-contrast grey labels on white. */ html.millennial-mode:not(.millennial-dark) .dialog-body, html.millennial-mode:not(.millennial-dark) .dialog-title h2, html.millennial-mode:not(.millennial-dark) .dialog-description, html.millennial-mode:not(.millennial-dark) .setting-heading, html.millennial-mode:not(.millennial-dark) .field label, html.millennial-mode:not(.millennial-dark) .toggle-row > span, html.millennial-mode:not(.millennial-dark) .toggle-row > span strong, html.millennial-mode:not(.millennial-dark) .toggle-row > span small, html.millennial-mode:not(.millennial-dark) .setting-help, html.millennial-mode:not(.millennial-dark) .choose-photo-title, html.millennial-mode:not(.millennial-dark) .custom-wallpapers-heading, html.millennial-mode:not(.millennial-dark) .data-actions, body.millennial-mode:not(.millennial-dark) .dialog-body, body.millennial-mode:not(.millennial-dark) .dialog-title h2, body.millennial-mode:not(.millennial-dark) .dialog-description, body.millennial-mode:not(.millennial-dark) .setting-heading, body.millennial-mode:not(.millennial-dark) .field label, body.millennial-mode:not(.millennial-dark) .toggle-row > span, body.millennial-mode:not(.millennial-dark) .toggle-row > span strong, body.millennial-mode:not(.millennial-dark) .toggle-row > span small, body.millennial-mode:not(.millennial-dark) .setting-help, body.millennial-mode:not(.millennial-dark) .choose-photo-title, body.millennial-mode:not(.millennial-dark) .custom-wallpapers-heading, body.millennial-mode:not(.millennial-dark) .data-actions { color:#24292f !important; opacity:1 !important; } html.millennial-mode:not(.millennial-dark) .switch input:not(:checked)::after { background:#8c959f; } /* Millennial Light final contrast pass — keep the plain mode readable on white cards. Earlier dark/glass styles use pale hard-coded colours in places like the calendar, weather setup, command menu, and secondary widget copy. This last layer forces the light variant back to near-black text, then restores white only on selected/primary controls where a dark/blue/green background needs it. */ html.millennial-mode:not(.millennial-dark), body.millennial-mode:not(.millennial-dark) { --ink:#24292f !important; --muted:#24292f !important; --quiet:#24292f !important; } html.millennial-mode:not(.millennial-dark) body, html.millennial-mode:not(.millennial-dark) body :where( .app, .glass, .panel, dialog, .dialog-body, .dialog-title, .dialog-description, .panel-title, .panel-meta, .widget-label, .hero-copy, .time-footer, .note-foot, .save-status, .setting-heading, .setting-help, .field label, .toggle-row, .toggle-row span, .toggle-row strong, .toggle-row small, .millennial-theme-row, .choose-photo-title, .custom-wallpapers-heading, .link-name, .task-copy, .task-meta, .task-empty, .habit-copy, .habit-empty, .focus-text, .focus-empty, .mini-copy, .mini-copy strong, .mini-copy span, .glance-copy, .glance-copy strong, .glance-copy span, .weather-status, .weather-place, .weather-feels, .weather-foot, .weather-foot a, .weather-day, .weather-day strong, .weather-day small, .weather-location-choice, .weather-location-choice strong, .weather-location-choice span, .calendar-header strong, .calendar-weekdays, .calendar-weekdays span, .calendar-day, .calendar-day.muted, .inbox-copy, .inbox-copy strong, .inbox-copy span, .inbox-empty, .command-item, .command-item-copy, .command-item-copy strong, .command-item-copy span, .command-hint, .select-trigger, .select-menu button, .space-menu, .space-menu-label, .space-menu-item, .space-menu-item .space-item-name, .space-menu-action, .widget-toggle, .widget-toggle strong, .widget-toggle span, .widget-coming-soon, .widget-coming-soon strong, .widget-coming-soon span, .widget-library-heading, .template-picker button, .capture-type-picker button, .inbox-actions button, .text-button, .button, .icon-button, .local-badge, kbd ), body.millennial-mode:not(.millennial-dark) :where( .app, .glass, .panel, dialog, .dialog-body, .dialog-title, .dialog-description, .panel-title, .panel-meta, .widget-label, .hero-copy, .time-footer, .note-foot, .save-status, .setting-heading, .setting-help, .field label, .toggle-row, .toggle-row span, .toggle-row strong, .toggle-row small, .millennial-theme-row, .choose-photo-title, .custom-wallpapers-heading, .link-name, .task-copy, .task-meta, .task-empty, .habit-copy, .habit-empty, .focus-text, .focus-empty, .mini-copy, .mini-copy strong, .mini-copy span, .glance-copy, .glance-copy strong, .glance-copy span, .weather-status, .weather-place, .weather-feels, .weather-foot, .weather-foot a, .weather-day, .weather-day strong, .weather-day small, .weather-location-choice, .weather-location-choice strong, .weather-location-choice span, .calendar-header strong, .calendar-weekdays, .calendar-weekdays span, .calendar-day, .calendar-day.muted, .inbox-copy, .inbox-copy strong, .inbox-copy span, .inbox-empty, .command-item, .command-item-copy, .command-item-copy strong, .command-item-copy span, .command-hint, .select-trigger, .select-menu button, .space-menu, .space-menu-label, .space-menu-item, .space-menu-item .space-item-name, .space-menu-action, .widget-toggle, .widget-toggle strong, .widget-toggle span, .widget-coming-soon, .widget-coming-soon strong, .widget-coming-soon span, .widget-library-heading, .template-picker button, .capture-type-picker button, .inbox-actions button, .text-button, .button, .icon-button, .local-badge, kbd ) { color:#24292f !important; -webkit-text-fill-color:#24292f !important; opacity:1 !important; } html.millennial-mode:not(.millennial-dark) :where(input:not([type="checkbox"]):not([type="file"]), textarea, select), body.millennial-mode:not(.millennial-dark) :where(input:not([type="checkbox"]):not([type="file"]), textarea, select) { color:#0d1117 !important; -webkit-text-fill-color:#0d1117 !important; caret-color:#0d1117 !important; opacity:1 !important; } html.millennial-mode:not(.millennial-dark) input::placeholder, html.millennial-mode:not(.millennial-dark) textarea::placeholder, body.millennial-mode:not(.millennial-dark) input::placeholder, body.millennial-mode:not(.millennial-dark) textarea::placeholder { color:#24292f !important; -webkit-text-fill-color:#24292f !important; opacity:.72 !important; } html.millennial-mode:not(.millennial-dark) :where( .button.primary, .theme-segmented button.active, .capture-type-picker button.active, .emoji-category-tabs button.active, .widget-size-choice.active, .calendar-day.today, .task-check:checked::after, .habit-check:checked::after, .focus-check:checked::after, .background-choice.active::before ), body.millennial-mode:not(.millennial-dark) :where( .button.primary, .theme-segmented button.active, .capture-type-picker button.active, .emoji-category-tabs button.active, .widget-size-choice.active, .calendar-day.today, .task-check:checked::after, .habit-check:checked::after, .focus-check:checked::after, .background-choice.active::before ) { color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; } /* Calm surface pass — remove the decorative bloom/glow from the glass UI. The dashboard should feel clean, not neon: no blurred accent blobs, no bright icon/button halos, and softer card depth while keeping the wallpaper visible. */ html:not(.millennial-mode) .welcome::before, html:not(.millennial-mode) .command-deck::before { display:none !important; } html:not(.millennial-mode) .glass { box-shadow: 0 12px 34px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255,255,255,.055) !important; } html:not(.millennial-mode) .app-v2 .glass { backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; } html:not(.millennial-mode) .button.primary, html:not(.millennial-mode) .brand-mark, html:not(.millennial-mode) .link-icon, html:not(.millennial-mode) .live-dot i, html:not(.millennial-mode) .habit-day.done, html:not(.millennial-mode) .background-choice.active, html:not(.millennial-mode) .colour-preset.active { box-shadow:none !important; } html:not(.millennial-mode) .link-icon { background: rgba(255, 255, 255, 0.045) !important; } html:not(.millennial-mode) .link-tile, html:not(.millennial-mode) .deck-search, html:not(.millennial-mode) .note-area, html:not(.millennial-mode) .task-item, html:not(.millennial-mode) .habit-item, html:not(.millennial-mode) .focus-item, html:not(.millennial-mode) .weather-day { background-color: rgba(2, 11, 19, .24); } /* Millennial accent bridge — Millennial mode stays plain, but it now respects the current Space accent instead of forcing GitHub blue/green everywhere. */ html.millennial-mode h1 span, html.millennial-mode .eyebrow, html.millennial-mode .text-button, html.millennial-mode .space-item-check, html.millennial-mode .local-badge, html.millennial-mode .emoji-picker-toggle, html.millennial-mode .weather-foot a, html.millennial-mode .weather-foot button, html.millennial-mode .calendar-nav:hover, html.millennial-mode .space-menu-action:hover { color:var(--accent) !important; -webkit-text-fill-color:var(--accent) !important; } html.millennial-mode .brand-mark, html.millennial-mode .space-switcher-icon, html.millennial-mode .space-menu-item .space-item-icon, html.millennial-mode .weather-symbol, html.millennial-mode .button.primary, html.millennial-mode .theme-segmented button.active, html.millennial-mode .capture-type-picker button.active, html.millennial-mode .emoji-category-tabs button.active, html.millennial-mode .widget-size-choice.active, html.millennial-mode .priority-picker button.active, html.millennial-mode .calendar-day.today, html.millennial-mode .task-check:checked, html.millennial-mode .habit-check:checked, html.millennial-mode .focus-check:checked { background:var(--accent) !important; border-color:var(--accent) !important; color:var(--accent-contrast) !important; -webkit-text-fill-color:var(--accent-contrast) !important; } html.millennial-mode .button.primary:hover { background:var(--accent-strong) !important; border-color:var(--accent-strong) !important; color:var(--accent-contrast) !important; -webkit-text-fill-color:var(--accent-contrast) !important; } html.millennial-mode .space-menu-item.active, html.millennial-mode .space-menu-item:hover, html.millennial-mode .select-menu button.active, html.millennial-mode .select-menu button:hover { background:var(--accent-alpha-15) !important; border-color:var(--accent) !important; } html.millennial-mode.millennial-dark .space-menu-item.active, html.millennial-mode.millennial-dark .space-menu-item:hover, html.millennial-mode.millennial-dark .select-menu button.active, html.millennial-mode.millennial-dark .select-menu button:hover { background:var(--accent-alpha-25) !important; } html.millennial-mode .calendar-day.selected:not(.today), html.millennial-mode .colour-preset.active, html.millennial-mode .background-choice.active { border-color:var(--accent) !important; box-shadow:inset 0 0 0 1px var(--accent) !important; } html.millennial-mode .task-check:checked::after, html.millennial-mode .habit-check:checked::after, html.millennial-mode .focus-check:checked::after, html.millennial-mode .background-choice.active::before { color:var(--accent-contrast) !important; -webkit-text-fill-color:var(--accent-contrast) !important; } /* Visual colour mixer — custom colours are chosen by dragging, not typing hex. */ .colour-mixer { display:grid; gap:10px; margin-top:13px; } .colour-mixer-title { color:#e7eeef; font-size:11px; font-weight:750; } .colour-field { position:relative; height:132px; overflow:hidden; border:1px solid rgba(255,255,255,.16); border-radius:12px; cursor:crosshair; touch-action:none; background: linear-gradient(to top, #000 0%, rgba(0,0,0,0) 100%), linear-gradient(to right, #fff 0%, hsl(var(--mixer-hue, 160) 100% 50%) 100%); } .colour-field-thumb { position:absolute; left:50%; top:50%; width:16px; height:16px; border:2px solid #fff; border-radius:50%; box-shadow:0 0 0 1px rgba(0,0,0,.55), 0 2px 7px rgba(0,0,0,.38); transform:translate(-50%, -50%); pointer-events:none; } .colour-hue { appearance:none; width:100%; height:16px; margin:0; border:1px solid rgba(255,255,255,.16); border-radius:99px; outline:0; cursor:pointer; background:linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); } .colour-hue::-webkit-slider-thumb { appearance:none; width:18px; height:18px; border:2px solid #fff; border-radius:50%; background:transparent; box-shadow:0 0 0 1px rgba(0,0,0,.55), 0 2px 7px rgba(0,0,0,.38); } .colour-hue::-moz-range-thumb { width:14px; height:14px; border:2px solid #fff; border-radius:50%; background:transparent; box-shadow:0 0 0 1px rgba(0,0,0,.55), 0 2px 7px rgba(0,0,0,.38); } .link-colour-control { position:relative; } .link-colour-menu { top:calc(100% + 10px); left:0; right:auto; width:244px; } html.millennial-mode:not(.millennial-dark) .colour-mixer-title { color:#24292f !important; } html.millennial-mode:not(.millennial-dark) .colour-field, html.millennial-mode:not(.millennial-dark) .colour-hue { border-color:#8c959f; } /* Custom colour management + stronger widget-size behaviour. */ .colour-preset-wrap { position:relative; display:inline-grid; place-items:center; width:25px; height:25px; } .colour-preset-wrap .colour-preset { grid-area:1 / 1; } .colour-delete { position:absolute; top:-7px; right:-7px; width:16px; height:16px; display:grid; place-items:center; padding:0; border:1px solid rgba(255,255,255,.22); border-radius:50%; color:#ffe2e2; background:rgba(30,18,24,.92); cursor:pointer; font-size:11px; line-height:1; opacity:.88; transform:scale(1); transition:opacity .16s, transform .16s, background .16s; } .colour-preset-wrap:hover .colour-delete, .colour-delete:focus-visible { opacity:1; transform:scale(1.05); } .colour-delete:hover { background:rgba(144,50,59,.96); } html.millennial-mode:not(.millennial-dark) .colour-delete { color:#ffffff !important; background:#cf222e; border-color:#cf222e; } html.millennial-mode.millennial-dark .colour-delete { color:#ffffff; background:#da3633; border-color:#da3633; } .widget-board > .panel.widget-size-compact { grid-column:span 4 !important; } .widget-board > .panel.widget-size-wide { grid-column:span 8 !important; } .widget-board > .panel.widget-size-full { grid-column:1 / -1 !important; } #links-widget.widget-size-compact .links-grid { grid-template-columns:repeat(3, minmax(0, 1fr)) !important; } #links-widget.widget-size-wide .links-grid { grid-template-columns:repeat(auto-fit, minmax(82px, 1fr)) !important; } #links-widget.widget-size-full .links-grid { grid-template-columns:repeat(auto-fit, minmax(110px, 1fr)) !important; } @media (max-width: 1100px) { .widget-board > .panel.widget-size-compact { grid-column:span 4 !important; } .widget-board > .panel.widget-size-wide { grid-column:span 8 !important; } .widget-board > .panel.widget-size-full { grid-column:1 / -1 !important; } } @media (max-width: 760px) { .widget-board > .panel, .widget-board > .panel.widget-size-compact, .widget-board > .panel.widget-size-wide, .widget-board > .panel.widget-size-full { grid-column:1 / -1 !important; } #links-widget .links-grid { grid-template-columns:repeat(3, minmax(0, 1fr)) !important; } } @media (max-width: 410px) { #links-widget .links-grid { grid-template-columns:repeat(2, minmax(0, 1fr)) !important; } } /* Resources widget — Drive links are saved with the Space; uploaded files stay local in IndexedDB. */ .resource-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; } .resource-form { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) 112px auto; gap:7px; margin:0 0 12px; } .resource-form input, .resource-form select { min-width:0; color:var(--ink); border:1px solid rgba(255,255,255,.11); border-radius:10px; outline:0; background:rgba(1,10,17,.23); padding:9px 10px; font-size:11px; } .resource-form input:focus, .resource-form select:focus { border-color:var(--accent-alpha-50); } .resource-section { margin-top:12px; } .resource-section:first-of-type { margin-top:0; } .resource-section-title { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 8px; color:var(--muted); font-size:10px; font-weight:850; letter-spacing:.11em; text-transform:uppercase; } .resource-list { display:grid; gap:7px; margin:0; padding:0; list-style:none; } .resource-item { display:grid; grid-template-columns:30px minmax(0,1fr) auto; align-items:center; gap:9px; min-height:42px; padding:8px 9px; border:1px solid rgba(255,255,255,.075); border-radius:12px; background:rgba(1,10,17,.17); } .resource-icon { display:grid; place-items:center; width:30px; height:30px; border-radius:10px; color:var(--accent-dark); background:var(--resource-colour,var(--accent)); font-size:13px; font-weight:850; } .resource-copy { min-width:0; } .resource-copy strong { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#e7eef0; font-size:12px; } .resource-copy span { display:block; margin-top:2px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:var(--quiet); font-size:9.5px; } .resource-buttons { display:flex; align-items:center; gap:4px; } .resource-buttons button, .resource-buttons a { min-height:25px; display:inline-flex; align-items:center; justify-content:center; padding:0 7px; border:1px solid rgba(255,255,255,.11); border-radius:7px; color:var(--muted); background:transparent; cursor:pointer; text-decoration:none; font-size:9px; font-weight:750; } .resource-buttons button:hover, .resource-buttons a:hover { color:var(--accent); background:rgba(255,255,255,.08); } .resource-buttons .resource-delete:hover { color:#ffc7c7; background:rgba(155,55,61,.17); } .resource-empty { padding:17px 7px; color:var(--quiet); text-align:center; font-size:11px; line-height:1.5; } .resource-local-note { margin:9px 0 0; color:var(--quiet); font-size:9.5px; line-height:1.45; } html.millennial-mode .resource-form input, html.millennial-mode .resource-form select { color:#24292f; background:#ffffff; border-color:#8c959f; } html.millennial-mode.millennial-dark .resource-form input, html.millennial-mode.millennial-dark .resource-form select { color:#c9d1d9; background:#0d1117; border-color:#30363d; } html.millennial-mode .resource-item { background:#f6f8fa; border-color:#8c959f; } html.millennial-mode.millennial-dark .resource-item { background:#161b22; border-color:#30363d; } html.millennial-mode:not(.millennial-dark) .resource-copy strong, html.millennial-mode:not(.millennial-dark) .resource-copy span, html.millennial-mode:not(.millennial-dark) .resource-section-title, html.millennial-mode:not(.millennial-dark) .resource-local-note, html.millennial-mode:not(.millennial-dark) .resource-empty { color:#24292f !important; -webkit-text-fill-color:#24292f !important; opacity:1 !important; } @media (max-width: 580px) { .resource-form { grid-template-columns:1fr; } .resource-actions .button span { display:inline; } } /* Grouped template picker — supports many exam templates without making Create Space messy. */ .template-filter-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:9px; } .template-filter-row span { color:var(--muted); font-size:10.5px; font-weight:750; } .template-category-select { min-width:160px; color:var(--ink); border:1px solid rgba(255,255,255,.12); border-radius:10px; outline:0; background:rgba(0,0,0,.18); padding:8px 9px; font-size:11px; } .template-picker.filtered [data-space-template] { display:none; } .template-picker.filtered [data-template-visible="true"] { display:inline-flex; } .template-picker-count { margin-left:auto; color:var(--quiet); font-size:10px; } html.millennial-mode:not(.millennial-dark) .template-filter-row span, html.millennial-mode:not(.millennial-dark) .template-picker-count { color:#24292f !important; -webkit-text-fill-color:#24292f !important; opacity:1 !important; } html.millennial-mode .template-category-select { color:#24292f; background:#ffffff; border-color:#8c959f; } html.millennial-mode.millennial-dark .template-category-select { color:#c9d1d9; background:#0d1117; border-color:#30363d; } /* Template picker polish — custom themed category menu plus search. */ .template-category-picker { flex:none; min-width:220px; } .template-category-picker .select-trigger { width:100%; min-height:40px; } .template-category-picker .select-menu { left:0; right:auto; width:100%; max-height:260px; overflow:auto; } .template-search { width:100%; margin:0 0 10px; color:var(--ink); border:1px solid rgba(255,255,255,.12); border-radius:11px; outline:0; background:rgba(0,0,0,.18); padding:10px 11px; font-size:12px; } .template-search:focus { border-color:var(--accent-alpha-55); } .template-search::placeholder { color:var(--quiet); opacity:.85; } html.millennial-mode .template-search { color:#24292f; background:#ffffff; border-color:#8c959f; } html.millennial-mode.millennial-dark .template-search { color:#c9d1d9; background:#0d1117; border-color:#30363d; } html.millennial-mode:not(.millennial-dark) .template-search::placeholder { color:#24292f !important; -webkit-text-fill-color:#24292f !important; opacity:.7 !important; } @media (max-width: 520px) { .template-filter-row { align-items:stretch; flex-direction:column; } .template-category-picker { width:100%; } } /* First-run setup wizard */ .onboarding-dialog { width:min(720px, calc(100% - 28px)); } .onboarding-grid { display:grid; grid-template-columns:220px minmax(0,1fr); gap:18px; margin-top:14px; } .setup-choice-list { display:grid; gap:7px; } .setup-choice { width:100%; display:flex; align-items:center; gap:9px; min-height:43px; padding:0 10px; border:1px solid rgba(255,255,255,.10); border-radius:12px; color:#e8eff2; background:rgba(0,0,0,.13); cursor:pointer; text-align:left; } .setup-choice:hover { border-color:var(--accent-alpha-40); background:rgba(255,255,255,.08); } .setup-choice.active { color:var(--accent-dark); border-color:transparent; background:var(--accent); font-weight:850; } .setup-choice-icon { display:grid; place-items:center; width:25px; height:25px; border-radius:8px; background:rgba(255,255,255,.10); font-size:13px; } .setup-choice.active .setup-choice-icon { background:rgba(0,0,0,.10); } .setup-panel { min-width:0; padding:14px; border:1px solid rgba(255,255,255,.09); border-radius:15px; background:rgba(0,0,0,.12); } .setup-panel-title { display:block; margin-bottom:5px; color:#e8eff1; font-size:14px; font-weight:800; } .setup-panel-copy { margin:0 0 12px; color:var(--muted); font-size:11.5px; line-height:1.55; } .setup-extra-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; } .setup-check { display:flex; align-items:center; gap:8px; min-height:36px; padding:0 9px; border:1px solid rgba(255,255,255,.09); border-radius:10px; color:#e7eef0; background:rgba(0,0,0,.12); font-size:11px; font-weight:700; } .setup-check input { accent-color:var(--accent); } .setup-template-search { width:100%; color:var(--ink); border:1px solid rgba(255,255,255,.12); border-radius:10px; outline:0; background:rgba(0,0,0,.18); padding:9px 10px; font-size:11.5px; } .setup-template-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; max-height:228px; overflow:auto; margin-top:9px; padding-right:3px; } .setup-template { min-height:34px; padding:0 9px; border:1px solid rgba(255,255,255,.10); border-radius:10px; color:#e8eff1; background:rgba(0,0,0,.13); cursor:pointer; text-align:left; font-size:11px; font-weight:750; } .setup-template:hover { border-color:var(--accent-alpha-40); background:rgba(255,255,255,.08); } .setup-template.active { color:var(--accent-dark); border-color:transparent; background:var(--accent); } html.millennial-mode:not(.millennial-dark) .setup-choice, html.millennial-mode:not(.millennial-dark) .setup-panel, html.millennial-mode:not(.millennial-dark) .setup-check, html.millennial-mode:not(.millennial-dark) .setup-template, html.millennial-mode:not(.millennial-dark) .setup-template-search { color:#24292f; background:#f6f8fa; border-color:#8c959f; } html.millennial-mode:not(.millennial-dark) .setup-panel-title, html.millennial-mode:not(.millennial-dark) .setup-panel-copy, html.millennial-mode:not(.millennial-dark) .setup-check { color:#24292f !important; -webkit-text-fill-color:#24292f !important; opacity:1 !important; } html.millennial-mode.millennial-dark .setup-choice, html.millennial-mode.millennial-dark .setup-panel, html.millennial-mode.millennial-dark .setup-check, html.millennial-mode.millennial-dark .setup-template, html.millennial-mode.millennial-dark .setup-template-search { color:#c9d1d9; background:#161b22; border-color:#30363d; } @media (max-width: 680px) { .onboarding-grid { grid-template-columns:1fr; } .setup-extra-grid, .setup-template-list { grid-template-columns:1fr; } } /* Syllabus Tracker widget */ .syllabus-summary { display:flex; align-items:center; gap:10px; margin-bottom:13px; } .syllabus-percent { display:grid; place-items:center; width:48px; height:48px; border:1px solid var(--accent-alpha-25); border-radius:15px; color:var(--accent); background:var(--accent-alpha-10); font-size:14px; font-weight:850; } .syllabus-summary-copy { min-width:0; } .syllabus-summary-copy strong { display:block; color:#e8eff1; font-size:12px; } .syllabus-summary-copy span { display:block; margin-top:3px; color:var(--quiet); font-size:10.5px; } .syllabus-progress { height:5px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.10); margin-top:8px; } .syllabus-progress i { display:block; height:100%; width:var(--syllabus-progress,0%); border-radius:inherit; background:linear-gradient(90deg,var(--accent-strong),var(--accent)); } .syllabus-list { display:grid; gap:10px; } .syllabus-subject { border:1px solid rgba(255,255,255,.08); border-radius:13px; background:rgba(1,10,17,.15); overflow:hidden; } .syllabus-subject-head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 11px; border-bottom:1px solid rgba(255,255,255,.075); } .syllabus-subject-head strong { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#e7eef0; font-size:12px; } .syllabus-subject-head span { flex:none; color:var(--quiet); font-size:9.5px; } .syllabus-chapters { display:grid; gap:0; margin:0; padding:0; list-style:none; } .syllabus-chapter { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:7px; min-height:38px; padding:7px 9px; border-top:1px solid rgba(255,255,255,.055); } .syllabus-chapter:first-child { border-top:0; } .syllabus-chapter-title { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#e7eef0; font-size:11.5px; } .syllabus-status { min-width:76px; min-height:25px; padding:0 7px; border:1px solid rgba(255,255,255,.11); border-radius:8px; color:var(--status-colour,var(--muted)); background:rgba(0,0,0,.14); cursor:pointer; font-size:9px; font-weight:800; } .syllabus-status[data-status="done"] { --status-colour:#9ee8b4; } .syllabus-status[data-status="revision"] { --status-colour:#f2c697; } .syllabus-status[data-status="learning"] { --status-colour:#83bdf0; } .syllabus-delete { width:23px; height:23px; display:grid; place-items:center; padding:0; border:0; border-radius:7px; color:var(--muted); background:transparent; cursor:pointer; font-size:15px; } .syllabus-delete:hover { color:#ffc7c7; background:rgba(155,55,61,.17); } .syllabus-form { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr) auto; gap:7px; margin-top:12px; } .syllabus-form input { min-width:0; color:var(--ink); border:1px solid rgba(255,255,255,.11); border-radius:10px; outline:0; background:rgba(1,10,17,.23); padding:9px 10px; font-size:11px; } .syllabus-form input:focus { border-color:var(--accent-alpha-50); } .syllabus-empty { padding:20px 8px; color:var(--quiet); text-align:center; font-size:11px; line-height:1.5; } html.millennial-mode:not(.millennial-dark) .syllabus-summary-copy strong, html.millennial-mode:not(.millennial-dark) .syllabus-summary-copy span, html.millennial-mode:not(.millennial-dark) .syllabus-subject-head strong, html.millennial-mode:not(.millennial-dark) .syllabus-subject-head span, html.millennial-mode:not(.millennial-dark) .syllabus-chapter-title, html.millennial-mode:not(.millennial-dark) .syllabus-empty { color:#24292f !important; -webkit-text-fill-color:#24292f !important; opacity:1 !important; } html.millennial-mode .syllabus-subject { background:#f6f8fa; border-color:#8c959f; } html.millennial-mode.millennial-dark .syllabus-subject { background:#161b22; border-color:#30363d; } html.millennial-mode .syllabus-form input { color:#24292f; background:#ffffff; border-color:#8c959f; } html.millennial-mode.millennial-dark .syllabus-form input { color:#c9d1d9; background:#0d1117; border-color:#30363d; } @media (max-width:520px){ .syllabus-form { grid-template-columns:1fr; } .syllabus-chapter { grid-template-columns:minmax(0,1fr) auto; } .syllabus-delete { grid-column:2; } } /* Syllabus search/reorder + global search polish */ .syllabus-search { width:100%; margin:0 0 10px; color:var(--ink); border:1px solid rgba(255,255,255,.11); border-radius:10px; outline:0; background:rgba(1,10,17,.23); padding:9px 10px; font-size:11px; } .syllabus-search:focus { border-color:var(--accent-alpha-50); } .syllabus-tools { display:flex; align-items:center; gap:4px; flex:none; } .syllabus-move { width:23px; height:23px; display:grid; place-items:center; padding:0; border:1px solid rgba(255,255,255,.09); border-radius:7px; color:var(--muted); background:rgba(0,0,0,.10); cursor:pointer; font-size:12px; } .syllabus-move:hover:not(:disabled) { color:var(--accent); background:rgba(255,255,255,.08); } .syllabus-move:disabled { opacity:.3; cursor:not-allowed; } .syllabus-chapter .syllabus-tools { justify-content:flex-end; } .global-search-space { color:var(--accent); font-weight:800; } html.millennial-mode:not(.millennial-dark) .syllabus-search { color:#24292f; background:#ffffff; border-color:#8c959f; } html.millennial-mode.millennial-dark .syllabus-search { color:#c9d1d9; background:#0d1117; border-color:#30363d; } /* Mock Test Tracker widget */ .mock-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:12px; } .mock-stat { padding:10px; border:1px solid rgba(255,255,255,.08); border-radius:13px; background:rgba(1,10,17,.16); } .mock-stat strong { display:block; color:var(--accent); font-size:16px; font-weight:850; } .mock-stat span { display:block; margin-top:2px; color:var(--quiet); font-size:9.5px; } .mock-list { display:grid; gap:7px; margin:0; padding:0; list-style:none; } .mock-item { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:9px; align-items:start; padding:10px; border:1px solid rgba(255,255,255,.075); border-radius:12px; background:rgba(1,10,17,.17); } .mock-copy { min-width:0; } .mock-copy strong { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#e7eef0; font-size:12px; } .mock-copy span { display:block; margin-top:3px; color:var(--quiet); font-size:10px; line-height:1.45; } .mock-score { color:var(--accent); font-weight:850; } .mock-delete { width:24px; height:24px; display:grid; place-items:center; padding:0; border:0; border-radius:7px; color:var(--muted); background:transparent; cursor:pointer; font-size:15px; } .mock-delete:hover { color:#ffc7c7; background:rgba(155,55,61,.17); } .mock-form { display:grid; grid-template-columns:minmax(0,1.2fr) 104px 82px 82px; gap:7px; margin-top:12px; } .mock-form input { min-width:0; color:var(--ink); border:1px solid rgba(255,255,255,.11); border-radius:10px; outline:0; background:rgba(1,10,17,.23); padding:9px 10px; font-size:11px; } .mock-form input:focus { border-color:var(--accent-alpha-50); } .mock-notes-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px; margin-top:7px; } .mock-notes-row input { min-width:0; color:var(--ink); border:1px solid rgba(255,255,255,.11); border-radius:10px; outline:0; background:rgba(1,10,17,.23); padding:9px 10px; font-size:11px; } .mock-empty { padding:18px 8px; color:var(--quiet); text-align:center; font-size:11px; line-height:1.5; } html.millennial-mode:not(.millennial-dark) .mock-stat, html.millennial-mode:not(.millennial-dark) .mock-item { background:#f6f8fa; border-color:#8c959f; } html.millennial-mode.millennial-dark .mock-stat, html.millennial-mode.millennial-dark .mock-item { background:#161b22; border-color:#30363d; } html.millennial-mode:not(.millennial-dark) .mock-copy strong, html.millennial-mode:not(.millennial-dark) .mock-copy span, html.millennial-mode:not(.millennial-dark) .mock-stat span, html.millennial-mode:not(.millennial-dark) .mock-empty { color:#24292f !important; -webkit-text-fill-color:#24292f !important; opacity:1 !important; } html.millennial-mode .mock-form input, html.millennial-mode .mock-notes-row input { color:#24292f; background:#ffffff; border-color:#8c959f; } html.millennial-mode.millennial-dark .mock-form input, html.millennial-mode.millennial-dark .mock-notes-row input { color:#c9d1d9; background:#0d1117; border-color:#30363d; } @media (max-width:620px){ .mock-summary { grid-template-columns:1fr; } .mock-form { grid-template-columns:1fr 1fr; } .mock-notes-row { grid-template-columns:1fr; } } /* Mistake Log widget */ .mistake-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-bottom:12px; } .mistake-stat { padding:10px; border:1px solid rgba(255,255,255,.08); border-radius:13px; background:rgba(1,10,17,.16); } .mistake-stat strong { display:block; color:var(--accent); font-size:16px; font-weight:850; } .mistake-stat span { display:block; margin-top:2px; color:var(--quiet); font-size:9.5px; } .mistake-filter { width:100%; margin:0 0 10px; color:var(--ink); border:1px solid rgba(255,255,255,.11); border-radius:10px; outline:0; background:rgba(1,10,17,.23); padding:9px 10px; font-size:11px; } .mistake-filter:focus { border-color:var(--accent-alpha-50); } .mistake-list { display:grid; gap:8px; margin:0; padding:0; list-style:none; } .mistake-item { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:9px; align-items:start; padding:10px; border:1px solid rgba(255,255,255,.075); border-radius:12px; background:rgba(1,10,17,.17); } .mistake-copy { min-width:0; } .mistake-copy strong { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#e7eef0; font-size:12px; } .mistake-copy span { display:block; margin-top:3px; color:var(--quiet); font-size:10px; line-height:1.45; } .mistake-badge { display:inline-flex; align-items:center; margin-right:5px; padding:2px 6px; border-radius:99px; color:var(--accent-dark); background:var(--mistake-colour,var(--accent)); font-size:9px; font-weight:850; } .mistake-actions { display:flex; align-items:center; gap:4px; } .mistake-actions button { min-height:24px; display:grid; place-items:center; padding:0 7px; border:1px solid rgba(255,255,255,.10); border-radius:7px; color:var(--muted); background:transparent; cursor:pointer; font-size:9px; font-weight:750; } .mistake-actions button:hover { color:var(--accent); background:rgba(255,255,255,.08); } .mistake-actions .mistake-delete:hover { color:#ffc7c7; background:rgba(155,55,61,.17); } .mistake-item.reviewed { opacity:.68; } .mistake-item.reviewed .mistake-copy strong { text-decoration:line-through; } .mistake-form { display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1fr) 118px; gap:7px; margin-top:12px; } .mistake-form input, .mistake-form select, .mistake-notes textarea { min-width:0; color:var(--ink); border:1px solid rgba(255,255,255,.11); border-radius:10px; outline:0; background:rgba(1,10,17,.23); padding:9px 10px; font-size:11px; } .mistake-notes { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:7px; margin-top:7px; } .mistake-notes textarea { min-height:72px; resize:vertical; line-height:1.45; } .mistake-submit-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px; margin-top:7px; align-items:center; } .mistake-submit-row input { min-width:0; color:var(--ink); border:1px solid rgba(255,255,255,.11); border-radius:10px; outline:0; background:rgba(1,10,17,.23); padding:9px 10px; font-size:11px; } .mistake-empty { padding:18px 8px; color:var(--quiet); text-align:center; font-size:11px; line-height:1.5; } html.millennial-mode:not(.millennial-dark) .mistake-stat, html.millennial-mode:not(.millennial-dark) .mistake-item { background:#f6f8fa; border-color:#8c959f; } html.millennial-mode.millennial-dark .mistake-stat, html.millennial-mode.millennial-dark .mistake-item { background:#161b22; border-color:#30363d; } html.millennial-mode:not(.millennial-dark) .mistake-copy strong, html.millennial-mode:not(.millennial-dark) .mistake-copy span, html.millennial-mode:not(.millennial-dark) .mistake-stat span, html.millennial-mode:not(.millennial-dark) .mistake-empty { color:#24292f !important; -webkit-text-fill-color:#24292f !important; opacity:1 !important; } html.millennial-mode .mistake-form input, html.millennial-mode .mistake-form select, html.millennial-mode .mistake-notes textarea, html.millennial-mode .mistake-submit-row input, html.millennial-mode .mistake-filter { color:#24292f; background:#ffffff; border-color:#8c959f; } html.millennial-mode.millennial-dark .mistake-form input, html.millennial-mode.millennial-dark .mistake-form select, html.millennial-mode.millennial-dark .mistake-notes textarea, html.millennial-mode.millennial-dark .mistake-submit-row input, html.millennial-mode.millennial-dark .mistake-filter { color:#c9d1d9; background:#0d1117; border-color:#30363d; } @media (max-width:620px){ .mistake-summary { grid-template-columns:1fr; } .mistake-form, .mistake-notes, .mistake-submit-row { grid-template-columns:1fr; } } /* Premium Mistake Log pass — cards should feel like a revision system, not a plain form. */ .mistake-filter-row { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 11px; } .mistake-filter-row button { min-height:27px; padding:0 9px; border:1px solid rgba(255,255,255,.10); border-radius:99px; color:var(--muted); background:rgba(0,0,0,.12); cursor:pointer; font-size:10px; font-weight:800; } .mistake-filter-row button:hover { color:var(--accent); background:rgba(255,255,255,.08); } .mistake-filter-row button.active { color:var(--accent-contrast); border-color:var(--accent); background:var(--accent); } .mistake-list { gap:10px; } .mistake-item { position:relative; grid-template-columns:1fr; padding:12px; border-color:rgba(255,255,255,.10); background:linear-gradient(135deg, rgba(255,255,255,.055), rgba(1,10,17,.18)); } .mistake-item::before { content:""; position:absolute; inset:0 auto 0 0; width:3px; border-radius:12px 0 0 12px; background:var(--mistake-colour,var(--accent)); opacity:.9; } .mistake-topline { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; } .mistake-context { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#eef5f5; font-size:11px; font-weight:850; } .mistake-state { flex:none; padding:4px 7px; border:1px solid rgba(255,255,255,.11); border-radius:99px; color:var(--state-colour,var(--accent)); background:rgba(0,0,0,.14); font-size:9px; font-weight:900; } .mistake-state.due { --state-colour:#f2c697; } .mistake-state.overdue { --state-colour:#ff9b9b; } .mistake-state.reviewed { --state-colour:#9ee8b4; } .mistake-badge { width:auto !important; max-width:max-content; display:inline-flex !important; margin:0 0 8px; padding:4px 8px; border-radius:99px; line-height:1; } .mistake-section-label { display:block; margin:8px 0 3px; color:var(--quiet); font-size:9px; font-weight:900; letter-spacing:.09em; text-transform:uppercase; } .mistake-main-text { color:#e7eef0; font-size:12px; line-height:1.55; } .mistake-remember { margin-top:9px; padding:9px 10px; border:1px solid var(--accent-alpha-20); border-radius:11px; color:#eef7f4; background:var(--accent-alpha-10); font-size:11.5px; line-height:1.5; } .mistake-remember strong { color:var(--accent); } .mistake-actions { justify-content:flex-end; margin-top:10px; } .mistake-actions button { min-height:28px; padding:0 9px; border-radius:9px; font-size:10px; } .mistake-form.hidden { display:none !important; } #mistake-form.hidden { display:none !important; } html.millennial-mode:not(.millennial-dark) .mistake-context, html.millennial-mode:not(.millennial-dark) .mistake-main-text, html.millennial-mode:not(.millennial-dark) .mistake-section-label, html.millennial-mode:not(.millennial-dark) .mistake-remember { color:#24292f !important; -webkit-text-fill-color:#24292f !important; opacity:1 !important; } html.millennial-mode:not(.millennial-dark) .mistake-remember { background:#ffffff; border-color:#8c959f; } html.millennial-mode:not(.millennial-dark) .mistake-filter-row button { color:#24292f; background:#f6f8fa; border-color:#8c959f; } html.millennial-mode.millennial-dark .mistake-filter-row button { color:#8b949e; background:#21262d; border-color:#30363d; } /* Mistake type uses the app's themed menu instead of the browser's grey native select. */ .mistake-type-picker { width:100%; min-width:0; } .mistake-type-picker .select-trigger { width:100%; min-height:39px; } .mistake-type-picker .select-menu { left:0; right:auto; width:100%; } /* Premium Mock Tracker pass — turn scores into performance cards. */ .mock-summary { grid-template-columns:repeat(4,minmax(0,1fr)); } .mock-search { width:100%; margin:0 0 10px; color:var(--ink); border:1px solid rgba(255,255,255,.11); border-radius:10px; outline:0; background:rgba(1,10,17,.23); padding:9px 10px; font-size:11px; } .mock-search:focus { border-color:var(--accent-alpha-50); } .mock-list { gap:10px; } .mock-item { position:relative; grid-template-columns:1fr; padding:12px; background:linear-gradient(135deg, rgba(255,255,255,.055), rgba(1,10,17,.18)); border-color:rgba(255,255,255,.10); } .mock-item::before { content:""; position:absolute; inset:0 auto 0 0; width:3px; border-radius:12px 0 0 12px; background:var(--score-colour,var(--accent)); opacity:.92; } .mock-topline { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; } .mock-name { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#eef5f5; font-size:12px; font-weight:900; } .mock-percent-pill { flex:none; padding:5px 8px; border-radius:99px; color:var(--score-contrast,#0d1117); background:var(--score-colour,var(--accent)); font-size:10px; font-weight:950; } .mock-score-row { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-bottom:7px; color:var(--muted); font-size:10px; } .mock-score-row strong { color:#eaf2f2; font-size:15px; } .mock-progress { height:6px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.10); margin:8px 0; } .mock-progress i { display:block; height:100%; width:var(--mock-percent,0%); background:var(--score-colour,var(--accent)); border-radius:inherit; } .mock-insight { margin-top:8px; padding:8px 9px; border:1px solid var(--accent-alpha-20); border-radius:10px; color:#eef7f4; background:var(--accent-alpha-10); font-size:11px; line-height:1.45; } .mock-actions { display:flex; justify-content:flex-end; gap:4px; margin-top:9px; } .mock-actions button { min-height:28px; padding:0 9px; border:1px solid rgba(255,255,255,.10); border-radius:9px; color:var(--muted); background:transparent; cursor:pointer; font-size:10px; font-weight:750; } .mock-actions button:hover { color:#ffc7c7; background:rgba(155,55,61,.17); } #mock-form.hidden { display:none !important; } html.millennial-mode:not(.millennial-dark) .mock-search { color:#24292f; background:#ffffff; border-color:#8c959f; } html.millennial-mode:not(.millennial-dark) .mock-name, html.millennial-mode:not(.millennial-dark) .mock-score-row, html.millennial-mode:not(.millennial-dark) .mock-score-row strong, html.millennial-mode:not(.millennial-dark) .mock-insight { color:#24292f !important; -webkit-text-fill-color:#24292f !important; opacity:1 !important; } html.millennial-mode:not(.millennial-dark) .mock-insight { background:#ffffff; border-color:#8c959f; } html.millennial-mode.millennial-dark .mock-search { color:#c9d1d9; background:#0d1117; border-color:#30363d; } /* Widget jump bar + compact analytics polish. */ .widget-jump-bar { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin:0 0 16px; padding:9px; } .widget-jump { width:34px; height:34px; display:grid; place-items:center; padding:0; border:1px solid rgba(255,255,255,.11); border-radius:50%; color:var(--accent); background:rgba(1,10,17,.22); cursor:pointer; font-size:13px; font-weight:850; transition:transform .16s, background .16s, border-color .16s; } .widget-jump:hover, .widget-jump:focus-visible { transform:translateY(-1px); color:var(--accent-contrast); background:var(--accent); border-color:var(--accent); } .widget-jump span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } .widget-jump-bar:empty { display:none; } html.millennial-mode .widget-jump { background:#f6f8fa; border-color:#8c959f; color:var(--accent); } html.millennial-mode.millennial-dark .widget-jump { background:#21262d; border-color:#30363d; } /* Keep custom menus usable inside lower widget forms. */ #mistake-widget { overflow:visible; } .mistake-type-picker .select-menu { z-index:120; top:auto; bottom:calc(100% + 7px); max-height:230px; overflow:auto; } /* Mock cards: premium but compact enough for long dashboards. */ .mock-summary { gap:6px; margin-bottom:9px; } .mock-stat { padding:8px 9px; border-radius:11px; } .mock-stat strong { font-size:14px; line-height:1.05; } .mock-stat span { font-size:9px; } .mock-search { margin-bottom:8px; padding:8px 9px; } .mock-list { gap:7px; } .mock-item { padding:10px 11px; border-radius:11px; } .mock-topline { margin-bottom:5px; } .mock-name { font-size:11.5px; } .mock-percent-pill { padding:4px 7px; font-size:9px; } .mock-score-row { margin-bottom:5px; gap:6px; font-size:9.5px; } .mock-score-row strong { font-size:13px; } .mock-progress { height:4px; margin:6px 0; } .mock-insight { margin-top:6px; padding:6px 8px; font-size:10.5px; } .mock-actions { margin-top:7px; } .mock-actions button { min-height:25px; padding:0 8px; } @media (max-width:620px){ .widget-jump-bar { position:sticky; top:8px; z-index:12; } .mock-summary { grid-template-columns:repeat(2,minmax(0,1fr)); } } /* Extra compact Mock Tracker pass — keep performance useful without dominating the dashboard. */ .mock-widget .mock-summary { grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; margin-bottom:7px; } .mock-widget .mock-stat { padding:6px 8px; border-radius:10px; } .mock-widget .mock-stat strong { font-size:12.5px; line-height:1; } .mock-widget .mock-stat span { margin-top:1px; font-size:8.5px; } .mock-widget .mock-search { min-height:31px; margin-bottom:7px; padding:7px 9px; font-size:10.5px; } .mock-widget .mock-list { gap:6px; } .mock-widget .mock-item { padding:8px 10px; border-radius:10px; } .mock-widget .mock-item::before { width:2px; } .mock-widget .mock-topline { margin-bottom:4px; } .mock-widget .mock-name { font-size:11px; } .mock-widget .mock-percent-pill { padding:3px 6px; font-size:8.5px; } .mock-widget .mock-score-row { margin-bottom:4px; gap:5px; font-size:9px; } .mock-widget .mock-score-row strong { font-size:12px; } .mock-widget .mock-progress { height:3px; margin:5px 0; } .mock-widget .mock-insight { margin-top:5px; padding:5px 7px; border-radius:8px; font-size:10px; line-height:1.35; } .mock-widget .mock-actions { margin-top:5px; } .mock-widget .mock-actions button { min-height:23px; padding:0 7px; font-size:9px; } .mock-widget .mock-form { grid-template-columns:minmax(0,1.2fr) 100px 76px 76px; gap:6px; margin-top:9px; } .mock-widget .mock-form input, .mock-widget .mock-notes-row input { padding:8px 9px; font-size:10.5px; } .mock-widget .mock-notes-row { gap:6px; margin-top:6px; } .mock-widget .mock-notes-row .button { min-height:32px; padding:0 10px; font-size:10.5px; } @media (max-width:620px){ .mock-widget .mock-summary { grid-template-columns:repeat(2,minmax(0,1fr)); } .mock-widget .mock-form { grid-template-columns:1fr 1fr; } } /* Syllabus drag polish — replace up/down controls with a soft drag handle. */ .syllabus-subject, .syllabus-chapter { transition: transform .18s ease, border-color .18s ease, background .18s ease, opacity .18s ease; } .syllabus-drag-handle { flex:none; width:24px; height:24px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.09); border-radius:8px; color:var(--quiet); background:rgba(0,0,0,.12); cursor:grab; user-select:none; touch-action:none; font-size:15px; line-height:1; } .syllabus-drag-handle:hover, .syllabus-drag-handle:focus-visible { color:var(--accent); border-color:var(--accent-alpha-35); background:rgba(255,255,255,.08); outline:0; } .syllabus-drag-handle:active { cursor:grabbing; } .syllabus-subject.dragging, .syllabus-chapter.dragging { opacity:.42; transform:scale(.992); } .syllabus-subject.drag-over, .syllabus-chapter.drag-over { border-color:var(--accent); background:var(--accent-alpha-10); transform:translateY(-1px); } .syllabus-subject-head .syllabus-tools { align-items:center; } .syllabus-chapter .syllabus-tools { align-items:center; } html.millennial-mode:not(.millennial-dark) .syllabus-drag-handle { color:#24292f; background:#ffffff; border-color:#8c959f; } html.millennial-mode.millennial-dark .syllabus-drag-handle { color:#8b949e; background:#21262d; border-color:#30363d; } /* Auto masonry layout — packs widgets upward so short cards do not leave large empty holes. */ .widget-board { grid-auto-rows:8px; align-items:start; } .widget-board > .panel { content-visibility:visible; contain-intrinsic-size:auto; transition:grid-row-end .18s ease, transform .18s ease; } @media (max-width:760px) { .widget-board { grid-auto-rows:auto; } .widget-board > .panel { grid-row:auto !important; } } /* Widget Library v2 — presets, clear sizes, and drag ordering. */ .layout-preset-panel { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; margin:12px 0 16px; padding:12px; border:1px solid rgba(255,255,255,.09); border-radius:14px; background:rgba(0,0,0,.12); } .layout-preset-panel strong { display:block; color:#e8eff1; font-size:12px; } .layout-preset-panel span { display:block; margin-top:2px; color:var(--quiet); font-size:10px; } .layout-preset-grid { display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; } .layout-preset-grid button { min-height:30px; padding:0 10px; border:1px solid rgba(255,255,255,.11); border-radius:10px; color:var(--muted); background:rgba(0,0,0,.13); cursor:pointer; font-size:10px; font-weight:800; } .layout-preset-grid button:hover { color:var(--accent); border-color:var(--accent-alpha-40); background:rgba(255,255,255,.08); } .widget-toggle-list.upgraded { gap:8px; } .widget-toggle-list.upgraded .widget-library-group { margin-top:16px; } .widget-toggle-list.upgraded .widget-library-heading { margin:0 0 8px; padding-left:2px; color:var(--accent); font-size:10px; } .widget-toggle-list.upgraded .widget-toggle { position:relative; display:grid; grid-template-columns:32px minmax(0,1fr) auto; gap:10px; align-items:center; padding:11px; border:1px solid rgba(255,255,255,.09); border-radius:14px !important; background:linear-gradient(135deg, rgba(255,255,255,.055), rgba(0,0,0,.12)); } .widget-toggle-list.upgraded .widget-toggle.dragging { opacity:.45; transform:scale(.992); } .widget-toggle-list.upgraded .widget-toggle.drag-over { border-color:var(--accent); background:var(--accent-alpha-10); } .widget-drag-handle { width:28px; height:32px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.10); border-radius:10px; color:var(--quiet); background:rgba(0,0,0,.14); cursor:grab; user-select:none; font-size:16px; } .widget-drag-handle:hover { color:var(--accent); border-color:var(--accent-alpha-35); background:rgba(255,255,255,.08); } .widget-drag-handle:active { cursor:grabbing; } .widget-toggle-main { min-width:0; } .widget-toggle-top { display:flex; align-items:center; gap:7px; } .widget-toggle-top strong { color:#e8eff1; font-size:12.5px; } .widget-enabled-pill { padding:2px 6px; border-radius:99px; color:var(--accent-dark); background:var(--accent); font-size:8.5px; font-weight:900; } .widget-toggle-description { display:block; margin-top:3px; color:var(--quiet); font-size:10px; line-height:1.35; } .widget-toggle-tools { gap:6px; margin-top:9px; } .widget-size-choice { min-width:58px; height:26px; padding:0 8px; border-radius:9px; font-size:9.5px; } .widget-toggle-side { display:flex; align-items:center; gap:9px; } html.millennial-mode:not(.millennial-dark) .layout-preset-panel, html.millennial-mode:not(.millennial-dark) .widget-toggle-list.upgraded .widget-toggle, html.millennial-mode:not(.millennial-dark) .widget-drag-handle { background:#f6f8fa; border-color:#8c959f; } html.millennial-mode:not(.millennial-dark) .layout-preset-panel strong, html.millennial-mode:not(.millennial-dark) .layout-preset-panel span, html.millennial-mode:not(.millennial-dark) .widget-toggle-top strong, html.millennial-mode:not(.millennial-dark) .widget-toggle-description { color:#24292f !important; -webkit-text-fill-color:#24292f !important; opacity:1 !important; } html.millennial-mode.millennial-dark .layout-preset-panel, html.millennial-mode.millennial-dark .widget-toggle-list.upgraded .widget-toggle, html.millennial-mode.millennial-dark .widget-drag-handle { background:#161b22; border-color:#30363d; } @media (max-width:620px){ .layout-preset-panel { grid-template-columns:1fr; } .layout-preset-grid { justify-content:flex-start; } .widget-toggle-list.upgraded .widget-toggle { grid-template-columns:30px minmax(0,1fr); } .widget-toggle-side { grid-column:1 / -1; justify-content:flex-end; } } /* Always-available return-to-top control. */ .back-to-top { position:fixed; z-index:50; right:18px; bottom:18px; width:42px; height:42px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.14); border-radius:50%; color:var(--accent); background:rgba(8,14,22,.74); box-shadow:0 14px 32px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); cursor:pointer; font-size:19px; font-weight:900; transition:transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease; } .back-to-top:hover, .back-to-top:focus-visible { transform:translateY(-2px); color:var(--accent-contrast); background:var(--accent); border-color:var(--accent); } html.millennial-mode .back-to-top { background:#f6f8fa; border-color:#8c959f; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; } html.millennial-mode.millennial-dark .back-to-top { background:#21262d; border-color:#30363d; } @media (max-width:580px) { .back-to-top { right:13px; bottom:13px; width:39px; height:39px; } } /* Resource Library polish — search, filters, badges, denser cards. */ .resource-search { width:100%; margin:0 0 9px; color:var(--ink); border:1px solid rgba(255,255,255,.11); border-radius:10px; outline:0; background:rgba(1,10,17,.23); padding:9px 10px; font-size:11px; } .resource-search:focus { border-color:var(--accent-alpha-50); } .resource-filter-row { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 11px; } .resource-filter-row button { min-height:27px; padding:0 9px; border:1px solid rgba(255,255,255,.10); border-radius:99px; color:var(--muted); background:rgba(0,0,0,.12); cursor:pointer; font-size:10px; font-weight:800; } .resource-filter-row button:hover { color:var(--accent); background:rgba(255,255,255,.08); } .resource-filter-row button.active { color:var(--accent-contrast); border-color:var(--accent); background:var(--accent); } .resource-item { min-height:38px; padding:7px 9px; background:linear-gradient(135deg, rgba(255,255,255,.045), rgba(1,10,17,.15)); } .resource-badge { display:inline-flex; align-items:center; margin-left:6px; padding:2px 6px; border-radius:99px; color:var(--accent-dark); background:var(--accent); font-size:8.5px; font-weight:900; } html.millennial-mode:not(.millennial-dark) .resource-search, html.millennial-mode:not(.millennial-dark) .resource-filter-row button { color:#24292f; background:#ffffff; border-color:#8c959f; } html.millennial-mode.millennial-dark .resource-search, html.millennial-mode.millennial-dark .resource-filter-row button { color:#c9d1d9; background:#21262d; border-color:#30363d; } /* Resource subject uses the same themed custom menu as the rest of the app. */ .resource-subject-picker { width:100%; min-width:0; } .resource-subject-picker .select-trigger { width:100%; min-height:39px; } .resource-subject-picker .select-menu { left:0; right:auto; width:100%; max-height:230px; overflow:auto; } /* Privacy & backup reassurance panel. */ .privacy-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; } .privacy-card { padding:11px; border:1px solid rgba(255,255,255,.09); border-radius:13px; background:rgba(0,0,0,.12); } .privacy-card strong { display:block; color:#e8eff1; font-size:12px; margin-bottom:5px; } .privacy-card span { display:block; color:var(--quiet); font-size:10.5px; line-height:1.45; } .storage-health { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; } .storage-health span { display:inline-flex; align-items:center; min-height:25px; padding:0 8px; border:1px solid var(--accent-alpha-20); border-radius:99px; color:var(--accent); background:var(--accent-alpha-10); font-size:9.5px; font-weight:800; } html.millennial-mode:not(.millennial-dark) .privacy-card { background:#f6f8fa; border-color:#8c959f; } html.millennial-mode:not(.millennial-dark) .privacy-card strong, html.millennial-mode:not(.millennial-dark) .privacy-card span { color:#24292f !important; -webkit-text-fill-color:#24292f !important; opacity:1 !important; } html.millennial-mode.millennial-dark .privacy-card { background:#161b22; border-color:#30363d; } @media (max-width:700px){ .privacy-grid { grid-template-columns:1fr; } } /* Mobile/tablet polish only — desktop layout is untouched. */ @media (max-width: 900px) { .app { width:min(100% - 24px, 1480px); padding-top:12px; padding-bottom:86px; } .topbar { position:sticky; top:0; z-index:35; min-height:46px; margin:-2px 0 12px; padding:7px 0; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); } .topbar-actions { gap:6px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; max-width:58vw; padding:2px 1px; } .topbar-actions::-webkit-scrollbar { display:none; } .icon-button { flex:0 0 auto; width:36px; height:36px; border-radius:12px; } .topbar-start { min-width:0; flex:1; } .space-switcher-button { max-width:min(220px, 42vw); } .command-deck { gap:14px; padding:18px; margin-bottom:12px; } .deck-welcome h1 { font-size:clamp(26px, 5vw, 34px); } .deck-welcome .hero-copy { font-size:12px; } .widget-jump-bar { position:sticky; top:58px; z-index:30; flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; margin-bottom:12px; padding:8px; } .widget-jump-bar::-webkit-scrollbar { display:none; } .widget-jump { flex:0 0 auto; width:32px; height:32px; font-size:12px; } dialog { max-height:calc(100dvh - 24px); overflow:auto; } .dialog-body { padding:20px; } .onboarding-dialog { width:min(760px, calc(100% - 18px)); } .widget-board { gap:12px; } .panel { padding:16px; } .panel-header { align-items:flex-start; gap:10px; margin-bottom:12px; } .panel-title { font-size:13.5px; } .resource-actions { gap:6px; justify-content:flex-end; } .resource-actions .button { min-height:32px; padding:0 9px; font-size:10.5px; } .back-to-top { bottom:14px; right:14px; } } @media (max-width: 760px) { .command-deck { display:block; min-height:0; } .deck-search { margin-top:16px; } .deck-time { display:block; margin-top:16px; padding:14px 0 0; border-left:0; border-top:1px solid rgba(232,246,248,.14); } .widget-board { grid-template-columns:1fr !important; grid-auto-rows:auto !important; } .widget-board > .panel, .widget-board > .widget-size-compact, .widget-board > .widget-size-wide, .widget-board > .widget-size-full { grid-column:1 / -1 !important; grid-row:auto !important; } .links-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; } .link-tile { min-height:88px; padding:9px 5px; } .link-icon { width:34px; height:34px; } .task-form { grid-template-columns:1fr 1fr; } .task-form #task-input { grid-column:1 / -1; } .task-priority-picker { width:auto; } .resource-form, .syllabus-form, .mock-widget .mock-form, .mistake-form, .mistake-notes, .mistake-submit-row { grid-template-columns:1fr !important; } .mock-widget .mock-summary, .mistake-summary { grid-template-columns:repeat(2,minmax(0,1fr)); } .mock-widget .mock-stat, .mistake-stat { min-height:52px; } .syllabus-chapter { grid-template-columns:minmax(0,1fr) auto; } .syllabus-chapter .syllabus-status { justify-self:start; } .syllabus-chapter .syllabus-tools { grid-column:2; grid-row:1 / span 2; } .resource-item { grid-template-columns:28px minmax(0,1fr); } .resource-buttons { grid-column:2; justify-content:flex-start; margin-top:4px; } .mock-item, .mistake-item { padding:10px; } .calendar-widget { max-width:none; } .calendar-day { min-height:34px; aspect-ratio:auto; } .template-filter-row { align-items:stretch; flex-direction:column; } .template-category-picker { width:100%; min-width:0; } .template-picker { max-height:220px; overflow:auto; padding-right:2px; } .layout-preset-panel { grid-template-columns:1fr; } .layout-preset-grid { justify-content:flex-start; } .widget-toggle-list.upgraded .widget-toggle { grid-template-columns:30px minmax(0,1fr); } .widget-toggle-side { grid-column:1 / -1; justify-content:flex-end; } } @media (max-width: 520px) { .app { width:calc(100% - 18px); } .brand-mark { width:31px; height:31px; } .space-switcher-button { min-width:0; max-width:calc(100vw - 190px); padding:0 8px; } .space-switcher-icon { width:21px; height:21px; } .space-switcher-label { font-size:11px; } .topbar-actions { max-width:145px; } .icon-button { width:34px; height:34px; } .command-deck { padding:16px; border-radius:17px; } .deck-search { min-height:52px; padding:8px 9px; } #search-input { font-size:13px; } .search-engine-picker .select-trigger { min-width:86px; padding:7px; } #clock { font-size:42px; } .widget-jump-bar { top:50px; padding:7px; gap:6px; } .widget-jump { width:30px; height:30px; } .panel { padding:14px; border-radius:16px; } .panel-header { flex-direction:column; align-items:stretch; } .panel-header > .panel-meta { align-self:flex-end; margin-top:-4px; } .link-panel-actions { justify-content:space-between; } .links-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .task-form { grid-template-columns:1fr; } .task-form .button, .habit-form .button, .focus-form button, .resource-actions .button { width:auto; } .task-item, .habit-item, .focus-item { align-items:flex-start; } .task-copy, .habit-copy, .focus-text { white-space:normal; line-height:1.35; } .task-meta { white-space:normal; text-align:right; } .mock-widget .mock-summary, .mistake-summary { grid-template-columns:1fr 1fr; gap:6px; } .mock-insight, .mistake-remember { font-size:10px; } .mistake-topline { align-items:flex-start; flex-direction:column; } .mistake-state { align-self:flex-start; } .syllabus-summary { align-items:flex-start; } .syllabus-percent { width:42px; height:42px; border-radius:13px; } .dialog-body { padding:17px; } .dialog-actions { flex-wrap:wrap; } .dialog-actions .button { flex:1; min-width:120px; } .onboarding-grid { gap:12px; } .setup-choice { min-height:38px; } .setup-template-list { grid-template-columns:1fr; max-height:190px; } .template-picker button { min-height:30px; } .widget-size-choice { min-width:auto; flex:1; } .back-to-top { width:37px; height:37px; bottom:12px; right:12px; font-size:17px; } } @media (max-width: 900px) and (orientation: landscape) and (max-height: 520px) { .app { padding-top:8px; } .topbar { position:relative; top:auto; margin-bottom:8px; } .widget-jump-bar { position:sticky; top:0; } .command-deck { display:grid; grid-template-columns:1fr 1fr; padding:14px; } .deck-search { grid-column:1 / -1; margin-top:10px; } .deck-time { margin-top:0; padding-left:12px; border-top:0; border-left:1px solid rgba(232,246,248,.14); } .deck-welcome h1 { font-size:24px; } .deck-welcome .hero-copy { display:none; } #clock { font-size:36px; } dialog { max-height:calc(100dvh - 12px); } .dialog-body { padding:14px; } } /* Mobile redesign pass — phone UI should feel intentional, not squeezed. Desktop remains untouched. */ @media (max-width: 580px) { body { overflow-x:hidden; } .app { width:100%; padding:10px 10px 82px; } /* Header becomes a proper two-row mobile header instead of a crushed desktop bar. */ .topbar { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"start actions"; align-items:center; gap:8px; margin:0 0 10px; padding:6px 0; } .topbar-start { grid-area:start; min-width:0; gap:7px; } .brand { flex:none; gap:0; } .brand > span:last-child { display:none; } .brand-mark { width:32px; height:32px; border-radius:11px; } .space-switcher { min-width:0; flex:1; } .space-switcher-button { width:100%; min-width:0; max-width:none; height:34px; border-radius:12px; padding:0 8px; } .space-switcher-label { font-size:11px; max-width:100%; } .topbar-actions { grid-area:actions; max-width:none; overflow:visible; display:flex; gap:5px; justify-content:flex-end; } .topbar-actions .icon-button { width:32px; height:32px; border-radius:11px; font-size:13px; } .topbar-actions #capture-button, .topbar-actions #inbox-button, .topbar-actions #command-button { display:none; } /* Hero/command deck becomes a compact mobile control card. */ .command-deck { display:grid; grid-template-columns:1fr; gap:13px; min-height:0; margin-bottom:10px; padding:16px; border-radius:18px; } .command-deck::before { display:none; } .deck-welcome h1 { max-width:none; font-size:clamp(25px, 8vw, 32px); line-height:1.08; letter-spacing:-.045em; } .deck-welcome .eyebrow { margin-bottom:7px; font-size:8.5px; line-height:1.4; } .deck-welcome .hero-copy { margin-top:8px; max-width:none; font-size:11.5px; line-height:1.45; } .deck-search { display:grid; grid-template-columns:22px minmax(0,1fr) auto; align-items:center; gap:7px; min-height:48px; margin:0; padding:8px 9px; border-radius:13px; } .search-icon { margin-left:0; } #search-input { min-width:0; font-size:12.5px; } .search-engine-picker { max-width:none; } .search-engine-picker .select-trigger { min-width:64px; width:64px; min-height:31px; padding:6px 7px; font-size:10px; } .search-engine-picker .select-trigger svg { width:12px; height:12px; } .deck-time { margin-top:0; padding:12px 0 0; border-left:0; border-top:1px solid rgba(232,246,248,.14); } .time-card-top { margin-bottom:6px; } #clock { font-size:42px; letter-spacing:-.055em; } #date { margin-top:5px; font-size:11px; } /* Jump bar becomes a neat mobile dock, not visual noise. */ .widget-jump-bar { top:48px; margin:0 0 10px; padding:7px; gap:6px; border-radius:16px; flex-wrap:nowrap; overflow-x:auto; } .widget-jump { width:30px; height:30px; border-radius:11px; font-size:11px; } /* Cards should breathe but not waste space. */ .widget-board { gap:10px; } .panel { padding:14px; border-radius:17px; } .panel-header { display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:9px; margin-bottom:11px; } .panel-title { font-size:13px; line-height:1.25; } .panel-title svg { width:15px; height:15px; } .panel-meta { font-size:10px; } /* Forms and action rows fit a phone width. */ .resource-actions { gap:5px; } .resource-actions .button, .link-panel-actions .button { min-height:30px; padding:0 8px; border-radius:10px; font-size:10px; } .link-panel-actions { gap:7px; } .link-panel-actions .text-button { font-size:11px; } .task-form, .habit-form, .focus-form, .resource-form, .syllabus-form, .mock-widget .mock-form, .mock-notes-row, .mistake-form, .mistake-notes, .mistake-submit-row { grid-template-columns:1fr !important; } .task-priority-picker { width:100%; } .task-priority-trigger { width:100%; } .task-form .button, .habit-form .button, .focus-form .button, .mock-notes-row .button, .mistake-submit-row .button { width:100%; } /* Link grid stays usable on narrow phones. */ .links-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px; } .link-tile { min-height:84px; border-radius:14px; } .link-icon { width:32px; height:32px; border-radius:11px; font-size:15px; } .link-name { font-size:10px; } /* Study widgets: compact but readable. */ .syllabus-summary { gap:8px; margin-bottom:10px; } .syllabus-percent { width:40px; height:40px; border-radius:12px; font-size:12px; } .syllabus-summary-copy strong { font-size:11px; } .syllabus-summary-copy span { font-size:9.5px; } .syllabus-chapter { grid-template-columns:minmax(0,1fr) auto; gap:6px; } .syllabus-status { min-width:72px; min-height:24px; font-size:8.5px; } .syllabus-drag-handle { width:23px; height:23px; } .mock-widget .mock-summary, .mistake-summary { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; } .mock-widget .mock-item, .mistake-item { padding:9px; } .mock-insight, .mistake-remember { font-size:10px; line-height:1.35; } .mistake-filter-row, .resource-filter-row { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:1px; } .mistake-filter-row::-webkit-scrollbar, .resource-filter-row::-webkit-scrollbar { display:none; } .mistake-filter-row button, .resource-filter-row button { flex:0 0 auto; } /* Calendar is no longer cramped. */ .calendar-day { min-height:32px; aspect-ratio:auto; border-radius:8px; } /* Dialogs become mobile sheets. */ dialog { width:calc(100% - 16px); max-height:calc(100dvh - 16px); border-radius:18px; } .dialog-body { padding:16px; } .dialog-title h2 { font-size:17px; } .dialog-description { font-size:11.5px; } .form-row, .space-manager-fields, .space-manager-card { grid-template-columns:1fr !important; } .background-options { grid-template-columns:repeat(3,1fr); } .template-picker, .command-list, .space-manager-list, .inbox-list { max-height:48dvh; overflow:auto; } .layout-preset-panel { grid-template-columns:1fr; } .layout-preset-grid { justify-content:flex-start; } .widget-toggle-list.upgraded .widget-toggle { grid-template-columns:30px minmax(0,1fr); } .widget-toggle-side { grid-column:1 / -1; justify-content:flex-end; } .widget-toggle-tools { flex-wrap:wrap; } .widget-size-choice { flex:1; min-width:80px; } } @media (max-width: 380px) { .app { padding-left:8px; padding-right:8px; } .topbar-actions .icon-button { width:30px; height:30px; } .brand-mark { width:30px; height:30px; } .space-switcher-button { height:32px; } .space-switcher-label { font-size:10.5px; } .command-deck { padding:14px; } .deck-welcome h1 { font-size:24px; } .deck-welcome .hero-copy { font-size:11px; } .search-engine-picker .select-trigger { width:58px; min-width:58px; } #clock { font-size:38px; } .panel { padding:12px; } .panel-title { font-size:12.5px; } .links-grid { gap:7px; } .link-tile { min-height:78px; } .mock-widget .mock-summary, .mistake-summary { grid-template-columns:1fr 1fr; } .mock-widget .mock-stat, .mistake-stat { padding:6px 7px; } } /* Mobile shell v2 — a separate phone navigation model so controls never disappear off-screen. */ @media (max-width: 580px) { html { min-width:0 !important; width:100%; overflow-x:hidden; } body { width:100%; overflow-x:hidden; } .app { width:100% !important; max-width:100% !important; padding:8px 10px 96px !important; overflow-x:hidden; } .topbar { position:sticky; top:0; z-index:45; display:block !important; min-height:0; margin:0 0 8px !important; padding:7px 0 5px !important; background:linear-gradient(180deg, rgba(7,12,20,.92), rgba(7,12,20,.62) 72%, transparent); } .topbar-start { width:100%; display:grid !important; grid-template-columns:34px minmax(0,1fr); gap:8px; align-items:center; } .brand { min-width:0; width:34px; } .brand-mark { width:34px !important; height:34px !important; } .space-switcher { min-width:0; width:100%; } .space-switcher-button { width:100% !important; max-width:100% !important; min-width:0 !important; height:36px !important; padding:0 9px !important; } .space-switcher-label { display:block !important; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* Bottom mobile dock using the existing buttons — no duplicate controls, no hidden settings. */ .topbar-actions { position:fixed; z-index:80; left:50%; right:auto; bottom:10px; transform:translateX(-50%); width:min(360px, calc(100vw - 20px)); max-width:none !important; display:grid !important; grid-template-columns:repeat(5, 1fr); gap:6px; padding:7px; border:1px solid rgba(255,255,255,.13); border-radius:18px; background:rgba(8,14,22,.88); box-shadow:0 18px 45px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); overflow:visible !important; } .topbar-actions .icon-button { display:grid !important; width:100% !important; height:40px !important; min-width:0; border-radius:13px; font-size:14px; background:rgba(255,255,255,.055); } .topbar-actions #inbox-button { display:none !important; } .topbar-actions #capture-button { order:1; } .topbar-actions #global-search-button { order:2; } .topbar-actions #command-button { order:3; } .topbar-actions #widgets-button { order:4; } .topbar-actions #settings-button { order:5; } .inbox-badge { top:2px; right:2px; } .command-deck, .widget-jump-bar, .widget-board, .glass, .panel, dialog { max-width:100% !important; } .command-deck { margin-top:0 !important; padding:14px !important; } .deck-welcome h1 { overflow-wrap:anywhere; word-break:normal; } .deck-search { grid-template-columns:20px minmax(0,1fr) 58px !important; width:100%; } .search-engine-picker, .search-engine-picker .select-trigger { min-width:0 !important; width:58px !important; } .widget-jump-bar { top:48px !important; max-width:100%; } .widget-board > * { min-width:0; } .back-to-top { bottom:72px !important; } } @media (max-width: 360px) { .app { padding-left:7px !important; padding-right:7px !important; } .topbar-start { grid-template-columns:32px minmax(0,1fr); gap:6px; } .brand, .brand-mark { width:32px !important; height:32px !important; } .space-switcher-button { height:34px !important; } .topbar-actions { width:calc(100vw - 14px); bottom:7px; padding:6px; gap:5px; border-radius:16px; } .topbar-actions .icon-button { height:37px !important; border-radius:12px; } .command-deck { padding:12px !important; } .deck-welcome h1 { font-size:23px !important; } .deck-search { grid-template-columns:18px minmax(0,1fr) 54px !important; } .search-engine-picker .select-trigger { width:54px !important; } } /* Mobile/tablet shell fix — keep Space switcher visible; move actions to bottom dock up to tablet width. */ @media (max-width: 900px) { html, body { max-width:100%; overflow-x:hidden; } .app { width:100% !important; max-width:100% !important; padding-left:10px !important; padding-right:10px !important; padding-bottom:98px !important; overflow-x:hidden; } .topbar { display:block !important; position:sticky; top:0; z-index:60; min-height:0 !important; margin:0 0 10px !important; padding:7px 0 6px !important; background:linear-gradient(180deg, rgba(7,12,20,.94), rgba(7,12,20,.72) 70%, transparent); } .topbar-start { width:100% !important; min-width:0 !important; display:grid !important; grid-template-columns:34px minmax(0,1fr) !important; align-items:center !important; gap:8px !important; } .brand { width:34px !important; min-width:34px !important; flex:none !important; overflow:hidden; } .brand > span:last-child { display:none !important; } .brand-mark { width:34px !important; height:34px !important; border-radius:11px !important; } .space-switcher { width:100% !important; min-width:0 !important; } .space-switcher-button { width:100% !important; min-width:0 !important; max-width:100% !important; height:36px !important; padding:0 9px !important; } .space-switcher-label { display:block !important; min-width:0 !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; } .topbar-actions { position:fixed !important; z-index:90 !important; left:50% !important; right:auto !important; top:auto !important; bottom:10px !important; transform:translateX(-50%) !important; width:min(392px, calc(100vw - 20px)) !important; max-width:none !important; display:grid !important; grid-template-columns:repeat(5, minmax(0,1fr)) !important; gap:6px !important; padding:7px !important; overflow:visible !important; border:1px solid rgba(255,255,255,.13) !important; border-radius:18px !important; background:rgba(8,14,22,.90) !important; box-shadow:0 18px 45px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.08) !important; backdrop-filter:blur(18px) !important; -webkit-backdrop-filter:blur(18px) !important; } .topbar-actions .icon-button { display:grid !important; width:100% !important; min-width:0 !important; height:40px !important; border-radius:13px !important; } .topbar-actions #inbox-button { display:none !important; } .topbar-actions #capture-button { order:1; } .topbar-actions #global-search-button { order:2; } .topbar-actions #command-button { order:3; } .topbar-actions #widgets-button { order:4; } .topbar-actions #settings-button { order:5; } .command-deck, .widget-jump-bar, .widget-board, .panel, .glass { max-width:100% !important; } .command-deck { margin-top:0 !important; } .widget-jump-bar { top:50px !important; } .back-to-top { bottom:72px !important; } html.millennial-mode .topbar-actions { background:#ffffff !important; border-color:#8c959f !important; box-shadow:0 10px 24px rgba(31,35,40,.14) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } html.millennial-mode.millennial-dark .topbar-actions { background:#0d1117 !important; border-color:#30363d !important; } } /* Mobile shell class fallback — activates from measured app width, not only viewport media queries. */ html.mobile-shell, html.mobile-shell body { max-width:100%; overflow-x:hidden; } html.mobile-shell .app { width:100% !important; max-width:100% !important; padding:8px 10px 98px !important; overflow-x:hidden; } html.mobile-shell .topbar { display:block !important; position:sticky !important; top:0 !important; z-index:60 !important; min-height:0 !important; margin:0 0 10px !important; padding:7px 0 6px !important; background:linear-gradient(180deg, rgba(7,12,20,.94), rgba(7,12,20,.72) 70%, transparent) !important; } html.mobile-shell .topbar-start { width:100% !important; min-width:0 !important; display:grid !important; grid-template-columns:34px minmax(0,1fr) !important; align-items:center !important; gap:8px !important; } html.mobile-shell .brand { width:34px !important; min-width:34px !important; flex:none !important; overflow:hidden !important; } html.mobile-shell .brand > span:last-child { display:none !important; } html.mobile-shell .brand-mark { width:34px !important; height:34px !important; border-radius:11px !important; } html.mobile-shell .space-switcher { width:100% !important; min-width:0 !important; display:block !important; } html.mobile-shell .space-switcher-button { width:100% !important; min-width:0 !important; max-width:100% !important; height:36px !important; padding:0 9px !important; display:flex !important; } html.mobile-shell .space-switcher-label { display:block !important; min-width:0 !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; } html.mobile-shell .topbar-actions { position:fixed !important; z-index:90 !important; left:50% !important; right:auto !important; top:auto !important; bottom:10px !important; transform:translateX(-50%) !important; width:min(392px, calc(100vw - 20px)) !important; max-width:none !important; display:grid !important; grid-template-columns:repeat(5, minmax(0,1fr)) !important; gap:6px !important; padding:7px !important; overflow:visible !important; border:1px solid rgba(255,255,255,.13) !important; border-radius:18px !important; background:rgba(8,14,22,.90) !important; box-shadow:0 18px 45px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.08) !important; backdrop-filter:blur(18px) !important; -webkit-backdrop-filter:blur(18px) !important; } html.mobile-shell .topbar-actions .icon-button { display:grid !important; width:100% !important; min-width:0 !important; height:40px !important; border-radius:13px !important; } html.mobile-shell .topbar-actions #inbox-button { display:none !important; } html.mobile-shell .topbar-actions #capture-button { order:1 !important; } html.mobile-shell .topbar-actions #global-search-button { order:2 !important; } html.mobile-shell .topbar-actions #command-button { order:3 !important; } html.mobile-shell .topbar-actions #widgets-button { order:4 !important; } html.mobile-shell .topbar-actions #settings-button { order:5 !important; } html.mobile-shell .command-deck, html.mobile-shell .widget-jump-bar, html.mobile-shell .widget-board, html.mobile-shell .panel, html.mobile-shell .glass { max-width:100% !important; } html.mobile-shell .widget-jump-bar { top:50px !important; } html.mobile-shell .back-to-top { bottom:72px !important; } html.mobile-shell.millennial-mode .topbar-actions { background:#ffffff !important; border-color:#8c959f !important; box-shadow:0 10px 24px rgba(31,35,40,.14) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } html.mobile-shell.millennial-mode.millennial-dark .topbar-actions { background:#0d1117 !important; border-color:#30363d !important; } /* Mobile bottom navigation shell — purpose-built phone controls with More sheet. */ .mobile-bottom-nav, .mobile-more-dialog { display:none; } @media (max-width: 900px) { .topbar-actions, html.mobile-shell .topbar-actions { display:none !important; } .mobile-bottom-nav { position:fixed; z-index:120; left:50%; bottom:10px; transform:translateX(-50%); width:min(430px, calc(100vw - 18px)); display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:6px; padding:7px; border:1px solid rgba(255,255,255,.13); border-radius:20px; background:rgba(8,14,22,.92); box-shadow:0 18px 48px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); } .mobile-bottom-nav button, .mobile-more-grid button, .mobile-more-cancel { appearance:none; min-width:0; border:1px solid rgba(255,255,255,.09); color:var(--ink); background:rgba(255,255,255,.055); cursor:pointer; box-shadow:inset 0 1px 0 rgba(255,255,255,.05); } .mobile-bottom-nav button { height:46px; display:grid; place-items:center; gap:1px; border-radius:14px; } .mobile-bottom-nav button span, .mobile-more-grid button span { color:var(--accent); font-size:15px; font-weight:900; line-height:1; } .mobile-bottom-nav button small, .mobile-more-grid button small { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:8.5px; font-weight:800; } .mobile-bottom-nav button:hover, .mobile-bottom-nav button:focus-visible, .mobile-more-grid button:hover, .mobile-more-grid button:focus-visible { border-color:var(--accent-alpha-45); background:var(--accent-alpha-10); outline:0; } .mobile-more-dialog[open] { display:block; position:fixed; inset:auto 8px 8px; width:min(430px, calc(100vw - 16px)); max-height:calc(100dvh - 24px); margin:0 auto; padding:0; border:1px solid rgba(255,255,255,.14); border-radius:22px; background:rgba(18,22,32,.96); box-shadow:0 24px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); } .mobile-more-dialog::backdrop { background:rgba(2,4,9,.54); backdrop-filter:blur(3px); } .mobile-more-body { padding:12px; } .mobile-sheet-handle { display:block; width:34px; height:3px; margin:0 auto 10px; border-radius:99px; background:rgba(255,255,255,.20); } .mobile-more-body h2 { margin:0 0 10px; color:var(--ink); text-align:center; font-size:14px; letter-spacing:-.02em; } .mobile-more-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; } .mobile-more-grid button { min-height:62px; display:grid; place-items:center; gap:5px; padding:7px 4px; border-radius:13px; } .mobile-more-grid button span { font-size:18px; } .mobile-more-grid button small { font-size:9px; } .mobile-more-cancel { width:100%; min-height:38px; margin-top:9px; border-radius:13px; color:var(--ink); font-size:12px; font-weight:800; } .app { padding-bottom:104px !important; } .back-to-top { bottom:78px !important; } html.millennial-mode .mobile-bottom-nav, html.millennial-mode .mobile-more-dialog[open] { background:#ffffff; border-color:#8c959f; box-shadow:0 10px 24px rgba(31,35,40,.16); backdrop-filter:none; -webkit-backdrop-filter:none; } html.millennial-mode .mobile-bottom-nav button, html.millennial-mode .mobile-more-grid button, html.millennial-mode .mobile-more-cancel { color:#24292f; background:#f6f8fa; border-color:#8c959f; box-shadow:none; } html.millennial-mode .mobile-bottom-nav button small, html.millennial-mode .mobile-more-grid button small, html.millennial-mode .mobile-more-body h2 { color:#24292f !important; -webkit-text-fill-color:#24292f !important; opacity:1 !important; } html.millennial-mode.millennial-dark .mobile-bottom-nav, html.millennial-mode.millennial-dark .mobile-more-dialog[open] { background:#0d1117; border-color:#30363d; } html.millennial-mode.millennial-dark .mobile-bottom-nav button, html.millennial-mode.millennial-dark .mobile-more-grid button, html.millennial-mode.millennial-dark .mobile-more-cancel { color:#c9d1d9; background:#21262d; border-color:#30363d; } } @media (max-width: 360px) { .mobile-bottom-nav { width:calc(100vw - 12px); bottom:6px; gap:5px; padding:6px; border-radius:17px; } .mobile-bottom-nav button { height:42px; border-radius:12px; } .mobile-bottom-nav button small { font-size:8px; } .mobile-more-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } } /* Mobile visual cleanup — reduce traffic and use a cleaner phone-only composition. */ html.mobile-shell body::before { content:""; position:fixed; inset:0; z-index:0; pointer-events:none; background:rgba(4,8,14,.22); } html.mobile-shell .background::after { background:linear-gradient(120deg, rgba(4,9,16,.66), rgba(5,10,18,.44) 48%, rgba(4,8,14,.62)); } html.mobile-shell .glass { background:linear-gradient(140deg, rgba(12,18,28,.78), rgba(10,15,24,.68)) !important; border-color:rgba(220,235,245,.11) !important; box-shadow:0 10px 28px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.045) !important; backdrop-filter:blur(10px) !important; -webkit-backdrop-filter:blur(10px) !important; } html.mobile-shell .command-deck { display:grid !important; grid-template-columns:1fr !important; gap:11px !important; padding:14px !important; margin-bottom:10px !important; border-radius:18px !important; } html.mobile-shell .deck-welcome h1 { max-width:100% !important; font-size:clamp(24px, 8vw, 31px) !important; line-height:1.07 !important; } html.mobile-shell .deck-welcome .hero-copy { display:none !important; } html.mobile-shell .deck-search { grid-template-columns:20px minmax(0,1fr) 58px !important; min-height:46px !important; padding:8px 9px !important; margin:0 !important; border-radius:13px !important; background:rgba(1,8,15,.34) !important; } html.mobile-shell #search-input { font-size:12px !important; } html.mobile-shell .deck-time { display:grid !important; grid-template-columns:1fr auto !important; align-items:end !important; gap:8px !important; margin-top:0 !important; padding:10px 0 0 !important; border-left:0 !important; border-top:1px solid rgba(232,246,248,.10) !important; } html.mobile-shell .time-card-top { grid-column:1; margin:0 !important; } html.mobile-shell .time-card-top .live-dot { display:none !important; } html.mobile-shell #clock { grid-column:2; grid-row:1 / span 2; font-size:35px !important; text-align:right; } html.mobile-shell #date { grid-column:1; margin:3px 0 0 !important; font-size:10px !important; } /* The round jump strip was useful on desktop but noisy on phones now that bottom nav exists. */ html.mobile-shell .widget-jump-bar { display:none !important; } html.mobile-shell .widget-board { gap:11px !important; } html.mobile-shell .panel { padding:14px !important; border-radius:17px !important; } html.mobile-shell .panel-header { margin-bottom:10px !important; } html.mobile-shell .panel-title { font-size:13px !important; } html.mobile-shell .panel-title svg { width:14px !important; height:14px !important; } html.mobile-shell .panel-meta { font-size:9.5px !important; } html.mobile-shell .link-panel-actions .button { min-height:28px !important; padding:0 7px !important; font-size:9.5px !important; } html.mobile-shell .link-panel-actions .text-button { font-size:10.5px !important; } html.mobile-shell .links-grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:7px !important; } html.mobile-shell .link-tile { min-height:76px !important; padding:8px 4px !important; border-radius:13px !important; } html.mobile-shell .link-icon { width:30px !important; height:30px !important; border-radius:10px !important; font-size:14px !important; } html.mobile-shell .link-name { font-size:9.5px !important; } html.mobile-shell .at-glance { padding:12px !important; } html.mobile-shell .glance-row { grid-template-columns:36px 1fr !important; gap:9px !important; } html.mobile-shell .glance-number { width:36px !important; height:36px !important; border-radius:11px !important; font-size:13px !important; } html.mobile-shell .glance-copy strong { font-size:11px !important; } html.mobile-shell .glance-copy span { font-size:9.5px !important; } html.mobile-shell .glance-progress { margin-top:10px !important; } html.mobile-shell .task-item, html.mobile-shell .habit-item, html.mobile-shell .focus-item, html.mobile-shell .resource-item { min-height:36px !important; padding:7px 8px !important; border-radius:10px !important; background:rgba(2,10,18,.22) !important; } html.mobile-shell .task-copy, html.mobile-shell .habit-copy, html.mobile-shell .focus-text, html.mobile-shell .resource-copy strong { font-size:11px !important; } html.mobile-shell .task-meta, html.mobile-shell .resource-copy span { font-size:9px !important; } html.mobile-shell .resource-local-note { display:none !important; } html.mobile-shell .mock-widget .mock-summary, html.mobile-shell .mistake-summary { grid-template-columns:repeat(2,minmax(0,1fr)) !important; } html.mobile-shell .mock-widget .mock-stat, html.mobile-shell .mistake-stat { min-height:auto !important; padding:6px 7px !important; } html.mobile-shell .back-to-top { width:32px !important; height:32px !important; right:12px !important; bottom:76px !important; font-size:14px !important; opacity:.78; } @media (max-width: 380px) { html.mobile-shell .links-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; } html.mobile-shell .deck-time { grid-template-columns:1fr !important; } html.mobile-shell #clock { grid-column:1 !important; grid-row:auto !important; text-align:left !important; font-size:36px !important; } html.mobile-shell #date { grid-column:1 !important; } } /* Mobile command card correction — search can breathe; time should not look split. */ html.mobile-shell .deck-search { grid-template-columns:20px minmax(0,1fr) 76px !important; width:100% !important; } html.mobile-shell .search-engine-picker, html.mobile-shell .search-engine-picker .select-trigger { width:76px !important; min-width:76px !important; } html.mobile-shell .deck-time { display:block !important; text-align:left !important; padding-top:11px !important; } html.mobile-shell .time-card-top { display:flex !important; align-items:center !important; justify-content:space-between !important; margin-bottom:6px !important; } html.mobile-shell .time-card-top .live-dot { display:flex !important; } html.mobile-shell #clock { display:block !important; grid-column:auto !important; grid-row:auto !important; text-align:left !important; margin:0 !important; font-size:44px !important; line-height:.95 !important; letter-spacing:-.055em !important; } html.mobile-shell #date { display:block !important; margin-top:6px !important; font-size:11px !important; } @media (max-width: 380px) { html.mobile-shell .deck-search { grid-template-columns:18px minmax(0,1fr) 68px !important; } html.mobile-shell .search-engine-picker, html.mobile-shell .search-engine-picker .select-trigger { width:68px !important; min-width:68px !important; } html.mobile-shell #clock { font-size:40px !important; } } /* Mobile Widget Library fix — readable presets and clean widget cards in the bottom-sheet sized dialog. */ html.mobile-shell #widgets-dialog { width:calc(100% - 14px) !important; max-width:430px !important; max-height:calc(100dvh - 18px) !important; overflow:auto !important; border-radius:20px !important; } html.mobile-shell #widgets-dialog .dialog-body { padding:16px !important; } html.mobile-shell #widgets-dialog .dialog-description { white-space:normal !important; overflow:visible !important; line-height:1.5 !important; font-size:11px !important; } html.mobile-shell .layout-preset-panel { display:block !important; margin:10px 0 14px !important; padding:12px !important; border-radius:14px !important; } html.mobile-shell .layout-preset-panel > div:first-child { margin-bottom:10px !important; } html.mobile-shell .layout-preset-panel strong { font-size:12px !important; line-height:1.25 !important; } html.mobile-shell .layout-preset-panel span { max-width:none !important; font-size:10px !important; line-height:1.35 !important; } html.mobile-shell .layout-preset-grid { display:grid !important; grid-template-columns:repeat(2, minmax(0,1fr)) !important; gap:7px !important; justify-content:stretch !important; } html.mobile-shell .layout-preset-grid button { width:100% !important; min-height:34px !important; padding:0 8px !important; border-radius:11px !important; font-size:10px !important; white-space:nowrap !important; } html.mobile-shell .widget-toggle-list.upgraded { gap:8px !important; } html.mobile-shell .widget-toggle-list.upgraded .widget-library-group { margin-top:14px !important; } html.mobile-shell .widget-toggle-list.upgraded .widget-library-heading { margin:0 0 8px !important; font-size:10px !important; letter-spacing:.14em !important; } html.mobile-shell .widget-toggle-list.upgraded .widget-toggle { grid-template-columns:28px minmax(0,1fr) auto !important; gap:8px !important; padding:10px !important; border-radius:14px !important; align-items:start !important; } html.mobile-shell .widget-drag-handle { width:26px !important; height:34px !important; border-radius:10px !important; font-size:14px !important; } html.mobile-shell .widget-toggle-main { min-width:0 !important; } html.mobile-shell .widget-toggle-top { display:flex !important; align-items:center !important; justify-content:flex-start !important; gap:6px !important; min-width:0 !important; } html.mobile-shell .widget-toggle-top strong { min-width:0 !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; font-size:11.5px !important; text-align:left !important; } html.mobile-shell .widget-enabled-pill { flex:none !important; padding:2px 5px !important; font-size:8px !important; } html.mobile-shell .widget-toggle-description { margin-top:3px !important; font-size:9.5px !important; line-height:1.3 !important; white-space:normal !important; } html.mobile-shell .widget-toggle-side { grid-column:3 !important; grid-row:1 !important; justify-content:flex-end !important; align-self:start !important; } html.mobile-shell .widget-toggle-tools { grid-column:1 / -1 !important; display:grid !important; grid-template-columns:repeat(3, minmax(0,1fr)) !important; gap:6px !important; margin-top:9px !important; } html.mobile-shell .widget-size-choice { width:100% !important; min-width:0 !important; height:28px !important; padding:0 4px !important; border-radius:9px !important; font-size:9px !important; white-space:nowrap !important; } @media (max-width:360px) { html.mobile-shell .layout-preset-grid { grid-template-columns:1fr !important; } html.mobile-shell .widget-toggle-list.upgraded .widget-toggle { grid-template-columns:26px minmax(0,1fr) auto !important; } html.mobile-shell .widget-size-choice { font-size:8.5px !important; } } /* Mobile setup dialogs polish — Create Space and onboarding become guided phone sheets. */ html.mobile-shell #space-dialog, html.mobile-shell #onboarding-dialog { width:calc(100% - 14px) !important; max-width:460px !important; max-height:calc(100dvh - 18px) !important; overflow:auto !important; border-radius:22px !important; } html.mobile-shell #space-dialog .dialog-body, html.mobile-shell #onboarding-dialog .dialog-body { padding:16px !important; } html.mobile-shell #space-dialog .dialog-title, html.mobile-shell #onboarding-dialog .dialog-title { position:sticky; top:0; z-index:4; margin:-16px -16px 10px; padding:15px 16px 10px; background:linear-gradient(180deg, rgba(13,19,30,.98), rgba(13,19,30,.92)); border-radius:22px 22px 0 0; } html.mobile-shell #space-dialog .dialog-title h2, html.mobile-shell #onboarding-dialog .dialog-title h2 { font-size:18px !important; } html.mobile-shell #space-dialog .dialog-description, html.mobile-shell #onboarding-dialog .dialog-description { font-size:11.5px !important; line-height:1.55 !important; margin-bottom:14px !important; } /* Create Space mobile flow */ html.mobile-shell #space-dialog .form-row { grid-template-columns:1fr !important; gap:0 !important; } html.mobile-shell #space-dialog .field { margin-bottom:12px !important; } html.mobile-shell #space-dialog .field label { font-size:10px !important; letter-spacing:.08em; text-transform:uppercase; color:var(--accent) !important; } html.mobile-shell #space-dialog .field input { min-height:40px !important; font-size:13px !important; border-radius:12px !important; } html.mobile-shell .template-filter-row { display:grid !important; grid-template-columns:1fr !important; gap:7px !important; margin-bottom:8px !important; } html.mobile-shell .template-filter-row > span:first-child { font-size:10px !important; letter-spacing:.08em; text-transform:uppercase; color:var(--accent) !important; } html.mobile-shell .template-picker-count { margin:0 !important; font-size:9.5px !important; color:var(--quiet) !important; } html.mobile-shell .template-category-picker, html.mobile-shell .template-category-picker .select-trigger { width:100% !important; min-width:0 !important; } html.mobile-shell .template-category-picker .select-trigger { min-height:40px !important; border-radius:12px !important; } html.mobile-shell .template-search { min-height:40px !important; margin-bottom:9px !important; padding:9px 10px !important; border-radius:12px !important; font-size:12px !important; } html.mobile-shell .template-picker { display:grid !important; grid-template-columns:repeat(2, minmax(0, 1fr)) !important; gap:7px !important; max-height:250px !important; overflow:auto !important; padding:2px 2px 4px !important; overscroll-behavior:contain; } html.mobile-shell .template-picker [data-space-template] { justify-content:center !important; min-height:38px !important; padding:0 8px !important; border-radius:12px !important; font-size:10.5px !important; text-align:center !important; white-space:normal !important; line-height:1.18 !important; } html.mobile-shell .template-picker [data-space-template].active { box-shadow:0 0 0 2px var(--accent-alpha-20); } html.mobile-shell #space-dialog .dialog-actions, html.mobile-shell #onboarding-dialog .dialog-actions { position:sticky; bottom:-16px; z-index:5; display:grid !important; grid-template-columns:1fr 1fr; gap:8px !important; margin:14px -16px -16px !important; padding:10px 16px 14px !important; background:linear-gradient(0deg, rgba(13,19,30,.99), rgba(13,19,30,.90)); border-top:1px solid rgba(255,255,255,.08); border-radius:0 0 22px 22px; } html.mobile-shell #space-dialog .dialog-actions .button, html.mobile-shell #onboarding-dialog .dialog-actions .button { width:100% !important; min-height:40px !important; border-radius:12px !important; font-size:12px !important; } /* Onboarding mobile flow */ html.mobile-shell .onboarding-grid { display:grid !important; grid-template-columns:1fr !important; gap:12px !important; margin-top:8px !important; } html.mobile-shell .setup-choice-list { grid-template-columns:repeat(2, minmax(0, 1fr)) !important; gap:7px !important; } html.mobile-shell .setup-choice { min-height:46px !important; padding:7px 8px !important; border-radius:13px !important; align-items:center !important; line-height:1.15 !important; } html.mobile-shell .setup-choice-icon { width:24px !important; height:24px !important; flex:none; font-size:12px !important; } html.mobile-shell .setup-choice span:last-child { min-width:0; font-size:10.5px !important; font-weight:800; } html.mobile-shell .setup-panel { padding:12px !important; border-radius:15px !important; } html.mobile-shell .setup-panel-title { font-size:13px !important; } html.mobile-shell .setup-panel-copy { margin-bottom:10px !important; font-size:10.8px !important; line-height:1.5 !important; } html.mobile-shell .setup-extra-grid { grid-template-columns:1fr 1fr !important; gap:7px !important; } html.mobile-shell .setup-check { min-height:36px !important; border-radius:11px !important; font-size:10.5px !important; } html.mobile-shell .setup-template-search { min-height:39px !important; border-radius:12px !important; font-size:11.5px !important; } html.mobile-shell .setup-template-list { grid-template-columns:repeat(2, minmax(0,1fr)) !important; gap:7px !important; max-height:245px !important; overflow:auto !important; overscroll-behavior:contain; } html.mobile-shell .setup-template { min-height:38px !important; padding:0 8px !important; border-radius:12px !important; font-size:10.5px !important; text-align:center !important; line-height:1.18 !important; } html.mobile-shell.millennial-mode #space-dialog .dialog-title, html.mobile-shell.millennial-mode #onboarding-dialog .dialog-title, html.mobile-shell.millennial-mode #space-dialog .dialog-actions, html.mobile-shell.millennial-mode #onboarding-dialog .dialog-actions { background:#ffffff !important; border-color:#8c959f !important; } html.mobile-shell.millennial-mode.millennial-dark #space-dialog .dialog-title, html.mobile-shell.millennial-mode.millennial-dark #onboarding-dialog .dialog-title, html.mobile-shell.millennial-mode.millennial-dark #space-dialog .dialog-actions, html.mobile-shell.millennial-mode.millennial-dark #onboarding-dialog .dialog-actions { background:#0d1117 !important; border-color:#30363d !important; } @media (max-width:360px) { html.mobile-shell .template-picker, html.mobile-shell .setup-choice-list, html.mobile-shell .setup-extra-grid, html.mobile-shell .setup-template-list { grid-template-columns:1fr !important; } html.mobile-shell #space-dialog .dialog-actions, html.mobile-shell #onboarding-dialog .dialog-actions { grid-template-columns:1fr !important; } } /* Final mobile Millennial contrast guard — mobile shell cleanup must not turn Millennial Light into dark glass with black text. */ html.mobile-shell.millennial-mode:not(.millennial-dark) body { background:#ffffff !important; color:#24292f !important; } html.mobile-shell.millennial-mode:not(.millennial-dark) .background { display:none !important; } html.mobile-shell.millennial-mode:not(.millennial-dark) .glass, html.mobile-shell.millennial-mode:not(.millennial-dark) .command-deck, html.mobile-shell.millennial-mode:not(.millennial-dark) .panel, html.mobile-shell.millennial-mode:not(.millennial-dark) dialog, html.mobile-shell.millennial-mode:not(.millennial-dark) .mobile-more-dialog[open], html.mobile-shell.millennial-mode:not(.millennial-dark) .mobile-bottom-nav, html.mobile-shell.millennial-mode:not(.millennial-dark) .topbar, html.mobile-shell.millennial-mode:not(.millennial-dark) .deck-search, html.mobile-shell.millennial-mode:not(.millennial-dark) .link-tile, html.mobile-shell.millennial-mode:not(.millennial-dark) .task-item, html.mobile-shell.millennial-mode:not(.millennial-dark) .habit-item, html.mobile-shell.millennial-mode:not(.millennial-dark) .focus-item, html.mobile-shell.millennial-mode:not(.millennial-dark) .resource-item, html.mobile-shell.millennial-mode:not(.millennial-dark) .syllabus-subject, html.mobile-shell.millennial-mode:not(.millennial-dark) .mock-item, html.mobile-shell.millennial-mode:not(.millennial-dark) .mistake-item, html.mobile-shell.millennial-mode:not(.millennial-dark) .mock-stat, html.mobile-shell.millennial-mode:not(.millennial-dark) .mistake-stat, html.mobile-shell.millennial-mode:not(.millennial-dark) .privacy-card { color:#24292f !important; background:#ffffff !important; border-color:#8c959f !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } html.mobile-shell.millennial-mode:not(.millennial-dark) .deck-search, html.mobile-shell.millennial-mode:not(.millennial-dark) .link-tile, html.mobile-shell.millennial-mode:not(.millennial-dark) .task-item, html.mobile-shell.millennial-mode:not(.millennial-dark) .habit-item, html.mobile-shell.millennial-mode:not(.millennial-dark) .focus-item, html.mobile-shell.millennial-mode:not(.millennial-dark) .resource-item, html.mobile-shell.millennial-mode:not(.millennial-dark) .syllabus-subject, html.mobile-shell.millennial-mode:not(.millennial-dark) .mock-item, html.mobile-shell.millennial-mode:not(.millennial-dark) .mistake-item { background:#f6f8fa !important; } html.mobile-shell.millennial-mode:not(.millennial-dark) :where( .app, .topbar, .brand, .space-switcher-label, .deck-welcome h1, .eyebrow, .hero-copy, .widget-label, #clock, #date, .panel-title, .panel-meta, .link-name, .task-copy, .task-meta, .habit-copy, .focus-text, .resource-copy strong, .resource-copy span, .syllabus-summary-copy strong, .syllabus-summary-copy span, .syllabus-subject-head strong, .syllabus-subject-head span, .syllabus-chapter-title, .mock-name, .mock-score-row, .mock-score-row strong, .mock-insight, .mistake-context, .mistake-main-text, .mistake-section-label, .mistake-remember, .glance-copy strong, .glance-copy span, .mobile-bottom-nav button, .mobile-bottom-nav button small, .mobile-more-grid button, .mobile-more-grid button small, .mobile-more-body h2, .back-to-top ) { color:#24292f !important; -webkit-text-fill-color:#24292f !important; opacity:1 !important; } html.mobile-shell.millennial-mode:not(.millennial-dark) :where(input:not([type="checkbox"]):not([type="file"]), textarea, .select-trigger, .button, .icon-button) { color:#24292f !important; -webkit-text-fill-color:#24292f !important; background:#ffffff !important; border-color:#8c959f !important; } html.mobile-shell.millennial-mode:not(.millennial-dark) :where(input::placeholder, textarea::placeholder) { color:#57606a !important; -webkit-text-fill-color:#57606a !important; opacity:1 !important; } html.mobile-shell.millennial-mode:not(.millennial-dark) :where(.button.primary, .mobile-bottom-nav button:hover, .mobile-bottom-nav button:focus-visible, .widget-jump:hover, .calendar-day.today, .setup-choice.active, .setup-template.active, .template-picker button.active, .widget-size-choice.active, .mistake-filter-row button.active, .resource-filter-row button.active) { color:var(--accent-contrast) !important; -webkit-text-fill-color:var(--accent-contrast) !important; background:var(--accent) !important; border-color:var(--accent) !important; } html.mobile-shell.millennial-mode.millennial-dark body { background:#0d1117 !important; color:#c9d1d9 !important; } html.mobile-shell.millennial-mode.millennial-dark .glass, html.mobile-shell.millennial-mode.millennial-dark .command-deck, html.mobile-shell.millennial-mode.millennial-dark .panel, html.mobile-shell.millennial-mode.millennial-dark dialog, html.mobile-shell.millennial-mode.millennial-dark .mobile-bottom-nav, html.mobile-shell.millennial-mode.millennial-dark .mobile-more-dialog[open] { color:#c9d1d9 !important; background:#0d1117 !important; border-color:#30363d !important; box-shadow:none !important; } html.mobile-shell.millennial-mode.millennial-dark :where(.deck-search, .link-tile, .task-item, .habit-item, .focus-item, .resource-item, .syllabus-subject, .mock-item, .mistake-item, .mock-stat, .mistake-stat) { color:#c9d1d9 !important; background:#161b22 !important; border-color:#30363d !important; } html.mobile-shell.millennial-mode.millennial-dark :where(.link-name, .task-copy, .habit-copy, .focus-text, .resource-copy strong, .resource-copy span, .mock-name, .mock-score-row, .mock-score-row strong, .mistake-context, .mistake-main-text, .mobile-bottom-nav button small, .mobile-more-grid button small) { color:#c9d1d9 !important; -webkit-text-fill-color:#c9d1d9 !important; opacity:1 !important; } /* Google Backup panel */ .cloud-backup-card { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px; border:1px solid rgba(255,255,255,.09); border-radius:14px; background:rgba(0,0,0,.12); } .cloud-backup-main { min-width:0; } .cloud-backup-main strong { display:block; color:#e8eff1; font-size:12px; margin-bottom:4px; } .cloud-backup-main span { display:block; color:var(--quiet); font-size:10.5px; line-height:1.45; } .cloud-backup-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; } .cloud-backup-actions .button { min-height:34px; padding:0 10px; font-size:10.5px; } .google-backup-section.busy .cloud-backup-actions { opacity:.62; pointer-events:none; } html.millennial-mode:not(.millennial-dark) .cloud-backup-card { background:#f6f8fa; border-color:#8c959f; } html.millennial-mode:not(.millennial-dark) .cloud-backup-main strong, html.millennial-mode:not(.millennial-dark) .cloud-backup-main span { color:#24292f !important; -webkit-text-fill-color:#24292f !important; opacity:1 !important; } html.millennial-mode.millennial-dark .cloud-backup-card { background:#161b22; border-color:#30363d; } @media (max-width:700px){ .cloud-backup-card { grid-template-columns:1fr; } .cloud-backup-actions { justify-content:flex-start; } } /* Signed-in profile and quick cloud backup controls. */ .cloud-profile-button { flex:none; width:34px; height:34px; display:grid; place-items:center; padding:0; border:1px solid rgba(255,255,255,.14); border-radius:50%; color:var(--accent-contrast); background:var(--accent); overflow:hidden; cursor:pointer; font-size:12px; font-weight:900; box-shadow:inset 0 1px 0 rgba(255,255,255,.12); } .cloud-profile-button img { display:none; width:100%; height:100%; object-fit:cover; } .cloud-profile-button.has-photo img { display:block; } .cloud-profile-button.has-photo span { display:none; } .cloud-profile-button:hover, .cloud-profile-button:focus-visible { outline:2px solid var(--accent-alpha-45); outline-offset:2px; } html.millennial-mode .cloud-profile-button { box-shadow:none; } @media (max-width:900px) { .topbar-start { grid-template-columns:34px minmax(0,1fr) 34px !important; } html.mobile-shell .topbar-start { grid-template-columns:34px minmax(0,1fr) 34px !important; } .cloud-profile-button { width:34px; height:34px; } } @media (max-width:360px) { .topbar-start { grid-template-columns:32px minmax(0,1fr) 32px !important; } html.mobile-shell .topbar-start { grid-template-columns:32px minmax(0,1fr) 32px !important; } .cloud-profile-button { width:32px; height:32px; } } /* Mobile focus form fix — plus button should be compact, not full-width. */ html.mobile-shell .focus-form { display:grid !important; grid-template-columns:minmax(0,1fr) 38px !important; gap:7px !important; align-items:center !important; } html.mobile-shell .focus-form input { min-width:0 !important; width:100% !important; } html.mobile-shell .focus-form .button, html.mobile-shell .focus-form button { width:38px !important; min-width:38px !important; height:36px !important; min-height:36px !important; padding:0 !important; border-radius:11px !important; font-size:18px !important; line-height:1 !important; } @media (max-width:360px) { html.mobile-shell .focus-form { grid-template-columns:minmax(0,1fr) 36px !important; } html.mobile-shell .focus-form .button, html.mobile-shell .focus-form button { width:36px !important; min-width:36px !important; height:34px !important; min-height:34px !important; } } /* ───────────────────────────────────────────────────────────── Harbor Home — mobile readability & declutter pass (v3) Mobile-only refinements; the desktop layout is untouched. ───────────────────────────────────────────────────────────── */ /* Collapse / Expand all controls live in the command deck (mobile only) */ .deck-tools { display:flex; gap:6px; margin-top:14px; flex-wrap:wrap; } .deck-tool { flex:1; min-height:40px; display:inline-flex; align-items:center; justify-content:center; gap:7px; border:1px solid var(--stroke); border-radius:12px; color:var(--muted); background:rgba(1,10,17,.35); font-size:12.5px; font-weight:800; cursor:pointer; } .deck-tool:active { background:rgba(255,255,255,.10); color:var(--ink); } /* Mobile type scale + spacing (bigger, calmer) */ @media (max-width: 900px) { .panel { padding:17px 16px; border-radius:18px; } .panel-title { font-size:16px; } .panel-meta, .widget-label { font-size:12px; } .link-name { font-size:13px; font-weight:700; } .link-tile { min-height:84px; gap:9px; } .link-icon { width:40px; height:40px; border-radius:14px; font-size:20px; } .task-copy, .focus-text, .habit-copy, .mistake-main-text, .mistake-context, .syllabus-chapter-title, .syllabus-subject-head strong, .resource-copy strong, .mini-copy strong, .inbox-copy strong, .mock-name, .weather-place { font-size:14px; } .task-meta, .resource-copy span, .mini-copy span, .inbox-copy span, .mock-score-row, .mistake-section-label, .syllabus-summary-copy span { font-size:11.5px; } .note-area { font-size:14.5px; line-height:1.65; padding:14px; } #search-input { font-size:15px; } .task-form input, .task-form select, .focus-form input, .habit-form input, .syllabus-form input, .syllabus-search, .resource-form input, .resource-form select, .mock-form input, .mock-notes-row input, .mistake-form input, .mistake-form select, .mistake-notes textarea, .mistake-submit-row input, .mistake-filter, .mock-search, .weather-location-form input, .command-search, .template-search { font-size:14px; padding:10px 11px; } .field input, .field select { font-size:14px; padding:11px 12px; } .field label { font-size:12px; } .button { min-height:42px; font-size:13px; padding:0 14px; border-radius:12px; } .text-button { font-size:13px; } .icon-button { width:42px; height:42px; } .space-switcher-button { height:42px; border-radius:12px; } .space-switcher-label { font-size:13px; } .task-empty, .habit-empty, .focus-empty, .resource-empty, .syllabus-empty, .mock-empty, .mistake-empty, .inbox-empty { font-size:13px; line-height:1.6; padding:20px 8px; } .glance-copy strong { font-size:14px; } .glance-copy span { font-size:12px; } .widget-toggle strong { font-size:14px; } .widget-toggle span { font-size:12px; } .setting-heading { font-size:13px; } .dialog-title h2 { font-size:19px; } .dialog-description { font-size:12.5px; } .weather-temp { font-size:34px; } .weather-feels { font-size:12px; } .weather-day strong { font-size:11px; } .weather-day small { font-size:10.5px; } .syllabus-status { font-size:11px; min-width:84px; min-height:28px; } .syllabus-summary-copy strong { font-size:13.5px; } .mock-stat strong { font-size:15px; } .mock-stat span { font-size:10.5px; } .mistake-stat strong { font-size:15px; } .mistake-stat span { font-size:10.5px; } .mistake-filter-row button { font-size:12px; min-height:30px; } .timer-display { font-size:48px; } .timer-actions .button { min-height:40px; font-size:13px; } .toast { font-size:13px; } .deck-welcome h1 { font-size:30px; } .hero-copy { font-size:13.5px; } #clock { font-size:54px; } #date { font-size:13px; } /* every widget card spans full width on phones */ #widget-board > .panel, #widget-board > .panel.widget-size-compact, #widget-board > .panel.widget-size-wide, #widget-board > .panel.widget-size-full { grid-column:1/-1 !important; } } /* Quick links: two big columns on phones (must beat size-specific rules) */ @media (max-width: 640px) { #links-widget.widget-size-compact .links-grid, #links-widget.widget-size-wide .links-grid, #links-widget.widget-size-full .links-grid, #links-widget .links-grid, .links-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; } .link-tile { min-height:78px; } } /* "Day at a glance" has no header — never visually collapse it */ #widget-board > .panel.at-glance.widget-collapsed > * { display:initial !important; } /* Jump bar → horizontal chip strip, sticky under the header */ @media (max-width: 900px) { html.mobile-shell .widget-jump-bar { display:flex !important; top:50px !important; } .widget-jump-bar { position:sticky; z-index:15; flex-wrap:nowrap; overflow-x:auto; padding:7px 8px; gap:6px; margin:0 0 12px; border-radius:14px; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .widget-jump-bar::-webkit-scrollbar { display:none; } .widget-jump { width:auto; height:auto; min-height:34px; padding:0 13px; border-radius:99px; display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:800; flex:none; } .widget-jump span { position:static; width:auto; height:auto; overflow:visible; clip:none; white-space:nowrap; } #widget-board > .panel, #widget-board > .panel .panel-header, .links-grid, .command-deck { scroll-margin-top:104px; } } /* Accordion widgets on mobile: tap header to collapse, peek stays visible */ @media (max-width: 900px) { #widget-board > .panel .panel-header, #widget-board > .panel.calendar-widget .calendar-header { cursor:pointer; user-select:none; -webkit-user-select:none; } #widget-board > .panel .panel-header::after, #widget-board > .panel.calendar-widget .calendar-header::after { content:"▾"; flex:none; margin-left:auto; padding:2px 2px 2px 10px; color:var(--quiet); font-size:13px; font-weight:900; transition:transform .22s ease; } } /* Widget collapse — all screens (desktop too) */ #widget-board > .panel.widget-collapsed .panel-header::after, #widget-board > .panel.calendar-widget.widget-collapsed .calendar-header::after { transform:rotate(-90deg); color:var(--accent); } #widget-board > .panel.widget-collapsed > *:not(.panel-header):not(.calendar-header) { display:none !important; } #widget-board > .panel.calendar-widget.widget-collapsed > .calendar-header ~ * { display:none !important; } #widget-board > .panel.widget-collapsed { min-height:0 !important; } /* desktop: collapsed panels keep a clickable header to re-expand */ @media (min-width: 901px) { html:not(.mobile-shell) #widget-board > .panel.widget-collapsed .panel-header, html:not(.mobile-shell) #widget-board > .panel.calendar-widget.widget-collapsed .calendar-header { cursor:pointer; } } /* Bottom tab bar: 4 tabs, active highlight */ html.mobile-shell .mobile-bottom-nav { grid-template-columns:repeat(4,minmax(0,1fr)); } html.mobile-shell .mobile-bottom-nav button.active { color:var(--accent); background:var(--accent-alpha-10); border-color:var(--accent-alpha-45); } /* ───────────────────────────────────────────────────────────── Text size scale — Small / Medium / Big / Large (all devices). Medium = today's sizes; other tiers scale the main text up/down. ───────────────────────────────────────────────────────────── */ .text-size-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:7px 0; color:#dde5e9; font-size:12px; } .text-size-picker { flex:none; } .text-size-picker button { min-width:auto; padding:0 10px; } html[data-fs] { --fs: 1; } html[data-fs="small"] { --fs: .92; } html[data-fs="big"] { --fs: 1.14; } html[data-fs="large"] { --fs: 1.30; } /* Text-size = uniform page zoom on EVERY viewport (desktop, tablet, phone): every element's text scales together, and boxes scale with the text so nothing overflows its box. Dialogs stay base-size so their vw-based widths don't overflow at large text. updateResponsiveShellClass divides the measured app width by --fs, so changing the font size never flips the mobile/desktop shell threshold. */ html { zoom: var(--fs, 1); } dialog { zoom: calc(1 / var(--fs, 1)); } /* ───────────────────────────────────────────────────────────── Bigger menus: near-fullscreen dialogs on phones, roomier command palette on desktop, 1.8x bottom menus. ───────────────────────────────────────────────────────────── */ @media (max-width: 900px) { /* Near-fullscreen for dialogs EXCEPT the More sheet, which stays a compact bottom sheet */ dialog:not(#mobile-more-dialog) { width:min(94vw, calc(100% - 20px)) !important; max-width:94vw !important; max-height:92dvh !important; } /* Create Space gets the full near-fullscreen treatment with inner scroll. Robust: no :has() dependency — the whole body scrolls as a fallback, and the template list scrolls internally so big categories (Boards/All = 90+ templates) can never clip info or hide the actions. */ #space-dialog { width:min(96vw, calc(100% - 16px)) !important; max-width:96vw !important; height:94dvh !important; max-height:94dvh !important; border-radius:26px !important; } #space-dialog .dialog-body { height:94dvh !important; max-height:94dvh !important; overflow-y:auto !important; -webkit-overflow-scrolling:touch; padding-bottom:calc(16px + env(safe-area-inset-bottom)) !important; } #space-dialog #space-template-picker { max-height:44dvh !important; overflow-y:auto !important; -webkit-overflow-scrolling:touch; } .command-list, #global-search-list { max-height:calc(92dvh - 170px) !important; } .inbox-list { max-height:calc(92dvh - 230px) !important; } .widget-toggle-list { max-height:calc(92dvh - 210px) !important; overflow:auto !important; } } @media (min-width: 901px) { #command-dialog, #global-search-dialog { width:min(640px, calc(100vw - 60px)) !important; max-height:86vh !important; } .command-list, #global-search-list { max-height:calc(86vh - 180px) !important; } } /* Bottom tab bar — 1.8x touch targets */ html.mobile-shell .mobile-bottom-nav { padding:9px; gap:7px; border-radius:26px; } html.mobile-shell .mobile-bottom-nav button { height:83px !important; border-radius:18px; gap:5px; } html.mobile-shell .mobile-bottom-nav button span { font-size:23px !important; } html.mobile-shell .mobile-bottom-nav button small { font-size:12px !important; } /* More sheet grid — 1.8x buttons */ .mobile-more-grid button { min-height:112px !important; gap:8px; border-radius:18px; } .mobile-more-grid button span { font-size:26px !important; } .mobile-more-grid button small { font-size:12.5px !important; } /* Search engine dropdown — opens upward like the other menus, and fully opaque (the 0.99-alpha + nested backdrop-filter read as transparent inside the glass deck on some devices). */ .search-engine-picker .select-menu { top:auto; bottom:calc(100% + 7px); left:0; right:auto; background:rgba(14,23,33,1); backdrop-filter:none; -webkit-backdrop-filter:none; } html.millennial-mode .search-engine-picker .select-menu { background:#ffffff; } html.millennial-mode.millennial-dark .search-engine-picker .select-menu { background:#0d1117; } /* Auto-fetched site favicons for quick links (fall back to the emoji if unavailable) */ .link-icon .link-favicon { width:22px; height:22px; border-radius:5px; object-fit:contain; display:block; background:transparent; flex:none; } .link-icon .link-fallback { display:none; } .link-icon .link-favicon.failed { display:none; } .link-icon .link-favicon.failed + .link-fallback { display:grid; } .link-icon .link-fallback.active { display:grid; } html.millennial-mode .link-icon .link-favicon { border-radius:4px; } /* ───────────────────────────────────────────────────────────── Jump bar chips — icon + name pills on every screen (desktop included). Full-width bar, smart wrapping, uses the space well. ───────────────────────────────────────────────────────────── */ @media (min-width: 901px) { .widget-jump-bar { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin:0 0 16px; padding:7px 8px; position:static; } .widget-jump { width:auto; height:auto; min-height:32px; display:inline-flex; align-items:center; gap:6px; padding:0 12px; border-radius:99px; font-size:12px; font-weight:750; border:1px solid rgba(255,255,255,.11); color:var(--accent); background:rgba(1,10,17,.22); cursor:pointer; transition:transform .16s, background .16s, border-color .16s; } .widget-jump:hover, .widget-jump:focus-visible { transform:translateY(-1px); color:var(--accent-contrast); background:var(--accent); border-color:var(--accent); } .widget-jump span { position:static !important; width:auto !important; height:auto !important; overflow:visible !important; clip:auto !important; clip-path:none !important; white-space:nowrap; } html.millennial-mode .widget-jump { background:#f6f8fa; border-color:#8c959f; color:var(--accent); } html.millennial-mode .widget-jump:hover { background:#eef1f4; color:var(--accent); } html.millennial-mode.millennial-dark .widget-jump { background:#21262d; border-color:#30363d; } } /* ───────────────────────────────────────────────────────────── Mobile app-shell: background + chrome stay fixed, only the dashboard content scrolls in its own container (reduces repaint lag, feels like a native app). Desktop untouched. ───────────────────────────────────────────────────────────── */ @media (max-width: 900px) { html.mobile-shell, html.mobile-shell body { height:100% !important; overflow:hidden !important; overscroll-behavior:none !important; } html.mobile-shell .app { position:absolute !important; top:0 !important; left:0 !important; right:0 !important; width:100% !important; height:100dvh !important; max-height:100dvh !important; overflow-y:auto !important; overflow-x:hidden !important; -webkit-overflow-scrolling:touch; overscroll-behavior-y:contain; scroll-behavior:smooth; } html.mobile-shell .background { position:fixed !important; inset:0 !important; transform:none !important; } /* fixed bottom nav stays pinned to the viewport (not the scroller) */ html.mobile-shell .mobile-bottom-nav { position:fixed !important; } } /* ───────────────────────────────────────────────────────────── Mobile perf & polish pass: 1. Opaque, flush topbar — no translucent "shadow band" above the space selector, no backdrop-filter on the sticky element. 2. Background overlay loses its full-screen blur on mobile. 3. Glass + menus lose backdrop-filter on mobile (compositing win). ───────────────────────────────────────────────────────────── */ @media (max-width: 900px) { html.mobile-shell .topbar { top: 0 !important; margin: 0 0 10px !important; padding: calc(6px + env(safe-area-inset-top)) 0 8px !important; background: #0a0f16 !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .06) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html.mobile-shell .app { padding-top: 0 !important; } html.mobile-shell .background::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: linear-gradient(120deg, rgba(4, 9, 16, .52), rgba(5, 10, 18, .32) 48%, rgba(4, 8, 14, .52)) !important; } html.mobile-shell .app-v2 .glass, html.mobile-shell .space-menu, html.mobile-shell .select-menu, html.mobile-shell .colour-menu, html.mobile-shell .emoji-picker-menu, html.mobile-shell .mobile-more-dialog[open], html.mobile-shell .toast, html.mobile-shell .widget-jump-bar { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } } /* ───────────────────────────────────────────────────────────── Mobile top cleanup — kill the visible "box" around the space selector: no border, no inner highlight, flat subtle pill. Also drop the 1px shadow line under the topbar. ───────────────────────────────────────────────────────────── */ @media (max-width: 900px) { html.mobile-shell .space-switcher-button { border: 1px solid transparent !important; background: rgba(255, 255, 255, .045) !important; box-shadow: none !important; } html.mobile-shell .topbar { box-shadow: none !important; } } /* Quick-link App type */ .link-tile.app-tile .link-icon { position:relative; } .link-tile.app-tile .link-icon::after { content:"app"; position:absolute; right:-5px; bottom:-5px; font-size:7px; font-weight:900; letter-spacing:.04em; text-transform:uppercase; color:var(--accent-dark); background:var(--accent); border-radius:6px; padding:2px 4px; line-height:1; box-shadow:0 1px 4px rgba(0,0,0,.35); } .link-type-picker { display:flex; gap:6px; } .link-type-picker button { flex:1; min-height:38px; border:1px solid var(--stroke); border-radius:11px; color:var(--muted); background:rgba(0,0,0,.14); cursor:pointer; font-size:12px; font-weight:800; } .link-type-picker button.active { color:var(--accent-dark); background:var(--accent); border-color:transparent; } .app-open-copy { margin-top:10px; padding:9px 11px; border:1px dashed var(--accent-alpha-40); border-radius:11px; color:var(--muted); font-size:11px; line-height:1.5; } /* App presets picker */ .app-preset-grid { display:flex; flex-wrap:wrap; gap:6px; } .app-preset { padding:7px 11px; border:1px solid var(--stroke); border-radius:10px; color:var(--muted); background:rgba(0,0,0,.14); cursor:pointer; font-size:11.5px; font-weight:750; transition:background .15s, border-color .15s, color .15s; } .app-preset:hover { color:var(--accent); border-color:var(--accent-alpha-50); background:var(--accent-alpha-10); } .app-preset:active { transform:translateY(1px); } /* ───────────────────────────────────────────────────────────── Desktop: Create-a-space dialog — larger, roomier, with a scrollable 2-column template grid so all presets are usable. (Mobile keeps its own near-fullscreen layout.) ───────────────────────────────────────────────────────────── */ @media (min-width: 901px) { #space-dialog { width: min(760px, calc(100vw - 48px)) !important; max-height: 88vh !important; border-radius: 26px !important; } #space-dialog .dialog-body { max-height: 88vh !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; } #space-dialog .template-filter-row { align-items:center; } #space-dialog #space-template-picker { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 7px !important; align-content: start; max-height: 40vh !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; } #space-dialog #space-template-picker [data-space-template] { min-height: 38px; justify-content: flex-start; padding: 0 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } /* ───────────────────────────────────────────────────────────── Mobile command deck — tools move ABOVE the search (compact, single row, right-aligned) so the search bar gets its own full-width row instead of being squeezed below them. ───────────────────────────────────────────────────────────── */ @media (max-width: 900px) { /* Container: single column. The 1100px rule's item placements (deck-time at grid-column:2 etc.) create a phantom 2nd column, so we reset every child's grid placement and rely on order. */ html.mobile-shell .command-deck { display:grid !important; grid-template-columns:1fr !important; } html.mobile-shell .command-deck > * { grid-column:auto !important; grid-row:auto !important; } html.mobile-shell .deck-welcome { order:1; } html.mobile-shell .deck-tools { order:2; display:flex !important; flex-wrap:nowrap; justify-content:flex-end; gap:6px; margin:0 !important; } html.mobile-shell .deck-tool { flex:0 0 auto; min-height:32px; padding:0 12px; font-size:11.5px; } html.mobile-shell .deck-search { order:3; width:100% !important; min-height:52px; margin:0 !important; } html.mobile-shell .deck-time { order:4; } } /* ───────────────────────────────────────────────────────────── Bookmarks widget — browser-style bar with folders + favicons ───────────────────────────────────────────────────────────── */ .bookmark-empty { padding:16px 6px; color:var(--quiet); font-size:12px; line-height:1.5; } .bookmark-bar { display:flex; flex-wrap:wrap; gap:6px; } .bookmark-chip, .bookmark-folder { display:inline-flex; align-items:center; gap:6px; min-height:30px; padding:0 10px; border:1px solid rgba(255,255,255,.09); border-radius:99px; background:rgba(1,10,17,.22); color:#e6edf0; text-decoration:none; font-size:11.5px; font-weight:650; cursor:pointer; transition:background .15s, border-color .15s, transform .15s; } .bookmark-chip:hover, .bookmark-folder:hover { background:rgba(255,255,255,.10); border-color:var(--accent-alpha-45); transform:translateY(-1px); } .bookmark-fav { width:15px; height:15px; border-radius:4px; object-fit:contain; flex:none; } .bookmark-folder-name { max-width:110px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .bookmark-count { font-size:9px; font-weight:800; color:var(--accent-dark); background:var(--accent); border-radius:99px; padding:1px 5px; } .bookmark-folder-wrap { position:relative; } .bookmark-menu { position:absolute; z-index:60; top:calc(100% + 6px); left:0; min-width:200px; max-width:280px; padding:6px; border:1px solid rgba(232,246,248,.16); border-radius:12px; background:rgba(13,21,31,.98); box-shadow:0 16px 38px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.07); display:none; max-height:320px; overflow:auto; } .bookmark-menu.open { display:block; } .bookmark-menu-link { display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:8px; color:#dfe9eb; text-decoration:none; font-size:11.5px; min-width:0; } .bookmark-menu-link:hover { background:rgba(255,255,255,.09); color:var(--accent-light); } .bookmark-menu-link span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .bookmark-menu-folder > strong { display:block; padding:6px 8px 2px; color:var(--muted); font-size:10.5px; } .bookmark-menu-folder .bookmark-menu { position:static; display:block; box-shadow:none; border:0; padding:0; max-height:none; } html.millennial-mode:not(.millennial-dark) .bookmark-chip, html.millennial-mode:not(.millennial-dark) .bookmark-folder { color:#24292f; background:#f6f8fa; border-color:#8c959f; } html.millennial-mode:not(.millennial-dark) .bookmark-menu { background:#ffffff; border-color:#8c959f; } html.millennial-mode:not(.millennial-dark) .bookmark-menu-link { color:#24292f; } /* ───────────────────────────────────────────────────────────── Desktop layout B — fixed glass sidebar + compact deck + denser grid. Desktop only (>=901px); mobile layout is untouched. ───────────────────────────────────────────────────────────── */ .desktop-sidebar { display:none; } @media (min-width: 901px) { /* push content right to make room for the sidebar */ html:not(.mobile-shell) body { padding-left: 214px; } html:not(.mobile-shell) .app { width:min(1400px, calc(100% - 44px)); } html:not(.mobile-shell) .desktop-sidebar { display:flex; flex-direction:column; position:fixed; top:0; left:0; bottom:0; width:214px; z-index:40; padding:16px 12px 14px; border-right:1px solid rgba(255,255,255,.08); background:rgba(7,12,19,.72); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); overflow-y:auto; overscroll-behavior-y:contain; } .sidebar-brand { display:flex; align-items:center; gap:10px; margin:2px 6px 16px; color:var(--ink); text-decoration:none; font-size:15px; font-weight:800; letter-spacing:-.02em; } .sidebar-brand .brand-mark { width:30px; height:30px; border-radius:10px; } .sidebar-brand .brand-mark svg { width:17px; height:17px; } .sidebar-nav { display:grid; gap:2px; } .sidebar-nav-item { display:flex; align-items:center; gap:10px; width:100%; min-height:36px; padding:0 10px; border:0; border-radius:10px; color:var(--muted); background:transparent; cursor:pointer; font-size:13px; font-weight:700; text-align:left; transition:background .15s, color .15s, transform .15s; } .sidebar-nav-item:hover { background:rgba(255,255,255,.07); color:var(--ink); } .sidebar-nav-item:active { transform:translateY(1px); } .sidebar-nav-item.active { color:var(--accent-dark); background:var(--accent); } .sidebar-nav-item[data-off] { opacity:.45; } .sidebar-nav-item .sni { flex:none; width:20px; text-align:center; font-size:14px; } .sidebar-label { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .sidebar-foot { margin-top:auto; padding-top:12px; border-top:1px solid rgba(255,255,255,.08); display:grid; gap:2px; } /* compact command deck */ html:not(.mobile-shell) .command-deck { min-height:0; gap:18px; padding:18px 22px; margin-bottom:12px; grid-template-columns:minmax(240px,1fr) minmax(300px,1.1fr) minmax(200px,.55fr); } html:not(.mobile-shell) .deck-welcome h1 { font-size:clamp(23px,2.4vw,31px); } html:not(.mobile-shell) .deck-welcome .hero-copy { display:none; } html:not(.mobile-shell) .quote { display:none; } html:not(.mobile-shell) #clock { font-size:clamp(30px,3vw,40px); } /* denser widget grid + cards */ html:not(.mobile-shell) .widget-board { gap:12px; } html:not(.mobile-shell) .widget-board > .panel { border-radius:16px; } html:not(.mobile-shell) .panel { padding:18px; } html:not(.mobile-shell) .panel-header { margin-bottom:12px; } html:not(.mobile-shell) .link-tile { min-height:72px; } html:not(.mobile-shell) .link-icon { width:34px; height:34px; border-radius:11px; font-size:17px; } html:not(.mobile-shell) .widget-jump-bar { margin-bottom:12px; } /* millennial sidebar */ html.millennial-mode:not(.millennial-dark) .desktop-sidebar { background:#ffffff; border-color:#8c959f; backdrop-filter:none; -webkit-backdrop-filter:none; } html.millennial-mode:not(.millennial-dark) .sidebar-brand { color:#24292f; } html.millennial-mode:not(.millennial-dark) .sidebar-nav-item { color:#24292f; } html.millennial-mode:not(.millennial-dark) .sidebar-nav-item:hover { background:#f6f8fa; } html.millennial-mode:not(.millennial-dark) .sidebar-nav-item.active { color:#ffffff; background:var(--accent); } html.millennial-mode.millennial-dark .desktop-sidebar { background:#0d1117; border-color:#30363d; } html.millennial-mode.millennial-dark .sidebar-nav-item { color:#c9d1d9; } html.millennial-mode.millennial-dark .sidebar-nav-item:hover { background:#21262d; } } /* ───────────────────────────────────────────────────────────── Desktop: Settings dialog — large like Notion (fills most of the screen, content scrolls inside). Mobile keeps its own size. ───────────────────────────────────────────────────────────── */ @media (min-width: 901px) { #settings-dialog { width: min(880px, calc(100vw - 48px)) !important; max-width: 880px !important; max-height: 86vh !important; border-radius: 26px !important; } #settings-dialog .dialog-body { max-height: 86vh !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; padding: 28px 30px 30px !important; } #settings-dialog .setting-section { padding: 20px 0; max-width: 760px; } #settings-dialog .setting-heading { font-size: 13px; margin-bottom: 13px; } #settings-dialog .toggle-row, #settings-dialog .text-size-row, #settings-dialog .millennial-theme-row { padding: 9px 0; } #settings-dialog .privacy-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } } /* ───────────────────────────────────────────────────────────── Millennial sidebar active item — subtle tint + accent text, not a solid accent slab (the slab looked broken/weird on the flat GitHub-style theme, esp. with light/yellow accents). ───────────────────────────────────────────────────────────── */ html.millennial-mode .sidebar-nav-item.active, html.millennial-mode .sidebar-nav-item.active:hover { color: var(--accent) !important; -webkit-text-fill-color: var(--accent) !important; background: var(--accent-alpha-15) !important; } html.millennial-mode.millennial-dark .sidebar-nav-item.active, html.millennial-mode.millennial-dark .sidebar-nav-item.active:hover { background: var(--accent-alpha-25) !important; } html.millennial-mode .sidebar-nav-item.active .sni { color: var(--accent) !important; } /* ───────────────────────────────────────────────────────────── UI bug-fix pass: per-widget collapse, bigger create-space modal, draggable manage-spaces, modal scroll lock, widget-library columns. ───────────────────────────────────────────────────────────── */ .widget-collapse-toggle { flex:none; width:28px; height:28px; display:grid; place-items:center; margin-left:auto; border:1px solid rgba(255,255,255,.10); border-radius:9px; color:var(--muted); background:rgba(0,0,0,.13); cursor:pointer; font-size:12px; font-weight:900; } .widget-collapse-toggle:hover { color:var(--accent); border-color:var(--accent-alpha-45); background:rgba(255,255,255,.08); } #widget-board > .panel.widget-collapsed .widget-collapse-toggle { color:var(--accent); } html.millennial-mode:not(.millennial-dark) .widget-collapse-toggle { color:#24292f; background:#f6f8fa; border-color:#8c959f; } html.millennial-mode.millennial-dark .widget-collapse-toggle { color:#8b949e; background:#21262d; border-color:#30363d; } html.modal-open, body.modal-open { overflow:hidden !important; } html.modal-open .app { overscroll-behavior:contain; } body.modal-open .desktop-sidebar { overscroll-behavior:contain; } .space-drag-handle { width:28px; height:32px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.10); border-radius:10px; color:var(--quiet); background:rgba(0,0,0,.14); cursor:grab; user-select:none; font-size:16px; } .space-drag-handle:hover { color:var(--accent); border-color:var(--accent-alpha-35); background:rgba(255,255,255,.08); } .space-drag-handle:active { cursor:grabbing; } .space-manager-card { transition:transform .16s ease, opacity .16s ease, border-color .16s ease, background .16s ease; } .space-manager-card.dragging { opacity:.45; transform:scale(.992); } .space-manager-card.drag-over { border-color:var(--accent); background:var(--accent-alpha-10); } @media (min-width:901px) { #space-dialog { width:min(1080px, calc(100vw - 56px)) !important; max-width:1080px !important; max-height:94vh !important; } #space-dialog .dialog-body { max-height:94vh !important; overflow-y:auto !important; } #space-dialog #space-template-picker { grid-template-columns:repeat(3, minmax(0, 1fr)) !important; max-height:60vh !important; } #widgets-dialog { width:min(1120px, calc(100vw - 56px)) !important; max-width:1120px !important; } #widget-toggle-list.upgraded { display:grid !important; grid-template-columns:repeat(4, minmax(0, 1fr)) !important; gap:14px !important; align-items:start; } #widget-toggle-list.upgraded .widget-library-group { margin-top:0 !important; min-width:0; } #widget-toggle-list.upgraded .widget-toggle { grid-template-columns:minmax(0, 1fr) auto !important; gap:8px !important; padding:10px !important; } #widget-toggle-list.upgraded .widget-toggle-tools { display:grid !important; grid-template-columns:1fr !important; gap:5px !important; } #widget-toggle-list.upgraded .widget-size-choice { width:100% !important; min-width:0 !important; justify-content:center; } #widget-toggle-list.upgraded .widget-toggle-top strong { font-size:12px !important; } #widget-toggle-list.upgraded .widget-toggle-description { font-size:9.5px !important; } } @media (min-width:1280px) { #space-dialog #space-template-picker { grid-template-columns:repeat(4, minmax(0, 1fr)) !important; } } @media (max-width:760px) { .widget-collapse-toggle { width:26px; height:26px; } .space-manager-card { grid-template-columns:28px 32px minmax(0,1fr) !important; } .space-manager-controls { grid-column:1 / -1 !important; } } /* ───────────────────────────────────────────────────────────── Settings + Create Space desktop UI fix - Settings becomes a fast multi-column settings board. - Create Space gets category chips + larger template area. Desktop only; mobile sheets stay untouched. ───────────────────────────────────────────────────────────── */ @media (min-width: 901px) { /* Settings: no blurry heavy surface while scrolling; sections become cards. */ #settings-dialog { width: min(1120px, calc(100vw - 48px)) !important; max-width: 1120px !important; max-height: 92vh !important; background: rgba(10, 16, 26, .98) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html.millennial-mode:not(.millennial-dark) #settings-dialog { background:#ffffff !important; } html.millennial-mode.millennial-dark #settings-dialog { background:#0d1117 !important; } #settings-dialog .dialog-body { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 14px !important; align-items: start !important; max-height: 92vh !important; overflow-y: auto !important; overscroll-behavior: contain !important; padding: 26px !important; } #settings-dialog .dialog-title, #settings-dialog > .dialog-body > .dialog-description { grid-column: 1 / -1 !important; } #settings-dialog .dialog-title { position: sticky; top: -26px; z-index: 5; margin: -26px -26px 0 !important; padding: 24px 26px 12px !important; background: rgba(10,16,26,.99); border-bottom: 1px solid rgba(255,255,255,.08); } html.millennial-mode:not(.millennial-dark) #settings-dialog .dialog-title { background:#ffffff; border-color:#8c959f; } html.millennial-mode.millennial-dark #settings-dialog .dialog-title { background:#0d1117; border-color:#30363d; } #settings-dialog .setting-section { max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: 16px !important; border: 1px solid rgba(255,255,255,.09) !important; border-radius: 18px !important; background: rgba(255,255,255,.045) !important; } #settings-dialog .setting-section:first-of-type { border-top: 1px solid rgba(255,255,255,.09) !important; } #settings-dialog .setting-section.privacy-backup-section, #settings-dialog .setting-section.google-backup-section, #settings-dialog .setting-section:last-of-type { grid-column: span 3 !important; } #settings-dialog .privacy-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } #settings-dialog .cloud-backup-card { grid-template-columns: minmax(0,1fr) auto !important; } #settings-dialog .background-options { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } html.millennial-mode:not(.millennial-dark) #settings-dialog .setting-section { background:#f6f8fa !important; border-color:#8c959f !important; } html.millennial-mode.millennial-dark #settings-dialog .setting-section { background:#161b22 !important; border-color:#30363d !important; } /* Create Space: larger dialog and template categories as visible chips, not a hidden dropdown. */ #space-dialog { width: min(1180px, calc(100vw - 48px)) !important; max-width: 1180px !important; height: min(760px, calc(100vh - 48px)) !important; max-height: calc(100vh - 48px) !important; background: rgba(10, 16, 26, .98) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html.millennial-mode:not(.millennial-dark) #space-dialog { background:#ffffff !important; } html.millennial-mode.millennial-dark #space-dialog { background:#0d1117 !important; } #space-dialog .dialog-body { height: 100% !important; max-height: none !important; display: grid !important; grid-template-columns: 320px minmax(0, 1fr) !important; grid-template-rows: auto auto minmax(0, 1fr) auto !important; gap: 14px 22px !important; overflow: hidden !important; padding: 26px !important; } #space-dialog .dialog-title, #space-dialog .dialog-description { grid-column: 1 / -1 !important; margin: 0 !important; } #space-dialog .dialog-description { max-width: 760px; } #space-dialog .form-row { grid-column: 1 !important; grid-row: 3 !important; display: block !important; align-self: start !important; } #space-dialog .field:has(#space-template) { grid-column: 2 !important; grid-row: 3 !important; min-height: 0 !important; display: grid !important; grid-template-rows: auto auto auto minmax(0, 1fr) !important; gap: 10px !important; margin: 0 !important; } #space-dialog .dialog-actions { grid-column: 1 / -1 !important; grid-row: 4 !important; margin-top: 0 !important; padding-top: 12px !important; border-top: 1px solid rgba(255,255,255,.08); } #space-dialog .template-filter-row { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; align-items: start !important; margin: 0 !important; } #space-dialog .template-category-picker { width: 100% !important; min-width: 0 !important; } #space-dialog #space-template-category-trigger { display: none !important; } #space-dialog #space-template-category-menu, #space-dialog #space-template-category-menu.hidden { position: static !important; display: flex !important; flex-wrap: wrap !important; gap: 7px !important; width: 100% !important; max-height: none !important; overflow: visible !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } #space-dialog #space-template-category-menu button { width: auto !important; min-height: 32px !important; padding: 0 11px !important; border: 1px solid rgba(255,255,255,.11) !important; border-radius: 999px !important; color: var(--muted) !important; background: rgba(255,255,255,.045) !important; font-size: 11px !important; font-weight: 800 !important; } #space-dialog #space-template-category-menu button:hover, #space-dialog #space-template-category-menu button.active { color: var(--accent-contrast) !important; background: var(--accent) !important; border-color: var(--accent) !important; } #space-dialog .template-picker-count { margin: 0 !important; } #space-dialog .template-search { margin: 0 !important; min-height: 40px !important; } #space-dialog #space-template-picker { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; max-height: none !important; min-height: 0 !important; overflow-y: auto !important; overscroll-behavior: contain !important; padding: 2px 4px 2px 0 !important; } #space-dialog #space-template-picker [data-space-template] { justify-content: center !important; min-height: 40px !important; padding: 0 10px !important; white-space: normal !important; line-height: 1.15 !important; text-align: center !important; } } @media (min-width: 1320px) { #space-dialog #space-template-picker { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } } /* ───────────────────────────────────────────────────────────── Settings v3 — true columns, no large CSS-grid vertical gaps. Sections are grouped into independent columns by app.js. ───────────────────────────────────────────────────────────── */ @media (min-width: 901px) { #settings-dialog .dialog-body { display: block !important; max-height: 92vh !important; overflow-y: auto !important; overscroll-behavior: contain !important; padding: 26px !important; } #settings-dialog .dialog-title { position: sticky; top: -26px; z-index: 5; margin: -26px -26px 0 !important; padding: 24px 26px 12px !important; background: rgba(10,16,26,.99); border-bottom: 1px solid rgba(255,255,255,.08); } #settings-dialog > .dialog-body > .dialog-description { margin: 12px 0 16px !important; max-width: 760px; } #settings-dialog .settings-grid-board { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 14px !important; align-items: start !important; } #settings-dialog .settings-column { display: grid !important; gap: 14px !important; align-content: start !important; min-width: 0 !important; } #settings-dialog .settings-grid-board .setting-section { grid-column: auto !important; max-width: none !important; min-width: 0 !important; width: 100% !important; margin: 0 !important; padding: 16px !important; border: 1px solid rgba(255,255,255,.09) !important; border-radius: 18px !important; background: rgba(255,255,255,.045) !important; } #settings-dialog .settings-grid-board .privacy-grid, #settings-dialog .settings-grid-board .cloud-backup-card { grid-template-columns: 1fr !important; } #settings-dialog .settings-grid-board .cloud-backup-actions { justify-content: flex-start !important; } #settings-dialog .settings-grid-board .background-options { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } html.millennial-mode:not(.millennial-dark) #settings-dialog .dialog-title { background:#ffffff !important; border-color:#8c959f !important; } html.millennial-mode.millennial-dark #settings-dialog .dialog-title { background:#0d1117 !important; border-color:#30363d !important; } html.millennial-mode:not(.millennial-dark) #settings-dialog .settings-grid-board .setting-section { background:#f6f8fa !important; border-color:#8c959f !important; } html.millennial-mode.millennial-dark #settings-dialog .settings-grid-board .setting-section { background:#161b22 !important; border-color:#30363d !important; } } @media (min-width: 901px) and (max-width: 1120px) { #settings-dialog .settings-grid-board { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* ───────────────────────────────────────────────────────────── Login/profile + mobile control polish ───────────────────────────────────────────────────────────── */ .cloud-profile-button { display:grid !important; } .cloud-profile-button.signed-out { color:var(--accent-dark); background:var(--accent); border-color:var(--accent); } .cloud-profile-button.signed-out::after { content:""; position:absolute; inset:auto 4px 4px auto; width:7px; height:7px; border:2px solid rgba(8,14,22,.96); border-radius:50%; background:#ffffff; } .topbar-start { max-width:100%; } .space-switcher-button { max-width:190px; min-width:112px; } @media (min-width:901px) { .topbar-start { flex:1; } .cloud-profile-button { margin-left:2px; } } @media (max-width:900px) { .space-switcher-button { max-width:100% !important; min-width:0 !important; } .widget-collapse-toggle { display:none !important; } /* mobile already has tap-header accordion */ .back-to-top { width:48px !important; height:48px !important; right:14px !important; bottom:92px !important; font-size:22px !important; opacity:.96 !important; border-width:1px !important; box-shadow:0 14px 36px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.12) !important; } } @media (max-width:360px) { .back-to-top { width:44px !important; height:44px !important; bottom:86px !important; font-size:20px !important; } } /* Move Widget Library drag handles away from the extreme left on every screen. */ .widget-toggle-list.upgraded .widget-toggle { grid-template-columns:minmax(0,1fr) 34px auto !important; } .widget-toggle-list.upgraded .widget-drag-handle { grid-column:2 !important; grid-row:1 !important; justify-self:center !important; align-self:start !important; } .widget-toggle-list.upgraded .widget-toggle-main { grid-column:1 !important; grid-row:1 / span 2 !important; } .widget-toggle-list.upgraded .widget-toggle-side { grid-column:3 !important; grid-row:1 !important; align-self:start !important; justify-content:flex-end !important; } @media (max-width:760px) { .widget-toggle-list.upgraded .widget-toggle, html.mobile-shell .widget-toggle-list.upgraded .widget-toggle { grid-template-columns:minmax(0,1fr) 32px auto !important; } .widget-toggle-list.upgraded .widget-toggle-tools, html.mobile-shell .widget-toggle-list.upgraded .widget-toggle-tools { grid-column:1 / -1 !important; } } /* ───────────────────────────────────────────────────────────── Drag handle cleanup — simple naked dots, left aligned again. No boxed handle UI. Applies to widget library, manage spaces, and syllabus drag handles. ───────────────────────────────────────────────────────────── */ .widget-toggle-list.upgraded .widget-toggle, html.mobile-shell .widget-toggle-list.upgraded .widget-toggle { grid-template-columns: 20px minmax(0, 1fr) auto !important; gap: 10px !important; } .widget-toggle-list.upgraded .widget-drag-handle, html.mobile-shell .widget-toggle-list.upgraded .widget-drag-handle, .space-drag-handle, .syllabus-drag-handle { width: 18px !important; height: auto !important; min-height: 28px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--quiet) !important; font-size: 18px !important; line-height: 1 !important; cursor: grab !important; opacity: .78; } .widget-toggle-list.upgraded .widget-drag-handle { grid-column: 1 !important; grid-row: 1 / span 2 !important; justify-self: start !important; align-self: center !important; } .widget-toggle-list.upgraded .widget-toggle-main, html.mobile-shell .widget-toggle-list.upgraded .widget-toggle-main { grid-column: 2 !important; grid-row: 1 / span 2 !important; } .widget-toggle-list.upgraded .widget-toggle-side, html.mobile-shell .widget-toggle-list.upgraded .widget-toggle-side { grid-column: 3 !important; grid-row: 1 !important; } .widget-toggle-list.upgraded .widget-toggle-tools, html.mobile-shell .widget-toggle-list.upgraded .widget-toggle-tools { grid-column: 2 / -1 !important; } .widget-toggle-list.upgraded .widget-drag-handle:hover, .space-drag-handle:hover, .syllabus-drag-handle:hover { color: var(--accent) !important; background: transparent !important; border: 0 !important; opacity: 1; } .space-manager-card, html.mobile-shell .space-manager-card { grid-template-columns: 20px 32px minmax(0,1fr) auto !important; } .space-drag-handle { grid-column: 1 !important; align-self: center !important; } .syllabus-subject-head .syllabus-tools, .syllabus-chapter .syllabus-tools { gap: 6px !important; } html.millennial-mode:not(.millennial-dark) .widget-drag-handle, html.millennial-mode:not(.millennial-dark) .space-drag-handle, html.millennial-mode:not(.millennial-dark) .syllabus-drag-handle, html.millennial-mode.millennial-dark .widget-drag-handle, html.millennial-mode.millennial-dark .space-drag-handle, html.millennial-mode.millennial-dark .syllabus-drag-handle { background: transparent !important; border: 0 !important; box-shadow: none !important; } /* ───────────────────────────────────────────────────────────── Final premium polish pass: guided empty states, Google backup trust dot, and simple :: drag handles. ───────────────────────────────────────────────────────────── */ .premium-empty { display:grid !important; gap:5px !important; justify-items:center; text-align:center; padding:22px 10px !important; } .premium-empty strong { display:block; color:var(--ink); font-size:13px; font-weight:900; letter-spacing:-.01em; } .premium-empty span { display:block; max-width:420px; color:var(--quiet); font-size:11px; line-height:1.5; } .cloud-profile-button.backup-fresh::before { content:""; position:absolute; right:-1px; top:-1px; width:10px; height:10px; border:2px solid rgba(8,14,22,.96); border-radius:50%; background:#9ee8b4; box-shadow:0 0 0 3px rgba(158,232,180,.12); } .cloud-profile-button.signed-out.backup-fresh::before { display:none; } .widget-drag-handle, .space-drag-handle, .syllabus-drag-handle { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; font-size: 14px !important; letter-spacing: -2px !important; writing-mode: vertical-rl; text-orientation: mixed; } .syllabus-drag-handle { writing-mode: horizontal-tb; letter-spacing:-2px !important; } html.millennial-mode:not(.millennial-dark) .premium-empty strong, html.millennial-mode:not(.millennial-dark) .premium-empty span { color:#24292f !important; -webkit-text-fill-color:#24292f !important; opacity:1 !important; } html.millennial-mode .cloud-profile-button.backup-fresh::before { border-color:#ffffff; } html.millennial-mode.millennial-dark .cloud-profile-button.backup-fresh::before { border-color:#0d1117; } /* Final handle correction: show exactly two plain colon marks side-by-side. */ .widget-drag-handle, .space-drag-handle, .syllabus-drag-handle { writing-mode: horizontal-tb !important; text-orientation: mixed !important; letter-spacing: -2px !important; font-size: 16px !important; } /* ───────────────────────────────────────────────────────────── Daily Study Pulse — compact intelligence inside Day at a glance. ───────────────────────────────────────────────────────────── */ .study-pulse { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; } .study-pulse span { display:inline-flex; align-items:center; gap:5px; min-height:26px; padding:0 8px; border:1px solid var(--accent-alpha-20); border-radius:999px; color:var(--muted); background:var(--accent-alpha-10); font-size:10px; font-weight:800; } .study-pulse b { color:var(--accent); font-size:10px; line-height:1; } html.millennial-mode:not(.millennial-dark) .study-pulse span { color:#24292f !important; -webkit-text-fill-color:#24292f !important; background:#f6f8fa; border-color:#8c959f; } html.millennial-mode.millennial-dark .study-pulse span { color:#c9d1d9; background:#161b22; border-color:#30363d; } html.mobile-shell .study-pulse { gap:5px; margin-top:9px; } html.mobile-shell .study-pulse span { min-height:24px; padding:0 7px; font-size:9.5px; } /* ───────────────────────────────────────────────────────────── Google Backup dot v2 — status dot sits on the RIGHT side of the profile icon and changes colour by backup health. Grey = signed out / no backup, green = fresh, yellow = old, red = last backup failed. ───────────────────────────────────────────────────────────── */ .cloud-profile-button { position: relative !important; overflow: visible !important; } .cloud-profile-button::before { display:none !important; } .cloud-profile-button::after { content:""; position:absolute; right:-5px; top:50%; transform:translateY(-50%); width:11px; height:11px; border:2px solid rgba(8,14,22,.96); border-radius:50%; background:#8b949e; box-shadow:0 0 0 3px rgba(139,148,158,.12); } .cloud-profile-button.signed-out::after, .cloud-profile-button.backup-none::after { background:#8b949e; box-shadow:0 0 0 3px rgba(139,148,158,.12); } .cloud-profile-button.backup-fresh::after { background:#9ee8b4; box-shadow:0 0 0 3px rgba(158,232,180,.16); } .cloud-profile-button.backup-stale::after { background:#f2c697; box-shadow:0 0 0 3px rgba(242,198,151,.15); } .cloud-profile-button.backup-error::after { background:#ff9b9b; box-shadow:0 0 0 3px rgba(255,155,155,.16); } .cloud-profile-button.has-photo img { border-radius: inherit; } html.millennial-mode:not(.millennial-dark) .cloud-profile-button::after { border-color:#ffffff; } html.millennial-mode.millennial-dark .cloud-profile-button::after { border-color:#0d1117; } @media (max-width:900px) { .cloud-profile-button::after { right:-4px; width:10px; height:10px; } } /* ───────────────────────────────────────────────────────────── Days Remaining widget — compact countdown for exam/target dates. ───────────────────────────────────────────────────────────── */ .countdown-body { display:grid; grid-template-columns:72px minmax(0,1fr); gap:12px; align-items:center; margin-bottom:12px; } .countdown-number { width:72px; height:72px; display:grid; place-items:center; border:1px solid var(--accent-alpha-25); border-radius:20px; color:var(--accent); background:var(--accent-alpha-10); font-size:28px; font-weight:950; letter-spacing:-.05em; } .countdown-number[data-state="urgent"] { color:#ff9b9b; border-color:rgba(255,155,155,.30); background:rgba(255,155,155,.10); } .countdown-number[data-state="soon"] { color:#f2c697; border-color:rgba(242,198,151,.30); background:rgba(242,198,151,.10); } .countdown-number[data-state="past"] { color:var(--quiet); } .countdown-copy strong { display:block; color:#e8eff1; font-size:13px; line-height:1.25; } .countdown-copy span { display:block; margin-top:5px; color:var(--quiet); font-size:10.5px; line-height:1.45; } .countdown-form { display:grid; grid-template-columns:minmax(0,1fr) 136px auto; gap:7px; } .countdown-form input { min-width:0; color:var(--ink); border:1px solid rgba(255,255,255,.11); border-radius:10px; outline:0; background:rgba(1,10,17,.23); padding:9px 10px; font-size:11px; } .countdown-form input:focus { border-color:var(--accent-alpha-50); } html.millennial-mode:not(.millennial-dark) .countdown-copy strong, html.millennial-mode:not(.millennial-dark) .countdown-copy span { color:#24292f !important; -webkit-text-fill-color:#24292f !important; opacity:1 !important; } html.millennial-mode .countdown-form input { color:#24292f; background:#ffffff; border-color:#8c959f; } html.millennial-mode.millennial-dark .countdown-form input { color:#c9d1d9; background:#0d1117; border-color:#30363d; } html.mobile-shell .countdown-body { grid-template-columns:58px minmax(0,1fr); gap:9px; margin-bottom:10px; } html.mobile-shell .countdown-number { width:58px; height:58px; border-radius:16px; font-size:23px; } html.mobile-shell .countdown-form { grid-template-columns:1fr !important; } @media (max-width:420px) { .countdown-body { grid-template-columns:1fr; } .countdown-number { width:100%; height:58px; } } /* ───────────────────────────────────────────────────────────── Today Plan widget — generated guidance without a new data model. ───────────────────────────────────────────────────────────── */ .today-plan-list { display:grid; gap:8px; margin:0; padding:0; list-style:none; } .today-plan-item { display:grid; grid-template-columns:24px 30px minmax(0,1fr); gap:9px; align-items:start; padding:10px; border:1px solid rgba(255,255,255,.08); border-radius:13px; background:rgba(1,10,17,.17); } .today-plan-index { width:24px; height:24px; display:grid; place-items:center; border-radius:9px; color:var(--accent-dark); background:var(--accent); font-size:10px; font-weight:950; } .today-plan-icon { width:30px; height:30px; display:grid; place-items:center; border-radius:10px; color:var(--accent); background:var(--accent-alpha-10); border:1px solid var(--accent-alpha-20); font-size:13px; font-weight:900; } .today-plan-copy { min-width:0; } .today-plan-copy strong { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#e8eff1; font-size:12px; } .today-plan-copy small { display:block; margin-top:3px; color:var(--quiet); font-size:10.5px; line-height:1.45; } html.millennial-mode:not(.millennial-dark) .today-plan-item { background:#f6f8fa; border-color:#8c959f; } html.millennial-mode:not(.millennial-dark) .today-plan-copy strong, html.millennial-mode:not(.millennial-dark) .today-plan-copy small { color:#24292f !important; -webkit-text-fill-color:#24292f !important; opacity:1 !important; } html.millennial-mode.millennial-dark .today-plan-item { background:#161b22; border-color:#30363d; } html.mobile-shell .today-plan-item { grid-template-columns:22px 28px minmax(0,1fr); gap:7px; padding:8px; } html.mobile-shell .today-plan-copy strong { font-size:11px; } html.mobile-shell .today-plan-copy small { font-size:9.5px; } /* ───────────────────────────────────────────────────────────── Study Log widget — simple session log + 7-day improvement graph. ───────────────────────────────────────────────────────────── */ .study-log-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:12px; } .study-stat { padding:10px; border:1px solid rgba(255,255,255,.08); border-radius:13px; background:rgba(1,10,17,.16); } .study-stat strong { display:block; color:var(--accent); font-size:16px; font-weight:850; } .study-stat strong[data-state="up"] { color:#9ee8b4; } .study-stat strong[data-state="down"] { color:#ffb4ae; } .study-stat strong[data-state="steady"] { color:#f2c697; } .study-stat span { display:block; margin-top:2px; color:var(--quiet); font-size:9.5px; } .study-chart-wrap { padding:12px; border:1px solid rgba(255,255,255,.08); border-radius:14px; background:rgba(1,10,17,.14); margin-bottom:12px; } .study-chart { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:7px; align-items:end; min-height:104px; } .study-bar { min-width:0; display:grid; grid-template-rows:1fr auto; gap:6px; align-items:end; justify-items:center; } .study-bar i { width:100%; max-width:28px; height:var(--h,6%); min-height:6px; display:block; border-radius:9px 9px 3px 3px; background:linear-gradient(180deg,var(--accent),var(--accent-2,#83bdf0)); box-shadow:0 6px 18px var(--accent-alpha-10); transition:height .25s ease; } .study-bar span { color:var(--quiet); font-size:9px; font-weight:800; } .study-insight { margin:9px 0 0; color:var(--muted); font-size:11px; line-height:1.45; } .study-session-list { display:grid; gap:7px; margin:0; padding:0; list-style:none; } .study-session { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; padding:8px 9px; border:1px solid rgba(255,255,255,.075); border-radius:11px; background:rgba(1,10,17,.17); } .study-session strong { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#e7eef0; font-size:12px; } .study-session small { display:block; margin-top:2px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:var(--quiet); font-size:9.5px; } .study-session button { width:23px; height:23px; display:grid; place-items:center; padding:0; border:0; border-radius:7px; color:var(--muted); background:transparent; cursor:pointer; font-size:15px; } .study-session button:hover { color:#ffc7c7; background:rgba(155,55,61,.17); } .study-log-form { display:grid; grid-template-columns:minmax(0,.8fr) 90px minmax(0,1.2fr) auto; gap:7px; margin-top:12px; } .study-log-form input { min-width:0; color:var(--ink); border:1px solid rgba(255,255,255,.11); border-radius:10px; outline:0; background:rgba(1,10,17,.23); padding:9px 10px; font-size:11px; } .study-log-form input:focus { border-color:var(--accent-alpha-50); } .study-empty { padding:18px 8px; color:var(--quiet); text-align:center; font-size:11px; line-height:1.5; } html.millennial-mode:not(.millennial-dark) .study-stat, html.millennial-mode:not(.millennial-dark) .study-chart-wrap, html.millennial-mode:not(.millennial-dark) .study-session { background:#f6f8fa; border-color:#8c959f; } html.millennial-mode:not(.millennial-dark) .study-session strong, html.millennial-mode:not(.millennial-dark) .study-session small, html.millennial-mode:not(.millennial-dark) .study-insight, html.millennial-mode:not(.millennial-dark) .study-empty { color:#24292f !important; -webkit-text-fill-color:#24292f !important; opacity:1 !important; } html.millennial-mode.millennial-dark .study-stat, html.millennial-mode.millennial-dark .study-chart-wrap, html.millennial-mode.millennial-dark .study-session { background:#161b22; border-color:#30363d; } html.millennial-mode .study-log-form input { color:#24292f; background:#ffffff; border-color:#8c959f; } html.millennial-mode.millennial-dark .study-log-form input { color:#c9d1d9; background:#0d1117; border-color:#30363d; } html.mobile-shell .study-log-summary { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; } html.mobile-shell .study-chart { min-height:86px; } html.mobile-shell .study-log-form { grid-template-columns:1fr !important; } @media (max-width:420px) { .study-log-summary { grid-template-columns:1fr; } } /* ───────────────────────────────────────────────────────────── Mistake Notebook intelligence layer — tags, screenshots, spaced repetition metadata, forgotten tracking. ───────────────────────────────────────────────────────────── */ .mistake-extra-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px; margin-top:7px; align-items:center; } .mistake-extra-row input { min-width:0; color:var(--ink); border:1px solid rgba(255,255,255,.11); border-radius:10px; outline:0; background:rgba(1,10,17,.23); padding:9px 10px; font-size:11px; } .mistake-shot-button { min-height:38px; white-space:nowrap; } .mistake-tags { display:flex; flex-wrap:wrap; gap:5px; margin:0 0 8px; } .mistake-tags span { display:inline-flex; min-height:22px; align-items:center; padding:0 7px; border:1px solid var(--accent-alpha-20); border-radius:999px; color:var(--accent); background:var(--accent-alpha-10); font-size:9px; font-weight:850; } .mistake-shot-preview { display:block; width:100%; max-width:260px; margin-top:9px; padding:0; overflow:hidden; border:1px solid rgba(255,255,255,.11); border-radius:12px; background:rgba(0,0,0,.14); cursor:pointer; } .mistake-shot-preview img { display:block; width:100%; height:auto; max-height:150px; object-fit:cover; } .mistake-meta-line { margin-top:8px; color:var(--quiet); font-size:9.5px; font-weight:750; } html.millennial-mode:not(.millennial-dark) .mistake-extra-row input, html.millennial-mode:not(.millennial-dark) .mistake-shot-preview { color:#24292f; background:#ffffff; border-color:#8c959f; } html.millennial-mode:not(.millennial-dark) .mistake-meta-line { color:#24292f !important; -webkit-text-fill-color:#24292f !important; opacity:1 !important; } html.millennial-mode.millennial-dark .mistake-extra-row input, html.millennial-mode.millennial-dark .mistake-shot-preview { color:#c9d1d9; background:#0d1117; border-color:#30363d; } html.mobile-shell .mistake-extra-row { grid-template-columns:1fr; } /* ───────────────────────────────────────────────────────────── Smart Study Analytics v2 — monthly/lifetime/streak/focus, subject distribution, heatmap, consistency insights. ───────────────────────────────────────────────────────────── */ .study-log-summary { grid-template-columns:repeat(6,minmax(0,1fr)); } .study-chart-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; } .study-chart-head strong { color:#e8eff1; font-size:12px; } .study-chart-head span { color:var(--quiet); font-size:10px; font-weight:800; } .study-analytics-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin:12px 0; } .study-analytics-grid section { min-width:0; padding:12px; border:1px solid rgba(255,255,255,.08); border-radius:14px; background:rgba(1,10,17,.14); } .study-analytics-grid h3 { margin:0 0 10px; color:#e8eff1; font-size:12px; letter-spacing:-.01em; } .study-subject-bars { display:grid; gap:8px; } .subject-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px; align-items:center; font-size:10px; color:var(--muted); } .subject-row span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .subject-row b { color:var(--accent); font-size:9.5px; } .subject-row i { grid-column:1 / -1; display:block; width:var(--w,0%); height:5px; border-radius:99px; background:linear-gradient(90deg,var(--accent),var(--accent-2,#83bdf0)); min-width:6px; } .study-heatmap { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; } .study-heatmap span { aspect-ratio:1; border-radius:5px; border:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.045); } .study-heatmap span[data-level="1"] { background:var(--accent-alpha-15); } .study-heatmap span[data-level="2"] { background:var(--accent-alpha-30); } .study-heatmap span[data-level="3"] { background:var(--accent-alpha-45); } .study-heatmap span[data-level="4"] { background:var(--accent); } .study-insight-list { display:grid; gap:7px; } .study-insight-list div { display:grid; gap:1px; padding:7px 8px; border:1px solid rgba(255,255,255,.07); border-radius:10px; background:rgba(255,255,255,.035); } .study-insight-list strong { color:var(--accent); font-size:11px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .study-insight-list span { color:var(--quiet); font-size:9px; } html.millennial-mode:not(.millennial-dark) .study-chart-head strong, html.millennial-mode:not(.millennial-dark) .study-chart-head span, html.millennial-mode:not(.millennial-dark) .study-analytics-grid h3, html.millennial-mode:not(.millennial-dark) .subject-row, html.millennial-mode:not(.millennial-dark) .study-insight-list span { color:#24292f !important; -webkit-text-fill-color:#24292f !important; opacity:1 !important; } html.millennial-mode:not(.millennial-dark) .study-analytics-grid section, html.millennial-mode:not(.millennial-dark) .study-insight-list div { background:#f6f8fa; border-color:#8c959f; } html.millennial-mode.millennial-dark .study-analytics-grid section, html.millennial-mode.millennial-dark .study-insight-list div { background:#161b22; border-color:#30363d; } @media (max-width: 1100px) { .study-log-summary { grid-template-columns:repeat(3,minmax(0,1fr)); } .study-analytics-grid { grid-template-columns:1fr; } } html.mobile-shell .study-log-summary { grid-template-columns:repeat(2,minmax(0,1fr)) !important; } html.mobile-shell .study-analytics-grid { grid-template-columns:1fr !important; gap:8px; } html.mobile-shell .study-analytics-grid section { padding:10px; } /* ───────────────────────────────────────────────────────────── Adaptive Planning Engine — priority/duration badges for Today Plan. ───────────────────────────────────────────────────────────── */ .today-plan-item { position:relative; } .today-plan-item[data-priority="High"] { border-color:rgba(255,155,155,.20); } .today-plan-item[data-priority="High"] .today-plan-index { background:#ffb4ae; color:#211; } .today-plan-item[data-priority="Medium"] .today-plan-index { background:#f2c697; color:#211; } .today-plan-item[data-priority="Low"] .today-plan-index { background:#a8e5b8; color:#10241e; } .today-plan-item[data-priority="Break"] .today-plan-index { background:#83bdf0; color:#07151f; } .today-plan-copy em { display:inline-flex; width:max-content; max-width:100%; margin-top:6px; padding:3px 7px; border:1px solid var(--accent-alpha-20); border-radius:999px; color:var(--accent); background:var(--accent-alpha-10); font-size:9px; font-style:normal; font-weight:900; } html.millennial-mode:not(.millennial-dark) .today-plan-copy em { color:#24292f; background:#ffffff; border-color:#8c959f; } /* ───────────────────────────────────────────────────────────── Study Health Dashboard — preparation overview in under 10s. ───────────────────────────────────────────────────────────── */ .health-hero { display:grid; grid-template-columns:74px minmax(0,1fr); gap:12px; align-items:center; margin-bottom:12px; } .health-score { width:74px; height:74px; display:grid; place-items:center; border:1px solid var(--accent-alpha-25); border-radius:22px; color:var(--accent); background:var(--accent-alpha-10); font-size:24px; font-weight:950; letter-spacing:-.05em; } .health-score[data-state="good"] { color:#9ee8b4; border-color:rgba(158,232,180,.30); background:rgba(158,232,180,.10); } .health-score[data-state="mid"] { color:#f2c697; border-color:rgba(242,198,151,.30); background:rgba(242,198,151,.10); } .health-score[data-state="low"] { color:#ffb4ae; border-color:rgba(255,180,174,.30); background:rgba(255,180,174,.10); } .health-copy strong { display:block; color:#e8eff1; font-size:14px; line-height:1.25; } .health-copy span { display:block; margin-top:5px; color:var(--quiet); font-size:10.5px; line-height:1.45; } .health-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin-bottom:12px; } .health-metric { padding:9px; border:1px solid rgba(255,255,255,.08); border-radius:12px; background:rgba(1,10,17,.15); } .health-metric strong { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:var(--accent); font-size:13px; font-weight:900; } .health-metric span { display:block; margin-top:2px; color:var(--quiet); font-size:9px; font-weight:800; } .health-subjects { display:grid; gap:7px; margin-bottom:12px; } .health-subject-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px; align-items:center; color:var(--muted); font-size:10.5px; } .health-subject-row span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .health-subject-row b { color:var(--accent); font-size:10px; } .health-subject-row i { grid-column:1 / -1; display:block; width:var(--w,0%); min-width:6px; height:5px; border-radius:99px; background:linear-gradient(90deg,var(--accent),var(--accent-2,#83bdf0)); } .health-prediction { padding:10px 11px; border:1px solid var(--accent-alpha-20); border-radius:13px; color:#eef7f4; background:var(--accent-alpha-10); font-size:11px; line-height:1.5; } .health-empty { padding:12px; color:var(--quiet); text-align:center; font-size:11px; } html.millennial-mode:not(.millennial-dark) .health-copy strong, html.millennial-mode:not(.millennial-dark) .health-copy span, html.millennial-mode:not(.millennial-dark) .health-subject-row, html.millennial-mode:not(.millennial-dark) .health-prediction, html.millennial-mode:not(.millennial-dark) .health-empty { color:#24292f !important; -webkit-text-fill-color:#24292f !important; opacity:1 !important; } html.millennial-mode:not(.millennial-dark) .health-metric, html.millennial-mode:not(.millennial-dark) .health-prediction { background:#f6f8fa; border-color:#8c959f; } html.millennial-mode.millennial-dark .health-metric { background:#161b22; border-color:#30363d; } html.mobile-shell .health-hero { grid-template-columns:58px minmax(0,1fr); gap:9px; } html.mobile-shell .health-score { width:58px; height:58px; border-radius:16px; font-size:20px; } html.mobile-shell .health-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } @media (max-width:420px) { .health-grid { grid-template-columns:1fr; } } /* ───────────────────────────────────────────────────────────── Phase 5 — Deep Subject Insights: one dashboard per subject. ───────────────────────────────────────────────────────────── */ .subject-insight-lead { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; padding:12px; border:1px solid var(--accent-alpha-20); border-radius:16px; background:linear-gradient(135deg,var(--accent-alpha-10),rgba(255,255,255,.035)); } .subject-insight-lead strong { display:block; color:#eef7f4; font-size:13px; line-height:1.25; } .subject-insight-lead span { display:block; margin-top:4px; color:var(--quiet); font-size:10.5px; line-height:1.45; } .subject-insight-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .subject-insight-card { position:relative; overflow:hidden; padding:12px; border:1px solid rgba(255,255,255,.09); border-radius:18px; background:rgba(1,10,17,.18); box-shadow:inset 0 1px 0 rgba(255,255,255,.045); } .subject-insight-card::before { content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--accent); opacity:.72; } .subject-insight-card[data-state="good"]::before { background:#9ee8b4; } .subject-insight-card[data-state="mid"]::before { background:#f2c697; } .subject-insight-card[data-state="low"]::before { background:#ffb4ae; } .subject-insight-head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:10px; } .subject-insight-head strong { display:block; color:#f3fbf8; font-size:14px; line-height:1.2; } .subject-insight-head small { display:block; margin-top:3px; color:var(--quiet); font-size:9.5px; font-weight:800; } .subject-insight-head b { flex:0 0 auto; min-width:48px; padding:6px 8px; border:1px solid var(--accent-alpha-25); border-radius:999px; color:var(--accent); background:var(--accent-alpha-10); text-align:center; font-size:12px; font-weight:950; } .subject-progress { height:7px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.08); margin-bottom:10px; } .subject-progress i { display:block; width:var(--w,0%); min-width:6px; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--accent),var(--accent-2,#83bdf0)); } .subject-insight-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; margin-bottom:10px; } .subject-insight-stats div { min-width:0; padding:8px; border:1px solid rgba(255,255,255,.075); border-radius:12px; background:rgba(255,255,255,.035); } .subject-insight-stats strong { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#eff8f6; font-size:12px; font-weight:950; } .subject-insight-stats span { display:block; margin-top:2px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:var(--quiet); font-size:8.5px; font-weight:850; } .subject-insight-bottom { display:grid; grid-template-columns:1.15fr .85fr; gap:9px; margin-bottom:10px; } .subject-section-label { display:block; margin-bottom:5px; color:var(--quiet); font-size:8.5px; font-weight:950; letter-spacing:.04em; text-transform:uppercase; } .subject-topic-chips { display:flex; flex-wrap:wrap; gap:5px; } .subject-topic-chips span { max-width:100%; padding:4px 7px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; border:1px solid var(--accent-alpha-20); border-radius:999px; color:var(--accent); background:var(--accent-alpha-10); font-size:9px; font-weight:850; } .subject-insight-bottom p { margin:0; color:var(--muted); font-size:10px; line-height:1.45; } .subject-trend-row { display:grid; grid-template-columns:minmax(0,1fr) 84px; gap:9px; align-items:end; padding-top:8px; border-top:1px solid rgba(255,255,255,.07); } .subject-trend-row > span { color:var(--quiet); font-size:9.5px; line-height:1.35; } .subject-sparkline { height:34px; display:flex; align-items:end; gap:3px; justify-content:flex-end; } .subject-sparkline i { width:7px; height:var(--h,8%); min-height:4px; border-radius:999px 999px 3px 3px; background:linear-gradient(180deg,var(--accent),rgba(255,255,255,.18)); opacity:.88; } .subject-insight-empty { grid-column:1 / -1; } html.millennial-mode:not(.millennial-dark) .subject-insight-lead, html.millennial-mode:not(.millennial-dark) .subject-insight-card, html.millennial-mode:not(.millennial-dark) .subject-insight-stats div { background:#f6f8fa; border-color:#8c959f; box-shadow:none; } html.millennial-mode:not(.millennial-dark) .subject-insight-lead strong, html.millennial-mode:not(.millennial-dark) .subject-insight-lead span, html.millennial-mode:not(.millennial-dark) .subject-insight-head strong, html.millennial-mode:not(.millennial-dark) .subject-insight-head small, html.millennial-mode:not(.millennial-dark) .subject-insight-stats strong, html.millennial-mode:not(.millennial-dark) .subject-insight-stats span, html.millennial-mode:not(.millennial-dark) .subject-insight-bottom p, html.millennial-mode:not(.millennial-dark) .subject-section-label, html.millennial-mode:not(.millennial-dark) .subject-trend-row > span { color:#24292f !important; -webkit-text-fill-color:#24292f !important; opacity:1 !important; } html.millennial-mode.millennial-dark .subject-insight-card, html.millennial-mode.millennial-dark .subject-insight-stats div { background:#161b22; border-color:#30363d; } html.mobile-shell .subject-insight-grid { grid-template-columns:1fr; } html.mobile-shell .subject-insight-stats { grid-template-columns:repeat(2,minmax(0,1fr)); } html.mobile-shell .subject-insight-bottom { grid-template-columns:1fr; } @media (max-width:860px) { .subject-insight-grid { grid-template-columns:1fr; } } @media (max-width:420px) { .subject-insight-stats { grid-template-columns:1fr 1fr; } .subject-trend-row { grid-template-columns:1fr; } .subject-sparkline { justify-content:flex-start; } } /* ───────────────────────────────────────────────────────────── Phase 6 — Productivity Insights: encouraging explanations. ───────────────────────────────────────────────────────────── */ .productivity-insight-lead { margin-bottom:12px; padding:12px; border:1px solid var(--accent-alpha-20); border-radius:16px; background:linear-gradient(135deg,var(--accent-alpha-10),rgba(255,255,255,.035)); } .productivity-insight-lead strong { display:block; color:#eef7f4; font-size:13px; line-height:1.25; } .productivity-insight-lead span { display:block; margin-top:4px; color:var(--quiet); font-size:10.5px; line-height:1.45; } .productivity-insight-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; } .productivity-insight-card { display:grid; grid-template-columns:38px minmax(0,1fr); gap:10px; align-items:flex-start; min-height:96px; padding:12px; border:1px solid rgba(255,255,255,.085); border-radius:17px; background:rgba(1,10,17,.18); box-shadow:inset 0 1px 0 rgba(255,255,255,.045); } .productivity-insight-card[data-tone="good"] { border-color:rgba(158,232,180,.16); } .productivity-insight-card[data-tone="warm"] { border-color:rgba(242,198,151,.18); } .productivity-insight-icon { width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--accent-alpha-25); border-radius:13px; color:var(--accent); background:var(--accent-alpha-10); font-size:16px; } .productivity-insight-card strong { display:block; color:#f3fbf8; font-size:12.5px; line-height:1.28; } .productivity-insight-card p { margin:5px 0 0; color:var(--quiet); font-size:10.5px; line-height:1.5; } html.millennial-mode:not(.millennial-dark) .productivity-insight-lead, html.millennial-mode:not(.millennial-dark) .productivity-insight-card { background:#f6f8fa; border-color:#8c959f; box-shadow:none; } html.millennial-mode:not(.millennial-dark) .productivity-insight-lead strong, html.millennial-mode:not(.millennial-dark) .productivity-insight-lead span, html.millennial-mode:not(.millennial-dark) .productivity-insight-card strong, html.millennial-mode:not(.millennial-dark) .productivity-insight-card p { color:#24292f !important; -webkit-text-fill-color:#24292f !important; opacity:1 !important; } html.millennial-mode.millennial-dark .productivity-insight-card { background:#161b22; border-color:#30363d; } html.mobile-shell .productivity-insight-list { grid-template-columns:1fr; } @media (max-width:860px) { .productivity-insight-list { grid-template-columns:1fr; } } @media (max-width:420px) { .productivity-insight-card { grid-template-columns:34px minmax(0,1fr); padding:10px; } .productivity-insight-icon { width:34px; height:34px; border-radius:12px; } } /* ───────────────────────────────────────────────────────────── Phase 7 — Countdown System Upgrade: multiple exams + timeline. ───────────────────────────────────────────────────────────── */ .countdown-timeline { position:relative; min-height:62px; margin:2px 0 12px; border:1px solid rgba(255,255,255,.08); border-radius:16px; background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.02)); overflow:hidden; } .countdown-timeline::before { content:""; position:absolute; left:14px; right:14px; top:28px; height:3px; border-radius:999px; background:linear-gradient(90deg,#ffb4ae,#f2c697,var(--accent),rgba(255,255,255,.16)); opacity:.72; } .countdown-tick { position:absolute; left:var(--x,8%); top:9px; transform:translateX(-50%); display:grid; justify-items:center; gap:2px; max-width:88px; color:var(--quiet); text-align:center; font-size:8.5px; font-weight:850; } .countdown-tick i { width:12px; height:12px; border:2px solid var(--accent); border-radius:999px; background:#0d1117; box-shadow:0 0 0 4px rgba(0,0,0,.18); } .countdown-tick[data-state="urgent"] i { border-color:#ffb4ae; } .countdown-tick[data-state="soon"] i { border-color:#f2c697; } .countdown-tick[data-state="steady"] i { border-color:var(--accent); } .countdown-tick span { max-width:84px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#eef7f4; } .countdown-tick b { color:var(--quiet); font-size:8px; } .countdown-list { display:grid; gap:7px; margin:0 0 10px; padding:0; list-style:none; } .countdown-exam-item { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; gap:8px; align-items:center; padding:9px; border:1px solid rgba(255,255,255,.085); border-left:3px solid var(--accent); border-radius:14px; background:rgba(1,10,17,.18); } .countdown-exam-item[data-state="urgent"] { border-left-color:#ffb4ae; } .countdown-exam-item[data-state="soon"] { border-left-color:#f2c697; } .countdown-exam-item[data-state="past"] { border-left-color:var(--quiet); opacity:.72; } .countdown-exam-item.upcoming { border-color:var(--accent-alpha-35); border-left-color:var(--accent); background:linear-gradient(135deg,var(--accent-alpha-10),rgba(255,255,255,.035)); box-shadow:0 10px 30px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.04); } .countdown-exam-item.drag-over { outline:2px solid var(--accent-alpha-50); outline-offset:2px; } .countdown-drag-handle { cursor:grab; color:var(--quiet); font-weight:950; letter-spacing:-.14em; user-select:none; } .countdown-exam-main { min-width:0; } .countdown-exam-main strong { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#f4fbf8; font-size:12px; line-height:1.2; } .countdown-exam-main small { display:block; margin-top:3px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:var(--quiet); font-size:9.5px; line-height:1.25; } .countdown-days-pill { padding:5px 8px; border:1px solid var(--accent-alpha-25); border-radius:999px; color:var(--accent); background:var(--accent-alpha-10); font-size:10px; font-weight:950; white-space:nowrap; } .countdown-exam-item[data-state="urgent"] .countdown-days-pill { color:#ffb4ae; border-color:rgba(255,180,174,.30); background:rgba(255,180,174,.10); } .countdown-exam-item[data-state="soon"] .countdown-days-pill { color:#f2c697; border-color:rgba(242,198,151,.30); background:rgba(242,198,151,.10); } .countdown-delete { width:26px; height:26px; border:0; border-radius:9px; color:var(--quiet); background:rgba(255,255,255,.055); cursor:pointer; } .countdown-delete:hover { color:#ffb4ae; background:rgba(255,180,174,.10); } .countdown-milestones { display:grid; gap:7px; margin-bottom:10px; } .countdown-milestone { padding:9px 10px; border:1px solid rgba(255,255,255,.075); border-radius:13px; background:rgba(255,255,255,.035); } .countdown-milestone strong { display:block; color:var(--accent); font-size:10.5px; font-weight:950; } .countdown-milestone span { display:block; margin-top:3px; color:var(--quiet); font-size:9.5px; line-height:1.4; } .countdown-milestone[data-state="urgent"] strong { color:#ffb4ae; } .countdown-milestone[data-state="soon"] strong { color:#f2c697; } .countdown-empty { padding:10px; color:var(--quiet); text-align:center; font-size:10.5px; } html.millennial-mode:not(.millennial-dark) .countdown-timeline, html.millennial-mode:not(.millennial-dark) .countdown-exam-item, html.millennial-mode:not(.millennial-dark) .countdown-milestone { background:#f6f8fa; border-color:#8c959f; box-shadow:none; } html.millennial-mode:not(.millennial-dark) .countdown-tick span, html.millennial-mode:not(.millennial-dark) .countdown-exam-main strong, html.millennial-mode:not(.millennial-dark) .countdown-exam-main small, html.millennial-mode:not(.millennial-dark) .countdown-milestone span, html.millennial-mode:not(.millennial-dark) .countdown-empty { color:#24292f !important; -webkit-text-fill-color:#24292f !important; opacity:1 !important; } html.millennial-mode.millennial-dark .countdown-exam-item, html.millennial-mode.millennial-dark .countdown-milestone { background:#161b22; border-color:#30363d; } html.mobile-shell .countdown-exam-item { grid-template-columns:auto minmax(0,1fr) auto; } html.mobile-shell .countdown-delete { grid-column:3; } @media (max-width:420px) { .countdown-exam-item { grid-template-columns:auto minmax(0,1fr); } .countdown-days-pill, .countdown-delete { grid-column:2; justify-self:start; } .countdown-timeline { min-height:78px; } .countdown-tick { max-width:68px; } .countdown-tick span { max-width:64px; } } /* ───────────────────────────────────────────────────────────── Sections (rooms): tab bar + Home manager Space > Section(room) > Widget. Tabs switch rooms; Home is the manager room with a room explorer, search and layout entry. ───────────────────────────────────────────────────────────── */ .section-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0 0 14px; padding: 8px; } .section-tabs:empty { display: none; } .section-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 13px; border: 1px solid var(--stroke); border-radius: 99px; background: rgba(1, 10, 17, .30); color: var(--muted); cursor: pointer; font-size: 12.5px; font-weight: 780; white-space: nowrap; transition: transform .16s, background .16s, border-color .16s, color .16s; } .section-tab:hover { transform: translateY(-1px); color: var(--ink); background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.26); } .section-tab.active { color: var(--accent-dark); background: var(--accent); border-color: transparent; box-shadow: 0 8px 22px var(--accent-alpha-25); } .section-tab-icon { font-size: 14px; line-height: 1; } .section-tab-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .section-tab-count { min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 5px; border-radius: 99px; background: rgba(255,255,255,.16); color: inherit; font-size: 10px; font-weight: 900; } .section-tab.active .section-tab-count { background: rgba(0,0,0,.14); color: var(--accent-dark); } /* Home manager — the control-centre room */ .home-manager { margin: 0 0 14px; } .home-manager.hidden { display: none; } .home-manager-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; } .home-manager-intro { min-width: 0; } .home-manager-title { display: block; color: var(--ink); font-size: 15px; font-weight: 850; letter-spacing: -.02em; } .home-manager-sub { display: block; margin-top: 3px; color: var(--muted); font-size: 11.5px; line-height: 1.45; max-width: 540px; } .home-manager-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .home-manager-search { min-width: 180px; max-width: 240px; height: 38px; color: var(--ink); border: 1px solid var(--stroke); border-radius: 12px; outline: 0; background: rgba(1,10,17,.30); padding: 0 12px; font-size: 12.5px; } .home-manager-search:focus { border-color: var(--accent-alpha-55); } .home-manager-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .home-room-card { display: flex; flex-direction: column; gap: 6px; min-height: 118px; padding: 15px; text-align: left; cursor: pointer; border: 1px solid var(--stroke); border-radius: var(--radius); background: linear-gradient(140deg, rgba(255,255,255,.10), rgba(255,255,255,.03)); box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.08); transition: transform .18s cubic-bezier(.16,1,.3,1), border-color .18s, background .18s; } .home-room-card:hover { transform: translateY(-3px); border-color: var(--accent-alpha-45); background: linear-gradient(140deg, rgba(255,255,255,.14), rgba(255,255,255,.045)); } .home-room-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .home-room-card-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; color: var(--accent); background: var(--accent-alpha-12, var(--accent-alpha-15)); font-size: 16px; border: 1px solid var(--accent-alpha-20); } .home-room-card-count { color: var(--quiet); font-size: 10px; font-weight: 800; } .home-room-card-name { color: var(--ink); font-size: 14px; font-weight: 850; letter-spacing: -.01em; } .home-room-card-widgets { color: var(--muted); font-size: 11px; line-height: 1.45; } .home-room-empty { grid-column: 1 / -1; padding: 18px; text-align: center; color: var(--quiet); font-size: 12px; } /* Mobile: tabs become a horizontal scroll strip */ @media (max-width: 760px) { .section-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 7px; gap: 6px; } .section-tabs::-webkit-scrollbar { display: none; } .section-tab { flex: none; min-height: 34px; padding: 0 12px; font-size: 12px; } .section-tab-name { max-width: 120px; } .home-manager-head { align-items: stretch; } .home-manager-search { min-width: 0; flex: 1; max-width: none; } .home-manager-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 9px; } .home-room-card { min-height: 104px; padding: 12px; } .home-room-card-name { font-size: 13px; } } /* Millennial mode keeps the plain, compact look */ html.millennial-mode .section-tab { background: #f6f8fa; border-color: #8c959f; color: var(--muted); } html.millennial-mode.millennial-dark .section-tab { background: #21262d; border-color: #30363d; } html.millennial-mode .home-manager-search { background: #ffffff; border-color: #8c959f; color: #24292f; } html.millennial-mode.millennial-dark .home-manager-search { background: #0d1117; border-color: #30363d; color: #c9d1d9; } html.millennial-mode .home-room-card { background: #f6f8fa; border-color: #8c959f; box-shadow: none; } html.millennial-mode.millennial-dark .home-room-card { background: #161b22; border-color: #30363d; } html.millennial-mode:not(.millennial-dark) .home-room-card-name, html.millennial-mode:not(.millennial-dark) .home-manager-title { color: #24292f !important; -webkit-text-fill-color: #24292f !important; } /* ───────────────────────────────────────────────────────────── Sidebar: Notion-style room tree Home stands out at the top; each room is a collapsible dropdown that reveals the widgets (people) living inside it. ───────────────────────────────────────────────────────────── */ .sidebar-home-item { position: relative; color: var(--ink) !important; font-weight: 850; background: var(--accent-alpha-15) !important; margin-bottom: 8px; } .sidebar-home-item .sni { color: var(--accent); } .sidebar-home-item::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 99px; background: var(--accent); } .sidebar-home-item.active::before { background: var(--accent-dark); } .sidebar-section-toggle { flex: none; width: 14px; display: grid; place-items: center; color: var(--quiet); font-size: 10px; transition: transform .16s, color .16s; } .sidebar-section-toggle:hover { color: var(--accent); } .sidebar-section .sidebar-label, .sidebar-home-item .sidebar-label { flex: 1 1 auto; min-width: 0; } .sidebar-section-count { margin-left: auto; flex: none; min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; border-radius: 99px; background: rgba(255,255,255,.10); color: var(--quiet); font-size: 9.5px; font-weight: 850; } .sidebar-nav-item.active .sidebar-section-count { background: rgba(0,0,0,.16); color: inherit; } .sidebar-section-children { display: grid; gap: 1px; padding: 1px 0 5px 24px; } .sidebar-widget-item { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 27px; padding: 0 8px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; text-align: left; font-size: 12px; font-weight: 600; transition: background .14s, color .14s; } .sidebar-widget-item:hover { background: rgba(255,255,255,.07); color: var(--ink); } .sidebar-widget-bullet { color: var(--quiet); font-size: 14px; line-height: 1; flex: none; } .sidebar-widget-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar-widget-empty { padding: 4px 8px 6px; color: var(--quiet); font-size: 11px; font-style: italic; } /* Mobile tab strip: Home stands out there too */ .section-tab-home { font-weight: 850; } .section-tab-home .section-tab-icon { color: var(--accent); } .section-tab.section-tab-home:not(.active) { background: var(--accent-alpha-15); border-color: var(--accent-alpha-30); color: var(--ink); } /* Desktop (mouse): the sidebar tree is the navigation, so hide the duplicate top tab strip. On touch/mobile-shell the sidebar is gone, so the tab strip IS the room navigation and must stay visible even at wide (tablet landscape). */ @media (min-width: 901px) { html:not(.mobile-shell) .section-tabs { display: none !important; } } /* Millennial sidebar tree */ html.millennial-mode:not(.millennial-dark) .sidebar-home-item { color: #24292f !important; } html.millennial-mode:not(.millennial-dark) .sidebar-widget-item { color: #57606a; } html.millennial-mode:not(.millennial-dark) .sidebar-widget-item:hover { color: #24292f; background: #f6f8fa; } html.millennial-mode .sidebar-section-count { background: rgba(0,0,0,.07); } html.millennial-mode.millennial-dark .sidebar-section-count { background: rgba(255,255,255,.09); } /* ───────────────────────────────────────────────────────────── Room Manager dialog (Phase 3) — edit rooms, drag widgets between them ───────────────────────────────────────────────────────────── */ #rooms-dialog { width: min(1120px, calc(100vw - 48px)); max-width: 1120px; max-height: min(88vh, 880px); backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .rooms-dialog-body { width: 100%; max-height: min(88vh, 880px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; contain: layout style; } #rooms-dialog .dialog-title { position: sticky; top: -26px; z-index: 5; margin: -26px -26px 12px; padding: 22px 26px 12px; background: linear-gradient(180deg, rgba(13,19,30,.99), rgba(13,19,30,.92)); border-bottom: 1px solid rgba(255,255,255,.08); border-radius: 23px 23px 0 0; } html.millennial-mode:not(.millennial-dark) #rooms-dialog .dialog-title { background: #ffffff; } html.millennial-mode.millennial-dark #rooms-dialog .dialog-title { background: #0d1117; } .rooms-manager-list { display: grid; gap: 12px; margin: 8px 0 12px; align-content: start; } /* Smooth scroll: skip rendering off-screen room cards. min-width:0 lets the grid item shrink to the dialog (fixes mobile overflow). */ .room-card { content-visibility: auto; contain-intrinsic-size: auto 150px; min-width: 0; max-width: 100%; } .room-card-head { flex-wrap: wrap; row-gap: 8px; } .room-card-head .room-name-input { flex: 1 1 140px; } .room-card { border: 1px solid var(--stroke); border-radius: 16px; background: rgba(1,10,17,.22); padding: 12px; transition: border-color .16s, background .16s, box-shadow .16s; } .room-card-home { border-color: var(--accent-alpha-30); background: linear-gradient(135deg, var(--accent-alpha-15), rgba(255,255,255,.03)); } .room-card-dropover { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-alpha-25); background: var(--accent-alpha-10); } .room-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .room-drag-handle { flex: none; width: 22px; height: 30px; display: grid; place-items: center; cursor: grab; color: var(--quiet); font-weight: 950; letter-spacing: -2px; user-select: none; } .room-drag-handle:active { cursor: grabbing; } .room-drag-handle:hover { color: var(--accent); } .room-icon-input, .room-name-input { color: var(--ink); border: 1px solid rgba(255,255,255,.12); border-radius: 9px; outline: 0; background: rgba(0,0,0,.20); padding: 7px 9px; font-size: 13px; } .room-icon-input { flex: none; width: 46px; text-align: center; font-size: 16px; } .room-name-input { flex: 1 1 auto; min-width: 0; font-weight: 700; } .room-icon-input:focus, .room-name-input:focus { border-color: var(--accent-alpha-55); } .room-card-count { flex: none; min-width: 20px; height: 20px; padding: 0 6px; display: grid; place-items: center; border-radius: 99px; background: rgba(255,255,255,.10); color: var(--quiet); font-size: 9.5px; font-weight: 850; } .room-card-tag { flex: none; font-size: 9px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent-alpha-30); border-radius: 99px; padding: 3px 9px; } .room-delete { flex: none; width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; color: var(--muted); background: rgba(0,0,0,.16); cursor: pointer; font-size: 14px; } .room-delete:hover { color: #ffcaca; background: rgba(255,150,150,.16); border-color: rgba(255,150,150,.3); } .room-card-widgets { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 6px; } .room-widget-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 4px 4px 11px; border: 1px solid var(--stroke); border-radius: 99px; background: rgba(255,255,255,.06); color: var(--ink); font-size: 11.5px; font-weight: 650; cursor: grab; user-select: none; transition: border-color .14s, background .14s; } .room-widget-chip:hover { border-color: var(--accent-alpha-45); background: rgba(255,255,255,.10); } .room-widget-chip-label { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .room-widget-chip-remove { width: 18px; height: 18px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: var(--quiet); cursor: pointer; font-size: 11px; line-height: 1; } .room-widget-chip-remove:hover { background: rgba(255,150,150,.28); color: #ffcaca; } .room-widget-available { background: rgba(255,255,255,.03); border-style: dashed; color: var(--muted); } .room-card-empty { color: var(--quiet); font-size: 11px; font-style: italic; padding: 2px 2px; } .room-drop-hint { margin-top: 9px; padding: 5px; border: 1px dashed rgba(255,255,255,.13); border-radius: 9px; color: var(--quiet); font-size: 10px; text-align: center; letter-spacing: .02em; } .room-card-dropover .room-drop-hint { color: var(--accent); border-color: var(--accent-alpha-45); } .rooms-add-button { width: 100%; min-height: 42px; border-style: dashed; } .rooms-available { margin: 8px 0 16px; padding: 12px; border: 1px dashed rgba(255,255,255,.12); border-radius: 14px; background: rgba(0,0,0,.12); } .rooms-available-heading { display: block; margin-bottom: 9px; color: var(--muted); font-size: 10.5px; font-weight: 800; letter-spacing: .02em; } .rooms-available-tray { display: flex; flex-wrap: wrap; gap: 6px; } html.millennial-mode:not(.millennial-dark) .room-card, html.millennial-mode:not(.millennial-dark) .rooms-available { background: #f6f8fa; border-color: #8c959f; } html.millennial-mode:not(.millennial-dark) .room-icon-input, html.millennial-mode:not(.millennial-dark) .room-name-input { color: #24292f; background: #ffffff; border-color: #8c959f; } html.millennial-mode.millennial-dark .room-card, html.millennial-mode.millennial-dark .rooms-available { background: #161b22; border-color: #30363d; } /* ───────────────────────────────────────────────────────────── Template room preview (Phase 4) — shown in Create Space & onboarding ───────────────────────────────────────────────────────────── */ .template-rooms-preview { margin-top: 11px; padding: 10px 12px; border: 1px solid var(--accent-alpha-20); border-radius: 13px; background: var(--accent-alpha-10); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .template-rooms-preview.hidden { display: none; } .template-rooms-label { color: var(--quiet); font-size: 9.5px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; flex: none; } .template-rooms-chips { display: flex; flex-wrap: wrap; gap: 6px; } .template-room-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 5px; border: 1px solid var(--stroke); border-radius: 99px; background: rgba(255,255,255,.06); color: var(--ink); font-size: 11px; font-weight: 700; } .template-room-chip-icon { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: var(--accent-alpha-15); color: var(--accent); font-size: 11px; } html.millennial-mode:not(.millennial-dark) .template-rooms-preview { background: #f6f8fa; border-color: #8c959f; } html.millennial-mode:not(.millennial-dark) .template-room-chip { color: #24292f; background: #ffffff; border-color: #8c959f; } html.millennial-mode.millennial-dark .template-rooms-preview { background: #161b22; border-color: #30363d; } /* ───────────────────────────────────────────────────────────── Fix: Millennial + large text must never overflow its box. Flex text children get min-width:0 so they truncate/wrap instead of pushing outside cards, pills, sidebar items and headers. ───────────────────────────────────────────────────────────── */ .panel-title { min-width: 0; } .panel-header { gap: 10px 14px; } html[data-fs="big"] .panel-header, html[data-fs="large"] .panel-header { flex-wrap: wrap; row-gap: 10px; } /* sidebar tree labels shrink inside the 214px rail */ .sidebar-label { flex: 1 1 auto; min-width: 0; } .sidebar-widget-label { min-width: 0; flex: 1 1 auto; } .sidebar-section-toggle, .sidebar-section-count, .sni { flex: none; } /* section tabs + room chips truncate instead of overflowing */ .section-tab { max-width: 100%; } .section-tab-name { min-width: 0; } .room-name-input { min-width: 0; } .room-widget-chip { max-width: 100%; } .room-widget-chip-label { min-width: 0; } .space-switcher-label { min-width: 0; } .command-item-copy { min-width: 0; } /* long unbroken text wraps rather than bursting its container */ .note-area, .hero-copy, .dialog-description, .mistake-main-text, .mock-score-row, .home-room-card-widgets, .today-plan-copy small { overflow-wrap: anywhere; } /* ───────────────────────────────────────────────────────────── Sidebar drag-to-reorder: rooms drag by heading, widgets by :: grip ───────────────────────────────────────────────────────────── */ .sidebar-section[draggable="true"] { cursor: grab; } .sidebar-section[draggable="true"]:active { cursor: grabbing; } .sidebar-section.dragging { opacity: .5; } .sidebar-widget-grip { flex: none; width: 14px; display: grid; place-items: center; cursor: grab; color: var(--quiet); font-size: 13px; line-height: 1; letter-spacing: -2px; opacity: .5; transition: opacity .14s, color .14s; } .sidebar-widget-grip:hover { opacity: 1; color: var(--accent); } .sidebar-widget-grip:active { cursor: grabbing; } /* insertion / drop indicators */ .sidebar-widget-item.sidebar-drop-before { box-shadow: inset 0 2px 0 var(--accent); background: var(--accent-alpha-10); } .sidebar-section.sidebar-drop-before { box-shadow: 0 -2px 0 var(--accent) !important; } .sidebar-section.sidebar-drop-after { box-shadow: 0 2px 0 var(--accent) !important; } html.millennial-mode:not(.millennial-dark) .sidebar-widget-grip { color: #8c959f; } html.millennial-mode.millennial-dark .sidebar-widget-grip { color: #7d8590; } /* Widget Library: drag-to-reorder handle removed — reordering now lives in the sidebar tree. Drop the reserved handle column so rows have no gap. */ #widget-toggle-list.upgraded .widget-toggle, html.mobile-shell #widget-toggle-list.upgraded .widget-toggle { grid-template-columns: minmax(0, 1fr) auto !important; } /* Widget Library rows: flex layout now that the drag handle is gone (flex ignores the legacy grid-template-columns rules). */ #widget-toggle-list.upgraded .widget-toggle, html.mobile-shell #widget-toggle-list.upgraded .widget-toggle { display: flex !important; align-items: center !important; gap: 10px !important; } #widget-toggle-list.upgraded .widget-toggle-main { flex: 1 1 auto; min-width: 0; } #widget-toggle-list.upgraded .widget-toggle-side { flex: none; margin-left: auto; } #widget-toggle-list.upgraded .widget-toggle .widget-toggle-tools { display: flex !important; flex-wrap: wrap; gap: 5px; } /* ════════════════════════════════════════════════════════════════ PomoHarbor — embedded full-screen room The sidebar entry sits directly under the Harbor Home brand, styled in PomoHarbor's purple to read as a distinct (but related) app. ════════════════════════════════════════════════════════════════ */ .pomoharbor-entry { width: calc(100% - 12px); margin: 0 6px 14px; padding: 0; border: 0; background: transparent; cursor: pointer; font: inherit; text-align: left; transition: transform .14s ease; } .pomoharbor-entry .pomoharbor-mark { color: #b4befe; border-color: rgba(180, 190, 254, .42); background: rgba(180, 190, 254, .15); font-size: 16px; line-height: 1; } .pomoharbor-entry .pomoharbor-name { background: linear-gradient(90deg, #b4befe 0%, #c4b5fd 45%, #f0abfc 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .pomoharbor-entry:hover .pomoharbor-mark { background: rgba(180, 190, 254, .26); } .pomoharbor-entry:active { transform: scale(.985); } .pomoharbor-entry.active { box-shadow: inset 0 0 0 1.5px rgba(180, 190, 254, .55), 0 6px 20px rgba(180, 190, 254, .18); border-radius: 12px; } /* The full-screen embedded view */ .pomoharbor-view { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 35; background: #0f0e17; display: flex; flex-direction: column; animation: pomoFade .22s ease; } .pomoharbor-view[hidden] { display: none; } .pomoharbor-view iframe { flex: 1; min-height: 0; width: 100%; border: 0; display: block; background: #0f0e17; } /* Back bar — always visible while PomoHarbor is open (desktop AND mobile), so there's always a way back to Harbor Home even if the sidebar is collapsed. */ .pomoharbor-back { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 9px 16px; cursor: pointer; background: rgba(15,14,23,.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #cdd6f4; font-size: 12.5px; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,.08); } .pomoharbor-back:hover { background: rgba(30,29,46,.96); } @media (max-width: 900px) { /* PomoHarbor is fullscreen on mobile — hide Harbor Home's bottom nav so the two don't stack */ html.mobile-shell.pomoharbor-open .mobile-bottom-nav { display: none !important; } } @keyframes pomoFade { from { opacity: 0; } to { opacity: 1; } } /* Desktop: keep the fixed sidebar visible to the left of the view */ @media (min-width: 901px) { html:not(.mobile-shell) .pomoharbor-view { left: 214px; } } /* ════════════════════════════════════════════════════════════════ Notion-style collapsible sidebar (desktop only) • « chevron at the sidebar's top-right corner collapses it • collapsed: a » rail sits at the top-left; HOVER peeks the sidebar as a temporary overlay, CLICK pins it fully open again ════════════════════════════════════════════════════════════════ */ .sidebar-collapse-toggle, .sidebar-rail, .sidebar-scrim { display: none; } @media (min-width: 901px) { html:not(.mobile-shell) body { transition: padding-left .22s cubic-bezier(.4,0,.2,1); } .desktop-sidebar { transition: transform .22s cubic-bezier(.4,0,.2,1); } .sidebar-collapse-toggle { position: absolute; top: 14px; right: 10px; z-index: 5; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--stroke); background: var(--surface-soft); color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer; transition: background .15s ease, color .15s ease; } .sidebar-collapse-toggle:hover { color: var(--ink); background: var(--accent-alpha-15); } .sidebar-rail { position: fixed; top: 12px; left: 12px; z-index: 45; display: none; align-items: center; gap: 7px; height: 34px; padding: 0 13px 0 11px; border-radius: 10px; border: 1px solid var(--stroke); background: var(--surface-strong); color: var(--ink); font-size: 13.5px; font-weight: 800; cursor: pointer; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--shadow); transition: background .15s ease; } .sidebar-rail:hover { background: var(--accent-alpha-15); } .sidebar-rail .rail-chev { font-size: 15px; color: var(--muted); } .sidebar-rail small { color: var(--muted); font-weight: 800; letter-spacing: -.01em; } .sidebar-scrim { position: fixed; inset: 0; z-index: 39; background: rgba(0,0,0,.4); opacity: 0; pointer-events: none; transition: opacity .2s ease; display: none; } /* COLLAPSED */ html:not(.mobile-shell).sidebar-collapsed body { padding-left: 0 !important; } html:not(.mobile-shell).sidebar-collapsed .desktop-sidebar { transform: translateX(-100%); } html:not(.mobile-shell).sidebar-collapsed .sidebar-collapse-toggle { display: none; } html:not(.mobile-shell).sidebar-collapsed .sidebar-rail { display: flex; } /* full-width PomoHarbor room when sidebar is collapsed */ html:not(.mobile-shell).sidebar-collapsed .pomoharbor-view { left: 0 !important; } /* hide the rail while PomoHarbor occupies the screen */ html:not(.mobile-shell).pomoharbor-open .sidebar-rail { display: none !important; } /* PEEK (collapsed + hover): sidebar slides back as an overlay; content stays put */ html:not(.mobile-shell).sidebar-collapsed.sidebar-peek .desktop-sidebar { transform: translateX(0); box-shadow: var(--shadow); } html:not(.mobile-shell).sidebar-collapsed.sidebar-peek .sidebar-rail { display: none; } html:not(.mobile-shell).sidebar-collapsed.sidebar-peek .sidebar-scrim { display: block; opacity: 1; pointer-events: auto; } html:not(.mobile-shell).sidebar-collapsed.sidebar-peek .sidebar-collapse-toggle { display: flex; } } /* ── Backup nudge banner (dismissible reminder to enable Google Backup) ── */ .backup-nudge { display: flex; align-items: center; gap: 13px; margin: 0 0 16px; padding: 12px 14px 12px 15px; border-radius: 15px; border: 1px solid var(--accent-alpha-35); background: linear-gradient(100deg, var(--accent-alpha-15), var(--accent-alpha-5)); box-shadow: 0 6px 22px rgba(0,0,0,.12); } .backup-nudge[hidden] { display: none; } .backup-nudge-icon { font-size: 19px; line-height: 1; color: var(--accent-strong); flex: 0 0 auto; } .backup-nudge-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .backup-nudge-text strong { font-size: 13px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; } .backup-nudge-text span { font-size: 11.5px; line-height: 1.45; color: var(--muted); } .backup-nudge-cta { flex: 0 0 auto; padding: 8px 16px; border-radius: 10px; cursor: pointer; border: 1px solid var(--accent-strong); background: var(--accent-strong); color: #06231b; font-size: 12px; font-weight: 800; transition: transform .12s ease, filter .15s ease; } .backup-nudge-cta:hover { filter: brightness(1.06); transform: translateY(-1px); } .backup-nudge-close { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; cursor: pointer; border: 1px solid var(--stroke); background: var(--surface-soft); color: var(--muted); font-size: 16px; line-height: 1; } .backup-nudge-close:hover { color: var(--ink); background: var(--accent-alpha-15); } @media (max-width: 580px) { .backup-nudge { gap: 10px; padding: 11px 12px; } .backup-nudge-text span { display: none; } } /* ── Scroll-performance: long/scrollable dialogs drop their OWN backdrop-filter (re-blurring the page behind on every scroll frame is the #1 cause of dialog scroll lag). The page-dim ::backdrop is kept. ── */ #settings-dialog, #space-dialog, #rooms-dialog { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ── Desktop/tablet: inner scroll-container (body never scrolls), mirroring the mobile shell. Because the body can't scroll, the fixed background never "scrolls then snaps" on touch — it stays perfectly stable. scrollAppToTop() already targets .app, so navigation is unaffected. ── */ @media (min-width: 901px) { html:not(.mobile-shell), html:not(.mobile-shell) body { height: 100% !important; overflow: hidden !important; } html:not(.mobile-shell) .app { height: 100dvh !important; max-height: 100dvh !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; } }