/* Theme + base styles (light/dark via )
Adapted from styles copy.css (branding). */
:root{
--font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
--text-xs: 12px;
--text-sm: 13px;
--text-md: 16px;
--text-lg: 18px;
--text-xl: 22px;
--text-2xl: 34px;
--lh-tight: 1.15;
--lh-body: 1.65;
/* Control sizing (keeps common elements visually consistent) */
--control-h: 40px;
--control-h-touch: 44px;
--control-pad-y: 9px;
--control-pad-x: 12px;
--control-pad-x-lg: 14px;
--field-pad-y: 10px;
--control-radius: 12px;
--control-radius-pill: 999px;
--s-1: 6px;
--s-2: 10px;
--s-3: 14px;
--s-4: 18px;
--s-5: 22px;
--s-6: 28px;
--radius-sm: 12px;
--radius: 16px;
--radius-lg: 20px;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--t-fast: 140ms;
--t-med: 220ms;
--container: 1100px;
--shadow: 0 18px 60px rgba(0,0,0,0.35);
--shadow-soft: 0 10px 40px rgba(0,0,0,0.18);
}
/* Desktop: slightly more compact controls */
@media (min-width: 700px){
:root{
--control-h: 38px;
--control-pad-y: 8px;
--field-pad-y: 9px;
}
}
html{scroll-behavior:smooth}
*, *::before, *::after{box-sizing:border-box}
html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html[data-theme="dark"]{
--bg: #060f22;
--bg2:#071428;
--surface: rgba(255,255,255,0.045);
--surface2: rgba(255,255,255,0.065);
--border: rgba(255,255,255,0.12);
--border2: rgba(255,255,255,0.18);
--fg:#e9f2fb;
--muted: rgba(233,242,251,0.78);
--muted2: rgba(233,242,251,0.62);
--accent:#6aa9ff;
--accent2:#34d399;
--focus: rgba(106,169,255,0.55);
--grid: rgba(106,169,255,0.10);
--grid2: rgba(106,169,255,0.06);
--trace: rgba(52,211,153,0.10);
--danger: #fb7185;
}
html[data-theme="dark"]{ color-scheme: dark; }
html[data-theme="light"]{
--bg: #f7fafc;
--bg2:#eef4fb;
--surface: rgba(10,20,35,0.045);
--surface2: rgba(10,20,35,0.065);
--border: rgba(10,20,35,0.14);
--border2: rgba(10,20,35,0.20);
--fg:#0b1220;
--muted: rgba(11,18,32,0.76);
--muted2: rgba(11,18,32,0.60);
--accent:#1f5cff;
--accent2:#0ea5e9;
--focus: rgba(31,92,255,0.35);
--grid: rgba(31,92,255,0.14);
--grid2: rgba(31,92,255,0.08);
--trace: rgba(14,165,233,0.10);
--shadow: 0 16px 45px rgba(10,20,35,0.10);
--shadow-soft: 0 10px 34px rgba(10,20,35,0.08);
--danger: #dc2626;
}
html[data-theme="light"]{ color-scheme: light; }
body{
margin:0;
font-family: var(--font-sans);
color: var(--fg);
line-height: 1.4;
background:
radial-gradient(900px 520px at 18% 10%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 62%),
radial-gradient(760px 480px at 82% 8%, color-mix(in oklab, var(--accent2) 14%, transparent), transparent 64%),
linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
min-height:100vh;
position: relative;
isolation: isolate;
overflow-x:hidden;
}
body::before{
content:"";
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
repeating-linear-gradient(0deg, var(--grid2), var(--grid2) 1px, transparent 1px, transparent 28px),
repeating-linear-gradient(90deg, var(--grid2), var(--grid2) 1px, transparent 1px, transparent 28px);
opacity: 0.55;
}
body::after{
content:"";
position: fixed;
inset: -18%;
pointer-events: none;
z-index: -1;
background:
radial-gradient(650px 240px at 10% 35%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 62%),
radial-gradient(520px 210px at 18% 72%, color-mix(in oklab, var(--accent2) 14%, transparent), transparent 64%),
linear-gradient(120deg, transparent 0%, transparent 42%, color-mix(in oklab, var(--accent) 10%, transparent) 50%, transparent 58%, transparent 100%);
opacity: 0.22;
filter: blur(10px);
mix-blend-mode: soft-light;
transform: translateX(-10%);
animation: gridLights 18s var(--ease-out) infinite;
}
/* Page loader (brief, no artificial delay) */
.page-loader{
position: fixed;
inset: 0;
z-index: 120;
display: grid;
place-items: center;
background:
radial-gradient(900px 520px at 18% 10%, color-mix(in oklab, var(--accent) 12%, transparent), transparent 62%),
radial-gradient(760px 480px at 82% 8%, color-mix(in oklab, var(--accent2) 10%, transparent), transparent 64%),
linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
transition: opacity 220ms var(--ease-out), visibility 220ms var(--ease-out);
opacity: 1;
visibility: visible;
}
.page-loader.is-hidden{
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.page-loader-card{
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
border-radius: 18px;
border: 1px solid color-mix(in oklab, var(--border) 80%, transparent);
background: color-mix(in oklab, var(--surface) 78%, transparent);
box-shadow: var(--shadow-soft);
position: relative;
overflow: hidden;
}
.page-loader-card::before{
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--accent) 10%, transparent), transparent);
transform: translateX(-120%);
animation: pageLoaderShimmer 1.2s var(--ease-out) infinite;
opacity: 0.85;
}
@keyframes pageLoaderShimmer{
0%{ transform: translateX(-120%); }
100%{ transform: translateX(120%); }
}
.page-loader-logo{
filter: drop-shadow(0 10px 22px rgba(0,0,0,0.18));
}
.page-loader-text{ position: relative; z-index: 1; }
.page-loader-title{ font-weight: 900; letter-spacing: -0.02em; }
.page-loader-sub{ color: var(--muted2); font-size: 12px; margin-top: 2px; }
@keyframes gridLights{
0%{transform: translateX(-12%) translateY(0%)}
50%{transform: translateX(12%) translateY(-1%)}
100%{transform: translateX(-12%) translateY(0%)}
}
:where(a, button, input, textarea, select){ outline: none; }
:where(a, button, input, textarea, select):focus-visible{
box-shadow: 0 0 0 4px var(--focus);
border-radius: 12px;
}
/* Screen-reader only utility */
.sr-only{
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* AirAlert toasts */
#airalert-container{
position: fixed;
top: calc(12px + env(safe-area-inset-top, 0px));
right: calc(12px + env(safe-area-inset-right, 0px));
z-index: 9999;
display: flex;
flex-direction: column;
gap: 10px;
max-width: min(420px, calc(100vw - 24px));
pointer-events: none;
}
.airalert{
pointer-events: auto;
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
align-items: start;
padding: 12px 12px;
border-radius: 14px;
border: 1px solid color-mix(in oklab, var(--border) 85%, transparent);
background: color-mix(in oklab, var(--bg) 55%, var(--surface2));
box-shadow: var(--shadow-soft);
backdrop-filter: blur(10px);
transform: translateY(-6px);
opacity: 0;
transition: transform 140ms var(--ease-out), opacity 140ms var(--ease-out);
}
.airalert-show{ transform: translateY(0); opacity: 1; }
.airalert-hide{ transform: translateY(-6px); opacity: 0; }
.airalert-text{ color: var(--fg); font-size: 13px; line-height: 1.35; }
.airalert-close{
appearance: none;
border: 0;
background: transparent;
color: var(--muted2);
font-size: 14px;
line-height: 1;
padding: 0 2px;
cursor: pointer;
}
.airalert-close:hover{ color: var(--fg); }
.airalert-success{ border-color: color-mix(in oklab, var(--accent2) 55%, var(--border)); }
.airalert-success .airalert-text{ color: color-mix(in oklab, var(--fg) 88%, var(--accent2)); }
.airalert-warning{ border-color: color-mix(in oklab, #f59e0b 60%, var(--border)); }
.airalert-error{ border-color: color-mix(in oklab, var(--danger) 70%, var(--border)); }
.airalert-error .airalert-text{ color: color-mix(in oklab, var(--fg) 88%, var(--danger)); }
/* Branding header */
.nav{
position: sticky;
top: 0;
z-index: 30;
backdrop-filter: blur(10px);
background: color-mix(in oklab, var(--bg) 95%, transparent);
border-bottom: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
}
.nav-inner{
max-width:var(--container);
margin:0 auto;
padding: 10px 14px;
display:flex;
align-items:center;
justify-content:space-between;
gap: 12px;
flex-wrap: wrap;
}
/* Account for iOS safe areas (notches/home bar) */
.nav-inner{
padding-top: calc(10px + env(safe-area-inset-top, 0px));
}
.nav-brand{ text-decoration:none; display:flex; align-items:center; gap:10px; flex: 1 1 auto; min-width: 0; }
.nav-brand-text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
/* Logo */
.nav-logo-img{ flex: 0 0 auto; display:block; filter: drop-shadow(0 10px 22px rgba(0,0,0,0.18)); }
.nav-name{ font-weight:760; letter-spacing:-0.02em; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nav-role{ color: var(--muted2); font-size: var(--text-xs); line-height:1.2; }
.nav-actions{ display:flex; align-items:center; gap:10px; flex: 1 1 100%; justify-content:flex-start; flex-wrap: wrap; }
.theme-switch{
position:relative;
width: 44px;
height: 28px;
padding:0;
border-radius: 999px;
border: 1px solid color-mix(in oklab, var(--border) 85%, transparent);
background: color-mix(in oklab, var(--surface) 78%, transparent);
cursor:pointer;
transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.theme-switch:hover{
background: color-mix(in oklab, var(--surface2) 82%, transparent);
border-color: color-mix(in oklab, var(--border2) 85%, transparent);
}
.theme-switch-thumb{
position:absolute;
top: 2px;
left: 3px;
width: 22px;
height: 22px;
border-radius: 999px;
display:flex;
align-items:center;
justify-content:center;
color: var(--fg);
font-size: 14px;
background:
linear-gradient(180deg,
color-mix(in oklab, var(--surface2) 85%, transparent),
color-mix(in oklab, var(--surface) 70%, transparent)
);
border: 1px solid color-mix(in oklab, var(--border) 80%, transparent);
box-shadow: 0 8px 20px rgba(0,0,0,0.18);
transition: transform var(--t-fast) var(--ease-out);
}
.theme-switch[aria-checked="true"] .theme-switch-thumb{ transform: translateX(16px); }
/* Layout container (mobile-first) */
.app{ max-width: 900px; margin: 0 auto; padding: 12px; }
/* Planner components (mobile-first) */
.controls{ display:flex; gap: 8px; flex-wrap: wrap; justify-content: flex-start; width: 100%; }
.controls input, .controls select{ flex: 1 1 220px; min-width: 140px; }
.command{ display:flex; gap: 8px; flex: 1 1 320px; width: 100%; }
.command input{ flex: 1 1 auto; min-width: 180px; }
.icon-btn{
padding: var(--control-pad-y) var(--control-pad-x);
min-height: var(--control-h);
border-radius: var(--control-radius-pill);
background: color-mix(in oklab, var(--surface) 78%, transparent);
border: 1px solid color-mix(in oklab, var(--border) 85%, transparent);
color: var(--fg);
font-weight: 900;
cursor: pointer;
white-space: nowrap;
}
.icon-btn:hover{ border-color: color-mix(in oklab, var(--border2) 85%, transparent); background: color-mix(in oklab, var(--surface2) 82%, transparent); }
.icon-btn.is-on{ border-color: color-mix(in oklab, var(--accent2) 55%, var(--border)); }
.command-status{ color: var(--muted2); font-size: 12px; flex: 1 1 100%; }
/* Make the nav bar feel more structured on larger screens */
@media (min-width: 700px){
.nav-brand{ flex: 0 0 auto; }
/* Two-column nav: controls left, theme right; status sits under controls */
.nav-actions{
flex: 1 1 auto;
display: grid;
grid-template-columns: minmax(520px, 1fr) auto;
grid-template-rows: auto auto;
align-items: center;
gap: 10px;
}
.controls{
width: 100%;
display: grid;
grid-template-columns: 220px 160px minmax(360px, 1fr);
align-items: center;
gap: 8px;
padding: 6px;
border-radius: 14px;
border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
background: color-mix(in oklab, var(--surface) 78%, transparent);
}
/* Keep search + filter from shrinking too far */
.controls input#search{ min-width: 220px; }
.controls select#filter{ min-width: 160px; }
.command{ width: 100%; }
.command input{ min-width: 280px; }
#command-status{
grid-column: 1;
grid-row: 2;
margin-top: -4px;
}
#theme{
grid-column: 2;
grid-row: 1 / span 2;
align-self: center;
justify-self: end;
}
}
input, select, textarea, button{
font: inherit;
color: var(--fg);
}
input, select, textarea{
background: color-mix(in oklab, var(--surface) 85%, transparent);
border: 1px solid color-mix(in oklab, var(--border) 85%, transparent);
padding: var(--field-pad-y) var(--control-pad-x);
border-radius: var(--control-radius);
font-size: 16px;
min-height: var(--control-h);
transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
input[type="date"],
input[type="time"] {
padding-right: calc(var(--control-pad-x) + 28px);
font-variant-numeric: tabular-nums;
}
/* Very small screens: reduce forced minimum widths so controls don’t overflow */
@media (max-width: 420px){
.controls input, .controls select{ flex: 1 1 100%; min-width: 0; }
.command input{ min-width: 0; }
.tabs{ flex-wrap: wrap; margin-bottom: 16px; }
.tab{ flex: 1 1 140px; }
}
/* Small screens: keep header usable and theme toggle reachable */
@media (max-width: 520px){
.app{ padding: 10px; }
.nav-actions{
width: 100%;
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto auto;
align-items: center;
gap: 10px;
}
#theme{ grid-column: 2; grid-row: 1; justify-self: end; }
.controls{ grid-column: 1 / -1; grid-row: 2; }
#command-status{ grid-column: 1 / -1; grid-row: 3; }
}
/* Improve dropdown/readability in browsers that inherit select text color into the option list */
select option,
select optgroup{
color: var(--fg);
background-color: var(--bg);
}
input::placeholder, textarea::placeholder{ color: var(--muted2); }
input:hover, select:hover, textarea:hover{
border-color: color-mix(in oklab, var(--border2) 85%, transparent);
}
#new-task-form button[type="submit"]{
min-height: var(--control-h);
border: 1px solid color-mix(in oklab, var(--border) 85%, transparent);
background:
linear-gradient(90deg,
color-mix(in oklab, var(--accent) 24%, transparent),
color-mix(in oklab, var(--accent2) 18%, transparent)
);
border-radius: var(--control-radius-pill);
padding: var(--control-pad-y) var(--control-pad-x-lg);
font-weight: 900;
cursor: pointer;
transition: transform var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
#new-task-form button[type="submit"]:hover{ transform: translateY(-1px); }
#new-task-form button[type="submit"]:active{ transform: translateY(0); }
.tabs{
display:flex;
gap: 8px;
margin-bottom: 12px;
padding: 6px;
border-radius: var(--radius);
border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
background: color-mix(in oklab, var(--surface) 72%, transparent);
}
.tab{
background: color-mix(in oklab, var(--surface) 78%, transparent);
color: var(--fg);
border: 1px solid color-mix(in oklab, var(--border) 85%, transparent);
padding: var(--control-pad-y) var(--control-pad-x);
min-height: var(--control-h);
border-radius: var(--control-radius-pill);
font-weight: 800;
cursor: pointer;
transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.tab.is-active{ border-color: color-mix(in oklab, var(--accent) 55%, var(--border)); background: color-mix(in oklab, var(--surface2) 82%, transparent); }
.is-hidden{ display:none !important; }
#new-task-form{ display:grid; grid-template-columns: 1fr; gap: 10px; align-items:start; margin-bottom: 12px; }
#new-task-form textarea{ min-height: 90px; resize: vertical; }
#new-task-form button[type="submit"]{ width: 100%; }
#title, #tags, #notes{ grid-column: 1 / -1; }
.insights{
margin: 12px 0 16px;
padding: 12px;
border: 1px solid color-mix(in oklab, var(--border) 85%, transparent);
border-radius: var(--radius);
background: color-mix(in oklab, var(--surface) 88%, transparent);
box-shadow: var(--shadow-soft);
}
.insights:empty{ display:none; }
.insights-head{ display:flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.insights-title{ font-weight: 900; letter-spacing: -0.01em; }
.insights-sub{ color: var(--muted2); font-size: 12px; }
.insights-grid{ display:grid; grid-template-columns: 1fr; gap: 8px; }
.insight{
display:flex;
align-items:center;
justify-content: space-between;
gap: 10px;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid color-mix(in oklab, var(--border) 75%, transparent);
background: color-mix(in oklab, var(--surface) 75%, transparent);
}
.insight strong{ font-weight: 900; }
.insight .hint{ color: var(--muted2); font-size: 12px; }
.insight-actions{ display:flex; gap: 8px; }
#tasks{ display:grid; gap: 10px; }
.empty{
padding: 22px;
text-align: center;
color: var(--muted);
border: 1px dashed color-mix(in oklab, var(--border) 85%, transparent);
border-radius: var(--radius);
background: color-mix(in oklab, var(--surface) 85%, transparent);
}
.task{
display:grid;
grid-template-columns: auto 1fr auto;
align-items:center;
gap: 10px;
padding: 12px;
border: 1px solid color-mix(in oklab, var(--border) 85%, transparent);
border-radius: var(--radius);
background: color-mix(in oklab, var(--surface) 88%, transparent);
box-shadow: var(--shadow-soft);
transition: transform var(--t-med) var(--ease-out), border-color var(--t-med) var(--ease-out), background var(--t-med) var(--ease-out);
}
.task:hover{
transform: translateY(-1px);
background: color-mix(in oklab, var(--surface2) 88%, transparent);
border-color: color-mix(in oklab, var(--border2) 85%, transparent);
}
.task.completed .title{ text-decoration: line-through; color: var(--muted2); }
.task.canceled{ opacity: .82; }
.task.canceled .title{ text-decoration: line-through; color: var(--muted2); }
.task.canceled input[type="checkbox"]{ opacity: .5; }
.task .title, .task .meta{ overflow-wrap:anywhere; word-break: break-word; }
.task .meta{ font-size: 12px; color: var(--muted); }
.task .actions{ display:flex; gap: 8px; }
.badge{
display:inline-flex;
align-items:center;
gap: 6px;
padding: 2px 8px;
border-radius: 999px;
border: 1px solid color-mix(in oklab, var(--border) 85%, transparent);
background: color-mix(in oklab, var(--surface) 70%, transparent);
color: var(--fg);
font-size: 11px;
font-weight: 900;
}
.badge.badge-danger{ border-color: color-mix(in oklab, var(--danger) 55%, var(--border)); color: color-mix(in oklab, var(--danger) 72%, var(--fg)); }
.badge.badge-accent{ border-color: color-mix(in oklab, var(--accent2) 55%, var(--border)); }
.badge.badge-muted{ opacity: .85; }
/* Mobile-first task layout: actions drop to a second row */
.task{ grid-template-columns: auto 1fr; }
.task .actions{ grid-column: 1 / -1; justify-content: flex-end; }
.task input[type="checkbox"]{
width: 20px;
height: 20px;
accent-color: color-mix(in oklab, var(--accent2) 60%, var(--accent));
}
.action{
padding: var(--control-pad-y) var(--control-pad-x);
min-height: var(--control-h);
border-radius: var(--control-radius-pill);
background: color-mix(in oklab, var(--surface) 78%, transparent);
border: 1px solid color-mix(in oklab, var(--border) 85%, transparent);
color: var(--fg);
font-weight: 800;
cursor: pointer;
}
.action.edit{ border-color: color-mix(in oklab, var(--accent) 55%, var(--border)); }
.action.delete{ border-color: color-mix(in oklab, var(--danger) 55%, var(--border)); color: color-mix(in oklab, var(--danger) 72%, var(--fg)); }
footer{ padding: 16px; text-align:center; color: var(--muted2); }
/* Modal (mobile-first) */
.modal{
position: fixed;
inset: 0;
z-index: 80;
background: color-mix(in oklab, var(--bg) 65%, rgba(0,0,0,0.55));
backdrop-filter: blur(8px);
display:flex;
align-items:flex-end;
justify-content:center;
padding: calc(12px + env(safe-area-inset-bottom, 0px)) 12px calc(12px + env(safe-area-inset-bottom, 0px));
}
.modal-panel{
width: min(720px, 100%);
max-height: min(720px, 92vh);
overflow: hidden;
border-radius: var(--radius-lg);
background: color-mix(in oklab, var(--bg) 82%, transparent);
border: 1px solid color-mix(in oklab, var(--border) 80%, transparent);
box-shadow: var(--shadow);
display:flex;
flex-direction:column;
}
.modal-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap: 12px;
padding: 14px;
border-bottom: 1px solid color-mix(in oklab, var(--border) 55%, transparent);
}
.modal-h{ font-weight: 900; letter-spacing: -0.01em; }
.modal-sub{ color: var(--muted2); font-size: var(--text-sm); margin-top: 2px; }
.modal-close{
border: 1px solid color-mix(in oklab, var(--border) 85%, transparent);
background: color-mix(in oklab, var(--surface) 78%, transparent);
color: var(--fg);
border-radius: var(--control-radius-pill);
padding: var(--control-pad-y) var(--control-pad-x);
min-height: var(--control-h);
font-weight: 800;
cursor: pointer;
}
.modal-body{
padding: 14px;
overflow: auto;
display:flex;
flex-direction:column;
gap: 12px;
}
.field{ display:flex; flex-direction:column; gap: 6px; }
.field-label{ color: var(--muted2); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; }
.modal textarea{ min-height: 110px; resize: vertical; }
.row{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.modal-actions{ display:flex; gap: 10px; justify-content:flex-end; padding-top: 6px; }
.btn-primary{
border: 1px solid color-mix(in oklab, var(--border) 85%, transparent);
background:
linear-gradient(90deg,
color-mix(in oklab, var(--accent) 24%, transparent),
color-mix(in oklab, var(--accent2) 18%, transparent)
);
border-radius: var(--control-radius-pill);
padding: var(--control-pad-y) var(--control-pad-x-lg);
min-height: var(--control-h);
font-weight: 900;
cursor: pointer;
}
.btn-secondary{
border: 1px solid color-mix(in oklab, var(--border) 85%, transparent);
background: color-mix(in oklab, var(--surface) 75%, transparent);
border-radius: var(--control-radius-pill);
padding: var(--control-pad-y) var(--control-pad-x-lg);
min-height: var(--control-h);
font-weight: 900;
color: var(--fg);
cursor: pointer;
}
@media (min-width: 700px){
.modal{ align-items:center; padding: 18px; }
}
@media (max-width: 520px){
.row{ grid-template-columns: 1fr; }
.modal-actions{ flex-direction:column-reverse; }
.modal-actions button{ width: 100%; }
}
/* Calendar */
.calendar{ margin-top: 12px; }
.cal-body{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cal-toolbar{ display:flex; align-items:center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.cal-modes, .cal-nav{ display:flex; gap: 8px; flex-wrap: wrap; }
.cal-mode, .cal-nav-btn{
background: color-mix(in oklab, var(--surface) 78%, transparent);
color: var(--fg);
border: 1px solid color-mix(in oklab, var(--border) 85%, transparent);
border-radius: 999px;
padding: var(--control-pad-y) var(--control-pad-x);
min-height: var(--control-h);
font-weight: 800;
cursor: pointer;
}
.cal-mode.is-active{ border-color: color-mix(in oklab, var(--accent) 55%, var(--border)); background: color-mix(in oklab, var(--surface2) 82%, transparent); }
.cal-title{ font-weight: 860; letter-spacing: -0.01em; margin: 4px 0 10px; }
.cal-hint{ margin-top: 10px; color: var(--muted2); font-size: 12px; }
.cal-grid{ display:grid; gap: 10px; }
.cal-grid.week, .cal-grid.month{ grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-dow{ color: var(--muted2); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.cal-cell{
background: color-mix(in oklab, var(--surface) 88%, transparent);
border: 1px solid color-mix(in oklab, var(--border) 85%, transparent);
border-radius: var(--radius-sm);
padding: 10px;
min-height: 90px;
display:flex;
flex-direction: column;
gap: 6px;
cursor: pointer;
transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.cal-cell:hover{
transform: translateY(-1px);
background: color-mix(in oklab, var(--surface2) 88%, transparent);
border-color: color-mix(in oklab, var(--border2) 85%, transparent);
}
.cal-cell.is-outside{ opacity: .55; }
.cal-cell.is-today{ border-color: color-mix(in oklab, var(--accent) 65%, var(--border)); }
.cal-date{ display:flex; align-items:center; justify-content: space-between; gap: 8px; font-weight: 900; }
.cal-badge{ font-size: 12px; color: var(--muted2); }
.cal-items{ display:flex; flex-direction: column; gap: 6px; }
.cal-item{
font-size: 12px;
padding: 6px 8px;
border-radius: 12px;
background: color-mix(in oklab, var(--surface) 70%, transparent);
border: 1px solid color-mix(in oklab, var(--border) 75%, transparent);
overflow:hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cal-item.completed{ color: var(--muted2); text-decoration: line-through; }
.cal-item.is-conflict{ border-color: color-mix(in oklab, var(--danger) 55%, var(--border)); }
.cal-more{ font-size: 12px; color: var(--muted2); }
.cal-day{
background: color-mix(in oklab, var(--surface) 88%, transparent);
border: 1px solid color-mix(in oklab, var(--border) 85%, transparent);
border-radius: var(--radius);
padding: 12px;
box-shadow: var(--shadow-soft);
}
.cal-day h2{ margin: 0 0 8px; font-size: 16px; }
.cal-day .task{ margin-top: 10px; }
/* Mobile-first: make 7-column calendars swipeable by default */
.cal-grid.week, .cal-grid.month{ min-width: 720px; }
.cal-grid{ gap: 6px; }
.cal-cell{ padding: 8px; min-height: 78px; }
.cal-dow{ font-size: 11px; }
/* Tablet+ enhancements */
@media (min-width: 700px){
.app{ padding: 16px; }
.nav-inner{ padding: 12px 18px; flex-wrap: nowrap; }
.nav-actions{ flex: 0 0 auto; justify-content: flex-end; }
.controls{ width: auto; justify-content: flex-end; }
.controls input, .controls select{ flex: 0 1 auto; min-width: 180px; }
#new-task-form{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
#new-task-form button[type="submit"]{ justify-self: end; }
.task{ grid-template-columns: auto 1fr auto; }
.task .actions{ grid-column: auto; }
.cal-grid{ gap: 10px; }
.cal-cell{ padding: 10px; min-height: 90px; }
.cal-dow{ font-size: 12px; }
}
/* Desktop+ improvements: show full week/month without horizontal scroll */
@media (min-width: 980px){
.cal-body{ overflow-x: visible; }
.cal-grid.week, .cal-grid.month{ min-width: 0; }
}
@media (hover: none){
.task:hover, .cal-cell:hover{ transform:none; }
/* Touch targets (approx 44px) */
input, select, textarea{ min-height: var(--control-h-touch); }
.icon-btn, .tab, .cal-mode, .cal-nav-btn, .action{ min-height: var(--control-h-touch); }
#new-task-form button[type="submit"], .btn-primary, .btn-secondary, .modal-close{ min-height: var(--control-h-touch); }
.task input[type="checkbox"]{ width: 24px; height: 24px; }
}
@media (prefers-reduced-motion: reduce){
html{scroll-behavior:auto}
body::after{animation:none}
.task, .cal-cell{transition:none}
.page-loader{ transition: none; }
.page-loader-card::before{ animation: none; }
}