:root { --plan-accent-soft:#fff2ef; --plan-green:#238465; --plan-amber:#ad7717; --plan-blue:#4b72ac; }
:root[data-plan-theme=dark] { --ink:#edf0f4; --muted:#a0a9b5; --line:#353c47; --line-strong:#4a5360; --surface:#222832; --canvas:#171c24; --soft:#2b323e; --red:#f05d52; --red-dark:#ff8177; --plan-accent-soft:#3a272a; --plan-green:#66c6a1; --plan-amber:#e4bc68; --plan-blue:#94b4ea; --shadow:0 5px 22px #00000012; }
.planning-page { background:var(--canvas); }
.planning-page .header-inner { max-width:1600px; gap:22px; }
.planning-page .primary-nav { margin-left:10px; }
.planning-page .primary-nav a { color:var(--muted); padding:0 12px; }
.planning-page .primary-nav a[aria-current] { color:var(--red-dark); }
.planning-page .account-avatar { background:var(--plan-accent-soft); color:var(--red-dark); }
.planning-page .button-secondary,.planning-page .button-icon { background:var(--surface); color:var(--ink); border-color:var(--line); }
.planning-page .button-secondary:hover,.planning-page .button-icon:hover { border-color:var(--red); background:var(--plan-accent-soft); }
.planning-page .button-ghost { color:var(--muted); }
.planning-page input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]),.planning-page textarea,.planning-page select { width:100%; min-height:41px; margin-top:0; background:var(--surface); border:1px solid var(--line-strong); border-radius:7px; padding:9px 11px; color:var(--ink); font-size:.85rem; }
.planning-page select[multiple] { min-height:86px; padding:4px; }
.planning-page select:not([multiple]) { appearance:none; -webkit-appearance:none; padding-right:34px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23697179' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E"); background-position:right 11px center; background-size:16px; background-repeat:no-repeat; cursor:pointer; }
:root[data-plan-theme=dark] .planning-page select:not([multiple]) { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a0a9b5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E"); }
.planning-page select option { color:var(--ink); background:var(--surface); }
.planning-page input[type=date]::-webkit-calendar-picker-indicator { opacity:.65; cursor:pointer; }
.planning-page textarea { resize:vertical; line-height:1.55; }
.planning-page input::placeholder,.planning-page textarea::placeholder { color:var(--muted); opacity:.85; }
.planning-page label { display:grid; gap:7px; font-size:.82rem; color:var(--ink); font-weight:650; }
.planning-page label small { color:var(--muted); font-weight:400; font-size:.75rem; }
.planning-page input[type=checkbox] { accent-color:var(--red); width:16px; height:16px; flex:none; }
.plan-header-actions { display:flex; align-items:center; gap:14px; margin-left:auto; }
.plan-header-actions #plan-theme { min-height:36px; padding:7px 10px; font-size:.75rem; }
.notification-bell { position:relative; padding:9px; }
#notification-count { display:grid; place-items:center; position:absolute; top:-7px; right:-7px; min-width:19px; height:19px; padding:0 4px; font-size:.63rem; border-radius:12px; color:white; background:#d91c12; border:2px solid var(--surface); }
.plan-main { max-width:1510px; margin:auto; padding:35px 32px 40px; }
.plan-main .page-heading { align-items:center; }
.plan-main .page-heading h1 { font-size:2.3rem; margin:6px 0 9px; }
.plan-main .page-heading p { font-size:.88rem; }
.plan-actions { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.plan-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; margin:26px 0; }
.plan-stats>div { padding:18px 22px; background:var(--surface); border:1px solid var(--line); border-radius:10px; display:flex; align-items:flex-start; gap:12px; }
.plan-stats>div>span:last-child { font-size:.78rem; color:var(--muted); }
.plan-stats strong { display:block; color:var(--ink); font-size:1.8rem; font-weight:700; line-height:1.4; margin-top:3px; }
.stat-dot { width:9px; height:9px; border-radius:50%; display:inline-block; margin-top:5px; }
.stat-dot.red { background:var(--red); }.stat-dot.amber { background:var(--plan-amber); }.stat-dot.green { background:var(--plan-green); }.stat-dot.gray { background:var(--muted); }
.plan-workspace { overflow:hidden; }
.plan-tabs { display:flex; padding:0 22px; border-bottom:1px solid var(--line); gap:24px; flex-wrap:wrap; }
.plan-tabs button { position:relative; border:0; border-radius:0; background:transparent; color:var(--muted); padding:20px 3px; font-size:.85rem; }
.plan-tabs button[aria-pressed=true] { color:var(--red-dark); }
.plan-tabs button[aria-pressed=true]::after { content:''; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--red); border-radius:3px 3px 0 0; }
.plan-count { background:var(--soft); padding:2px 7px; border-radius:5px; font-size:.7rem; color:var(--muted); }
.plan-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:23px 24px 18px; }
.period-controls { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.period-controls h2 { font-size:1.05rem; margin:0 14px; text-transform:capitalize; }
.period-controls button { min-height:34px; height:34px; }
#period-size { width:104px; }#jump-date { width:151px; min-width:0; }
.plan-filters { display:flex; align-items:center; gap:10px; padding:0 24px 18px; flex-wrap:wrap; }
.plan-filters input[type=search] { flex:1; min-width:210px; }
.plan-filters select { width:auto; max-width:230px; }
.planning-page .plan-inline-check { display:flex; align-items:center; gap:7px; white-space:nowrap; color:var(--muted); font-size:.78rem; }
.plan-summary { display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:.74rem; padding:0 24px 16px; color:var(--muted); }
#plan-content { padding:0 24px 24px; min-height:370px; }
.plan-empty { display:grid; place-content:center; text-align:center; min-height:240px; padding:30px; color:var(--muted); border:1px dashed var(--line-strong); border-radius:9px; }
.plan-empty .empty-icon { color:var(--red); font-size:2.3rem; margin-bottom:9px; }
.plan-empty h3 { color:var(--ink); margin:0 0 7px; font-size:1.1rem; }
.plan-empty p { font-size:.82rem; margin-bottom:16px; }
.plan-empty button { justify-self:center; }
.plan-board { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:start; }
.plan-lane { background:var(--canvas); border:1px solid var(--line); border-radius:10px; padding:13px; min-height:290px; }
.lane-heading { display:flex; align-items:center; gap:8px; margin:0 0 14px; font-size:.81rem; }
.lane-heading .plan-count { margin-left:auto; background:var(--surface); }
.lane-heading .stat-dot { margin-top:0; }
.plan-lane .lane-empty { padding:30px 10px; text-align:center; font-size:.77rem; color:var(--muted); border:1px dashed var(--line-strong); border-radius:7px; }
.task-card { position:relative; display:flex; flex-direction:column; align-items:stretch; gap:11px; width:100%; margin-bottom:10px; padding:17px; border:1px solid var(--line); border-radius:9px; color:var(--ink); background:var(--surface); text-align:left; font-weight:400; box-shadow:0 2px 5px #00000003; transition:box-shadow .15s,border-color .15s; }
.task-card:hover { border-color:var(--line-strong); box-shadow:0 4px 12px #0000000c; }
.task-card.is-done .task-title { text-decoration:line-through; color:var(--muted); }
.task-card-top { display:flex; justify-content:space-between; align-items:center; gap:6px; }
.task-card .task-title { display:block; font-size:.89rem; line-height:1.5; font-weight:700; overflow-wrap:anywhere; }
.task-card .task-excerpt { color:var(--muted); font-size:.76rem; line-height:1.55; margin:0; white-space:pre-line; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.task-card-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:6px; font-size:.71rem; color:var(--muted); border-top:1px solid var(--line); padding-top:10px; }
.plan-tag { display:inline-flex; align-items:center; gap:4px; background:var(--soft); border-radius:5px; padding:4px 7px; font-size:.65rem; color:var(--muted); line-height:1.3; font-weight:650; }
.plan-tag.specific { color:var(--plan-blue); background:color-mix(in srgb,var(--plan-blue) 10%,var(--surface)); }
.plan-tag.deadline { color:var(--plan-amber); background:color-mix(in srgb,var(--plan-amber) 10%,var(--surface)); }
.plan-tag.late { color:var(--red-dark); background:var(--plan-accent-soft); }
.plan-tag.done { color:var(--plan-green); background:color-mix(in srgb,var(--plan-green) 10%,var(--surface)); }
.plan-progress { display:grid; gap:6px; }
.plan-progress>span { display:flex; justify-content:space-between; color:var(--muted); font-size:.69rem; }
.plan-progress progress { width:100%; height:5px; accent-color:var(--plan-green); border:0; border-radius:6px; overflow:hidden; background:var(--soft); }
.plan-progress progress::-webkit-progress-bar { background:var(--soft); }.plan-progress progress::-webkit-progress-value { background:var(--plan-green); border-radius:6px; }
.plan-section-heading { display:flex; align-items:center; gap:10px; margin:26px 0 14px; font-size:.9rem; }
.plan-section-heading small { color:var(--muted); font-size:.74rem; font-weight:400; }
.undated-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }.undated-grid .task-card { margin:0; }
.planner-day { border:1px solid var(--line); border-radius:9px; overflow:hidden; margin-bottom:14px; }
.planner-day-head { padding:12px 16px; display:flex; align-items:center; gap:9px; background:var(--canvas); border-bottom:1px solid var(--line); }
.planner-day-head h3 { margin:0; font-size:.82rem; text-transform:capitalize; }.planner-day-head .plan-count { margin-left:auto; }
.planner-day-head button { min-height:27px; height:27px; width:27px; font-size:1.15rem; }
.planner-day.today { border-color:color-mix(in srgb,var(--red) 45%,var(--line)); }.planner-day.today .planner-day-head { background:var(--plan-accent-soft); }
.planner-row { display:flex; width:100%; align-items:center; justify-content:flex-start; gap:15px; padding:15px 18px; color:var(--ink); background:var(--surface); border-radius:0; border:0; border-bottom:1px solid var(--line); font-weight:400; text-align:left; }
.planner-row:last-child { border:0; }.planner-row:hover { background:var(--canvas); }
.planner-row .row-time { width:62px; flex:none; color:var(--muted); font-size:.76rem; }.planner-row .row-title { flex:1; color:var(--ink); font-size:.84rem; overflow-wrap:anywhere; }.planner-row.is-done .row-title { text-decoration:line-through; color:var(--muted); }
.planner-row .row-person { color:var(--muted); font-size:.74rem; }.row-status { display:inline-flex; gap:6px; align-items:center; font-size:.72rem; color:var(--muted); }.row-status .stat-dot { margin:0; }
.day-empty { padding:16px; margin:0; color:var(--muted); font-size:.76rem; }
.plan-calendar-scroll { overflow:auto; border:1px solid var(--line); border-radius:8px; }
.plan-calendar { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); min-width:760px; }
.calendar-weekday { background:var(--canvas); padding:10px; font-size:.68rem; font-weight:700; text-transform:uppercase; color:var(--muted); text-align:center; border-bottom:1px solid var(--line); }
.calendar-day { min-height:130px; padding:7px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.calendar-day:nth-child(7n) { border-right:0; }.calendar-day.outside { background:var(--canvas); }.calendar-day.outside .calendar-day-label { opacity:.5; }
.calendar-day-label { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.calendar-day-label span { display:grid; place-items:center; width:26px; height:26px; font-size:.75rem; font-weight:650; border-radius:50%; }.calendar-day.today .calendar-day-label span { background:var(--red); color:#fff; }
.calendar-day-label button { background:transparent; color:var(--muted); border:0; min-height:23px; padding:2px 6px; }
.calendar-event { display:block; width:100%; padding:6px 7px; margin:4px 0; min-height:0; border-radius:4px; border:0; border-left:3px solid var(--plan-blue); background:color-mix(in srgb,var(--plan-blue) 9%,var(--surface)); color:var(--ink); text-align:left; font-size:.68rem; font-weight:550; overflow-wrap:anywhere; line-height:1.45; }
.calendar-event.deadline { border-color:var(--plan-amber); background:color-mix(in srgb,var(--plan-amber) 9%,var(--surface)); }.calendar-event.is-done { border-color:var(--plan-green); text-decoration:line-through; opacity:.65; }
.calendar-event.late { border-color:var(--red); }.plan-calendar.week .calendar-day { min-height:340px; }
.ideas-intro { padding:16px 0 24px; }.ideas-intro h2 { font-size:1.25rem; margin:0 0 5px; }.ideas-intro p { margin:0; font-size:.84rem; color:var(--muted); }
.ideas-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }.ideas-grid .task-card { margin:0; min-height:195px; border-top:3px solid var(--yellow); background:color-mix(in srgb,var(--yellow) 5%,var(--surface)); }
.plan-footer { display:flex; justify-content:space-between; gap:20px; margin:19px 2px 0; color:var(--muted); font-size:.71rem; }
.plan-alert { padding:12px 16px; margin:18px 0; border:1px solid var(--line-strong); border-radius:8px; background:var(--surface); font-size:.84rem; }
.plan-alert.error,.plan-error { border:1px solid color-mix(in srgb,var(--red) 40%,var(--line)); border-radius:7px; color:var(--red-dark); background:var(--plan-accent-soft); padding:12px 14px; font-size:.82rem; }
.plan-info { border:1px solid var(--line); border-radius:7px; padding:11px; color:var(--muted); background:var(--canvas); font-size:.76rem; line-height:1.6; }
.plan-dialog { width:min(740px,94vw); max-width:94vw; max-height:92dvh; padding:0; border:1px solid var(--line); border-radius:14px; background:var(--surface); color:var(--ink); box-shadow:0 25px 90px #0005; }
.plan-dialog::backdrop { background:#0d16216e; backdrop-filter:blur(3px); }
.plan-dialog>form { display:flex; flex-direction:column; max-height:90dvh; }
.plan-dialog-head { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; padding:22px 25px; border-bottom:1px solid var(--line); flex:none; }
.plan-dialog-head h2 { margin:5px 0 0; font-size:1.35rem; overflow-wrap:anywhere; }
.plan-dialog-head .button-icon { font-size:1.5rem; }
.plan-dialog-body { padding:23px 25px; overflow:auto; }.plan-dialog-body>label,.plan-dialog-body>.plan-form-row { margin-bottom:18px; }
.plan-form-row { display:flex; gap:14px; align-items:flex-start; }.plan-form-row>label { flex:1; min-width:0; }
#task-date-fields { margin-bottom:20px; }#task-date-fields .plan-form-row { margin-bottom:17px; }
.plan-dialog-foot { padding:16px 25px; border-top:1px solid var(--line); display:flex; gap:9px; justify-content:flex-end; flex:none; }
#recurrence-weekdays { border:1px solid var(--line); border-radius:7px; display:flex; flex-wrap:wrap; gap:12px; margin:0 0 15px; padding:12px; }
#recurrence-weekdays legend { font-size:.8rem; color:var(--muted); }#recurrence-weekdays label { display:flex; align-items:center; gap:3px; font-size:.75rem; }
.plan-dropzone { display:grid; justify-items:center; gap:9px; text-align:center; padding:22px; border:1px dashed var(--line-strong); border-radius:9px; background:var(--canvas); margin:18px 0 12px; }
.plan-dropzone strong { font-size:.84rem; }.plan-dropzone span,.plan-dropzone small { color:var(--muted); font-size:.75rem; }.planning-page .plan-dropzone label { display:inline-flex; cursor:pointer; }.plan-dropzone.dragover { border-color:var(--red); background:var(--plan-accent-soft); }
.plan-file-list { display:grid; gap:6px; }.plan-file { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 10px; border:1px solid var(--line); border-radius:6px; font-size:.77rem; overflow-wrap:anywhere; }.plan-file button { min-height:24px; height:24px; padding:2px 6px; font-size:.75rem; }
.plan-detail-dialog { width:min(1100px,96vw); }.plan-detail-dialog>header { position:sticky; top:0; background:var(--surface); z-index:2; }
.plan-detail-layout { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); }.plan-detail-main { padding:24px; }.plan-detail-main>h3 { margin:26px 0 12px; font-size:.85rem; }
#detail-meta { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:19px; }.preserve-lines { white-space:pre-wrap; overflow-wrap:anywhere; font-size:.86rem; line-height:1.7; }
#detail-checklist { margin:20px 0; }#detail-checklist label { display:flex; align-items:flex-start; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); font-weight:400; font-size:.84rem; overflow-wrap:anywhere; }#detail-checklist input:checked+span { text-decoration:line-through; color:var(--muted); }#detail-checklist .plan-progress { margin-bottom:12px; }
.plan-detail-status { padding:18px 0; border-top:1px solid var(--line); display:grid; gap:15px; }.plan-detail-status select { max-width:220px; }.plan-detail-status .plan-actions button { font-size:.73rem; min-height:35px; padding:8px 10px; }
.plan-attachments { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }.plan-attachment { border:1px solid var(--line); border-radius:7px; overflow:hidden; min-width:0; }.plan-attachment img { display:block; width:100%; height:100px; object-fit:contain; background:var(--canvas); }.plan-attachment .attachment-icon { display:grid; place-items:center; height:70px; color:var(--muted); background:var(--canvas); font-size:1.5rem; }.plan-attachment a { display:block; font-size:.72rem; padding:8px; overflow-wrap:anywhere; }
.plan-attachment button { min-height:0; padding:3px 8px 8px; font-size:.65rem; background:transparent; color:var(--muted); }
.plan-dropzone.compact { padding:13px; }.plan-participants { display:flex; flex-wrap:wrap; gap:6px; }.participant { padding:5px 8px; background:var(--soft); border-radius:5px; font-size:.72rem; }
.plan-chat { display:flex; flex-direction:column; background:var(--canvas); border-left:1px solid var(--line); padding:24px; min-height:530px; }.plan-chat h3 { margin-bottom:4px; }.plan-chat>div>p { font-size:.75rem; }
.plan-comments { display:flex; flex-direction:column; gap:16px; padding:10px 0 20px; max-height:410px; overflow:auto; }.plan-comment { padding:12px; background:var(--surface); border:1px solid var(--line); border-radius:8px; }.plan-comment-head { display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:8px; font-size:.74rem; }.plan-comment time { font-size:.65rem; color:var(--muted); }.plan-comment p { font-size:.79rem; margin:7px 0 0; line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere; }.plan-comment .mention { color:var(--red-dark); font-weight:650; }
#comment-form { display:grid; gap:9px; margin-top:auto; }#comment-form>button { justify-self:end; font-size:.76rem; }.mention-options { display:flex; gap:6px; flex-wrap:wrap; }.mention-options button { background:var(--surface); color:var(--red-dark); border:1px solid var(--line); padding:5px 7px; font-size:.7rem; min-height:26px; }
.plan-notifications { position:fixed; z-index:40; top:85px; right:max(20px,calc((100vw - 1460px)/2)); width:min(400px,92vw); max-height:75dvh; overflow:auto; padding:17px; box-shadow:0 15px 55px #0003; }.plan-panel-head { display:flex; align-items:center; justify-content:space-between; }.plan-panel-head h2 { margin:0; font-size:1rem; }#notification-items { margin-top:12px; display:grid; gap:7px; }.notification-item { width:100%; display:block; text-align:left; font-weight:450; font-size:.78rem; background:var(--canvas); border:1px solid var(--line); color:var(--ink); padding:12px; line-height:1.6; }.notification-item.unread { border-left:3px solid var(--red); }.notification-item small { display:block; color:var(--muted); font-size:.67rem; margin-top:4px; }
.plan-users-list { margin-top:25px; border-top:1px solid var(--line); }.plan-user-row { display:flex; justify-content:space-between; gap:14px; padding:15px 0; border-bottom:1px solid var(--line); align-items:center; }.plan-user-row small { display:block; color:var(--muted); font-size:.72rem; }.plan-user-row strong { font-size:.83rem; }.plan-user-row .plan-actions button { font-size:.7rem; min-height:32px; padding:6px 9px; }#user-form>label { margin:17px 0; }
.plan-login { display:grid; justify-items:center; padding:65px 20px 35px; }.plan-login-card { width:min(450px,100%); padding:34px; }.plan-login-icon { color:var(--red); background:var(--plan-accent-soft); border-radius:10px; font-size:1.7rem; width:49px; height:49px; text-align:center; margin-bottom:25px; }.plan-login-card h1 { font-size:2rem; margin:12px 0 16px; }.plan-login-card>p { font-size:.85rem; line-height:1.65; }.plan-login-card form { display:grid; gap:19px; margin:25px 0; }.plan-login-card form>button { margin-top:5px; }.plan-login-card .back-link { display:block; text-align:center; margin:0; font-size:.75rem; }.plan-login>p { margin-top:22px; font-size:.72rem; }
@media(min-width:1700px) { .plan-main { max-width:1600px; } }
@media(max-width:1120px) { .planning-page .header-inner { padding:0 20px; gap:12px; }.planning-page .primary-nav a { font-size:.76rem; padding:0 8px; }.plan-header-actions { gap:9px; }.plan-header-actions .account-label>span:last-child { display:none; }.plan-header-actions #plan-theme-label { display:none; }.plan-main { padding:27px 20px; }.plan-board { gap:10px; }.task-card { padding:13px; }.plan-main .page-heading { align-items:flex-start; }.plan-filters { gap:8px; }.plan-detail-layout { grid-template-columns:1.1fr 1fr; }.plan-attachments { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:760px) { .planning-page .header-inner { flex-wrap:wrap; padding:13px 16px 0; }.planning-page .primary-nav { order:3; width:100%; margin:0; min-height:42px; }.planning-page .brand-copy strong { font-size:.9rem; }.plan-header-actions .account-label { display:none; }.plan-main { padding:24px 13px; }.plan-main .page-heading { display:block; margin-bottom:18px; }.plan-main .page-heading h1 { font-size:1.9rem; }.plan-main .page-heading>.plan-actions { margin-top:18px; }.plan-stats { grid-template-columns:repeat(2,1fr); gap:9px; margin:20px 0; }.plan-stats>div { padding:13px; }.plan-stats strong { font-size:1.5rem; }.plan-tabs { gap:15px; padding:0 14px; }.plan-tabs button { padding:15px 0; font-size:.76rem; }.plan-toolbar { padding:17px 14px; }.period-controls h2 { margin:0 5px; font-size:.89rem; }.plan-filters { padding:0 14px 15px; }.plan-filters select { flex:1; max-width:none; min-width:130px; }.plan-filters input[type=search] { flex:1 1 100%; }.plan-summary { padding:0 14px 13px; }.plan-summary #period-hint { display:none; }#plan-content { padding:0 12px 18px; }.plan-board { grid-template-columns:repeat(3,minmax(235px,1fr)); overflow-x:auto; align-items:stretch; padding-bottom:7px; }.undated-grid,.ideas-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.planner-row { padding:13px 11px; gap:9px; }.planner-row .row-person { display:none; }.planner-row .row-time { width:45px; font-size:.68rem; }.planner-row .row-status { font-size:0; }.plan-footer { display:block; line-height:1.8; }.plan-footer span { display:block; }.plan-dialog-head { padding:18px; }.plan-dialog-body { padding:18px; }.plan-form-row { flex-wrap:wrap; }.plan-form-row>label { flex-basis:150px; }.plan-detail-layout { grid-template-columns:1fr; }.plan-detail-main,.plan-chat { padding:18px; }.plan-chat { border-left:0; border-top:1px solid var(--line); min-height:370px; }.plan-comments { max-height:320px; }.plan-dialog-foot { padding:13px 18px; }.plan-notifications { top:130px; }.plan-login { padding-top:30px; } }
@media(max-width:440px) { .ideas-grid,.undated-grid { grid-template-columns:1fr; }.plan-tabs { gap:13px; }.plan-tabs button { font-size:.7rem; }.plan-login-card { padding:25px; }.plan-user-row { flex-wrap:wrap; } }

/* Keep the workspace in the viewport; long lists scroll inside their own area. */
.planning-page:has(.plan-main) { height:100dvh; overflow:hidden; display:flex; flex-direction:column; }
.planning-page .site-header { flex:none; }
.planning-page .header-inner { min-height:52px; max-width:1760px; padding:0 22px; gap:20px; }
.planning-page .brand-mark { width:30px; height:30px; padding:5px; }
.planning-page .brand-mark span { height:19px; width:8px; }
.planning-page .brand-mark span:last-child { height:12px; margin-top:7px; }
.planning-page .brand-copy strong { font-size:.91rem; }.planning-page .brand-copy small { font-size:.5rem; }
.planning-page .primary-nav a { font-size:.77rem; }.plan-header-actions { gap:10px; }
.plan-header-actions #plan-theme,.plan-header-actions .notification-bell { min-height:31px; padding:6px 9px; font-size:.71rem; }
.planning-page .account-avatar { width:28px; height:28px; font-size:.75rem; }
.planning-page .account-label strong { font-size:.73rem; }.planning-page .account-label small { font-size:.63rem; }
.plan-main { width:100%; max-width:1760px; flex:1; min-height:0; margin:0 auto; padding:10px 22px 14px; display:flex; flex-direction:column; gap:8px; }
.plan-main .page-heading { flex:none; display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0; min-height:39px; }
.plan-main .page-heading h1 { font-size:1.4rem; line-height:1.2; margin:0; letter-spacing:-.035em; }
.plan-main .page-heading .plan-actions { margin:0; gap:7px; }
.plan-main .page-heading button { min-height:36px; height:36px; padding:8px 13px; font-size:.77rem; border-radius:8px; }
.plan-stats { flex:none; display:flex; gap:26px; margin:0; padding:1px 2px 5px; }
.plan-stats>div { padding:0; border:0; background:none; border-radius:0; align-items:center; gap:7px; }
.plan-stats>div>span:last-child { display:inline-flex; align-items:center; gap:9px; font-size:.73rem; }
.plan-stats strong { display:inline; font-size:1rem; line-height:1.3; margin:0; }
.plan-stats .stat-dot { width:7px; height:7px; margin:0; }
.plan-workspace { display:flex; flex-direction:column; flex:1; min-height:0; }
.plan-tabs { flex:none; padding:0 17px; gap:23px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
.plan-tabs button { flex:none; white-space:nowrap; padding:12px 2px; font-size:.77rem; min-height:42px; }
.plan-toolbar { flex:none; padding:12px 16px 10px; gap:12px; }
.period-controls { gap:12px; }.period-controls h2 { font-size:.94rem; margin:0; text-transform:none; letter-spacing:-.02em; }
.period-controls button { min-height:36px; height:36px; border-radius:8px; padding:8px 13px; font-size:.77rem; }.period-controls .button-icon { width:36px; }
.period-arrows { display:flex; border:1px solid var(--line-strong); border-radius:8px; overflow:hidden; }
.planning-page .period-arrows .button-icon { border:0; border-radius:0; width:34px; height:34px; min-height:34px; padding:0; font-size:1.3rem; background:var(--surface); }
.planning-page .period-arrows .button-icon+button { border-left:1px solid var(--line); }
#period-options { gap:8px; flex-wrap:nowrap; }
#period-size,#jump-date,#scope-filter,#status-filter,#task-search { min-height:36px; height:36px; padding:8px 11px; border-radius:8px; font-size:.77rem; line-height:18px; border-color:var(--line-strong); }
#period-size,#scope-filter,#status-filter { padding-right:34px; }
#period-size { width:112px; }#jump-date { width:150px; }
.plan-filters { flex:none; display:grid; grid-template-columns:minmax(180px,1fr) auto; align-items:center; padding:0 16px 10px; gap:12px; }
.plan-search { position:relative; min-width:0; }.plan-search svg { position:absolute; z-index:1; left:12px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none; }
#task-search { width:100%; padding-left:36px; }
.plan-filter-controls { display:flex; align-items:center; gap:8px; }
#scope-filter { width:205px; max-width:none; }#status-filter { width:155px; max-width:none; }
.planning-page .plan-filter-controls .plan-inline-check { height:36px; padding:0 11px; gap:8px; border:1px solid var(--line-strong); border-radius:8px; background:var(--surface); color:var(--muted); font-size:.75rem; cursor:pointer; }
.planning-page .plan-filter-controls .plan-inline-check:has(input:checked) { color:var(--red-dark); border-color:var(--red); background:var(--plan-accent-soft); }
.plan-summary { flex:none; padding:0 17px 8px; font-size:.67rem; }
#plan-content { flex:1; min-height:0; padding:0 14px 12px; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent; }
.plan-main[data-view=calendar] #plan-content { overflow:hidden; padding-top:0; }
.plan-calendar-scroll { width:100%; height:100%; overflow:hidden; }
.plan-calendar { min-width:0; width:100%; height:100%; grid-template-rows:27px repeat(var(--calendar-weeks,6),minmax(0,1fr)); }
.calendar-weekday { padding:6px 2px; font-size:.65rem; line-height:14px; }
.calendar-day { min-width:0; min-height:0; padding:4px 6px; overflow:hidden; display:flex; flex-direction:column; }
.calendar-day-label { flex:none; margin:0 0 2px; height:22px; }.calendar-day-label span { width:22px; height:22px; font-size:.71rem; }
.calendar-day-label button { min-height:20px; height:20px; padding:0 5px; opacity:.45; }
.calendar-day:hover .calendar-day-label button,.calendar-day-label button:focus-visible { opacity:1; }
.calendar-events { min-height:0; }.calendar-event { padding:3px 5px; margin:2px 0; font-size:.66rem; line-height:16px; height:22px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:none; }
.calendar-more { display:block; align-self:flex-start; background:transparent; color:var(--muted); border:0; min-height:17px; height:17px; padding:0 4px; font-size:.62rem; font-weight:600; margin-top:1px; }
.calendar-more:hover { color:var(--red-dark); background:var(--plan-accent-soft); }
.planner-layout { display:grid; grid-template-columns:minmax(0,1fr) 265px; gap:14px; height:100%; min-height:0; }
.planner-days { display:flex; gap:10px; align-items:flex-start; overflow:auto; scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent; }
.planner-column { display:flex; flex:1; min-width:0; flex-direction:column; gap:8px; }
.planner-day { margin:0; min-width:0; }.planner-day-head { padding:7px 10px; gap:6px; }
.planner-day-head h3 { font-size:.72rem; }.planner-day-head button { width:23px; min-height:23px; height:23px; }
.planner-row { padding:10px; gap:7px; flex-wrap:wrap; }.planner-row .row-title { font-size:.77rem; min-width:100px; }.planner-row .row-time { width:42px; font-size:.65rem; }
.planner-row .row-person { display:none; }.planner-row .row-status { font-size:.66rem; }
.day-empty { padding:10px; font-size:.71rem; }.planner-undated { border-left:1px solid var(--line); padding-left:13px; min-width:0; overflow:auto; scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent; }
.plan-main[data-period=week] .planner-days .day-empty { display:none; }
.planner-undated .plan-section-heading { margin:4px 0 11px; flex-wrap:wrap; gap:7px; font-size:.82rem; }
.planner-undated .plan-section-heading small { flex-basis:100%; font-size:.68rem; }
.planner-undated .undated-grid { grid-template-columns:1fr; gap:8px; }
.planner-days .plan-empty { grid-column:1/-1; min-height:180px; }.plan-main[data-period=day] .planner-days { grid-template-columns:1fr; }
.task-card { padding:12px; gap:8px; }.task-card .task-title { font-size:.81rem; }.task-card .task-excerpt { font-size:.71rem; }
.task-card-footer { padding-top:8px; font-size:.65rem; }.plan-progress>span { font-size:.65rem; }
.card-state { display:inline-flex; align-items:center; gap:5px; }.card-state .stat-dot { width:6px; height:6px; margin:0; }
.plan-main[data-view=board] #plan-content { overflow:hidden; }.plan-board { height:100%; min-height:0; gap:12px; overflow-x:auto; }
.plan-lane { min-height:0; height:100%; display:flex; flex-direction:column; padding:11px; }
.lane-heading { flex:none; margin-bottom:10px; }.lane-tasks { flex:1; min-height:0; overflow:auto; scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent; padding:0 2px; }
.ideas-intro { padding:3px 0 15px; }.ideas-intro h2 { font-size:1rem; }.ideas-intro p { font-size:.76rem; }
.ideas-grid { gap:12px; }.ideas-grid .task-card { min-height:155px; }
.plan-notifications { top:64px; }

/* Native checkbox semantics, with a consistent visual in both themes. */
.planning-page input[type=checkbox] { appearance:none; -webkit-appearance:none; display:inline-block; width:18px; height:18px; margin:0; border:1.5px solid var(--line-strong); border-radius:5px; background-color:var(--canvas); background-position:center; background-repeat:no-repeat; background-size:12px 12px; vertical-align:middle; cursor:pointer; transition:background-color .15s,border-color .15s,box-shadow .15s; }
.planning-page input[type=checkbox]:hover { border-color:var(--red); box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 10%,transparent); }
.planning-page input[type=checkbox]:checked { border-color:var(--red); background-color:var(--red); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='m3 7 2.5 2.5L11 4' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.planning-page input[type=checkbox]:focus-visible { outline:2px solid var(--red); outline-offset:3px; }
.planning-page input[type=checkbox]:disabled { opacity:.45; cursor:not-allowed; }
#detail-checklist input[type=checkbox] { width:20px; height:20px; margin-top:1px; border-radius:6px; }
#recurrence-weekdays label { border:1px solid var(--line); border-radius:7px; padding:7px 9px; gap:7px; background:var(--canvas); cursor:pointer; }
#recurrence-weekdays label:has(input:checked) { border-color:var(--red); background:var(--plan-accent-soft); color:var(--red-dark); }
#recurrence-weekdays { gap:7px; }
@media(forced-colors:active) { .planning-page input[type=checkbox] { appearance:auto; } }

.plan-toast { position:fixed; inset:auto 22px 22px auto; z-index:1000; width:max-content; max-width:min(410px,calc(100vw - 32px)); margin:0; padding:15px 12px 17px 16px; display:flex; align-items:center; gap:12px; border:1px solid var(--line-strong); border-radius:11px; color:var(--ink); background:var(--surface); box-shadow:0 12px 45px #0003; overflow:hidden; font-size:.82rem; line-height:1.5; }
.plan-toast::backdrop { display:none; }.toast-icon { display:grid; place-items:center; flex:none; width:27px; height:27px; border-radius:50%; color:var(--plan-green); background:color-mix(in srgb,var(--plan-green) 13%,var(--surface)); font-size:.95rem; font-weight:800; }
#plan-alert-message { overflow-wrap:anywhere; }#plan-alert-close { flex:none; align-self:flex-start; min-height:25px; padding:0 5px; font-size:1.3rem; line-height:1; }
.toast-timer { position:absolute; bottom:0; left:0; right:0; height:3px; background:var(--plan-green); transform-origin:left; }
.plan-toast.error .toast-icon { color:var(--red-dark); background:var(--plan-accent-soft); }.plan-toast.error .toast-timer { background:var(--red); }

.plan-detail-dialog[open] { display:flex; flex-direction:column; height:min(740px,94dvh); max-height:94dvh; overflow:hidden; }
.plan-detail-dialog .plan-dialog-head { padding:16px 19px; }.plan-detail-dialog .plan-dialog-head h2 { font-size:1.15rem; }
.plan-detail-layout { flex:1; min-height:0; overflow:hidden; }
.plan-detail-main { overflow:auto; padding:18px; scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent; }
.plan-chat { min-height:0; padding:18px; }.plan-chat>div>p { margin-bottom:10px; }
.plan-comments { flex:1; min-height:60px; max-height:none; padding:5px 0 14px; }
#comment-form { flex:none; }#comment-form textarea { min-height:70px; }
#detail-checklist { margin:14px 0; }#detail-checklist label { padding:8px 0; }
.plan-detail-status { padding:12px 0; gap:10px; }.plan-detail-main>h3 { margin:18px 0 9px; }
#detail-error { flex:none; margin:8px 16px; }

@media(max-width:1100px) { .planner-layout { grid-template-columns:minmax(0,1fr) 220px; gap:10px; }.plan-summary #period-hint { display:none; }.planning-page .header-inner { gap:12px; }.plan-filters { grid-template-columns:1fr; gap:8px; }.plan-filter-controls { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; }#scope-filter,#status-filter { width:100%; min-width:0; } }
@media(max-width:760px) {
  .planning-page .header-inner { min-height:44px; padding:8px 12px 0; flex-wrap:wrap; gap:7px; }
  .planning-page .primary-nav { min-height:31px; height:31px; }.planning-page .primary-nav a { font-size:.71rem; }
  .plan-main { padding:8px 10px 10px; gap:7px; }.plan-main .page-heading { min-height:34px; }
  .plan-main .page-heading h1 { font-size:1.18rem; }.plan-main .page-heading .plan-actions { gap:6px; }.plan-main .page-heading button { font-size:.71rem; min-height:36px; padding:8px 10px; }
  .plan-stats { gap:17px; padding-bottom:2px; }.plan-stats>div>span:last-child { gap:5px; font-size:.65rem; }.plan-stats strong { font-size:.86rem; }
  .plan-tabs { padding:0 10px; gap:17px; }.plan-tabs button { padding:10px 0; min-height:38px; font-size:.7rem; }
  .plan-toolbar { padding:10px; }.period-controls { gap:8px; }.period-controls h2 { margin:0; font-size:.82rem; }
  .plan-filters { padding:0 10px 10px; gap:8px; }
  .plan-summary { padding:0 10px 7px; }#plan-content { padding:0 8px 8px; }
  .calendar-day { padding:3px; }.calendar-day-label { height:20px; }.calendar-day-label span { width:20px; height:20px; font-size:.65rem; }
  .calendar-event { font-size:.59rem; padding:2px 3px; height:20px; }.calendar-weekday { font-size:.58rem; }.calendar-more { font-size:.6rem; padding:0; }.calendar-more span { display:none; }
  .planner-layout { grid-template-columns:1fr; height:auto; min-height:100%; }.planner-days { overflow:visible; }.planner-undated { border-left:0; border-top:1px solid var(--line); padding:12px 0 0; overflow:visible; }
  .planner-day-head { padding:7px 9px; }.planner-day-head h3 { font-size:.7rem; }.planner-day-head .plan-tag { display:none; }
  .planner-row .row-status { font-size:0; }.planner-row .row-title { min-width:80px; }.planner-undated .undated-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .plan-board { grid-template-columns:repeat(3,minmax(215px,1fr)); gap:9px; padding-bottom:0; }.plan-lane { padding:9px; }.plan-notifications { top:86px; }
  .plan-toast { right:14px; bottom:14px; padding:12px 10px 14px 12px; max-width:calc(100vw - 28px); font-size:.77rem; }
  .plan-detail-layout { display:block; overflow:auto; }.plan-detail-main { overflow:visible; }.plan-chat { min-height:360px; border-top:1px solid var(--line); }.plan-comments { max-height:260px; }
}
@media(max-width:480px) { .plan-main .page-heading { flex-wrap:wrap; gap:5px; }.plan-main .page-heading h1 { flex-basis:100%; }.plan-stats { gap:12px; flex-wrap:wrap; }.plan-stats>div>span:last-child { font-size:.6rem; }.plan-tabs { gap:14px; }.plan-tabs button { font-size:.66rem; }.planner-days { grid-template-columns:1fr; }.planner-undated .undated-grid { grid-template-columns:1fr; }.plan-filters select { min-width:100px; }.calendar-day-label button { width:16px; padding:0; }.calendar-more { font-size:.56rem; } }

/* One navigation line and one compact filter line on desktop. */
.plan-workspace-header { display:flex; align-items:center; flex:none; gap:16px; min-height:50px; border-bottom:1px solid var(--line); }
.plan-workspace-header .plan-tabs { flex:1; min-width:0; border:0; padding:0 16px; }
.plan-workspace-header .plan-tabs button { min-height:49px; }
.plan-workspace-header .plan-toolbar { flex:none; padding:7px 16px 7px 0; }
.plan-filters { display:flex; align-items:center; flex-wrap:nowrap; gap:8px; padding:12px 16px 10px; }
.plan-search { flex:1 1 230px; max-width:360px; min-width:180px; }
.plan-filter-controls { display:flex; flex:none; gap:8px; }
#period-options { margin-left:auto; padding-left:12px; border-left:1px solid var(--line); flex:none; }
.plan-summary #period-hint { display:none; }
.plan-main[data-view=calendar] #plan-content { padding-top:12px; }

/* Custom open menus share the trigger's surfaces, radius and typography. */
.plan-select { --select-height:41px; position:relative; display:block; width:100%; min-width:0; text-align:left; }
.planning-page .plan-native-select { position:absolute!important; width:1px!important; height:1px!important; min-width:0!important; min-height:0!important; padding:0!important; margin:0!important; border:0!important; opacity:0; overflow:hidden; clip-path:inset(50%); pointer-events:none; }
.planning-page .plan-select-button { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:var(--select-height); height:var(--select-height); padding:8px 11px; border:1px solid var(--line-strong); border-radius:8px; background:var(--surface); color:var(--ink); font-size:.85rem; font-weight:400; line-height:18px; text-align:left; box-shadow:none; }
.planning-page .plan-select-button:hover { border-color:color-mix(in srgb,var(--muted) 65%,var(--line-strong)); }
.planning-page .plan-select-button:focus-visible,.planning-page .plan-select-button[aria-expanded=true] { outline:none; border-color:var(--red); box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 12%,transparent); }
.planning-page .plan-select-button[aria-invalid=true] { border-color:var(--red); }
.planning-page .plan-select-button:active { transform:none; }
.plan-select-value { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.plan-select-arrow { display:grid; place-items:center; flex:none; color:var(--muted); transition:transform .16s; }
.plan-select-button[aria-expanded=true] .plan-select-arrow { transform:rotate(180deg); }
.plan-select-menu { position:fixed; inset:auto; margin:0; z-index:1100; box-sizing:border-box; padding:5px; border:1px solid var(--line-strong); border-radius:10px; color:var(--ink); background:var(--surface); box-shadow:0 12px 36px #0003,0 2px 6px #00000012; overflow:auto; scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent; overscroll-behavior:contain; text-align:left; font-family:inherit; }
.plan-select-menu::backdrop { display:none; }
.plan-select-option { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:36px; padding:8px 10px; border-radius:6px; color:var(--ink); font-size:.8rem; font-weight:400; line-height:1.45; cursor:pointer; user-select:none; overflow-wrap:anywhere; }
.plan-select-option+.plan-select-option { margin-top:2px; }
.plan-select-option.is-active { background:var(--soft); }
.plan-select-option[aria-selected=true] { color:var(--red-dark); background:var(--plan-accent-soft); font-weight:650; }
.plan-option-check { display:grid; place-items:center; flex:none; opacity:0; color:var(--red); }
.plan-select-option[aria-selected=true] .plan-option-check { opacity:1; }
.plan-select-option[aria-disabled=true] { opacity:.45; cursor:not-allowed; }
.plan-filters .plan-select { --select-height:36px; flex:none; }
.plan-filters .plan-select-button { font-size:.77rem; }
.plan-select[data-select-id=scope-filter] { width:205px; }
.plan-select[data-select-id=status-filter] { width:155px; }
.plan-select[data-select-id=period-size] { width:112px; }
.plan-detail-status .plan-select { width:220px; max-width:100%; }

@media(max-width:1100px) {
  .plan-filters { display:grid; grid-template-columns:minmax(180px,1fr) auto; gap:8px; }
  .plan-search { max-width:none; width:100%; }
  .plan-filter-controls { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; grid-row:2; grid-column:1/-1; width:100%; }
  .plan-filter-controls .plan-select { width:100%; }
  #period-options { margin:0; padding:0; border:0; }
}
@media(max-width:950px) {
  .plan-workspace-header { flex-wrap:wrap; gap:0; }
  .plan-workspace-header .plan-tabs { flex-basis:100%; }
  .plan-workspace-header .plan-tabs button { min-height:41px; }
  .plan-workspace-header .plan-toolbar { width:100%; padding:8px 12px; border-top:1px solid var(--line); }
  .plan-workspace-header .period-controls { width:100%; }
  .plan-workspace-header .period-controls #period-today { margin-left:auto; }
}
@media(max-width:600px) {
  .plan-filters { display:flex; flex-wrap:wrap; padding:10px; }
  .plan-search { flex-basis:100%; min-width:0; }
  .plan-filter-controls { gap:6px; }
  .plan-filter-controls .plan-select[data-select-id] { min-width:0; }
  .planning-page .plan-filter-controls .plan-inline-check { padding:0 8px; font-size:.7rem; }
  #period-options { width:100%; justify-content:flex-start; }
}

/* Board moves are persisted through the same permission/version checks as the status field. */
.task-card[draggable=true] { cursor:grab; }
.task-card[draggable=true]:active { cursor:grabbing; }
.task-card.is-dragging { opacity:.4; border-style:dashed; }
.plan-lane.is-drop-target { border-color:var(--red); box-shadow:inset 0 0 0 1px var(--red); background:color-mix(in srgb,var(--red) 7%,var(--canvas)); }
.plan-board[aria-busy=true] { cursor:progress; }
.plan-board[aria-busy=true] .task-card { opacity:.7; cursor:progress; }
.plan-main[data-view=board] #period-hint { display:block; }

.calendar-day[data-calendar-day] { cursor:pointer; transition:background-color .15s; }
.calendar-day[data-calendar-day]:hover { background:color-mix(in srgb,var(--red) 4%,var(--surface)); }
.calendar-day-label .calendar-day-open { display:grid; place-items:center; width:24px; height:24px; min-height:24px; padding:0; opacity:1; border:0; border-radius:50%; color:var(--ink); background:transparent; font-size:.72rem; font-weight:700; }
.calendar-day.outside .calendar-day-open { opacity:.45; }
.calendar-day.today .calendar-day-open { opacity:1; color:white; background:var(--red); }
.calendar-day-label .calendar-day-open:hover { box-shadow:0 0 0 2px var(--line); }

/* A dialog's chrome never scrolls with its content. */
.plan-dialog[open] { display:flex; flex-direction:column; max-height:92dvh; overflow:hidden; }
.plan-dialog>.plan-dialog-head,.plan-dialog>.plan-dialog-foot { flex:none; background:var(--surface); }
.plan-dialog>.plan-dialog-body { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; }
.plan-dialog>form { min-height:0; max-height:calc(92dvh - 2px); flex:1; }
.plan-dialog>form>.plan-dialog-body { flex:1; min-height:0; overflow:auto; }
.plan-dialog-foot { justify-content:space-between; align-items:center; flex-wrap:wrap; padding:12px 20px; gap:10px; }
.plan-dialog-foot button { min-height:36px; padding:8px 12px; font-size:.78rem; }
#task-editor .plan-dialog-foot { justify-content:flex-end; }
.plan-detail-dialog[open] { height:min(780px,92dvh); }
.plan-detail-dialog>.plan-dialog-foot { border-top:1px solid var(--line); }
#users-dialog[open] { height:min(700px,92dvh); }
.plan-day-dialog[open] { width:min(900px,94vw); height:min(680px,90dvh); }
.plan-day-dialog .plan-dialog-head { align-items:flex-start; padding:18px 20px; }
.plan-day-dialog .plan-dialog-head>div:first-child { flex:1; min-width:0; }
.plan-day-dialog .plan-dialog-head h2 { font-size:1.2rem; line-height:1.4; text-transform:none; }
.plan-day-dialog .plan-dialog-head h2::first-letter { text-transform:uppercase; }
.plan-day-dialog .plan-dialog-head p { font-size:.77rem; margin:6px 0 0; }
.plan-day-dialog .plan-dialog-head .plan-actions { flex:none; flex-wrap:nowrap; gap:7px; }
.plan-day-dialog .plan-dialog-body { padding:18px 20px; background:var(--canvas); }
.day-task-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-content:start; gap:12px; }
.day-task-grid .task-card { margin:0; }
.day-task-grid:has(>.task-card:only-child) { grid-template-columns:1fr; }
.plan-day-empty { display:grid; place-content:center; justify-items:center; min-height:100%; text-align:center; padding:28px; color:var(--muted); }
.plan-day-empty>span { font-size:2rem; color:var(--red); margin-bottom:12px; }
.plan-day-empty h3 { color:var(--ink); font-size:1rem; margin:0 0 7px; }
.plan-day-empty p { font-size:.8rem; margin:0; }
#calendar-day-tasks[aria-busy=true] { opacity:.65; }
@media(max-width:600px) {
  .day-task-grid { grid-template-columns:1fr; }
  .plan-day-dialog .plan-dialog-head,.plan-day-dialog .plan-dialog-body { padding:15px; }
  .plan-day-dialog .plan-dialog-head h2 { font-size:1rem; }
  .plan-day-dialog .plan-dialog-head .button-icon { width:30px; min-height:30px; height:30px; }
  .plan-dialog-foot { padding:11px 15px; gap:8px; }
  .plan-dialog-foot button { font-size:.72rem; }
  .calendar-day-label .calendar-day-open { width:20px; height:20px; min-height:20px; font-size:.65rem; }
}

/* Editor fields share a baseline, including the optional time label. */
.plan-dialog .plan-form-row { align-items:end; }
.plan-date-row { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr) minmax(0,1fr); gap:14px; }
.plan-date-row>label { min-width:0; }
.plan-date-row input,.plan-date-row .plan-select-button { height:42px; min-height:42px; }
.plan-date-row>label:first-child:has(+[hidden]) { grid-column:1/-1; }
.plan-date-row label>span { white-space:nowrap; }
.plan-date-row #time-optional { display:inline; font-size:.73rem; font-weight:400; }
.calendar-event-time { font-variant-numeric:tabular-nums; opacity:.85; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.plan-access-box { padding:12px; border:1px solid var(--line); background:var(--canvas); border-radius:9px; }
.plan-access-box .plan-participants { gap:7px; }
.plan-access-box .participant { display:inline-flex; align-items:center; gap:3px; min-height:29px; padding:5px 9px; border:1px solid var(--line); border-radius:6px; background:var(--surface); color:var(--muted); font-size:.75rem; font-weight:500; line-height:1.3; }
.plan-access-box .participant-removable { cursor:pointer; color:var(--ink); }
.participant-mark { display:inline-grid; width:14px; height:16px; align-items:center; text-align:center; }
.participant-mark>span { grid-area:1/1; transition:opacity .12s; }
.participant-mark>span:last-child { opacity:0; font-size:1.15rem; line-height:1; }
.participant-removable:hover,.participant-removable:focus-visible { color:var(--red-dark); border-color:var(--red); background:var(--plan-accent-soft); }
.participant-removable:hover .participant-mark>span:first-child,.participant-removable:focus-visible .participant-mark>span:first-child { opacity:0; }
.participant-removable:hover .participant-mark>span:last-child,.participant-removable:focus-visible .participant-mark>span:last-child { opacity:1; }
.plan-access-picker { position:relative; margin-top:11px; }
.planning-page #access-user { min-height:38px; background:var(--surface); font-size:.8rem; }
#access-help { font-size:.71rem; line-height:1.55; margin:9px 0 0; }
.access-options { position:absolute; z-index:6; bottom:calc(100% + 7px); left:0; right:0; max-height:225px; overflow:auto; padding:5px; border:1px solid var(--line-strong); border-radius:8px; background:var(--surface); box-shadow:0 8px 28px #0003; }
.access-options button { display:flex; align-items:center; gap:10px; width:100%; padding:9px; min-height:48px; text-align:left; color:var(--ink); background:transparent; border:1px solid transparent; border-radius:5px; font-size:.8rem; }
.access-options button[aria-selected=true],.access-options button:hover { border-color:var(--line); background:var(--soft); }
.access-options strong,.access-options small { display:block; }.access-options small { margin-top:3px; color:var(--muted); font-size:.7rem; }
.access-avatar { display:grid; place-items:center; width:30px; height:30px; flex:none; border-radius:50%; background:var(--plan-accent-soft); color:var(--red-dark); font-weight:700; }
.access-invite { margin-left:auto; color:var(--muted); font-size:1rem; }.access-options p { margin:10px; color:var(--muted); font-size:.77rem; }
.plan-dialog .plan-toast { bottom:calc(4dvh + 76px); }
@media(max-width:600px) { .plan-date-row { grid-template-columns:repeat(2,minmax(0,1fr)); }.plan-date-row>label:first-child { grid-column:1/-1; } }

/* Checklist items and the chat composer are independent controls. */
.plan-checklist-editor { border:0; padding:0; margin:0 0 20px; min-width:0; }
.plan-checklist-editor legend { padding:0; margin-bottom:9px; font-size:.82rem; font-weight:650; }
.plan-checklist-editor>small { display:block; margin-top:9px; color:var(--muted); font-size:.73rem; line-height:1.5; }
#checklist-rows { display:grid; gap:8px; }
.checklist-editor-row { display:grid; grid-template-columns:26px minmax(0,1fr) 28px; align-items:center; gap:7px; }
.checklist-item-number { display:grid; place-items:center; width:24px; height:24px; border-radius:6px; color:var(--muted); background:var(--soft); font-size:.72rem; font-variant-numeric:tabular-nums; }
.checklist-editor-row .button-ghost { padding:0; min-height:28px; font-size:1.25rem; }
.plan-observation { margin:18px 0; padding:12px 14px; border-left:3px solid var(--line-strong); border-radius:0 7px 7px 0; background:var(--canvas); font-size:.8rem; line-height:1.6; }
.plan-observation h3 { margin:0 0 5px; font-size:.75rem; color:var(--muted); }
#task-observation { font-weight:400; }
.plan-dialog label>span>small { display:inline; }
.plan-chat { min-width:0; position:relative; }
.plan-chat.dragover { box-shadow:inset 0 0 0 2px var(--red); }
#comment-form { gap:8px; }
#comment-composer { position:relative; min-width:0; }
#comment-composer textarea { display:block; font-weight:400; resize:none; }
.chat-compose-footer { display:flex; align-items:center; gap:8px; }
.chat-compose-footer>span { flex:1; font-size:.62rem; line-height:1.5; color:var(--muted); }
.chat-compose-footer button { flex:none; min-height:34px; padding:7px 10px; font-size:.74rem; }
.mention-options { position:fixed; inset:auto; margin:0; z-index:100; display:block; overflow:auto; padding:5px; border:1px solid var(--line-strong); border-radius:10px; background:var(--surface); color:var(--ink); box-shadow:0 10px 35px #0004; }
.mention-options::backdrop { display:none; }
.mention-menu-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 8px 9px; font-size:.68rem; color:var(--muted); }
.mention-menu-heading kbd { background:var(--canvas); padding:3px 5px; border:1px solid var(--line); border-radius:4px; font:inherit; }
.mention-options button { display:flex; align-items:center; justify-content:flex-start; gap:10px; width:100%; padding:8px; min-height:48px; border:1px solid transparent; border-radius:6px; color:var(--ink); background:transparent; text-align:left; font-size:.79rem; }
.mention-options button[aria-selected=true],.mention-options button:hover { border-color:var(--line); background:var(--soft); }
.mention-options strong,.mention-options small { display:block; }.mention-options small { color:var(--muted); margin-top:3px; font-size:.7rem; }
.chat-file-list { display:flex; gap:8px; overflow:auto; max-height:100px; padding:3px 0; }
.chat-file-preview { width:84px; flex:none; position:relative; border:1px solid var(--line); border-radius:7px; overflow:hidden; background:var(--surface); }
.chat-file-preview img { width:100%; height:60px; object-fit:cover; display:block; }.chat-file-preview>span { display:block; font-size:.6rem; padding:4px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.chat-file-preview button { position:absolute; top:3px; right:3px; width:21px; height:21px; min-height:0; padding:0; display:grid; place-items:center; border-radius:50%; border:1px solid #ffffff50; background:#171c24d9; color:white; font-size:1rem; }
.plan-comment.my-comment { border-color:color-mix(in srgb,var(--red) 25%,var(--line)); }
.chat-images { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-top:8px; }.chat-images:has(> :only-child) { grid-template-columns:1fr; }
.planning-page .plan-image-thumb { position:relative; display:block; padding:0; width:100%; min-height:0; border:0; border-radius:7px; overflow:hidden; background:var(--canvas); cursor:zoom-in; }
.planning-page .plan-image-thumb img { display:block; width:100%; height:120px; object-fit:contain; padding:0; }
.planning-page .chat-images .plan-image-thumb img { height:auto; max-height:210px; object-fit:contain; }
.plan-image-thumb>span { position:absolute; right:5px; bottom:5px; width:23px; height:23px; display:grid; place-items:center; background:#171c24b0; color:white; border-radius:5px; font-size:1rem; opacity:.7; }
.plan-image-thumb:hover>span { opacity:1; }
.plan-image-dialog { width:min(1300px,96vw); max-width:96vw; height:92dvh; }
.plan-image-dialog .plan-dialog-head { padding:13px 18px; align-items:center; }.plan-image-dialog .plan-dialog-head h2 { font-size:1rem; }
.image-stage { position:relative; flex:1; min-height:0; overflow:hidden; background:var(--canvas); touch-action:none; user-select:none; }
.image-stage img { position:absolute; left:50%; top:50%; max-width:none; max-height:none; transform-origin:center; pointer-events:none; user-select:none; }
.image-stage.can-pan { cursor:grab; }.image-stage.is-panning { cursor:grabbing; }
#image-viewer-error { position:absolute; inset:45% 20px auto; text-align:center; color:var(--muted); }
#image-zoom-level { min-width:47px; text-align:center; font-size:.77rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.image-viewer-hint { font-size:.72rem; }.plan-image-dialog .plan-dialog-foot a { min-height:36px; padding:8px 12px; font-size:.78rem; text-decoration:none; border:1px solid var(--line); border-radius:7px; display:inline-flex; align-items:center; }
.plan-confirm-dialog { width:min(490px,94vw); }.plan-confirm-dialog .plan-dialog-body { font-size:.85rem; line-height:1.65; }.plan-confirm-dialog h2 { margin:0; font-size:1.05rem; }
.planning-page .button-danger { color:var(--red-dark); border-color:color-mix(in srgb,var(--red) 40%,var(--line)); }
.plan-trash-dialog { width:min(650px,94vw); height:min(600px,90dvh); }.plan-trash-dialog .plan-dialog-body>p { font-size:.8rem; }
.trash-item { display:flex; align-items:center; gap:15px; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--line); }.trash-item strong { display:block; font-size:.85rem; overflow-wrap:anywhere; }.trash-item small { display:block; margin-top:5px; color:var(--muted); font-size:.73rem; }.trash-item button { flex:none; font-size:.75rem; min-height:34px; padding:7px 10px; }
.trash-empty { padding:50px 10px; text-align:center; color:var(--muted); font-size:.85rem; }
@media(max-width:1100px) { .chat-compose-footer>span { display:none; }.chat-compose-footer #send-comment { margin-left:auto; } }
@media(max-width:600px) { .plan-image-dialog .plan-dialog-foot { justify-content:center; }.image-viewer-hint { display:none; }.plan-image-dialog .plan-actions { gap:6px; } }

/* Cards start at the same baseline, regardless of neighboring content. */
.task-card { justify-content:flex-start; }
.ideas-grid { align-items:stretch; }
.ideas-grid .task-card { justify-content:flex-start; min-height:185px; }
.ideas-grid .task-card-footer { margin-top:auto; }
.priority-badge { align-self:flex-start; display:inline-flex; align-items:center; gap:4px; width:max-content; max-width:100%; padding:4px 7px; border:1px solid color-mix(in srgb,var(--red) 30%,var(--line)); border-radius:5px; background:var(--plan-accent-soft); color:var(--red-dark); font-size:.66rem; line-height:1.2; font-weight:750; }
.task-card.is-priority { border-color:color-mix(in srgb,var(--red) 60%,var(--line)); border-left:3px solid var(--red); }
.calendar-priority { color:var(--red-dark); font-weight:750; }
#toggle-priority[aria-pressed=true] { color:var(--red-dark); border-color:var(--red); background:var(--plan-accent-soft); }
.planning-page .plan-priority-option { display:flex; align-items:flex-start; gap:10px; padding:12px; border:1px solid var(--line); border-radius:8px; background:var(--canvas); }
.plan-priority-option input { margin-top:2px; }.plan-priority-option strong { display:block; font-size:.8rem; }.plan-priority-option small { display:block; margin-top:5px; font-size:.72rem; font-weight:400; color:var(--muted); }
.task-material-field,.material-link-editor { min-width:0; margin:0 0 20px; padding:14px; border:1px solid var(--line); border-radius:9px; }
.task-material-field legend,.material-link-editor legend { padding:0 5px; font-size:.82rem; font-weight:650; }
.task-material-field>p { margin:0 0 10px; font-size:.73rem; line-height:1.55; }
#task-material-options { display:grid; gap:5px; max-height:190px; overflow:auto; margin-top:9px; }
#task-material-options>p { font-size:.73rem; padding:10px 0; }
.planning-page .material-option { display:flex; align-items:center; gap:9px; padding:9px; background:var(--canvas); border:1px solid transparent; border-radius:6px; cursor:pointer; }
.material-option:has(input:checked) { border-color:var(--plan-blue); background:color-mix(in srgb,var(--plan-blue) 7%,var(--surface)); }
.material-option>span:last-child { min-width:0; }.material-option strong { display:block; font-size:.77rem; font-weight:650; }.material-option small { display:block; font-size:.68rem; color:var(--muted); margin-top:4px; }
.material-option-icon { color:var(--plan-blue); font-size:1.3rem; }.material-option.is-unavailable { color:var(--red-dark); font-size:.73rem; }
#create-linked-material { padding:8px 0 0; font-size:.74rem; min-height:28px; }
#detail-materials-section { margin:20px 0; }#detail-materials-section h3 { font-size:.85rem; margin:0 0 10px; }
#detail-materials { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.planning-page .linked-material { display:flex; justify-content:flex-start; align-items:center; gap:10px; min-height:65px; padding:11px; text-align:left; color:var(--ink); border:1px solid var(--line); background:var(--canvas); border-radius:8px; }
.linked-material>span:first-child { color:var(--plan-blue); font-size:1.3rem; }.linked-material>span:nth-child(2) { flex:1; min-width:0; }.linked-material strong { display:block; font-size:.77rem; overflow-wrap:anywhere; }.linked-material small { display:block; color:var(--muted); font-size:.67rem; margin-top:5px; }.linked-material>span:last-child { color:var(--muted); }
.linked-material:hover { border-color:var(--plan-blue); }.material-unavailable { grid-column:1/-1; font-size:.73rem; }
.materials-intro { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:5px 2px 16px; }.materials-intro .eyebrow { font-size:.6rem; color:var(--plan-blue); }.materials-intro h2 { font-size:1.1rem; margin:5px 0 6px; }.materials-intro p { font-size:.78rem; margin:0; color:var(--muted); }.materials-intro-mark { display:grid; place-items:center; width:48px; height:48px; color:var(--plan-blue); background:color-mix(in srgb,var(--plan-blue) 10%,var(--surface)); border:1px solid var(--line); border-radius:12px; font-size:1.8rem; flex:none; }
.materials-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(235px,1fr)); gap:14px; align-items:stretch; padding-bottom:8px; }
.planning-page .material-card { display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; padding:0; overflow:hidden; min-height:288px; border:1px solid var(--line); border-radius:10px; color:var(--ink); background:var(--surface); text-align:left; }
.material-card:hover { border-color:var(--plan-blue); box-shadow:0 5px 18px #00000012; }.material-card-preview { position:relative; display:grid; place-items:center; height:137px; overflow:hidden; background:var(--canvas); border-bottom:1px solid var(--line); }
.material-card-preview img { width:100%; height:100%; object-fit:contain; padding:10px; }.material-folder { display:grid; place-items:center; width:68px; height:58px; background:color-mix(in srgb,var(--plan-blue) 10%,var(--surface)); border:1px solid color-mix(in srgb,var(--plan-blue) 25%,var(--line)); border-radius:12px; color:var(--plan-blue); font-size:2.4rem; }.material-card-label { position:absolute; top:9px; left:9px; padding:4px 6px; border:1px solid var(--line); border-radius:4px; background:var(--surface); color:var(--muted); font-size:.5rem; letter-spacing:.07em; font-weight:750; }
.material-card-body { display:flex; flex:1; flex-direction:column; gap:9px; padding:14px; }.material-card-body>strong { font-size:.87rem; line-height:1.4; overflow-wrap:anywhere; }.material-card-description { color:var(--muted); font-size:.73rem; line-height:1.5; font-weight:400; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }.material-card-resources { display:flex; gap:12px; margin-top:auto; color:var(--muted); font-size:.65rem; font-weight:500; }.material-card-footer { display:flex; justify-content:space-between; padding-top:10px; border-top:1px solid var(--line); color:var(--plan-blue); font-size:.72rem; }
.plan-main[data-view=materials] .plan-search { flex:1; max-width:620px; }.plan-main[data-view=materials] .plan-filters { justify-content:flex-start; }
.material-editor { width:min(790px,94vw); }.material-editor .plan-dialog-foot { justify-content:flex-end; }
.material-link-editor>small { display:block; margin-top:9px; font-size:.73rem; color:var(--muted); }#material-link-rows { display:grid; gap:8px; }.material-link-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) 25px; gap:7px; align-items:center; }.material-link-row .button-ghost { padding:0; min-height:26px; font-size:1.2rem; }
.material-existing-file { display:flex; gap:6px; align-items:center; padding:8px 0; color:var(--muted); font-size:.75rem; }.material-existing-file small { margin-left:auto; font-size:.65rem; }
.material-detail-dialog { width:min(1050px,94vw); height:min(750px,92dvh); }.material-detail-dialog .plan-dialog-body { background:var(--canvas); }#material-detail-description { font-size:.86rem; line-height:1.65; margin:0 0 20px; }
.material-resource-layout { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.3fr); gap:22px; }.material-resource-layout>section { min-width:0; }.material-resource-layout h3 { font-size:.85rem; margin:0 0 12px; }#material-detail-files { grid-template-columns:repeat(2,minmax(0,1fr)); }.material-resource-empty { font-size:.78rem; line-height:1.6; color:var(--muted); padding:18px 12px; border:1px dashed var(--line); border-radius:7px; grid-column:1/-1; }
.material-link { display:flex; align-items:center; gap:9px; padding:11px; margin-bottom:9px; border:1px solid var(--line); background:var(--surface); border-radius:8px; }.material-link>a { display:flex; align-items:center; gap:10px; flex:1; min-width:0; text-decoration:none; color:var(--ink); }.material-link>a>span:first-child { color:var(--plan-blue); font-size:1.2rem; }.material-link>a>span:last-child { min-width:0; }.material-link strong { display:block; font-size:.77rem; overflow-wrap:anywhere; }.material-link small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:5px; font-size:.66rem; color:var(--muted); }.material-link button { flex:none; padding:6px 8px; min-height:30px; font-size:.68rem; }
@media(max-width:760px) { .material-resource-layout { grid-template-columns:1fr; }.materials-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.material-card-preview { height:115px; }.plan-tabs { gap:12px; }.plan-tabs button { white-space:nowrap; }.plan-workspace-header { overflow-x:auto; }.material-link-row { grid-template-columns:minmax(0,1fr) 25px; }.material-link-name { grid-column:1; }.material-link-url { grid-column:1; }.material-link-row>button { grid-column:2; grid-row:1/3; } }
@media(max-width:480px) { .materials-grid,#detail-materials { grid-template-columns:1fr; }.material-card-preview { height:145px; }.materials-intro-mark { display:none; } }

.deleted-users-section { margin-top:20px; padding-top:15px; border-top:1px solid var(--line); }.deleted-users-section>summary { cursor:pointer; font-size:.82rem; font-weight:650; color:var(--muted); }.deleted-users-section>p { font-size:.74rem; line-height:1.6; margin:12px 0 3px; }.deleted-users-section .plan-user-row>button { font-size:.72rem; padding:7px 10px; min-height:32px; flex:none; }

/* Material resources use their own gallery instead of the compact task attachment tiles. */
#task-editor .task-material-field { margin:22px 0 0; }
.material-detail-dialog { width:min(1100px,94vw); height:fit-content; max-height:92dvh; }
.material-detail-dialog .plan-dialog-head { padding:16px 20px; align-items:center; }
.material-detail-dialog .plan-dialog-head h2 { font-size:1.2rem; line-height:1.4; margin-top:5px; }
.material-detail-dialog .plan-dialog-body { padding:18px 20px 20px; }
#material-detail-description { margin:0 0 18px; max-width:90ch; font-size:.83rem; line-height:1.6; }
.material-resource-layout { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(260px,1fr); align-items:start; gap:20px; }
.material-resource-layout[data-has-links=false] { grid-template-columns:minmax(0,1fr); }
.material-resource-layout .material-section-head { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:34px; margin:0 0 10px; }
.material-resource-layout .material-section-head h3 { display:flex; align-items:center; gap:8px; font-size:.8rem; margin:0; }
.material-upload-control { flex:none; }
.material-upload-control button { min-height:32px; padding:6px 9px; font-size:.72rem; }
.material-files-panel { min-width:0; border-radius:10px; }
.material-files-panel.dragover { outline:2px dashed var(--plan-blue); outline-offset:5px; }
#material-detail-files { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:12px; }
#material-detail-files:has(>.material-asset:only-child) { grid-template-columns:minmax(0,1fr); }
.material-asset { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:10px; background:var(--surface); }
.planning-page .material-asset-preview { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; width:100%; height:clamp(170px,28dvh,260px); padding:12px; margin:0; border:0; border-radius:0; background:var(--canvas); color:var(--muted); text-decoration:none; overflow:hidden; }
.material-assets:has(>.material-asset:only-child) .material-asset-preview { height:clamp(210px,34dvh,340px); }
.planning-page button.material-asset-preview { cursor:zoom-in; }
.material-asset-preview img { display:block; width:100%; height:100%; object-fit:contain; }
.material-preview-action { position:absolute; bottom:10px; right:10px; padding:5px 7px; border:1px solid #ffffff30; border-radius:5px; background:#171c24ce; color:#fff; font-size:.65rem; font-weight:500; }
.material-asset-preview:hover .material-preview-action { background:var(--red); }
.material-file-symbol { font-size:2.8rem; color:var(--plan-blue); }
.material-asset.is-file .material-asset-preview { height:160px; font-size:.78rem; font-weight:650; }
.material-asset-info { display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; padding:12px; border-top:1px solid var(--line); }
.material-asset-info>div:first-child { min-width:0; flex:1; }
.material-asset-info strong { display:block; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.76rem; line-height:1.5; }
.material-asset-info small { display:block; color:var(--muted); font-size:.66rem; margin-top:3px; }
.material-asset-actions { display:flex; align-items:center; gap:8px; flex:none; }
.material-asset-actions a,.material-asset-actions button { display:inline-flex; align-items:center; justify-content:center; min-height:30px; padding:6px 8px; border-radius:6px; font-size:.68rem; white-space:nowrap; text-decoration:none; }
.material-asset-actions a { border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); font-weight:650; }
.material-asset-actions a:hover { border-color:var(--plan-blue); }
.material-asset-actions .button-ghost { min-height:30px; padding:6px 2px; color:var(--muted); }
.material-asset-actions .button-ghost:hover { color:var(--red-dark); }
#material-upload-hint { margin:10px 0 0; font-size:.67rem; line-height:1.5; }
.material-links-panel .material-link { display:grid; grid-template-columns:minmax(0,1fr); align-items:start; gap:12px; padding:13px; margin:0 0 10px; border-radius:9px; }
.material-links-panel .material-link>a { align-items:flex-start; width:100%; min-width:0; }
.material-links-panel .material-link>a>span:first-child { flex:none; padding-top:1px; }
.material-links-panel .material-link strong { font-size:.8rem; line-height:1.5; }
.material-links-panel .material-link small { white-space:normal; overflow-wrap:anywhere; text-overflow:clip; line-height:1.6; margin-top:5px; font-size:.7rem; }
.material-links-panel .material-link>button { justify-self:end; min-height:30px; padding:6px 10px; font-size:.7rem; }
.material-resource-empty { margin:0; min-height:120px; display:grid; place-items:center; text-align:center; }
@media(max-width:760px) {
  .material-resource-layout { grid-template-columns:minmax(0,1fr); gap:20px; }
  .material-detail-dialog .plan-dialog-head,.material-detail-dialog .plan-dialog-body { padding:15px; }
  .material-detail-dialog .plan-dialog-head h2 { font-size:1.05rem; }
  .material-assets:has(>.material-asset:only-child) .material-asset-preview { height:clamp(200px,34dvh,300px); }
}
@media(max-width:540px) { #material-detail-files { grid-template-columns:minmax(0,1fr); }.material-asset-info { flex-wrap:wrap; gap:10px; }.material-asset-actions { margin-left:auto; } }

.plan-attachment-actions { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:0 8px 8px; }
.planning-page .plan-attachment-actions button { min-height:29px; padding:5px 8px; font-size:.67rem; border-radius:5px; }
.planning-page .plan-attachment-actions .button-secondary { background:var(--surface); color:var(--ink); border:1px solid var(--line-strong); }
.chat-image-attachment { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:8px; background:var(--canvas); }
.chat-image-actions { display:flex; justify-content:flex-end; align-items:center; flex-wrap:wrap; gap:7px; padding:7px; border-top:1px solid var(--line); }
.planning-page .chat-image-actions button,.chat-image-actions a { display:inline-flex; align-items:center; justify-content:center; min-height:29px; padding:5px 9px; font-size:.68rem; border:1px solid var(--line-strong); border-radius:5px; color:var(--ink); background:var(--surface); text-decoration:none; font-weight:650; }
.material-asset-info { flex-wrap:wrap; }.material-asset-info>div:first-child { flex:1 1 130px; }
.material-asset-actions { flex-wrap:wrap; max-width:100%; margin-left:auto; gap:6px; }
.material-asset-actions .button-secondary { border:1px solid var(--line-strong); color:var(--ink); background:var(--surface); }