.auth-page{background:var(--c-f5f8f7-bg)}.auth-layout{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;max-width:none;padding:0}.auth-story{background:var(--c-edf6f2-bg);padding:45px 60px;display:flex;flex-direction:column;border-right:1px solid var(--c-e2eeea-border)}.auth-story .brand{margin:0;font-size:calc(29px * var(--font-scale,1));align-self:flex-start}.auth-story-body{margin:auto 0;padding:65px 0;max-width:450px}.auth-story .eyebrow{color:var(--c-779b8e-fg);font-size:calc(10px * var(--font-scale,1))}.auth-story h1{font-size:calc(54px * var(--font-scale,1));line-height:1.15;letter-spacing:-2px;color:var(--c-1f5145-fg);margin:22px 0}.auth-story-body>p{font-size:calc(15px * var(--font-scale,1));line-height:1.8;color:var(--c-709082-fg);max-width:350px;margin-bottom:40px}.story-card{display:flex;align-items:flex-start;gap:15px;margin-top:24px}.story-icon{background:var(--c-dceee5-bg);color:var(--c-458872-fg);width:calc(34px * var(--font-scale,1));height:calc(34px * var(--font-scale,1));border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:calc(21px * var(--font-scale,1))}.story-card strong{font-size:calc(12px * var(--font-scale,1));color:var(--c-467261-fg)}.story-card p{font-size:calc(11px * var(--font-scale,1));color:var(--c-85a195-fg);max-width:290px;line-height:1.7;margin:5px 0}.auth-story-foot{font-size:calc(10px * var(--font-scale,1));color:var(--c-8ba698-fg);margin:0}.auth-form-panel{display:flex;align-items:center;justify-content:center;background:var(--c-ffffff-bg);padding:55px 40px}.auth-form-wrap{width:100%;max-width:365px}.auth-form-wrap h2{font-size:calc(31px * var(--font-scale,1));letter-spacing:-1px;font-weight:650;margin:12px 0 8px}.auth-form-wrap>p{color:var(--c-86968e-fg);font-size:calc(12px * var(--font-scale,1));line-height:1.8;margin:0 0 30px}.auth-form-wrap form{display:grid;gap:18px}.auth-form-wrap label,.prompt-form label{display:grid;gap:7px;font-size:calc(11px * var(--font-scale,1));font-weight:550;color:var(--c-566d65-fg)}.auth-form-wrap input,.prompt-form input,.prompt-form textarea,.prompt-form select{border:1px solid var(--c-dce6e1-border);border-radius:7px;background:var(--c-ffffff-bg);color:var(--c-30483d-fg);padding:12px 13px;font:calc(12px * var(--font-scale,1))/1.5 inherit;width:100%;min-width:0;outline-offset:2px}.auth-form-wrap input{font-size:calc(13px * var(--font-scale,1))}.auth-form-wrap input::placeholder,.prompt-form input::placeholder,.prompt-form textarea::placeholder{color:var(--c-a4b1aa-fg)}.auth-form-wrap label small{color:var(--c-9bab9f-fg);font-weight:400;font-size:calc(10px * var(--font-scale,1))}.password-input{display:flex;border:1px solid var(--c-dce6e1-border);border-radius:7px;align-items:center}.password-input input{border:0;background:none}.password-input button{background:none;border:0;font-size:calc(10px * var(--font-scale,1));color:var(--c-759185-fg);padding:12px}.auth-submit{width:100%;font-size:calc(12px * var(--font-scale,1));padding:13px!important;justify-content:space-between;margin-top:3px}.auth-switch{text-align:center;margin:23px 0!important;font-size:calc(12px * var(--font-scale,1))!important}.auth-switch a{font-weight:550}.auth-help{font-size:calc(10px * var(--font-scale,1))!important;text-align:center;border-top:1px solid var(--c-edf1ee-border);padding-top:22px;line-height:1.9!important;margin:0!important;color:var(--c-99a89f-fg)!important}.sharing-note{font-size:calc(10px * var(--font-scale,1));line-height:1.8;color:var(--c-8c9d92-fg);margin:0}.auth-pending{border:1px solid var(--c-cfe5d8-border);background:var(--c-f2f9f5-bg);border-radius:9px;padding:20px;display:grid;gap:9px}.auth-pending strong{color:var(--c-3c6f57-fg);font-size:calc(14px * var(--font-scale,1))}.auth-pending p{margin:0;font-size:calc(12px * var(--font-scale,1));line-height:1.8;color:var(--c-6e8a7c-fg)}.auth-pending .button{margin-top:6px;text-decoration:none}.form-error{background:var(--c-fff0ee-bg);color:var(--c-a85850-fg);border:1px solid var(--c-f1d8d2-border);border-radius:7px;padding:10px 12px;font-size:calc(11px * var(--font-scale,1));margin-bottom:15px}.auth-form-wrap [hidden],.prompt-form [hidden],[hidden]{display:none!important}.session-controls{display:flex;align-items:center;gap:12px}.session-name{font-size:calc(11px * var(--font-scale,1));color:var(--c-5b7266-fg);max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.session-controls .button{font-size:calc(10px * var(--font-scale,1));min-height:calc(29px * var(--font-scale,1));padding:5px 9px}.sidebar-identity{max-width:115px;overflow:hidden;text-overflow:ellipsis}.member-name{font-weight:550;color:var(--c-527667-fg);font-size:calc(11px * var(--font-scale,1))}.member-name small{display:block;font-size:calc(9px * var(--font-scale,1));color:var(--c-96a59c-fg);font-weight:400}.claim-button{border:1px dashed var(--c-bbd2c6-border);border-radius:5px;background:var(--c-f6faf8-bg);color:var(--c-5a8b73-fg);padding:6px 8px;font-size:calc(10px * var(--font-scale,1));white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:6px}.claim-button:hover{border-color:var(--c-528e71-border);background:var(--c-edf6f0-bg)}.claimed-self{color:var(--teal);background:var(--c-eaf5ef-bg);font-size:calc(8px * var(--font-scale,1));border-radius:4px;padding:2px 4px;margin-left:4px}.prompts-button{border:0;background:var(--c-edf4f6-bg);border-radius:5px;padding:6px 8px;font-size:calc(10px * var(--font-scale,1));color:var(--c-65828d-fg);display:inline-flex;gap:5px;align-items:center;white-space:nowrap}.prompts-button svg{width:calc(13px * var(--font-scale,1));height:calc(13px * var(--font-scale,1))}.mine-filter{display:flex;align-items:center;gap:6px;color:var(--c-7b8d84-fg);font-size:calc(10px * var(--font-scale,1));white-space:nowrap;cursor:pointer}.mine-filter input{accent-color:var(--teal)}.community-section{border:1px solid var(--c-dceae2-border);border-radius:10px;background:var(--c-fcfefd-bg);margin:23px 0 27px;overflow:hidden}.claim-record{padding:17px 18px;border-bottom:1px solid var(--c-e8f0ea-border);display:flex;align-items:center;justify-content:space-between;gap:12px}.claim-label{font-size:calc(9px * var(--font-scale,1));letter-spacing:.8px;color:var(--c-8ca696-fg);text-transform:uppercase;margin-bottom:6px}.claim-person{font-size:calc(13px * var(--font-scale,1));font-weight:550;color:var(--c-3e6651-fg)}.claim-explanation{font-size:calc(10px * var(--font-scale,1));color:var(--c-94a599-fg);margin:5px 0 0}.community-heading{display:flex;align-items:center;justify-content:space-between;padding:18px 18px 6px;gap:12px}.community-heading h3{font-size:calc(13px * var(--font-scale,1));font-weight:600;margin:0;color:var(--c-365f4c-fg)}.community-heading p{font-size:calc(10px * var(--font-scale,1));color:var(--c-8da394-fg);margin:4px 0 0}.community-heading-actions{display:flex;gap:7px;flex-shrink:0}.community-heading-actions .button{font-size:calc(10px * var(--font-scale,1));min-height:calc(31px * var(--font-scale,1));padding:6px 9px}.prompt-list{padding:12px 18px 18px}.prompt-card{background:var(--c-ffffff-bg);border:1px solid var(--c-e3ece6-border);border-radius:8px;padding:15px;margin-top:12px}.prompt-card:first-child{margin-top:0}.prompt-card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:13px}.prompt-card h4{font-size:calc(12px * var(--font-scale,1));line-height:1.6;margin:0;color:var(--c-416852-fg);overflow-wrap:anywhere}.prompt-byline{font-size:calc(10px * var(--font-scale,1));color:var(--c-8c9e92-fg);margin:5px 0 9px;overflow-wrap:anywhere}.prompt-tags{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 13px}.prompt-tag{color:var(--c-769184-fg);background:var(--c-f1f6f3-bg);border-radius:4px;font-size:calc(9px * var(--font-scale,1));padding:3px 7px;overflow-wrap:anywhere;max-width:100%}.prompt-card pre{background:var(--c-f7faf8-bg);border:1px solid var(--c-edf3ee-border);border-radius:6px;padding:12px!important;margin:10px 0!important;font:calc(11px * var(--font-scale,1))/1.8 ui-monospace,SFMono-Regular,monospace;color:var(--c-62796a-fg);max-height:280px}.prompt-notes{color:var(--c-82978a-fg);white-space:pre-wrap;overflow-wrap:anywhere;font-size:calc(11px * var(--font-scale,1));margin-top:12px}.prompt-actions{display:flex;gap:12px;flex-wrap:wrap}.prompt-actions button{font-size:calc(10px * var(--font-scale,1))}.prompt-card-header>.text-button{flex-shrink:0}.prompt-empty{padding:25px 8px 17px;text-align:center;color:var(--c-8fa195-fg);font-size:calc(11px * var(--font-scale,1))}.prompt-empty strong{display:block;color:var(--c-61866c-fg);font-size:calc(12px * var(--font-scale,1));margin-bottom:7px}.prompt-form{margin:15px 18px;padding:17px;border:1px solid var(--c-d2e4d8-border);border-radius:8px;background:var(--c-f3f8f5-bg);display:grid;gap:13px}.prompt-form h4{margin:0;color:var(--c-47775c-fg);font-size:calc(13px * var(--font-scale,1))}.prompt-form textarea{font-family:ui-monospace,SFMono-Regular,monospace;font-size:calc(12px * var(--font-scale,1));resize:vertical;min-height:200px;line-height:1.7}.prompt-form textarea[name=notes]{min-height:85px}.prompt-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.prompt-form small{font-weight:400;color:var(--c-8fa798-fg);font-size:calc(9px * var(--font-scale,1))}.prompt-form-actions{display:flex;gap:8px;align-items:center}.prompt-form-actions small{margin-left:auto}.prompt-form .form-error{margin:0}.prompt-counter{font-size:calc(9px * var(--font-scale,1));text-align:right;color:var(--c-93a99a-fg)}.prompt-delete{color:var(--c-bb7569-fg)!important}.table-scroll table{min-width:1090px}.table-scroll th:first-child:not(.row-number),.table-scroll td:first-child:not(.row-number),.table-scroll th.row-number+th,.table-scroll td.row-number+td{min-width:220px}.prompt-status{padding:0 18px;color:var(--c-b06557-fg);font-size:calc(11px * var(--font-scale,1))}.mobile-session{display:none}.prompt-list .empty{padding:25px}.draft-confirm{border:1px solid var(--c-e7d4aa-border);background:var(--c-fff8e9-bg);border-radius:7px;padding:12px;color:var(--c-947944-fg);font-size:calc(11px * var(--font-scale,1));display:flex;gap:10px;align-items:center}.member-requests{padding:8px 22px 20px}.member-request{display:flex;align-items:center;gap:14px;padding:15px;border:1px solid var(--c-dceae2-border);border-radius:9px;background:var(--c-fcfefd-bg);margin-top:11px}.member-request:first-child{margin-top:4px}.member-identity{min-width:0}.member-identity strong{display:block;font-size:calc(12px * var(--font-scale,1));font-weight:600;color:var(--c-3e6651-fg);overflow-wrap:anywhere}.member-identity small{display:block;font-size:calc(10px * var(--font-scale,1));color:var(--c-8c9e92-fg);margin-top:3px;overflow-wrap:anywhere}.member-request-actions{margin-left:auto;display:flex;gap:7px;flex-shrink:0}.member-identity-cell{display:flex;align-items:center;gap:11px}.member-row-actions{display:flex;gap:7px;justify-content:flex-end}.members-scroll table{min-width:620px}.members-scroll td{white-space:nowrap}.role-pill{background:var(--c-eaf1f7-bg);color:var(--c-5b7c9c-fg);border-radius:4px;padding:3px 7px;font-size:calc(9px * var(--font-scale,1));font-weight:600}.members-note{padding:0 22px 18px;margin:0}.member-requests .empty{padding:32px 20px}.evaluation-toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:0 0 13px}.evaluation-toolbar p{margin:0;max-width:540px}.evaluation-toolbar-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;flex-shrink:0}.evaluation-toolbar-actions .button{font-size:calc(10px * var(--font-scale,1));min-height:calc(31px * var(--font-scale,1));white-space:nowrap}.evaluation-table{border:1px solid var(--c-dfe5e7-border);border-radius:9px;overflow:hidden;background:var(--c-ffffff-bg)}.evaluation-head,.evaluation-summary{display:grid;grid-template-columns:minmax(168px,1.7fr) 112px minmax(96px,1fr) 56px 200px;gap:12px;align-items:center;padding:10px 15px}.evaluation-summary>.badge{justify-self:start}.evaluation-row:hover{background:var(--c-fcfdfd-bg)}.evaluation-head>span:last-child{text-align:right}.evaluation-head{background:var(--c-fafbfc-bg);border-bottom:1px solid var(--c-dfe5e7-border);color:var(--c-919ca3-fg);font-size:calc(9px * var(--font-scale,1));font-weight:550;letter-spacing:.5px;text-transform:uppercase}.evaluation-row{border-bottom:1px solid var(--c-f0f3f4-border)}.evaluation-row:last-child{border-bottom:0}.evaluation-row.open{background:var(--c-fbfdfc-bg)}.evaluation-toggle{display:flex;align-items:center;gap:9px;border:0;background:none;padding:0;text-align:left;color:var(--c-40545e-fg);font-size:calc(11px * var(--font-scale,1));font-weight:550;min-width:0}.evaluation-toggle:hover{color:var(--teal)}.evaluation-toggle .toggle-icon{width:calc(13px * var(--font-scale,1));height:calc(13px * var(--font-scale,1));color:var(--c-a9b7bd-fg);transition:transform .15s;flex-shrink:0}.evaluation-row.open .toggle-icon{transform:rotate(90deg);color:var(--teal)}.evaluation-date{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.evaluation-author{font-size:calc(10px * var(--font-scale,1));min-width:0;overflow:hidden}.evaluation-author .member-name small{display:block}.evaluation-empty{color:var(--c-a9b4ac-fg);font-size:calc(10px * var(--font-scale,1))}.evaluation-count{justify-self:start}.evaluation-count .prompts-button{padding:5px 8px}.evaluation-actions{display:grid;grid-template-columns:1fr auto;gap:6px;align-items:center}.evaluation-action-slot{display:flex;justify-content:flex-end}.button.small{min-height:calc(29px * var(--font-scale,1));padding:5px 9px;font-size:calc(10px * var(--font-scale,1));white-space:nowrap}.button.small svg{width:calc(12px * var(--font-scale,1));height:calc(12px * var(--font-scale,1))}.evaluation-note{grid-column:3/-1;font-size:calc(10px * var(--font-scale,1));color:var(--c-a0aaa5-fg)}.evaluation-panel{border-top:1px solid var(--c-eef2f3-border);background:var(--c-fcfdfd-bg)}.evaluation-community{display:block}.evaluation-record-note{font-size:calc(10px * var(--font-scale,1));color:var(--c-8da394-fg);margin:0;padding:13px 16px 0}.evaluation-record-note b{color:var(--c-4a7561-fg);font-weight:600;overflow-wrap:anywhere}.evaluation-records .prompt-list{padding:11px 16px 15px}.evaluation-records .prompt-form{margin:12px 16px}.evaluation-records .prompt-empty{padding:16px 8px 10px}.evaluation-name{display:grid;min-width:0}.version-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.version-title.untitled{color:var(--c-40545e-fg);font-weight:550}.version-date{font-size:calc(9px * var(--font-scale,1));font-weight:400;color:var(--c-9aa7ad-fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.version-record{padding:12px 16px 0}.version-form{border:1px solid var(--c-d2e4d8-border);border-radius:8px;background:var(--c-f3f8f5-bg);padding:15px;display:grid;gap:12px;margin-bottom:12px}.version-form h4{margin:0;color:var(--c-47775c-fg);font-size:calc(12px * var(--font-scale,1))}.version-form label{display:grid;gap:7px;font-size:calc(11px * var(--font-scale,1));font-weight:550;color:var(--c-566d65-fg)}.version-form small{font-weight:400;color:var(--c-8fa798-fg);font-size:calc(9px * var(--font-scale,1))}.version-form input[type=text],.version-form input[name=title]{border:1px solid var(--c-dce6e1-border);border-radius:7px;background:var(--c-ffffff-bg);color:var(--c-30483d-fg);padding:11px 12px;font:calc(12px * var(--font-scale,1))/1.5 inherit;width:100%;min-width:0;outline-offset:2px}.version-form input[name=title]::placeholder{color:var(--c-a4b1aa-fg)}.version-form input[type=file]{font:calc(11px * var(--font-scale,1))/1.5 inherit;color:var(--c-62796a-fg);background:var(--c-ffffff-bg);border:1px dashed var(--c-c8ddd0-border);border-radius:7px;padding:10px 11px;width:100%}.version-form input[type=file]::file-selector-button{font:calc(11px * var(--font-scale,1))/1.5 inherit;border:1px solid var(--c-dce6e1-border);background:var(--c-f7faf8-bg);color:var(--c-527667-fg);border-radius:5px;padding:5px 9px;margin-right:10px}.version-form .form-error{margin:0}.version-file{display:flex;align-items:center;gap:11px;border:1px solid var(--c-e3ece6-border);border-radius:8px;background:var(--c-ffffff-bg);padding:12px 13px}.version-file.empty{display:block;color:var(--c-8fa195-fg);font-size:calc(10px * var(--font-scale,1));border-style:dashed;padding:11px 13px;margin:0}.version-file-icon{color:var(--c-5a8b73-fg);display:flex;flex-shrink:0}.version-file-icon svg{width:calc(15px * var(--font-scale,1));height:calc(15px * var(--font-scale,1))}.version-file-meta{min-width:0;display:grid;gap:3px}.version-file-meta a{font-size:calc(12px * var(--font-scale,1));font-weight:550;color:var(--c-416852-fg);overflow-wrap:anywhere}.version-file-meta small{font-size:calc(9px * var(--font-scale,1));color:var(--c-8c9e92-fg);overflow-wrap:anywhere}.version-file-hash{font-size:calc(8px * var(--font-scale,1))!important;color:var(--c-a4b1aa-fg)!important}.version-file .button{margin-left:auto;flex-shrink:0}.task-file{padding:0 18px 4px;display:grid;gap:12px}.upload-progress{display:grid;gap:6px}.upload-bar{height:6px;border-radius:99px;background:var(--c-dfe9e3-bg);overflow:hidden}.upload-bar span{display:block;height:100%;width:0;border-radius:99px;background:var(--c-3f8f71-bg);transition:width .18s ease-out}.upload-bar.unknown span{animation:upload-sweep 1.1s linear infinite;background:linear-gradient(90deg,var(--c-dfe9e3-bg),var(--c-3f8f71-bg),var(--c-dfe9e3-bg));background-size:220% 100%}@keyframes upload-sweep{from{background-position:120% 0}to{background-position:-120% 0}}.upload-progress-foot{display:flex;align-items:center;gap:10px}.upload-progress-foot small{font-size:calc(10px * var(--font-scale,1));color:var(--c-6d8478-fg)}.upload-progress-foot .text-button{margin-left:auto;font-size:calc(10px * var(--font-scale,1));flex-shrink:0}@media(prefers-reduced-motion:reduce){.upload-bar span{transition:none}.upload-bar.unknown span{animation:none}}.task-file .version-file.empty{margin:0}.task-file-form{margin:0}.task-file-form label{gap:6px}
@media(max-width:1100px){.auth-story{padding:35px}.auth-story h1{font-size:calc(44px * var(--font-scale,1))}.auth-form-panel{padding:40px 30px}.session-name{max-width:110px}}
@media(max-width:700px){.auth-layout{display:block}.auth-story{padding:25px;border:0;background:var(--c-edf6f2-bg)}.auth-story-body,.auth-story-foot{display:none}.auth-story .brand{font-size:calc(25px * var(--font-scale,1))}.auth-form-panel{padding:38px 24px 45px;min-height:calc(100vh - 100px)}.auth-form-wrap h2{font-size:calc(29px * var(--font-scale,1))}.auth-form-wrap input{font-size:calc(16px * var(--font-scale,1))}.prompt-form input,.prompt-form textarea,.prompt-form select{font-size:calc(16px * var(--font-scale,1))}.prompt-form-grid{grid-template-columns:1fr}.community-heading{align-items:flex-start;flex-wrap:wrap}.claim-record{align-items:flex-start;flex-wrap:wrap}.evaluation-toolbar{flex-direction:column;gap:10px}.evaluation-toolbar-actions{justify-content:flex-start;width:100%}.evaluation-head{display:none}.evaluation-summary{grid-template-columns:1fr auto;gap:9px 10px;padding:12px 13px}.evaluation-summary>.badge{justify-self:end}.evaluation-author{grid-column:1;grid-row:2}.evaluation-count{grid-column:2;grid-row:2;justify-self:end}.evaluation-actions{grid-column:1/-1;grid-row:3;grid-template-columns:auto auto;justify-content:flex-start}.evaluation-action-slot{justify-content:flex-start}.evaluation-note{grid-column:1/-1}.evaluation-records .prompt-list{padding:12px}.evaluation-records .prompt-form{margin:12px}.evaluation-record-note{padding:12px 13px 0}.version-record{padding:12px 13px 0}.task-file{padding:0 13px 4px}.version-form input[name=title]{font-size:calc(16px * var(--font-scale,1))}.version-file{flex-wrap:wrap}.version-file .button{margin-left:0;width:100%}.version-date{font-size:calc(9px * var(--font-scale,1))}.member-request{flex-wrap:wrap}.member-request-actions{margin-left:0;width:100%}.member-requests,.members-note{padding-left:13px;padding-right:13px}.prompt-card{padding:12px}.prompt-form{margin:12px;padding:13px}.prompt-list{padding:12px}.community-heading,.claim-record{padding-left:13px;padding-right:13px}.prompt-form-actions{flex-wrap:wrap}.prompt-form-actions small{margin:0;width:100%}.community-heading-actions .button{font-size:calc(9px * var(--font-scale,1))}.prompt-card-header h4{font-size:calc(12px * var(--font-scale,1))}.prompt-form textarea{min-height:180px}.draft-confirm{flex-wrap:wrap}}
@media(max-width:650px){.mobile-session{display:flex;justify-content:flex-end;align-items:center;position:absolute;right:16px;top:17px;gap:7px}.mobile-session .session-name{max-width:100px;font-size:calc(10px * var(--font-scale,1))}.mobile-session .button{padding:5px 7px;font-size:calc(9px * var(--font-scale,1));min-height:calc(28px * var(--font-scale,1))}}
.mobile-session{z-index:11}.table-scroll th,.table-scroll td{padding:13px 12px}.table-scroll th:first-child:not(.row-number),.table-scroll td:first-child:not(.row-number),.table-scroll th.row-number+th,.table-scroll td.row-number+td{min-width:220px}body:has(dialog[open]){overflow:hidden}.community-section{scroll-margin-top:75px}

/* Identity avatars: the palette comes from the account, the shape from these rules. */
.avatar{background:linear-gradient(140deg,var(--avatar-from,var(--c-8ea79c-bg)),var(--avatar-to,var(--c-6f8b80-bg)));color:var(--avatar-ink,var(--c-ffffff-fg));font-weight:650;letter-spacing:.3px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);flex-shrink:0}
.avatar.tiny{width:calc(22px * var(--font-scale,1));height:calc(22px * var(--font-scale,1));font-size:calc(9px * var(--font-scale,1));letter-spacing:0}
.byline-identity{display:inline-flex;align-items:center;gap:7px;min-width:0}
.byline-identity .member-name{min-width:0}
.claim-person-row{display:flex;align-items:center;gap:10px}
/* Light and dark switch: one control, present on every page. */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:calc(37px * var(--font-scale,1));height:calc(37px * var(--font-scale,1));padding:0;border:1px solid var(--c-dfe5e7-border);border-radius:7px;background:var(--c-ffffff-bg);color:var(--c-56626a-fg);flex-shrink:0}
.theme-toggle:hover{background:var(--c-f7fafa-bg);border-color:var(--c-b3ccc4-border)}
.theme-toggle svg{width:calc(16px * var(--font-scale,1));height:calc(16px * var(--font-scale,1))}
.theme-toggle .theme-sun{display:none}
.theme-toggle.floating{position:fixed;top:20px;right:20px;z-index:30;box-shadow:0 4px 18px rgba(22,60,57,.13)}
:root[data-theme="dark"] .theme-toggle .theme-sun{display:block}
:root[data-theme="dark"] .theme-toggle .theme-moon{display:none}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme-toggle .theme-sun{display:block}:root:not([data-theme="light"]) .theme-toggle .theme-moon{display:none}}
@media(max-width:650px){.theme-toggle{width:calc(33px * var(--font-scale,1));height:calc(33px * var(--font-scale,1))}.theme-toggle.floating{top:12px;right:12px}}

/* --- account menu, notification bell and the detail drawer ---------------- */
.session-controls{position:relative}
.bell-wrap,.account-wrap{position:relative}
.icon-round{position:relative;border:1px solid var(--c-dce6e1-border);background:var(--c-ffffff-bg);color:var(--c-5b7266-fg);width:calc(33px * var(--font-scale,1));height:calc(33px * var(--font-scale,1));border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0}
.icon-round svg{width:calc(16px * var(--font-scale,1));height:calc(16px * var(--font-scale,1));fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.icon-round:hover{border-color:var(--c-8fb3a3-border);color:var(--c-2f6b55-fg)}
.bell-count{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;border-radius:99px;background:var(--c-c25b4e-bg);color:var(--c-ffffff-fg);font-size:calc(9px * var(--font-scale,1));font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--c-ffffff-shadow)}
.account-button{display:flex;align-items:center;gap:8px;border:1px solid var(--c-dce6e1-border);background:var(--c-ffffff-bg);border-radius:99px;padding:3px 10px 3px 3px;max-width:210px}
.account-button:hover{border-color:var(--c-8fb3a3-border)}
.account-button-name{font-size:calc(11px * var(--font-scale,1));font-weight:550;color:var(--c-4a6559-fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-caret{width:calc(13px * var(--font-scale,1));height:calc(13px * var(--font-scale,1));flex-shrink:0;fill:none;stroke:var(--c-8fa197-border);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transform:rotate(90deg)}
.account-button[aria-expanded="true"] .account-caret{transform:rotate(-90deg)}
.menu-panel{position:absolute;top:calc(100% + 9px);right:0;z-index:60;background:var(--c-ffffff-bg);border:1px solid var(--c-dfe8e3-border);border-radius:11px;box-shadow:0 14px 38px rgba(31,63,52,.16);overflow:hidden}
.account-panel{width:232px;padding:6px}
.account-menu-head{display:flex;align-items:center;gap:10px;padding:10px 10px 12px;border-bottom:1px solid var(--c-eef3f0-border);margin-bottom:6px}
.account-menu-head .sidebar-identity{max-width:150px}
.account-menu-head span[data-member-name]{display:block;font-size:calc(12px * var(--font-scale,1));font-weight:600;color:var(--c-3e6651-fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-menu-head small{display:block;font-size:calc(10px * var(--font-scale,1));color:var(--c-8c9e92-fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-item{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;border-radius:7px;padding:9px 10px;font-size:calc(12px * var(--font-scale,1));font-weight:550;color:var(--c-4a6559-fg);text-align:left}
.menu-item svg{width:calc(15px * var(--font-scale,1));height:calc(15px * var(--font-scale,1));color:var(--c-7b9488-fg);fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.menu-item:hover{background:var(--c-f1f7f4-bg);color:var(--c-2f6b55-fg)}
.menu-item:hover svg{color:var(--c-2f6b55-fg)}
.bell-panel{width:364px;max-width:calc(100vw - 32px)}
.menu-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:13px 15px 9px;font-size:calc(12px * var(--font-scale,1));font-weight:650;color:var(--c-3e6651-fg)}
.menu-head-count{font-size:calc(10px * var(--font-scale,1));font-weight:400;color:var(--c-93a89b-fg)}
.menu-tools{display:flex;gap:14px;padding:0 15px 11px;border-bottom:1px solid var(--c-eef3f0-border)}
.menu-tools .text-button{margin:0;font-size:calc(10px * var(--font-scale,1))}
.menu-tools .text-button.danger{color:var(--c-bb6559-fg)}
.notification-list{max-height:380px;overflow-y:auto}
.notification-item{display:flex;align-items:flex-start;gap:11px;width:100%;border:0;border-bottom:1px solid var(--c-f2f6f4-border);background:none;padding:12px 15px;text-align:left}
.notification-item:last-child{border-bottom:0}
.notification-item:hover{background:var(--c-f6faf8-bg)}
.notification-item.unread{background:var(--c-f3f9f6-bg)}
.notification-item.unread:hover{background:var(--c-ecf5f0-bg)}
.notification-text{min-width:0;flex:1;display:grid;gap:3px}
.notification-line{font-size:calc(11.5px * var(--font-scale,1));line-height:1.6;color:var(--c-547063-fg);overflow-wrap:anywhere}
.notification-line b{font-weight:650;color:var(--c-3e6651-fg)}
.notification-text small{font-size:calc(10px * var(--font-scale,1));color:var(--c-8c9e92-fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notification-when{color:var(--c-a0b0a6-fg)!important}
.unread-dot{width:calc(7px * var(--font-scale,1));height:calc(7px * var(--font-scale,1));border-radius:50%;background:var(--c-3f8f71-bg);flex-shrink:0;margin-top:5px}
.notification-empty{padding:30px 22px;text-align:center;color:var(--c-8fa195-fg);font-size:calc(11px * var(--font-scale,1));line-height:1.7}
.notification-empty b{display:block;color:var(--c-61866c-fg);font-size:calc(12px * var(--font-scale,1));margin-bottom:6px}
.drawer-scrim{position:fixed;inset:0;z-index:70;background:rgba(24,46,38,.24)}
.drawer{position:fixed;top:0;right:0;bottom:0;width:470px;max-width:100vw;z-index:71;background:var(--c-ffffff-bg);border-left:1px solid var(--c-dfe8e3-border);box-shadow:-18px 0 44px rgba(31,63,52,.14);display:flex;flex-direction:column;overflow-y:auto}
.drawer-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:19px 22px 14px;border-bottom:1px solid var(--c-eef3f0-border)}
.drawer-body{padding:20px 22px 28px;display:grid;gap:15px;align-content:start}
.drawer-actor{display:flex;align-items:center;gap:11px}
.drawer-body h2{font-size:calc(16px * var(--font-scale,1));line-height:1.5;margin:0;color:var(--c-325b47-fg);font-weight:600;overflow-wrap:anywhere}
.drawer-detail{margin:0;font-size:calc(12px * var(--font-scale,1));line-height:1.8;color:var(--c-6c8578-fg);overflow-wrap:anywhere}
.drawer-facts{margin:0;display:grid;gap:11px;border-top:1px solid var(--c-eef3f0-border);padding-top:15px}
.drawer-facts>div{display:grid;gap:3px}
.drawer-facts dt{font-size:calc(9px * var(--font-scale,1));letter-spacing:.7px;text-transform:uppercase;color:var(--c-93a89b-fg)}
.drawer-facts dd{margin:0;font-size:calc(12px * var(--font-scale,1));color:var(--c-44695a-fg);overflow-wrap:anywhere}
.drawer-facts .mono{font-family:ui-monospace,SFMono-Regular,monospace;font-size:calc(10.5px * var(--font-scale,1));color:var(--c-6c8578-fg)}
.drawer-body .button{justify-self:start;margin-top:4px}

/* --- avatar picker (profile page and the admin edit dialog) -------------- */
.avatar-picker{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;max-width:300px}
.avatar-choice{position:relative;display:flex;align-items:center;justify-content:center;border-radius:50%;padding:3px;border:2px solid transparent;cursor:pointer}
.avatar-choice input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.avatar-choice .avatar{width:calc(32px * var(--font-scale,1));height:calc(32px * var(--font-scale,1));font-size:calc(10px * var(--font-scale,1))}
.avatar-choice:hover{border-color:var(--c-bdd5c9-border)}
.avatar-choice.selected{border-color:var(--c-3f8f71-border)}
.avatar-choice input:focus-visible+.avatar{outline:2px solid var(--c-3f8f71-border);outline-offset:3px}
.avatar.large{width:calc(56px * var(--font-scale,1));height:calc(56px * var(--font-scale,1));font-size:calc(18px * var(--font-scale,1))}

/* --- profile page -------------------------------------------------------- */
.profile-panel{padding:24px 26px 26px;display:grid;gap:22px}
.profile-header{display:flex;align-items:center;gap:16px}
.profile-header h2{margin:0;font-size:calc(20px * var(--font-scale,1));font-weight:600;color:var(--c-325b47-fg);letter-spacing:-.4px;overflow-wrap:anywhere}
.profile-header .panel-sub{margin:5px 0 0}
.profile-form{display:grid;gap:19px;max-width:430px}
.profile-form label{display:grid;gap:7px;font-size:calc(11px * var(--font-scale,1));font-weight:550;color:var(--c-566d65-fg)}
.profile-form input[type=text]{border:1px solid var(--c-dce6e1-border);border-radius:7px;background:var(--c-ffffff-bg);color:var(--c-30483d-fg);padding:12px 13px;font:calc(12px * var(--font-scale,1))/1.5 inherit;width:100%;min-width:0;outline-offset:2px}
.profile-form small{font-weight:400;color:var(--c-8fa798-fg);font-size:calc(10px * var(--font-scale,1))}
.profile-form .form-error{margin:0}
.profile-field{display:grid;gap:9px}
.profile-field-label{font-size:calc(11px * var(--font-scale,1));font-weight:550;color:var(--c-566d65-fg)}
.profile-field small{font-weight:400;color:var(--c-8fa798-fg);font-size:calc(10px * var(--font-scale,1))}
.profile-actions{display:flex;gap:9px;align-items:center}
.profile-panel .detail-note{margin:0;padding:0}
#edit-dialog .profile-field{margin-bottom:4px}
#edit-dialog label{display:grid;gap:7px;font-size:calc(11px * var(--font-scale,1));font-weight:550;color:var(--c-566d65-fg);margin-bottom:15px}
#edit-dialog input[type=text]{border:1px solid var(--c-dce6e1-border);border-radius:7px;background:var(--c-ffffff-bg);color:var(--c-30483d-fg);padding:11px 12px;font:calc(12px * var(--font-scale,1))/1.5 inherit;width:100%;outline-offset:2px}
#edit-dialog small{font-weight:400;color:var(--c-8fa798-fg);font-size:calc(10px * var(--font-scale,1));line-height:1.7}

@media(max-width:900px){
  .account-button-name{display:none}
  .account-button{padding:3px}
  .bell-panel{width:320px}
}
@media(max-width:720px){
  .drawer{width:100%;border-left:0}
  .menu-panel{position:fixed;left:16px;right:16px;top:64px;width:auto;max-width:none}
  .avatar-picker{max-width:none}
}
a.menu-item{text-decoration:none}

/* --- uploaded avatar pictures -------------------------------------------- */
.avatar{position:relative;overflow:hidden}
.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.avatar-upload{display:flex;align-items:center;gap:15px;border:1px dashed var(--c-c8ddd0-border);border-radius:10px;background:var(--c-fbfdfc-bg);padding:15px 16px}
.avatar-upload.dropping{border-color:var(--c-3f8f71-border);background:var(--c-eef7f2-bg)}
.avatar-upload.busy{opacity:.65}
.avatar-upload-text{display:grid;gap:4px;min-width:0}
.avatar-upload-text b{font-size:calc(12px * var(--font-scale,1));color:var(--c-3e6651-fg);font-weight:600}
.avatar-upload-text small{font-size:calc(10px * var(--font-scale,1));color:var(--c-8fa798-fg);line-height:1.7}
.avatar-upload-actions{display:flex;gap:8px;margin-top:7px;flex-wrap:wrap}
.button.small.danger,.button.danger{color:var(--c-b0584c-fg)}
#edit-dialog .avatar-upload{padding:12px 13px;gap:12px;margin-bottom:14px}

/* --- row numbering ------------------------------------------------------- */
/* Every table carries a leading "No." column. It is narrow, quiet, and uses
   tabular figures so the digits line up as the count grows. */
th.row-number,td.row-number{width:1px;min-width:0;white-space:nowrap;text-align:right;padding-left:20px;padding-right:12px;font-variant-numeric:tabular-nums}
td.row-number{color:var(--c-a3b0a8-fg);font-size:calc(10px * var(--font-scale,1))}

/* --- icon-only row actions ------------------------------------------------ */
/* Four fixed actions per member row. Icon-only keeps the column narrow; the name
   lives in aria-label and title, so a screen reader and a hover both still say
   "Restrict @alice". */
.icon-action{display:inline-flex;align-items:center;justify-content:center;width:calc(30px * var(--font-scale,1));height:calc(30px * var(--font-scale,1));padding:0;border:1px solid var(--c-dce6e1-border);background:var(--c-ffffff-bg);border-radius:7px;color:var(--c-5b7266-fg)}
.icon-action svg{width:calc(15px * var(--font-scale,1));height:calc(15px * var(--font-scale,1));fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.icon-action:hover{border-color:var(--c-8fb3a3-border);background:var(--c-f2f8f5-bg);color:var(--c-2f6b55-fg)}
.icon-action.danger{color:var(--c-b0584c-fg)}
.icon-action.danger:hover{border-color:var(--c-d8a49b-border);background:var(--c-fdf2f0-bg);color:var(--c-9c4a3f-fg)}
.icon-action.good{color:var(--c-3f8f71-fg)}
.icon-action.good:hover{border-color:var(--c-94c4ae-border);background:var(--c-eef7f2-bg)}
.icon-action:focus-visible{outline:2px solid var(--c-3f8f71-border);outline-offset:2px}
.member-row-actions{gap:6px;align-items:center}

/* --- a button's leading icon --------------------------------------------- */
.button svg,.text-button svg{width:calc(14px * var(--font-scale,1));height:calc(14px * var(--font-scale,1));flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.button.small svg{width:calc(12px * var(--font-scale,1));height:calc(12px * var(--font-scale,1))}
.button{gap:7px}
.text-button{gap:6px}

/* --- member dialogs ------------------------------------------------------- */
.member-dialog-head{display:flex;align-items:center;gap:14px;padding-bottom:16px;border-bottom:1px solid var(--c-eef3f0-border);margin-bottom:18px}
.member-dialog-head .member-identity strong{font-size:calc(15px * var(--font-scale,1))}
.member-head-badges{display:flex;gap:6px;align-items:center;margin-top:7px;flex-wrap:wrap}
.dialog-section{border-top:1px solid var(--c-eef3f0-border);margin-top:20px;padding-top:18px}
.dialog-section-title{font-size:calc(10px * var(--font-scale,1));letter-spacing:.8px;text-transform:uppercase;color:var(--c-93a89b-fg);font-weight:600;margin:0 0 9px}
#edit-form .dialog-section-title{margin-top:0}
.dialog-section .detail-note{margin:0 0 11px;line-height:1.7}
.dialog-section-actions{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.new-password{margin-top:14px}
.new-password label{margin-bottom:0}
#view-dialog .drawer-facts{border-top:0;padding-top:0;grid-template-columns:1fr 1fr;gap:14px}
#view-dialog .drawer-facts .mono{font-family:ui-monospace,SFMono-Regular,monospace;font-size:calc(10px * var(--font-scale,1))}
#view-dialog .confirm-actions{margin-top:22px}
.task-name{display:inline-flex;align-items:center;gap:9px;text-align:left}
.task-name .task-icon{flex-shrink:0}

/* An icon prefix is centred against its label. Flex containers do that themselves; this
   catches every button that lays its contents out inline, where an svg would otherwise
   sit on the text baseline and ride high. */
button>svg,a>svg,label>svg,summary>svg{vertical-align:middle}

/* --- Activity: one row per event ---------------------------------------------------
   Colours come from the existing semantic tokens only, so build_theme.py has no literal
   of ours to rewrite and the dark palette follows without a second definition. */
.activity-scroll table{min-width:calc(1180px * var(--font-scale,1))}
.activity-scroll th:nth-child(4),.activity-scroll td:nth-child(4){min-width:calc(165px * var(--font-scale,1))}
.activity-scroll th:nth-child(3),.activity-scroll td:nth-child(3){min-width:calc(135px * var(--font-scale,1))}
.platform-mark{width:calc(24px * var(--font-scale,1));height:calc(24px * var(--font-scale,1));border-radius:50%;background:var(--blue-soft);color:var(--blue);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.platform-mark svg{width:calc(13px * var(--font-scale,1));height:calc(13px * var(--font-scale,1))}
.recorded-by{display:flex;align-items:center;gap:5px;font-size:calc(9px * var(--font-scale,1));color:var(--muted);font-weight:400;margin-top:2px}
.event-label{display:inline-flex;align-items:center;gap:8px;font-size:calc(11px * var(--font-scale,1));font-weight:550;color:var(--ink);white-space:nowrap}
.event-mark{width:calc(24px * var(--font-scale,1));height:calc(24px * var(--font-scale,1));border-radius:7px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.event-mark svg{width:calc(13px * var(--font-scale,1));height:calc(13px * var(--font-scale,1))}
.event-label.member .event-mark{background:var(--teal-soft);color:var(--teal)}
.event-label.platform .event-mark{background:var(--blue-soft);color:var(--blue)}
.activity-details{max-width:none}
/* A table cell sizes itself to its content whatever max-width says, so the cap lives on a
   block inside it. Without this the details spill across the When column as the text grows. */
.activity-details>div{max-width:calc(320px * var(--font-scale,1));overflow-wrap:anywhere}
.activity-details .badge{margin:0 6px 2px 0}
.activity-details .detail-note{display:block;overflow-wrap:anywhere}
.task-name-plain{font-size:calc(11px * var(--font-scale,1));font-weight:550;color:var(--ink)}
tr.activity-open{background:var(--c-f7fafa-bg)}
.row-arrow.open svg{transform:rotate(90deg)}
.activity-detail-row>td{padding:0;background:var(--c-f7fafa-bg);border-top:0}
.activity-detail{padding:17px 22px 20px}
.activity-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:13px 20px;margin:0}
.activity-facts dt{font-size:calc(8.5px * var(--font-scale,1));letter-spacing:.5px;text-transform:uppercase;color:var(--muted)}
.activity-facts dd{margin:4px 0 0;font-size:calc(11px * var(--font-scale,1));color:var(--ink);overflow-wrap:anywhere}
.activity-check{border-top:1px solid var(--c-dfe5e7-border);margin-top:13px;padding-top:11px}
.activity-check h5{margin:0 0 5px;font-size:calc(11px * var(--font-scale,1));display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.activity-check p{margin:0;font-size:calc(10.5px * var(--font-scale,1));line-height:1.65;color:var(--muted);white-space:pre-wrap;overflow-wrap:anywhere}
@media(max-width:720px){.activity-details>div{max-width:none}.activity-detail{padding:15px 16px 18px}}

/* The table is wider than its panel on a phone, and at the two largest text sizes on a
   desktop too. Nothing else on screen says so, and a reader who never scrolls sideways never
   learns that the details and the time are there. The two cases are exactly the ones that
   overflow, so the hint is shown by media query and attribute rather than measured in script. */
.activity-hint{display:none;margin-left:7px;font-weight:600;color:var(--teal)}
.activity-hint::before{content:'\2192';margin-right:5px}
.activity-scroll.scrolls+.table-bottom .activity-hint{display:inline}
.activity-scroll:focus-visible{outline:3px solid var(--c-75cdbb-border);outline-offset:2px}
.table-bottom .pagination-cell{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;flex-shrink:0}

/* The phone bar's Settings control, sized and shaped like the theme switch beside it,
   because at phone width the topbar — and with it the account menu — is not rendered. */
.mobile-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:calc(33px * var(--font-scale,1));height:calc(33px * var(--font-scale,1));padding:0;border:1px solid var(--c-dfe5e7-border);border-radius:7px;background:var(--c-ffffff-bg);color:var(--c-56626a-fg);flex-shrink:0}
.mobile-icon:hover{background:var(--c-f7fafa-bg);border-color:var(--c-b3ccc4-border)}
.mobile-icon svg{width:calc(16px * var(--font-scale,1));height:calc(16px * var(--font-scale,1))}
.mobile-count{position:absolute;top:calc(-6px * var(--font-scale,1));right:calc(-6px * var(--font-scale,1));min-width:calc(16px * var(--font-scale,1));padding:0 calc(4px * var(--font-scale,1));border-radius:calc(9px * var(--font-scale,1));background:var(--c-c25b4e-bg);color:var(--c-ffffff-fg);font-size:calc(9px * var(--font-scale,1));font-weight:700;line-height:calc(16px * var(--font-scale,1));text-align:center}

/* .mobile-session is positioned over the row the brand sits in, and whether the two meet
   depends on the window, the text size and the member's own name at once. prefs.js
   measures it and marks the bar; the name gives up its place first, since it is the only
   thing there that is not a control. */
.mobile-session.crowded .session-name{display:none}

/* The dropdown's footer: the way out of a 380px list into the whole inbox. It lives here
   rather than with the page's own styles because both applications carry the dropdown,
   while only the dashboard renders the page it leads to. */
.menu-foot{border-top:1px solid var(--c-eef3f0-border)}
.menu-all{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px 15px;border:0;background:var(--c-f7faf8-bg);color:var(--c-2f7a68-fg);font-size:calc(11px * var(--font-scale,1));font-weight:600;text-decoration:none}
.menu-all:hover{background:var(--c-eef7f2-bg)}
.menu-all svg{width:calc(13px * var(--font-scale,1));height:calc(13px * var(--font-scale,1))}
.menu-all-count{color:var(--c-8b969c-fg);font-weight:500}

.brand.crowded>span:last-child{display:none}

/* ---- submission dialog: two presentations of one set of panels -----------------------

   The mode toggle sits in the dialog header, beside the close button. */
.dialog-top-actions{display:flex;align-items:center;gap:10px}

/* Standard mode is the original reading order: no tab strip, every panel stacked. */
#task-dialog[data-mode="standard"] .detail-tabs{display:none}
#task-dialog[data-mode="standard"] .detail-panel{display:block}

/* Expanded mode fills 80% of the viewport. [open] is load-bearing: without it this rule
   would beat the user agent's `dialog:not([open]){display:none}` on specificity and show a
   closed dialog. The panel area scrolls rather than the dialog, so the submission name and
   the tabs stay in place while a long report moves under them. */
#task-dialog[open][data-mode="expanded"]{width:80vw;max-width:80vw;height:80vh;max-height:80vh;
  display:flex;flex-direction:column;overflow:hidden}
#task-dialog[data-mode="expanded"] #detail-content,
#task-dialog[data-mode="expanded"] .detail-main{flex:1;min-height:0;display:flex;flex-direction:column}
#task-dialog[data-mode="expanded"] .detail-panels{flex:1;min-height:0;overflow-y:auto;padding-top:4px}
#task-dialog[data-mode="expanded"] .detail-panel{display:none}
#task-dialog[data-mode="expanded"] .detail-panel.active{display:block}
/* The tab already names the section, so the heading inside it would say it twice. */
#task-dialog[data-mode="expanded"] .detail-panel>.detail-section-title:first-child{display:none}

.detail-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-top:20px;padding-bottom:12px;
  border-bottom:1px solid var(--c-dfe5e7-border)}
.detail-tab{display:inline-flex;align-items:center;gap:8px;border:1px solid transparent;
  background:transparent;border-radius:8px;padding:9px 12px;white-space:nowrap;
  font-size:calc(11px * var(--font-scale,1));font-weight:550;color:var(--muted)}
.detail-tab:hover{background:var(--c-f5f8f7-bg);color:var(--ink)}
.detail-tab.active{background:var(--teal-soft);color:var(--teal);border-color:var(--c-b3ccc4-border)}
.detail-tab .subtle-label{font-size:calc(9px * var(--font-scale,1))}

@media(max-width:650px){
  /* A phone has no room for a second layout, and 80% of a small viewport is not roomier. */
  #task-dialog[open][data-mode="expanded"]{width:min(870px,calc(100% - 32px));max-width:none;
    height:auto;max-height:90vh;display:block;overflow:auto}
  #task-dialog[data-mode="expanded"] .detail-tabs{display:none}
  #task-dialog[data-mode="expanded"] .detail-panel{display:block}
  .dialog-top-actions #detail-mode-label{display:none}
}

/* ---- notification drawer: the entry in full --------------------------------------------
   The drawer reads top to bottom as what happened, what it was, where it sits, and what
   else has happened to the same task. Each block is a section so the panel stays scannable
   as it grows. */
.drawer-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.drawer-section{border-top:1px solid var(--c-eef3f0-border);padding-top:15px;display:grid;gap:11px}
.drawer-section>h3{margin:0;font-size:calc(11px * var(--font-scale,1));font-weight:620;
  letter-spacing:.2px;color:var(--c-6c8578-fg);display:flex;align-items:center;gap:8px}
.drawer-loading{margin:0;display:flex;align-items:center;gap:8px;color:var(--muted);
  font-size:calc(11px * var(--font-scale,1))}
.drawer-loading svg{animation:spin 1.3s linear infinite}

/* A prompt is the whole point of a prompt notification, so it is shown in full, in the same
   card the task dialog uses. */
.drawer-card{margin:0}
.drawer-card pre{max-height:320px;overflow:auto}

.drawer-related{display:grid;gap:7px}
.drawer-related-item{display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;
  border:1px solid var(--c-eef3f0-border);background:var(--c-ffffff-bg);border-radius:8px;
  padding:10px 11px;color:var(--ink);font-size:calc(11px * var(--font-scale,1))}
.drawer-related-item:hover{border-color:var(--c-8fb3a3-border);background:var(--c-f2f8f5-bg)}
.drawer-related-item>svg{color:var(--c-6c8578-fg);margin-top:1px}
.drawer-related-item b{font-weight:550;display:block;overflow-wrap:anywhere}
.drawer-related-item small{color:var(--muted);display:block;margin-top:3px}
.drawer-related-item.unread{border-left:3px solid var(--teal)}

.drawer-actions{display:flex;flex-wrap:wrap;gap:9px;border-top:1px solid var(--c-eef3f0-border);
  padding-top:15px}
.drawer-actions .button{flex:1 1 auto;justify-content:center}

/* Preserved submission records */
.saved-history{margin:20px 0;padding:16px;border:1px solid var(--c-dfe5e7-border);border-radius:10px;}
.saved-history>summary{cursor:pointer;font-weight:650;}
.saved-history-entry{padding:16px 0;border-top:1px solid var(--c-dfe5e7-border);overflow-wrap:anywhere;}
.saved-history-entry pre{white-space:pre-wrap;max-height:420px;overflow:auto;padding:12px;background:var(--c-f7fafa-bg);border-radius:6px;}
.saved-history-entry small{display:block;margin-top:6px;overflow-wrap:anywhere;}