:root {
  --bg:#f5f3ef;
  --surface:#fff;
  --surface-soft:#faf9f7;
  --text:#171816;
  --muted:#6d716e;
  --line:#e3e1dc;
  --ink:#1d2226;
  --green:#739979;
  --green-bg:#edf4ed;
  --amber:#d6a51c;
  --amber-bg:#fff7df;
  --grey:#8b9194;
  --grey-bg:#f0f2f2;
  --danger:#a84b42;
  --danger-bg:#fbefed;
  --radius:14px;
  --radius-sm:9px;
  --shadow:0 7px 25px rgba(23,24,22,.055);
  --max:1180px;
  --font:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --control-h:44px;
  --page-x:24px;
  --table-pad-x:20px;
  --table-pad-y:15px;
}
*{box-sizing:border-box}
html{min-height:100%;background:var(--bg)}
body{margin:0;min-height:100vh;color:var(--text);font-family:var(--font);background:var(--bg)}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
a{color:inherit}
img{max-width:100%}
.container{width:min(var(--max),calc(100% - (var(--page-x) * 2)));margin:0 auto}
.shell{min-height:100vh}
.boot-screen{min-height:100vh;display:grid;place-items:center;align-content:center;gap:30px;background:var(--bg)}
.boot-logo{display:block;width:145px;max-width:42vw;height:auto;object-fit:contain}
.boot-brand,.brand-text{letter-spacing:.31em;font-size:13px;font-weight:600;white-space:nowrap}
.brand-logo{display:block;max-height:34px;object-fit:contain;object-position:left center}
.spinner{width:24px;height:24px;border-radius:50%;border:2px solid #d8d6d1;border-top-color:#242827;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Header */
.topbar{height:70px;background:rgba(255,255,255,.94);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;backdrop-filter:blur(12px)}
.nav{height:100%;display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand-wrap{min-width:0;display:flex;align-items:center}
.nav-links{display:flex;align-items:center;gap:20px}
.nav-link{border:0;background:transparent;color:#5f6361;padding:8px 2px;font-size:13px;position:relative;text-decoration:none}
.nav-link:hover,.nav-link.active{color:var(--text)}
.nav-link.active::after{content:"";position:absolute;left:0;right:0;bottom:-18px;height:2px;background:var(--ink)}
.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:12px;background:#858d90;color:#fff;flex:0 0 auto;overflow:hidden;border:0;padding:0}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar-button:hover{box-shadow:0 0 0 3px rgba(23,24,22,.08)}
.mobile-account-link{display:none}
.nav-toggle{display:none;width:38px;height:38px;border:0;background:transparent;padding:8px;place-items:center;align-content:center;gap:4px}
.nav-toggle span{display:block;width:18px;height:1.5px;background:var(--text);transition:.15s ease}
.nav-toggle.open span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* Common page layout */
.main{padding:58px 0 90px}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:11px;color:var(--muted);font-weight:600;margin-bottom:10px}
h1,h2,h3{margin:0;letter-spacing:-.035em}
h1{font-size:clamp(34px,4.1vw,54px);line-height:1.02;font-weight:600}
h2{font-size:27px;font-weight:600}
h3{font-size:18px;font-weight:600}
.lead{color:var(--muted);line-height:1.6;max-width:650px;margin:14px 0 0;font-size:15px}
.page-header{margin:0 0 28px;padding:0;display:grid;justify-items:start;width:100%}
.page-header>*{margin-left:0}
.page-actions{margin-top:18px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.back-button{background:transparent;border:0;padding:0;margin:0 0 30px;color:var(--muted);font-size:12px}
.back-button:hover{color:var(--text)}
.optional-label{font-weight:400;color:var(--muted)}

/* Buttons */
.primary-button,.secondary-button,.ghost-button,.danger-button,.link-button{
  min-height:var(--control-h);border-radius:var(--radius-sm);padding:0 15px;border:1px solid transparent;font-weight:600;font-size:12px;transition:.15s ease;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:7px
}
.primary-button{background:var(--ink);color:#fff}.primary-button:hover{background:#343a3e}
.secondary-button{background:#fff;color:var(--text);border-color:var(--line)}.secondary-button:hover{background:#faf9f6}
.ghost-button{background:transparent;color:var(--muted);padding-left:4px;padding-right:4px}.ghost-button:hover{color:var(--text)}
.danger-button{background:var(--danger-bg);color:var(--danger);border-color:#f3d8d4}
button:disabled,a.is-disabled{opacity:.5;cursor:not-allowed;pointer-events:none}
.create-button .plus{font-size:21px;line-height:1;display:inline-flex;align-items:center;margin-right:1px}
.plus-inline{font-size:17px;line-height:1}
.compact-button{min-height:36px;padding:0 12px}
.action-fixed{width:142px;min-width:142px;height:44px;min-height:44px}
.text-action{border:0;background:transparent;padding:5px 0;color:var(--muted);font-size:11px;font-weight:600;text-decoration:none}
.text-action:hover{color:var(--text);text-decoration:underline}
.text-action.strong{color:var(--text)}
.button-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* Forms */
.field{display:grid;gap:7px;margin-bottom:14px;min-width:0}
.field label{font-size:11px;font-weight:600;color:#555a57}
.input,.select,.textarea{width:100%;border:1px solid #d6d6d1;background-color:#fff;border-radius:8px;color:var(--text);outline:none;font-size:13px}
.input,.select{height:var(--control-h);min-height:var(--control-h);padding:0 12px}
.select{appearance:none;-webkit-appearance:none;padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%236d716e' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:12px 12px}
.input[type=date]{padding-right:10px}
.input:focus,.select:focus,.textarea:focus{border-color:#919896;box-shadow:0 0 0 3px rgba(100,110,107,.08)}
.textarea{min-height:92px;padding:11px 12px;resize:vertical}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-grid .span-2{grid-column:1/-1}
.editor-card,.settings-section{padding:24px;margin-bottom:16px}
.editor-head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:20px}
.help{color:var(--muted);font-size:11px;line-height:1.55}.stage-help{margin-top:5px}.settings-help{margin:6px 0 18px}
.stage-editor{display:grid;grid-template-columns:105px minmax(220px,1.3fr) 205px 180px;gap:14px;align-items:end;padding:17px 0;border-top:1px solid var(--line)}
.stage-editor:first-of-type{border-top:0}.stage-editor-name{font-weight:600;height:var(--control-h);display:flex;align-items:center}.mini-label{font-size:10px;color:var(--muted);margin-bottom:6px;font-weight:600}
.stage-editor>div:not(.stage-editor-name){display:flex;flex-direction:column;justify-content:flex-end;min-height:calc(var(--control-h) + 22px)}
.stage-editor .input,.stage-editor .select{height:var(--control-h);min-height:var(--control-h)}

/* Custom dropdowns / pickers */
.chevron{width:9px;height:9px;border-right:1.3px solid currentColor;border-bottom:1.3px solid currentColor;transform:rotate(45deg) translateY(-2px);display:inline-block;flex:0 0 auto;margin-left:8px}
details[open]>.chevron,details[open]>summary .chevron{transform:rotate(225deg) translate(-1px,-1px)}
.access-picker{border:1px solid var(--line);border-radius:8px;background:#fff;overflow:hidden}
.access-picker summary{list-style:none;cursor:pointer;padding:0 14px;min-height:var(--control-h);font-size:13px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.access-picker summary::-webkit-details-marker{display:none}.access-picker[open] summary{border-bottom:1px solid var(--line)}
.access-options{max-height:220px;overflow:auto;padding:8px 10px}.access-option{display:flex;align-items:flex-start;gap:9px;padding:8px 4px;font-size:12px}.access-option input{margin-top:2px}.access-option small,.single-client-option small{color:var(--muted);display:block;margin-top:2px}
.access-footer{border-top:1px solid var(--line);padding:9px 10px}.access-footer button{border:0;background:transparent;padding:5px 0;font-size:11px;color:var(--text);font-weight:600}
.single-client-option{display:block;width:100%;border:0;background:transparent;text-align:left;padding:9px 5px;font-size:12px;border-radius:6px}.single-client-option:hover{background:var(--surface-soft)}

/* Filters + minimalist sort */
.controls-row{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 18px;flex-wrap:wrap}
.filter-tabs{display:flex;align-items:center;gap:22px;flex-wrap:wrap}.filter-tab{border:0;background:transparent;padding:7px 0;font-size:12px;color:var(--muted);position:relative;white-space:nowrap}.filter-tab:hover,.filter-tab.active{color:var(--text)}.filter-tab.active{font-weight:600}.filter-tab.active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink)}
.sort-menu{position:relative;color:var(--muted);font-size:11px;z-index:8}.sort-menu summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:1px;padding:8px 2px;white-space:nowrap}.sort-menu summary::-webkit-details-marker{display:none}.sort-menu[open] summary{color:var(--text)}
.sort-popover{position:absolute;right:0;top:calc(100% + 7px);width:220px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 40px rgba(23,24,22,.1);padding:6px;z-index:30}.sort-option{display:block;width:100%;text-align:left;border:0;background:transparent;padding:9px 10px;border-radius:7px;font-size:11px;color:var(--text)}.sort-option:hover,.sort-option.selected{background:var(--surface-soft)}

/* Status */
.status-pill{display:inline-flex;align-items:center;justify-content:flex-start;border-radius:999px;padding:6px 9px;font-size:11px;font-weight:600;width:max-content;max-width:100%;margin-left:0}
.status-feedback{background:var(--amber-bg);color:#8d6600}.status-delivered{background:var(--green-bg);color:#39703d}.status-waiting{background:var(--grey-bg);color:#697073}.status-plain{padding:0;border-radius:0;background:transparent;color:var(--text);font-weight:500}
.admin-stage-pill.status-active{background:var(--amber-bg);color:#8d6600}.admin-stage-pill.status-delivered{background:var(--green-bg);color:#39703d}.admin-stage-pill.status-waiting{background:var(--grey-bg);color:#697073}

/* Admin tables */
.table-wrap{overflow:auto}.consistent-table,.fixed-project-table{width:100%;border-collapse:collapse;min-width:780px;table-layout:fixed}
th,td{text-align:left;padding:var(--table-pad-y) var(--table-pad-x);border-bottom:1px solid var(--line);font-size:12px;vertical-align:middle}th{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.05em;font-weight:600;background:#faf9f7}tr:last-child td{border-bottom:0}
.fixed-project-table .col-project{width:29%}.fixed-project-table .col-client{width:20%}.fixed-project-table .col-stage{width:25%}.fixed-project-table .col-updated{width:14%}.fixed-project-table .col-actions{width:12%}
.fixed-project-table tr.client-group-start td{border-top:9px solid var(--bg)}
.table-link{border:0;background:transparent;padding:0;font-weight:600;text-align:left;color:var(--text)}.table-link:hover{text-decoration:underline}.empty{padding:32px;text-align:center;color:var(--muted)}
.admin-project-cell{display:flex;align-items:center;gap:13px;min-width:0}.admin-project-thumb,.mobile-project-thumb{width:46px;height:46px;flex:0 0 46px;border-radius:7px;background:#d8d5cf center/cover no-repeat;border:1px solid #d4d2cd}.admin-project-thumb.placeholder,.mobile-project-thumb.placeholder{background:#d8d5cf}
.project-links-list{display:grid;gap:8px;margin:0;padding:0;list-style:none}.project-links-list a{text-decoration:none;font-size:12px;font-weight:600}.project-links-list a:hover{text-decoration:underline}
.admin-mobile-project-list{display:none}

/* Client dashboard */
.project-list{display:grid;gap:14px}.project-card{display:grid;grid-template-columns:160px minmax(0,1fr) 340px;overflow:hidden;min-height:160px}.project-image{width:160px;min-height:160px;aspect-ratio:1/1;background:#d8d5cf center/cover no-repeat}.project-image.placeholder{background:#d8d5cf}
.project-main{padding:25px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-width:0}.project-main>div{display:flex;flex-direction:column;align-items:flex-start;min-width:0}.project-title{font-size:18px;font-weight:600;margin-bottom:8px}.project-meta{font-size:12px;color:var(--muted);margin-top:9px}
.project-action{border-left:1px solid var(--line);padding:23px;display:flex;flex-direction:column;justify-content:space-between;gap:24px}.project-action.no-progress{justify-content:flex-end}.project-action .view-project-button{width:100%}.mobile-project-extra{display:none}
.progress{display:grid;grid-template-columns:repeat(3,1fr);position:relative;gap:6px;width:100%}.progress::before{content:"";position:absolute;height:1px;background:#d7d8d5;left:16.6667%;right:16.6667%;top:8px;z-index:0}.progress-step{position:relative;padding-top:23px;text-align:center;font-size:10px;color:var(--muted);z-index:1}.progress-step::before{content:"";position:absolute;width:14px;height:14px;border-radius:50%;top:1px;left:calc(50% - 7px);background:#fff;border:1px solid #aeb4b1}.progress-step.done::before{background:var(--green);border-color:var(--green)}.progress-step.feedback::before{background:var(--amber);border-color:var(--amber)}

/* Client project */
.project-top{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:34px;align-items:start;margin-bottom:24px}.project-top-copy{min-width:0}.project-detail-image{width:180px;aspect-ratio:1/1;border-radius:var(--radius);border:1px solid var(--line);background:#d8d5cf center/cover no-repeat;box-shadow:var(--shadow)}.project-detail-image.placeholder{background:#d8d5cf}
.current-stage-card{width:min(360px,100%);padding:17px 18px;margin:18px 0 0;display:flex;flex-direction:column;align-items:flex-start}.summary-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.summary-stage{font-weight:600;margin:7px 0}.summary-due{font-size:11px;color:var(--muted);line-height:1.45;margin-top:9px}
.timeline{overflow:hidden}.stage{display:grid;grid-template-columns:118px minmax(0,1fr);border-top:1px solid var(--line);min-height:126px}.stage:first-child{border-top:0}.stage-number{position:relative;padding:28px 18px;color:var(--muted);font-size:12px;display:flex;align-items:center}.stage-index{margin-left:50px}.stage-number::before{content:"";width:18px;height:18px;border-radius:50%;position:absolute;left:48px;top:50%;transform:translate(-50%,-50%);background:#fff;border:1px solid #aeb4b1;z-index:2}.stage-number::after{content:"";width:1px;background:#deded9;position:absolute;left:48px;top:0;bottom:0;z-index:1}.stage:first-child .stage-number::after{top:50%}.stage:last-child .stage-number::after{bottom:50%}.stage.done .stage-number::before{background:var(--green);border-color:var(--green)}.stage.feedback .stage-number::before{background:var(--amber);border-color:var(--amber)}
.stage-body{padding:24px 28px 24px 8px;display:flex;justify-content:space-between;align-items:center;gap:26px;min-width:0;min-height:126px}.stage.feedback .stage-body{background:var(--amber-bg)}.stage.done .stage-body{background:var(--green-bg)}.stage-copy{min-width:0}.stage-title{font-weight:600;font-size:16px;margin-bottom:7px}.stage-status{font-size:12px;color:var(--muted);line-height:1.45}.stage.feedback .stage-status{color:#8d6600;font-weight:600}.stage.done .stage-status{color:#4d7352;font-weight:600}.stage-actions{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;justify-content:flex-end;flex:0 0 auto}.stage-secondary-actions{display:flex;align-items:center;gap:2px}.icon-action{width:42px;height:42px;border:0;border-radius:50%;background:transparent;color:var(--muted);padding:0;display:inline-grid;place-items:center;transition:.15s ease}.icon-action svg{width:16px;height:16px;display:block}.icon-action:hover{color:var(--text);background:rgba(23,24,22,.055)}
.finals-section{margin-top:18px;padding:24px}.finals-head{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:74px}.finals-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:7px}.finals-title{font-weight:600;font-size:18px}.finals-status{margin-top:8px;font-size:12px;color:var(--muted)}.finals-status.delivered{color:#39703d;font-weight:600}.finals-actions{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;justify-content:flex-end}.gallery-button{background:var(--ink);color:#fff}.contact-note{border-radius:var(--radius);padding:17px 18px;font-size:12px;line-height:1.5;background:#eef2f3;color:#526067;margin-top:18px}.contact-note a{font-weight:700}

/* Settings + media */
.settings-section+ .settings-section{margin-top:16px}.settings-section h3{margin-bottom:18px}.settings-narrow{max-width:520px}.media-setting-area{min-height:90px;border:1px dashed #d6d6d1;border-radius:10px;background:#faf9f7;display:flex;align-items:center;justify-content:center;gap:18px;padding:15px;flex-wrap:wrap}.upload-zone{min-height:var(--control-h);display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:#fff;border-radius:8px;padding:0 16px;font-size:12px;font-weight:600;cursor:pointer}.upload-zone input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}.upload-zone:hover{background:#f7f6f3}.upload-zone.compact{min-height:40px}.logo-preview,.favicon-preview,.login-image-preview{min-height:68px;display:flex;align-items:center;justify-content:center;padding:14px;border:1px solid var(--line);border-radius:9px;background:#fff;margin-top:9px;overflow:hidden}.logo-preview img{max-height:42px;width:auto;object-fit:contain}.favicon-preview img{width:32px;height:32px;object-fit:contain}.login-image-preview{min-height:150px}.login-image-preview img{width:100%;max-height:250px;object-fit:cover;border-radius:7px}
.range-input{width:100%;accent-color:var(--ink)}.copy-settings-list{display:grid;gap:0;border-top:1px solid var(--line)}.copy-setting-row{display:grid;grid-template-columns:150px minmax(150px,.7fr) minmax(260px,1.4fr);gap:16px;padding:16px 0 2px;border-bottom:1px solid var(--line);align-items:end}.copy-setting-row.compact-copy-row{grid-template-columns:150px minmax(200px,1fr)}.copy-setting-label{font-size:12px;font-weight:600;align-self:center}.toggle-row{min-height:var(--control-h);display:flex;align-items:center;gap:9px;font-size:12px;font-weight:600;color:#555a57}.toggle-row input{width:16px;height:16px}.project-image-setting{display:flex;align-items:center;gap:18px}.project-image-preview{width:92px;height:92px;flex:0 0 92px;border-radius:10px;border:1px solid var(--line);background:#d8d5cf center/cover no-repeat}.project-image-preview.placeholder{background:#d8d5cf}.project-image-controls{display:grid;justify-items:start;gap:6px}

/* Login */
.login-page{min-height:100vh;display:grid;grid-template-columns:minmax(340px,41%) 1fr;background:#fff}.login-visual{min-height:100vh;padding:44px;color:#fff;background:#d8d5cf center/cover no-repeat;display:flex;flex-direction:column;justify-content:space-between}.login-page.no-login-image .login-visual{background:#2e3231}.login-portal-label{font-size:clamp(32px,4vw,56px);line-height:1;letter-spacing:-.045em;margin-top:auto;padding-bottom:10px}.login-panel{display:grid;place-items:center;padding:48px}.login-box{width:min(430px,100%)}.login-title{font-size:32px;letter-spacing:-.035em;font-weight:600;margin:0}.login-description{margin-top:13px}.login-brand-mobile{display:none}.login-form{margin-top:30px}.login-submit{width:100%;border-radius:999px;margin-top:4px}.login-help{margin-top:14px}.login-options{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:4px 0 15px}.remember-row{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:11px}.remember-row input{width:15px;height:15px}.oauth-stack{display:grid;gap:9px;margin-top:28px}.oauth-button{height:46px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--text);font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:10px}.oauth-button:hover{background:#faf9f7}.oauth-mark{width:18px;text-align:center;font-weight:700}.oauth-mark.apple{font-size:13px}.login-divider{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:10px;margin:19px 0}.login-divider::before,.login-divider::after{content:"";height:1px;background:var(--line);flex:1}.login-simple{min-height:100vh;display:grid;place-items:center;background:var(--bg);padding:30px}.reset-box{background:#fff;border:1px solid var(--line);border-radius:18px;padding:36px;box-shadow:var(--shadow)}.login-brand-mobile.always{display:block;margin-bottom:30px}.modal-intro{font-size:13px;color:var(--muted);line-height:1.55;margin:-5px 0 20px}

/* Account + misc */
.account-preview{display:flex;align-items:center;gap:15px;margin-bottom:22px}.account-avatar-large{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#858d90;color:#fff;overflow:hidden}.account-avatar-large img{width:100%;height:100%;object-fit:cover}
.notice{border-radius:var(--radius);padding:17px 18px;font-size:12px;line-height:1.5;background:#eef2f3;color:#526067;margin-top:18px}.notice.error{background:var(--danger-bg);color:var(--danger)}.notice.success{background:var(--green-bg);color:#39703d}
.modal-layer{position:fixed;inset:0;z-index:50;background:rgba(18,20,19,.35);display:grid;place-items:center;padding:25px;backdrop-filter:blur(2px)}.modal{width:min(640px,100%);max-height:calc(100vh - 50px);overflow:auto;background:#fff;border-radius:16px;border:1px solid var(--line);box-shadow:0 24px 80px rgba(20,22,21,.18);padding:26px}.modal-head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:22px}.modal-close{border:0;background:transparent;font-size:20px;color:var(--muted)}.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}.modal-actions>*{min-height:var(--control-h)}
.preview-banner{background:#242928;color:#fff;padding:9px 0;font-size:11px}.preview-banner .container{display:flex;justify-content:space-between;gap:15px;align-items:center}.preview-banner button{color:#fff;border:1px solid rgba(255,255,255,.3);background:transparent;border-radius:7px;padding:6px 9px}.toast{position:fixed;right:22px;bottom:22px;z-index:100;background:#232827;color:#fff;border-radius:10px;padding:13px 16px;box-shadow:0 12px 40px rgba(20,22,21,.2);font-size:12px;max-width:360px;animation:toastIn .2s ease-out}.toast.error{background:#833f39}@keyframes toastIn{from{opacity:0;transform:translateY(8px)}}

@media (max-width:980px){
  .project-card{grid-template-columns:145px minmax(0,1fr)}.project-image{width:145px;min-height:145px}.project-action{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);flex-direction:row;align-items:center}.project-action .progress{flex:1}.project-action .view-project-button{width:min(340px,45%)}
  .stage-editor{grid-template-columns:95px 1fr 180px}.stage-editor>div:nth-child(4){grid-column:2/-1}
  .copy-setting-row{grid-template-columns:130px 1fr 1.4fr}
}

@media (max-width:760px){
  :root{--page-x:14px}
  .topbar{height:62px}.nav{position:relative}.nav-toggle{display:grid}.nav-links{display:none;position:absolute;top:52px;right:0;left:auto;width:min(255px,calc(100vw - 42px));background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:10px 14px 13px;flex-direction:column;align-items:stretch;gap:1px}.nav-links.open{display:flex}.nav-link{text-align:left;padding:10px 4px;font-size:12px}.nav-link.active::after{display:none}.avatar-button{display:none}.mobile-account-link{display:block}.brand-text{font-size:11px;letter-spacing:.22em}.brand-logo{max-height:30px}
  .main{padding:42px 0 72px}h1{font-size:clamp(31px,10vw,44px)}.lead{font-size:14px}.page-header{margin-bottom:26px}
  .dashboard-controls{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;flex-wrap:nowrap}.filter-tabs{gap:16px;flex-wrap:nowrap;overflow-x:auto;min-width:0;padding-right:4px;scrollbar-width:none}.filter-tabs::-webkit-scrollbar{display:none}.sort-menu{justify-self:end}.sort-menu summary{padding:7px 0}.sort-popover{right:0;width:210px}
  .form-grid{grid-template-columns:1fr}.form-grid .span-2{grid-column:auto}.editor-card,.settings-section{padding:21px}.editor-head{align-items:flex-start;flex-direction:column}.stage-editor{grid-template-columns:1fr;align-items:stretch;padding:20px 0}.stage-editor>div,.stage-editor>div:nth-child(4){grid-column:1}.stage-editor-name{height:auto;min-height:26px}.stage-editor>div:not(.stage-editor-name){min-height:0}
  .project-image-setting{align-items:flex-start}.copy-setting-row,.copy-setting-row.compact-copy-row{grid-template-columns:1fr;gap:5px;padding:16px 0}.copy-setting-label{margin-bottom:5px}.media-setting-area{min-height:78px}.logo-preview{overflow:auto;justify-content:flex-start}

  /* admin projects become expandable compact cards */
  .desktop-admin-table{display:none}.admin-mobile-project-list{display:grid;gap:10px}.admin-mobile-project-card{overflow:hidden;cursor:pointer}.mobile-card-compact{display:grid;grid-template-columns:58px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px}.mobile-project-thumb{width:58px;height:58px;flex-basis:58px}.mobile-project-copy{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px}.mobile-project-name{border:0;background:transparent;padding:0;font-size:13px;font-weight:600;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.mobile-project-client{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.mobile-client-view{padding:0 10px;min-height:34px;font-size:10px}.mobile-card-expanded{display:none;border-top:1px solid var(--line);padding:12px 14px;font-size:11px;color:var(--muted);align-items:center;justify-content:space-between;gap:12px}.admin-mobile-project-card.expanded .mobile-card-expanded{display:flex}.mobile-detail-label{display:block;text-transform:uppercase;letter-spacing:.06em;font-size:9px;margin-bottom:3px}

  /* client dashboard compact expandable */
  .project-list{gap:10px}.project-card{grid-template-columns:66px minmax(0,1fr) auto;min-height:0;align-items:center;cursor:pointer}.project-image{width:66px;min-height:66px;height:66px;aspect-ratio:1/1;margin:12px;border-radius:8px}.project-main{padding:12px 8px 12px 0;justify-content:center}.project-title{font-size:13px;margin-bottom:5px}.project-meta.desktop-project-meta{display:none}.project-main .status-pill{font-size:10px;padding:5px 7px}.project-main .status-plain{padding:0}.project-action{grid-column:auto;border:0;border-left:1px solid var(--line);padding:12px;display:grid;grid-template-columns:1fr;gap:9px;align-self:stretch;justify-items:stretch}.project-action .progress{width:150px;max-width:34vw}.project-action .view-project-button{width:100%;min-height:36px;padding:0 10px;font-size:10px}.progress-step{font-size:8px;padding-top:19px}.progress::before{top:6px}.progress-step::before{width:11px;height:11px;top:1px;left:calc(50% - 5.5px)}.mobile-project-extra{display:none;grid-column:1/-1;border-top:1px solid var(--line);padding:10px 13px;color:var(--muted);font-size:10px}.project-card.expanded .mobile-project-extra{display:block}

  /* client project */
  .project-top{grid-template-columns:1fr;gap:20px}.project-detail-image{width:120px;height:120px;aspect-ratio:1/1;order:2}.current-stage-card{width:100%;max-width:360px}.stage{grid-template-columns:72px minmax(0,1fr);min-height:116px}.stage-number{padding:20px 8px}.stage-number::before,.stage-number::after{left:36px}.stage-index{margin-left:37px}.stage-body{min-height:116px;padding:18px 12px 18px 6px;gap:8px;flex-direction:row;align-items:center}.stage-title{font-size:14px;margin-bottom:5px}.stage-status{font-size:10px}.stage-actions{gap:2px;margin-left:auto}.action-fixed{width:94px;min-width:94px;height:40px;min-height:40px;padding:0 8px}.icon-action{width:34px;height:34px}.icon-action svg{width:14px;height:14px}.finals-section{padding:22px 20px}.finals-head{align-items:flex-start;flex-direction:column;gap:18px}.finals-actions{justify-content:flex-start;align-items:center}.finals-actions .action-fixed{width:126px;min-width:126px}

  /* mobile login: no image, centered, airy */
  .login-page,.login-page.has-login-image,.login-page.no-login-image{display:block;min-height:100vh;background:var(--bg)}.login-visual{display:none!important}.login-panel{min-height:100vh;padding:56px 24px;display:grid;place-items:center}.login-box{width:min(390px,100%);text-align:center}.login-brand-mobile{display:flex;justify-content:center;margin-bottom:34px}.login-box .eyebrow{text-align:center}.login-title{font-size:30px}.login-description{margin-left:auto;margin-right:auto;max-width:330px}.login-form{text-align:left;margin-top:34px}.login-options{margin-top:7px}.oauth-stack{margin-top:30px}.oauth-button,.login-submit{height:48px;border-radius:999px}

  /* generic mobile tables (Clients) */
  .table-wrap{overflow:visible;background:transparent;border:0;box-shadow:none}.responsive-table{min-width:0!important;display:block}.responsive-table thead{display:none}.responsive-table tbody{display:grid;gap:12px}.responsive-table tr{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:8px 16px}.responsive-table td{display:grid;grid-template-columns:100px 1fr;gap:12px;align-items:center;border:0;border-bottom:1px solid var(--line);padding:12px 0;min-width:0}.responsive-table td:last-child{border-bottom:0}.responsive-table td::before{content:attr(data-label);color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-size:9px;font-weight:600}.responsive-table .empty{display:block;padding:28px 8px}.responsive-table .empty::before{display:none}
  .modal-layer{padding:14px}.modal{padding:22px;max-height:calc(100vh - 28px)}.modal-actions{flex-direction:column-reverse}.modal-actions>*{width:100%;height:var(--control-h)}
}

@media (max-width:420px){
  .filter-tabs{gap:12px}.filter-tab{font-size:10.5px}.sort-menu summary{font-size:10.5px}.mobile-card-compact{grid-template-columns:52px minmax(0,1fr) auto;gap:9px;padding:10px}.mobile-project-thumb{width:52px;height:52px;flex-basis:52px}.mobile-client-view{padding:0 8px}
  .project-card{grid-template-columns:58px minmax(0,1fr) auto}.project-image{width:58px;height:58px;min-height:58px;margin:10px}.project-action{padding:9px}.project-action .progress{width:132px;max-width:36vw}.project-action .view-project-button{padding:0 8px}.stage{grid-template-columns:64px minmax(0,1fr)}.stage-number::before,.stage-number::after{left:32px}.stage-index{margin-left:32px;font-size:10px}.stage-body{padding-left:4px;padding-right:8px}.action-fixed{width:82px;min-width:82px}.icon-action{width:30px;height:30px}.stage-secondary-actions{gap:0}
}

/* =========================================================
   V2.3 refinements
   ========================================================= */

/* Global rhythm / alignment */
h1{font-size:clamp(32px,3.6vw,47px)}
.settings-form,.settings-section{width:100%}
.brand-home{border:0;background:transparent;padding:0;margin:0;display:flex;align-items:center;justify-content:flex-start;cursor:pointer;color:inherit}
.brand-home:focus-visible{outline:2px solid #8c9490;outline-offset:6px;border-radius:4px}
.brand-logo{width:auto;max-width:190px;max-height:34px}

/* Sorting stays visually quiet */
.sort-menu summary{gap:5px;padding:8px 0}
.sort-menu summary .chevron{margin-left:5px}

/* Creation buttons */
.create-button .plus,.plus-inline{width:18px;height:20px;display:inline-grid;place-items:center;line-height:1;margin:0}
.modal-actions>*{width:132px;min-width:132px}

/* Settings */
.media-setting-area.media-setting-centered{flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:9px}
.logo-preview img{width:auto;max-width:240px;max-height:56px;object-fit:contain}
.copy-setting-row{grid-template-columns:150px minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:end}
.copy-setting-row.dashboard-copy-row{grid-template-columns:150px repeat(3,minmax(0,1fr))}
.copy-setting-row.compact-copy-row{grid-template-columns:150px minmax(0,1fr) minmax(0,1fr)}
.copy-setting-row.compact-copy-row::after{content:""}
.copy-setting-row .field{margin-bottom:14px}
.section-save{display:flex;justify-content:flex-start;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.crop-preview{aspect-ratio:16/10;min-height:0;width:100%;padding:0;background:#eceae5}
.crop-preview img{width:100%;height:100%;max-height:none;object-fit:cover;border-radius:8px}
.crop-controls{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:14px}
.crop-controls.is-hidden{display:none}

/* Client dashboard */
.project-action .progress,.project-action .view-project-button{width:100%}
.mobile-inline-progress{display:none}

/* Client project: image above the project heading, not alongside it */
.project-top{display:block;margin-bottom:24px}
.project-detail-image{width:180px;height:126px;aspect-ratio:auto;margin:0 0 22px 0;background-position:center}
.project-top-copy{width:100%}
.current-stage-card{margin-left:0}

/* Timeline: centred timeline rail, more breathing room before stage copy */
.stage{grid-template-columns:124px minmax(0,1fr);min-height:126px}
.stage-number{padding:28px 12px}
.stage-number::before,.stage-number::after{left:62px}
.stage-index{margin-left:82px}
.stage-body{padding:24px 16px 24px 28px;min-height:126px;gap:20px}
.stage-actions{gap:16px;margin-left:auto}
.stage-secondary-actions{gap:16px}
.icon-action{width:44px;height:44px;flex:0 0 44px}
.action-fixed{width:142px;min-width:142px}
.stage-actions{padding-right:0}
.share-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.share-options>*{width:100%}

/* Mobile clients use the same compact-card pattern as projects */
.admin-mobile-client-list{display:none}
.mobile-client-card-compact{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;padding:13px 14px}
.mobile-client-card-copy{min-width:0;display:grid;gap:4px}
.mobile-client-email{font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media (max-width:980px){
  .copy-setting-row{grid-template-columns:130px 1fr 1fr}
  .copy-setting-row.dashboard-copy-row{grid-template-columns:130px repeat(3,minmax(0,1fr))}
}

@media (max-width:760px){
  h1{font-size:clamp(29px,8.8vw,38px)}
  .nav-links{width:min(198px,calc(100vw - 36px));padding:9px 12px 12px}
  .brand-logo{max-width:165px;max-height:30px}
  .dashboard-controls{grid-template-columns:minmax(0,1fr) auto;width:100%}
  .sort-menu{justify-self:end}
  .sort-menu summary{padding-right:0}

  /* modal can be fully scrolled to both top and bottom edges */
  .modal-layer{display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:16px 14px}
  .modal{max-height:none;margin:auto 0;overflow:visible}
  .modal-actions{flex-direction:row;justify-content:stretch}
  .modal-actions>*{width:50%;min-width:0;height:var(--control-h)}

  /* Settings stack cleanly on mobile */
  .copy-setting-row,.copy-setting-row.dashboard-copy-row,.copy-setting-row.compact-copy-row{grid-template-columns:1fr;gap:5px}
  .copy-setting-row.compact-copy-row::after{display:none}
  .crop-controls{grid-template-columns:1fr;gap:4px}
  .section-save .primary-button{width:100%}

  /* Admin project compact row */
  .mobile-card-compact{padding:12px 14px;grid-template-columns:58px minmax(0,1fr) auto}
  .mobile-client-view{width:82px;min-width:82px;padding:0 7px;margin-right:0}

  /* Admin clients become expandable compact cards */
  .desktop-client-table{display:none}
  .admin-mobile-client-list{display:grid;gap:10px}
  .admin-mobile-client-card{overflow:hidden;cursor:pointer}
  .admin-mobile-client-card.expanded .mobile-card-expanded{display:flex}

  /* Client dashboard: timeline sits with title/status; View stays right */
  .project-card{grid-template-columns:66px minmax(0,1fr) 88px;align-items:center}
  .project-main{padding:12px 6px 12px 0}
  .mobile-inline-progress{display:block;width:100%;margin-top:9px}
  .mobile-inline-progress .progress{width:100%;max-width:none}
  .project-action{border-left:1px solid var(--line);padding:12px 12px;display:flex;align-items:center;justify-content:center;align-self:stretch}
  .project-action .progress{display:none}
  .project-action .view-project-button{width:76px;min-width:76px;height:36px;min-height:36px;padding:0 7px}
  .project-card .project-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

  /* Login logo always centered above welcome copy */
  .login-brand-mobile{display:flex!important;justify-content:center;align-items:center;margin-bottom:34px}
  .login-brand-mobile .brand-logo{max-width:190px;max-height:38px}

  /* Client project */
  .project-top{display:block}
  .project-detail-image{width:118px;height:84px;margin:0 0 20px 0;order:initial}
  .current-stage-card{width:100%;max-width:360px}
  .stage{grid-template-columns:100px minmax(0,1fr);min-height:110px}
  .stage-number{padding:18px 8px}
  .stage-number::before,.stage-number::after{left:38px}
  .stage-index{margin-left:60px;font-size:10px}
  .stage-body{min-height:110px;padding:18px 14px 18px 18px;gap:9px;align-items:center}
  .stage-copy{min-width:0}
  .stage-title{font-size:14px;margin-bottom:5px}
  .stage-actions{margin-left:auto;gap:0;flex:0 0 auto}
  .stage-secondary-actions{display:none}
  .action-fixed{width:86px;min-width:86px;height:40px;min-height:40px;padding:0 8px}
  .finals-section{padding:20px 18px}
  .finals-head{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:16px}
  .finals-actions{margin-left:auto;justify-content:flex-end;align-items:center;flex:0 0 auto}
  .finals-actions .stage-secondary-actions{display:none}
  .finals-actions .action-fixed{width:112px;min-width:112px}
  .finals-title,.finals-label,.finals-status{text-align:left}
}

@media (max-width:420px){
  .mobile-card-compact{grid-template-columns:52px minmax(0,1fr) 78px;padding:10px 12px}
  .mobile-client-view{width:76px;min-width:76px;font-size:9.5px}
  .project-card{grid-template-columns:58px minmax(0,1fr) 82px}
  .project-action{padding:10px 8px}
  .project-action .view-project-button{width:70px;min-width:70px;font-size:9.5px}
  .stage{grid-template-columns:94px minmax(0,1fr)}
  .stage-number::before,.stage-number::after{left:36px}
  .stage-index{margin-left:56px}
  .stage-body{padding-left:16px;padding-right:10px}
  .action-fixed{width:80px;min-width:80px}
  .finals-actions .action-fixed{width:106px;min-width:106px}
}
.editor-card,.settings-section,.table-wrap,.timeline,.finals-section{width:100%}

/* =========================================================
   V2.4 refinements
   ========================================================= */

/* Global scale + consistent alignment */
h1{font-size:clamp(30px,3.3vw,44px)}
.lead{font-size:14px}
.container{width:min(var(--max),calc(100% - (var(--page-x) * 2)));margin-inline:auto}
.editor-card,.settings-section,.table-wrap,.timeline,.finals-section,.project-list{width:100%;box-sizing:border-box}
.editor-card,.settings-section{padding:24px}

/* Sort controls end on the same right edge as the content below */
.dashboard-controls{width:100%;padding-left:0;padding-right:0}
.sort-menu{justify-self:end;margin:0;padding:0}
.sort-menu summary{padding:8px 0;margin:0;gap:6px}
.sort-menu summary .chevron{margin-left:4px;margin-right:0}

/* Creation buttons: optical vertical centering for the + */
.create-button{align-items:center}
.create-button .plus,.plus-inline{font-size:20px;width:20px;height:20px;line-height:20px;display:inline-flex;align-items:center;justify-content:center;margin:0;transform:translateY(-1px)}

/* Admin project table uses stable, equal columns across filters */
.fixed-project-table .col-project,
.fixed-project-table .col-client,
.fixed-project-table .col-stage,
.fixed-project-table .col-updated,
.fixed-project-table .col-actions{width:20%}
.fixed-project-table th,.fixed-project-table td{width:20%}

/* Settings: same card geometry as editor/table pages */
.settings-form{width:100%}
.settings-section{margin-bottom:16px}
.settings-section-header{padding-bottom:16px;margin-bottom:20px;border-bottom:1px solid var(--line)}
.settings-section-header h3{margin:0}
.settings-section-header .settings-help{margin:7px 0 0}
.settings-branding-grid{align-items:start}
.settings-media-field{max-width:360px}
.media-setting-compact{width:100%;max-width:320px;min-height:74px}
.settings-media-preview{width:100%;max-width:320px;min-height:64px}
.logo-preview.settings-media-preview{justify-content:center;overflow:hidden}
.copy-settings-list{border-top:0}
.copy-setting-row{grid-template-columns:150px minmax(0,1fr) minmax(0,2fr);gap:16px;align-items:end}
.copy-setting-row.dashboard-copy-row{grid-template-columns:150px repeat(3,minmax(0,1fr))}
.copy-setting-row.compact-copy-row{grid-template-columns:150px minmax(0,1fr) minmax(0,2fr)}
.copy-setting-row.compact-copy-row::after{content:""}
.section-save{display:flex;justify-content:flex-start;margin-top:18px;padding-top:0;border-top:0}

/* Desktop sign-in crop preview mirrors the 41/59 sign-in split on a 16:9 screen */
.desktop-login-preview-shell{width:min(760px,100%);aspect-ratio:16/9;display:grid;grid-template-columns:41fr 59fr;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;margin-top:10px}
.desktop-login-preview-shell .crop-preview{margin:0;border:0;border-radius:0;width:100%;height:100%;min-height:0;aspect-ratio:auto;padding:0;background:#d8d5cf}
.desktop-login-preview-shell .crop-preview img{width:100%;height:100%;max-height:none;object-fit:cover;border-radius:0}
.login-preview-panel{background:#fff;display:grid;align-content:center;gap:12px;padding:12% 14%}
.login-preview-line{height:9px;border-radius:999px;background:#ecebe8;width:78%}
.login-preview-line.short{width:42%;height:14px;background:#dfdeda}

/* Desktop sign-in: image remains clean; all form-side content is centered */
.login-visual{padding:0;color:inherit;background-color:#d8d5cf;background-repeat:no-repeat;background-size:cover}
.login-page.no-login-image .login-visual{background:#d8d5cf}
.login-panel{padding:48px}
.login-box{text-align:center}
.login-brand-mobile{display:flex;align-items:center;justify-content:center;margin-bottom:28px}
.login-brand-mobile .brand-logo{object-position:center center;max-width:210px;max-height:42px}
.login-box .eyebrow{text-align:center}
.login-description{margin-left:auto;margin-right:auto;max-width:380px}
.login-form{text-align:left}

/* Project editor section separators and image URL option */
.editor-head{padding-bottom:18px;margin-bottom:20px;border-bottom:1px solid var(--line)}
.mobile-section-save{display:none}
.project-image-controls{min-width:0;max-width:460px;width:100%}
.project-image-url-field{width:100%;margin:4px 0 0}
.project-image-url-field .input{width:100%}
.stage-editor .input,.stage-editor .select{font-size:13px}

/* Client dashboard progress: rail and View button use the same full width */
.project-action .progress,.project-action .view-project-button{width:100%}
.progress::before{left:0;right:0}
.progress-step:first-child{text-align:left}
.progress-step:first-child::before{left:0}
.progress-step:nth-child(2)::before{left:calc(50% - 7px)}
.progress-step:last-child{text-align:right}
.progress-step:last-child::before{left:auto;right:0}
.mobile-progress-row{display:none}

/* Client project page: title, then square image, then current-stage summary */
.project-top{display:block;margin-bottom:24px}
.project-top-copy{width:100%;margin-bottom:22px}
.project-detail-image{width:180px;height:180px;aspect-ratio:1/1;margin:0 0 20px 0;border-radius:var(--radius)}
.current-stage-card{margin:0;width:min(360px,100%)}

/* Feedback-stage geometry: square timeline column, equal action spacing */
.stage{grid-template-columns:132px minmax(0,1fr);min-height:132px}
.stage-number{height:132px;min-height:132px;padding:0 12px}
.stage-number::before,.stage-number::after{left:66px}
.stage-index{margin-left:92px}
.stage-body{min-height:132px;padding:24px 16px 24px 28px;gap:20px}
.stage-actions{gap:14px;margin-left:auto;padding:0}
.stage-secondary-actions{gap:14px}
.icon-action{width:20px;height:44px;flex:0 0 20px;border:0;background:transparent;border-radius:0;padding:0}
.icon-action:hover{background:transparent;color:var(--text)}
.icon-action svg{width:16px;height:16px}
.action-fixed{width:142px;min-width:142px;height:44px;min-height:44px}
.finals-actions{gap:14px}
.finals-actions .stage-secondary-actions{gap:14px}
.finals-actions .action-fixed{width:142px;min-width:142px}

@media (max-width:980px){
  .copy-setting-row{grid-template-columns:130px minmax(0,1fr) minmax(0,2fr)}
  .copy-setting-row.dashboard-copy-row{grid-template-columns:130px repeat(3,minmax(0,1fr))}
  .copy-setting-row.compact-copy-row{grid-template-columns:130px minmax(0,1fr) minmax(0,2fr)}
}

@media (max-width:760px){
  h1{font-size:clamp(26px,7.7vw,33px)}
  .lead{font-size:12.5px;line-height:1.55}
  .page-header{margin-bottom:23px}

  /* menus / controls stay on the same content edge as cards */
  .dashboard-controls{width:100%;grid-template-columns:minmax(0,1fr) auto;gap:8px}
  .sort-menu{margin-right:0;justify-self:end}
  .sort-menu summary{padding:7px 0}

  /* create / modal buttons */
  .create-button .plus,.plus-inline{font-size:19px;width:19px;height:19px;line-height:19px;transform:translateY(-1px)}
  .modal-actions>*{height:var(--control-h);min-height:var(--control-h)}

  /* sign in sits slightly higher */
  .login-panel{min-height:100vh;padding:34px 24px 56px;display:flex;align-items:flex-start;justify-content:center}
  .login-box{margin-top:16px}
  .login-brand-mobile{margin-bottom:26px}
  .login-title{font-size:27px}
  .login-description{font-size:12.5px}

  /* Settings: stacked controls, save stays at the end of each section */
  .settings-section{padding:21px}
  .settings-section-header{padding-bottom:14px;margin-bottom:18px}
  .settings-media-field,.media-setting-compact,.settings-media-preview{max-width:100%}
  .copy-setting-row,.copy-setting-row.dashboard-copy-row,.copy-setting-row.compact-copy-row{grid-template-columns:1fr;gap:5px}
  .copy-setting-row.compact-copy-row::after{display:none}
  .section-save{margin-top:18px}
  .section-save .primary-button{width:auto}
  .desktop-login-preview-shell{width:100%;aspect-ratio:16/9}

  /* Project editor: desktop header-save hidden, mobile save at section end */
  .editor-card{padding:21px}
  .editor-head{padding-bottom:14px;margin-bottom:18px}
  .editor-head .desktop-section-save{display:none}
  .mobile-section-save{display:flex;justify-content:flex-start;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
  .mobile-section-save .primary-button{width:100%}
  .stage-editor .input,.stage-editor .select,.stage-editor .stage-url,.stage-editor .stage-status{font-size:13px}

  /* Admin compact cards */
  .mobile-card-compact{padding:12px;grid-template-columns:58px minmax(0,1fr) 78px;gap:10px}
  .mobile-project-thumb{width:58px;height:58px;flex-basis:58px}
  .mobile-client-view{width:74px;min-width:74px;min-height:34px;padding:0 6px;margin-right:0}

  /* Client project overview cards: no divider, clean main row + separate timeline row */
  .project-card{grid-template-columns:78px minmax(0,1fr) 86px;align-items:start;overflow:hidden}
  .project-image{width:58px;height:58px;min-height:58px;margin:10px;border-radius:8px}
  .project-main{padding:10px 8px 10px 4px;align-self:start;justify-content:flex-start;min-width:0}
  .project-title{margin:0 0 5px;font-size:12.5px;line-height:1.25}
  .project-action{border-left:0;padding:10px 10px 10px 2px;display:flex;align-items:center;justify-content:flex-end;align-self:stretch}
  .project-action .progress{display:none}
  .project-action .view-project-button{width:78px;min-width:78px;height:36px;min-height:36px;padding:0 7px;font-size:9.5px}
  .mobile-progress-row{display:block;grid-column:1/-1;border-top:1px solid var(--line);padding:10px 16px 12px;background:#fff}
  .mobile-progress-row .progress{width:100%;max-width:none}
  .mobile-project-extra{grid-column:1/-1}

  /* Client project page: square image, square timeline column, button-only actions */
  .project-top-copy{margin-bottom:18px}
  .project-detail-image{width:118px;height:118px;aspect-ratio:1/1;margin:0 0 18px 0}
  .current-stage-card{width:100%;max-width:360px}
  .stage{grid-template-columns:96px minmax(0,1fr);min-height:96px}
  .stage-number{width:96px;height:96px;min-height:96px;padding:0}
  .stage-number::before,.stage-number::after{left:48px}
  .stage-index{margin-left:69px;font-size:10px}
  .stage-body{min-height:96px;padding:14px 18px 14px 16px;gap:8px;align-items:center}
  .stage-title{font-size:13px;margin-bottom:4px}
  .stage-status{font-size:10px}
  .stage-actions{margin-left:auto;gap:0}
  .stage-secondary-actions{display:none}
  .action-fixed{width:86px;min-width:86px;height:38px;min-height:38px;padding:0 7px;font-size:10px}
  .finals-section{padding:18px}
  .finals-head{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:14px}
  .finals-actions{margin-left:auto;justify-content:flex-end;align-items:center;flex:0 0 auto}
  .finals-actions .stage-secondary-actions{display:none}
  .finals-actions .action-fixed{width:86px;min-width:86px;height:38px;min-height:38px;padding:0 7px;font-size:9.5px}
  .finals-title,.finals-label,.finals-status{text-align:left}
}

@media (max-width:420px){
  h1{font-size:26px}
  .lead{font-size:12px}
  .mobile-card-compact{grid-template-columns:54px minmax(0,1fr) 74px;padding:10px 11px;gap:9px}
  .mobile-project-thumb{width:54px;height:54px;flex-basis:54px}
  .mobile-client-view{width:70px;min-width:70px;font-size:9px}
  .project-card{grid-template-columns:74px minmax(0,1fr) 82px}
  .project-image{width:54px;height:54px;min-height:54px;margin:10px}
  .project-action{padding-right:8px}
  .project-action .view-project-button{width:74px;min-width:74px;font-size:9px}
  .mobile-progress-row{padding-left:14px;padding-right:14px}
  .stage{grid-template-columns:92px minmax(0,1fr);min-height:92px}
  .stage-number{width:92px;height:92px;min-height:92px}
  .stage-number::before,.stage-number::after{left:46px}
  .stage-index{margin-left:66px}
  .stage-body{min-height:92px;padding-left:14px;padding-right:14px}
  .action-fixed,.finals-actions .action-fixed{width:82px;min-width:82px}
}

/* =========================================================
   V2.5 refinements
   ========================================================= */

/* Precise, reusable dropdown arrow */
.dropdown-arrow{width:10px;height:6px;display:block;flex:0 0 10px;overflow:visible;transition:transform .15s ease}
details[open]>summary .dropdown-arrow{transform:rotate(180deg)}
.sort-menu summary{padding:8px 0;margin:0;gap:7px;justify-content:flex-end}
.sort-menu summary .dropdown-arrow{margin:0}
.dashboard-controls .sort-menu{margin-right:0;justify-self:end}

/* Main creation actions are text-only and optically centred */
.create-button{min-width:112px;justify-content:center;text-align:center;gap:0}

/* Client-view action: quiet eye only */
.client-view-eye{width:36px;height:36px;min-width:36px;border:0;background:transparent;color:#9aa09d;border-radius:8px;padding:0;display:inline-grid;place-items:center;transition:.15s ease}
.client-view-eye svg{width:18px;height:18px;display:block}
.client-view-eye:hover{color:#555c59;background:#f1f2ef}
.client-view-eye:focus-visible{outline:2px solid #8c9490;outline-offset:2px}

/* Desktop typography + navigation remain deliberately restrained */
@media (min-width:761px){
  h1{font-size:clamp(28px,3vw,40px)}
  .lead{font-size:13px;line-height:1.55}
  .nav-links{gap:36px}
}

/* Settings: one-column systems, no decorative section rules */
.settings-section-header{border-bottom:0;padding-bottom:0;margin-bottom:20px}
.settings-section-header .settings-help{margin-top:7px}
.settings-single-column{display:grid;grid-template-columns:1fr;gap:0;width:min(560px,100%)}
.settings-branding-grid .field,.sign-in-settings-grid .field{width:100%;max-width:none}
.settings-media-field{width:100%;max-width:none}
.media-setting-compact,.settings-media-preview{width:100%;max-width:none}
.settings-branding-grid .media-setting-area{min-height:74px}
.sign-in-settings-grid{width:min(680px,100%)}
.sign-in-media-width,.single-crop{width:100%;max-width:100%}
.crop-controls.single-crop{display:block;margin-top:14px}
.crop-controls.single-crop.is-hidden{display:none}
.auth-toggle-stack{display:grid;grid-template-columns:1fr;gap:2px;margin-top:2px}
.section-save{border-top:0;padding-top:0;margin-top:30px}

/* Page-copy grid: greeting sits below label, description retains full description width */
.copy-setting-row{grid-template-columns:150px minmax(0,1fr) minmax(0,2fr);align-items:start}
.copy-setting-row.dashboard-copy-row{grid-template-columns:150px minmax(0,1fr) minmax(0,2fr)}
.dashboard-copy-fields{display:grid;gap:0;min-width:0}
.dashboard-copy-fields .field{width:100%}
.copy-setting-row.compact-copy-row{grid-template-columns:150px minmax(0,1fr) minmax(0,2fr)}

/* Project image controls get enough room to read as one deliberate block */
#newProjectForm .project-image-setting{align-items:stretch;gap:20px}
#newProjectForm .project-image-preview{width:132px;height:132px;flex-basis:132px}
#newProjectForm .project-image-controls{display:grid;grid-template-columns:145px minmax(220px,1fr);gap:10px 12px;align-content:start;max-width:560px}
#newProjectForm .project-image-controls .upload-zone{width:145px}
#newProjectForm .project-image-url-field{margin:0;width:100%}
#newProjectForm .project-image-controls>.help{grid-column:1/-1}

/* Client dashboard: lower the progress rail slightly while preserving equal width with the CTA */
.project-action>.progress{margin-top:8px}

/* Client project stages: number above the circle; stage copy centred on the circle */
.stage-number{position:relative;justify-content:center;align-items:center}
.stage-index{position:absolute;left:0;right:0;top:20px;margin:0;text-align:center;font-size:10px;line-height:1;color:var(--muted)}
.stage-number::before{top:50%}
.stage-body{align-items:center}
.stage-secondary-actions{gap:7px}
.stage-actions{gap:12px}
.action-fixed{width:154px;min-width:154px;height:44px;min-height:44px}
.finals-actions{gap:12px}
.finals-actions .stage-secondary-actions{gap:7px}
.finals-actions .action-fixed{width:154px;min-width:154px}

@media (max-width:760px){
  /* Exact right-edge alignment of Sort by with the cards below */
  .dashboard-controls{padding-right:0}
  .sort-menu{margin-right:0;justify-self:end}
  .sort-menu summary{padding:7px 0}

  /* Eye-only preview stays compact on mobile */
  .client-view-eye.mobile-client-view{width:34px;min-width:34px;height:34px;min-height:34px;padding:0;margin:0}
  .client-view-eye.mobile-client-view svg{width:17px;height:17px}
  .mobile-card-compact{grid-template-columns:58px minmax(0,1fr) 34px}
  .mobile-client-card-compact{grid-template-columns:minmax(0,1fr) 34px}

  /* Sign-in content is vertically centred in the small viewport the browser actually exposes */
  .login-panel{min-height:100svh;padding:26px 24px 38px;display:flex;align-items:center;justify-content:center}
  .login-box{margin-top:0;transform:translateY(-10px)}

  /* Settings stay one-column; actions remain at the end without rules */
  .settings-section-header{border-bottom:0;padding-bottom:0;margin-bottom:18px}
  .settings-single-column,.sign-in-settings-grid{width:100%}
  .section-save{border-top:0;padding-top:0;margin-top:26px}
  .copy-setting-row,.copy-setting-row.dashboard-copy-row,.copy-setting-row.compact-copy-row{grid-template-columns:1fr;gap:5px}
  .dashboard-copy-fields{display:grid;gap:0}

  /* Project editor: one separator beneath the heading, none before Save */
  .mobile-section-save{border-top:0;padding-top:0;margin-top:22px}
  .editor-head + .stage-editor{border-top:0}

  /* New-project image controls stack cleanly under the larger preview */
  #newProjectForm .project-image-setting{display:grid;grid-template-columns:1fr;gap:14px}
  #newProjectForm .project-image-preview{width:120px;height:120px;flex-basis:120px}
  #newProjectForm .project-image-controls{grid-template-columns:1fr;max-width:none;width:100%;gap:9px}
  #newProjectForm .project-image-controls .upload-zone{width:100%}
  #newProjectForm .project-image-controls>.help{grid-column:auto}

  /* Client overview: centre copy and button vertically; timeline is an attached row without a rule */
  .project-card{align-items:stretch}
  .project-main{align-self:stretch;justify-content:center;padding-top:10px;padding-bottom:10px}
  .project-action{align-self:stretch;justify-content:center;padding:10px 10px 10px 0}
  .project-action .view-project-button{margin-left:0;margin-right:0}
  .mobile-progress-row{border-top:0;padding-top:8px}
  .mobile-progress-row .progress{margin-top:3px}

  /* Mobile stage geometry mirrors desktop: index above circle, copy centred beside it */
  .stage-index{top:13px;left:0;right:0;margin:0;text-align:center;font-size:9px}
  .stage-number::before{top:54%}
  .stage-body{align-items:center}
  .stage-secondary-actions{display:none}
  .action-fixed,.finals-actions .action-fixed{width:112px;min-width:112px;height:40px;min-height:40px;font-size:9.5px}
}

@media (max-width:420px){
  .mobile-card-compact{grid-template-columns:54px minmax(0,1fr) 34px}
  .client-view-eye.mobile-client-view{width:32px;min-width:32px;height:32px;min-height:32px}
  .action-fixed,.finals-actions .action-fixed{width:108px;min-width:108px}
}

/* =========================================================
   V2.6 refinements
   ========================================================= */

/* Admin table action columns: eye icons sit directly under Actions */
.fixed-project-table th:last-child,
.fixed-project-table td:last-child,
.desktop-client-table th:last-child,
.desktop-client-table td:last-child{ text-align:center; }
.desktop-client-table table{table-layout:fixed;width:100%}
.desktop-client-table th,.desktop-client-table td{width:20%}

/* Project editor: quieter headings, equal stage rows, no divider under section headers */
.editor-head{border-bottom:0!important;padding-bottom:0!important;margin-bottom:22px}
.stage-editor{min-height:104px;align-items:center;padding:16px 0}
.stage-editor-name{font-size:12px;font-weight:500;height:auto;min-height:var(--control-h);display:flex;align-items:center}
.stage-editor>div:not(.stage-editor-name){min-height:66px;justify-content:center}
.stage-editor .mini-label{color:#8d9390;font-weight:500}
.stage-editor .stage-due{font-size:13px;color:var(--muted)}
#projectDetails .form-grid> .field.span-2{width:100%}

/* Project images: preview first, then two equal-height controls directly underneath */
#projectDetails .project-image-setting,
#newProjectForm .project-image-setting{display:grid;grid-template-columns:1fr;gap:12px;align-items:start}
#projectDetails .project-image-preview,
#newProjectForm .project-image-preview{width:132px;height:132px;flex-basis:132px}
#projectDetails .project-image-controls-below,
#newProjectForm .project-image-controls-below{display:grid;grid-template-columns:180px minmax(240px,340px);gap:10px 12px;align-items:center;justify-items:stretch;max-width:540px;width:100%}
#projectDetails .project-image-controls-below .upload-zone,
#newProjectForm .project-image-controls-below .upload-zone{width:100%;height:var(--control-h);min-height:var(--control-h)}
#projectDetails .project-image-controls-below .project-image-url-field,
#newProjectForm .project-image-controls-below .project-image-url-field{height:var(--control-h);min-height:var(--control-h);margin:0;width:100%}
#projectDetails .project-image-controls-below .text-action{grid-column:1/2;justify-self:start}
#projectDetails .project-image-controls-below .help,
#newProjectForm .project-image-controls-below .help{grid-column:1/-1}

/* Settings: save rows never gain divider lines; equal button dimensions */
.copy-setting-row:last-child{border-bottom:0}
.section-save{border-top:0!important;padding-top:0!important;margin-top:30px!important}
.section-save .primary-button{width:142px;min-width:142px;height:var(--control-h);min-height:var(--control-h)}

/* Client project stages: number sits above the stage name; title/status block remains centred with circle + action */
.stage-index{display:none!important}
.stage-copy{position:relative;min-width:0;padding-top:13px}
.stage-index-label{position:absolute;top:-6px;left:0;font-size:9px;line-height:1;color:var(--muted);font-weight:500;letter-spacing:.03em}
.stage-title{margin-bottom:5px}
.stage-number{align-items:center;justify-content:center}
.stage-number::before{top:50%}
.stage-actions,.finals-actions{gap:10px}
.stage-secondary-actions,.finals-actions .stage-secondary-actions{gap:3px}
.action-fixed,.finals-actions .action-fixed{width:154px;min-width:154px;height:44px;min-height:44px}

@media (max-width:760px){
  /* Keep mobile save buttons at section ends, without rules */
  .mobile-section-save{border-top:0!important;padding-top:0!important;margin-top:22px!important}

  /* Project image controls stack below preview and preserve identical control height */
  #projectDetails .project-image-preview,
  #newProjectForm .project-image-preview{width:120px;height:120px;flex-basis:120px}
  #projectDetails .project-image-controls-below,
  #newProjectForm .project-image-controls-below{grid-template-columns:1fr;max-width:none;width:100%;gap:9px}
  #projectDetails .project-image-controls-below .text-action,
  #projectDetails .project-image-controls-below .help,
  #newProjectForm .project-image-controls-below .help{grid-column:auto}

  /* Client dashboard: View project's right edge aligns with the Previews circle */
  .project-action{padding-right:16px}
  .mobile-progress-row{padding-right:16px;padding-left:16px}

  /* Mobile stage title geometry */
  .stage-copy{padding-top:11px}
  .stage-index-label{top:-5px;font-size:8.5px}
  .action-fixed,.finals-actions .action-fixed{width:112px;min-width:112px;height:40px;min-height:40px}
}

@media (max-width:420px){
  .project-action{padding-right:14px}
  .mobile-progress-row{padding-right:14px;padding-left:14px}
  .action-fixed,.finals-actions .action-fixed{width:108px;min-width:108px}
}

/* =========================================================
   V2.7 refinements
   ========================================================= */

/* Admin projects: Updated gets a little more visual separation from Current stage. */
.fixed-project-table .col-project{width:29%}
.fixed-project-table .col-client{width:19%}
.fixed-project-table .col-stage{width:26%}
.fixed-project-table .col-updated{width:15%}
.fixed-project-table .col-actions{width:11%}
.fixed-project-table th:nth-child(4),
.fixed-project-table td:nth-child(4){padding-left:30px}

/* Project images: the square itself is the upload control. */
.project-image-setting-clickable{display:grid!important;grid-template-columns:132px minmax(0,1fr)!important;column-gap:20px!important;row-gap:7px!important;align-items:start!important;width:100%}
.project-image-upload-target{position:relative;cursor:pointer;overflow:hidden;grid-column:1;grid-row:1;background-position:center;background-size:cover;background-repeat:no-repeat}
.project-image-upload-target::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,0);transition:background .15s ease;pointer-events:none}
.project-image-upload-target:hover::after{background:rgba(255,255,255,.12)}
.project-image-plus{position:absolute;inset:0;display:grid;place-items:center;font-size:32px;font-weight:300;line-height:1;color:rgba(36,40,39,.34);z-index:2;transition:color .15s ease,background .15s ease}
.project-image-upload-target:not(.placeholder) .project-image-plus{color:rgba(255,255,255,.72);background:rgba(17,20,19,.10);opacity:.78}
.project-image-upload-target:hover .project-image-plus{color:rgba(36,40,39,.58)}
.project-image-upload-target:not(.placeholder):hover .project-image-plus{color:#fff;background:rgba(17,20,19,.18)}
.visually-hidden-file{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.remove-image-link{grid-column:1;grid-row:2;justify-self:start;min-height:22px;padding:0;font-size:10.5px}
.remove-image-link.is-hidden{visibility:hidden;pointer-events:none}
.project-image-url-field{grid-row:3;margin:0!important;height:var(--control-h)!important;min-height:var(--control-h)!important}
#newProjectForm .new-project-image-url{grid-column:1/-1;width:100%;max-width:none}
#projectDetails .edit-project-image-url{grid-column:1/-1;width:50%;min-width:280px;max-width:520px}

/* New-client dialogs are deliberately single column. */
.single-column-form{grid-template-columns:1fr!important}
.single-column-form .field{grid-column:1!important}

/* Project editor: controls sit optically centred with each stage name. */
.stage-editor{align-items:center}
.stage-editor>div:not(.stage-editor-name){min-height:0;align-self:center;justify-content:center;transform:translateY(-2px)}
.stage-editor .mini-label{margin-bottom:5px}

/* Client progress: preserve the missing boundary on untouched stages. */
.stage:not(.done):not(.feedback) .stage-body{border-left:1px solid var(--line)}

/* Pull all stage actions inward and keep Finals on the same action grid. */
@media (min-width:761px){
  .stage-body{padding-right:52px}
  .finals-section{padding:24px 52px 24px 24px}
  .stage-actions,.finals-actions{gap:10px}
  .stage-secondary-actions,.finals-actions .stage-secondary-actions{gap:3px}
  .action-fixed,.finals-actions .action-fixed{width:154px;min-width:154px;height:44px;min-height:44px}
}
.summary-label,.finals-label{font-size:10px;line-height:1.2}
.summary-stage,.finals-title{font-size:16px;line-height:1.25;font-weight:600}
.summary-stage{margin:7px 0}
.finals-title{margin:0}
.finals-status{font-size:11px;line-height:1.35}
.current-stage-card .status-pill{font-size:11px;line-height:1.35}

@media (max-width:760px){
  .project-image-setting-clickable{grid-template-columns:120px minmax(0,1fr)!important;column-gap:14px!important}
  #projectDetails .edit-project-image-url,
  #newProjectForm .new-project-image-url{grid-column:1/-1;width:100%;min-width:0;max-width:none}
  .remove-image-link{grid-column:1}
  .stage-editor>div:not(.stage-editor-name){transform:none}
}

/* =========================================================
   V2.8 refinements
   ========================================================= */

/* Admin client editor: both page actions use the exact same footprint. */
.client-editor-actions #previewThisClient,
.client-editor-actions #sendAccessLink{
  width:154px;
  min-width:154px;
  height:var(--control-h);
  min-height:var(--control-h);
}

/* Clients overview gets the same quiet Sort-by geometry as the other lists. */
.clients-controls{margin-bottom:14px}
.clients-overview-table{table-layout:fixed;width:100%}
.clients-overview-table .client-col-name{width:22%}
.clients-overview-table .client-col-company{width:20%}
.clients-overview-table .client-col-email{width:32%}
.clients-overview-table .client-col-projects{width:12%}
.clients-overview-table .client-col-actions{width:14%}
.clients-overview-table th:nth-child(4),
.clients-overview-table td:nth-child(4){text-align:center}
.clients-overview-table th:nth-child(5),
.clients-overview-table td:nth-child(5){text-align:center}

/* Admin projects: Updated is visually centred between Current stage and Actions. */
.fixed-project-table th:nth-child(4),
.fixed-project-table td:nth-child(4){padding-left:0;text-align:center}

/* New project image link: labelled, full-width and clearly explained. */
#newProjectForm .project-image-url-block{
  grid-column:1/-1;
  grid-row:3;
  width:100%;
  margin:0;
}
#newProjectForm .project-image-url-block .project-image-url-field{
  grid-column:auto;
  grid-row:auto;
  width:100%;
  max-width:none;
  margin:0!important;
}
#newProjectForm .project-image-url-block .help{margin-top:0}

/* Client project progress: stage text sits a touch lower and actions move slightly right. */
@media (min-width:761px){
  .stage-copy{padding-top:18px}
  .stage-index-label{top:-4px}
  .stage-body{padding-right:36px}
  .finals-section{padding-right:36px}
}

/* Mobile settings: identical breathing room before every save action. */
@media (max-width:760px){
  .settings-section .section-save{margin-top:28px!important}
}

/* =========================================================
   V2.9 refinements
   ========================================================= */

/* Project editor image URL mirrors the New Project treatment: label, field, helper. */
#projectDetails .edit-project-image-url-block{
  grid-column:1/-1;
  grid-row:3;
  width:50%;
  min-width:280px;
  max-width:520px;
  margin:0;
}
#projectDetails .edit-project-image-url-block .edit-project-image-url{
  grid-column:auto;
  grid-row:auto;
  width:100%;
  min-width:0;
  max-width:none;
  margin:0!important;
}
#projectDetails .edit-project-image-url-block .help{margin-top:0}

/* In the project editor, stage names align with the vertical centre of the actual controls,
   rather than the combined mini-label + control stack. */
@media (min-width:761px){
  .stage-editor-name{transform:translateY(9px)}

  /* Client project progress: centre Clays / Drafts / Previews precisely on their timeline circles. */
  .vertical-timeline .stage-copy{transform:translateY(2px)}
}

@media (max-width:760px){
  #projectDetails .edit-project-image-url-block{
    grid-column:1/-1;
    width:100%;
    min-width:0;
    max-width:none;
  }
  .stage-editor-name{transform:none}
}


/* =========================================================
   V3.0 — default ongoing filter + global project search
   ========================================================= */

/* Right-hand dashboard utilities: Search sits immediately before Sort by. */
.dashboard-tools{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  justify-self:end;
  min-width:0;
}
.dashboard-tools .sort-menu{
  justify-self:auto;
}
.dashboard-tools .sort-menu summary{
  min-height:36px;
  display:flex;
  align-items:center;
}

/* Search is deliberately quiet until opened. */
.project-search{
  position:relative;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  min-width:36px;
}
.project-search-input-wrap{
  position:relative;
  width:0;
  opacity:0;
  overflow:hidden;
  pointer-events:none;
  margin-right:0;
  transition:width .18s ease,opacity .14s ease,margin-right .18s ease;
}
.project-search.open .project-search-input-wrap{
  width:240px;
  opacity:1;
  pointer-events:auto;
  margin-right:4px;
}
.project-search-input{
  width:100%;
  height:36px;
  min-height:36px;
  border:1px solid transparent;
  border-radius:8px;
  outline:0;
  background:#faf8f4;
  color:var(--text);
  padding:0 32px 0 12px;
  font-size:11px;
  line-height:36px;
  appearance:none;
  -webkit-appearance:none;
}
.project-search-input::-webkit-search-cancel-button{
  -webkit-appearance:none;
  appearance:none;
}
.project-search-input::placeholder{
  color:#9a9d9a;
}
.project-search-input:focus{
  border-color:#e6e2da;
  background:#fbfaf7;
}
.project-search-clear{
  position:absolute;
  right:7px;
  top:50%;
  transform:translateY(-50%);
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  background:transparent;
  color:#a0a39f;
  font-size:17px;
  font-weight:300;
  line-height:1;
}
.project-search-clear:hover{color:var(--text)}
.project-search-clear[hidden]{display:none}
.project-search-toggle{
  width:36px;
  min-width:36px;
  height:36px;
  min-height:36px;
  padding:0;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#8f9592;
  display:inline-grid;
  place-items:center;
  transition:color .15s ease,background .15s ease;
}
.project-search-toggle svg{
  width:18px;
  height:18px;
  display:block;
}
.project-search-toggle:hover{
  color:#555c59;
  background:#f1f2ef;
}
.project-search-toggle:focus-visible{
  outline:2px solid #8c9490;
  outline-offset:2px;
}

/* Updated: keep the date visually centred, while the label aligns with
   the left edge of the same centred block. */
.updated-column-block{
  display:inline-block;
  width:86px;
  max-width:100%;
}
.updated-heading-label{
  display:block;
  text-align:left;
}
.updated-date-value{
  display:block;
  text-align:center;
}
.fixed-project-table th:nth-child(4),
.fixed-project-table td:nth-child(4){
  text-align:center;
}
.fixed-project-table th:nth-child(4) .updated-column-block{
  text-align:left;
}
.client-updated-meta{
  margin-top:11px;
}
.client-updated-block{
  width:86px;
  font-size:10px;
  line-height:1.45;
  color:var(--muted);
}
.client-updated-block .updated-heading-label{
  margin-bottom:2px;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:9px;
}
.client-updated-block .updated-date-value{
  font-size:10.5px;
  text-transform:none;
  letter-spacing:0;
}

@media (max-width:760px){
  .dashboard-tools{
    position:relative;
    gap:3px;
  }
  .dashboard-tools .sort-menu summary{
    min-height:34px;
  }
  .project-search{
    position:static;
    height:34px;
    min-width:34px;
  }
  .project-search-toggle{
    width:34px;
    min-width:34px;
    height:34px;
    min-height:34px;
    border-radius:7px;
  }
  .project-search-toggle svg{
    width:17px;
    height:17px;
  }

  /* On mobile the collapsed state is only the bare magnifying glass.
     When opened, the input uses the full content width on the row below. */
  .project-search-input-wrap,
  .project-search.open .project-search-input-wrap{
    position:absolute;
    right:0;
    top:calc(100% + 8px);
    width:calc(100vw - (var(--page-x) * 2));
    max-width:none;
    margin-right:0;
    opacity:0;
    pointer-events:none;
    overflow:visible;
    z-index:12;
  }
  .project-search.open .project-search-input-wrap{
    opacity:1;
    pointer-events:auto;
  }
  .project-search-input{
    height:40px;
    min-height:40px;
    line-height:40px;
    font-size:12px;
    background:#faf8f4;
  }
  .dashboard-controls.search-open{
    margin-bottom:66px;
  }

  /* Preserve the compact mobile client-card treatment. */
  .mobile-project-extra .client-updated-block{
    width:86px;
  }
}

/* =========================================================
   V3.0.2 — Updated-column alignment + client-view revert
   ========================================================= */

/* Admin projects: place the UPDATED label exactly at the midpoint of the
   space between Current stage and Actions. The date starts on the same
   left edge as the label rather than being centred independently. */
.fixed-project-table th:nth-child(4),
.fixed-project-table td:nth-child(4){
  text-align:center;
}
.fixed-project-table th:nth-child(4) .updated-column-block,
.fixed-project-table td:nth-child(4) .updated-column-block{
  display:block;
  width:52px;
  max-width:none;
  margin-left:auto;
  margin-right:auto;
  text-align:left;
  overflow:visible;
}
.fixed-project-table th:nth-child(4) .updated-heading-label,
.fixed-project-table td:nth-child(4) .updated-date-value{
  display:block;
  text-align:left;
  white-space:nowrap;
}

/* Client dashboard: restore the original V2.9 Last updated treatment. */
.project-meta.desktop-project-meta{
  text-align:left;
}
.mobile-project-extra{
  text-align:left;
}

/* =========================================================
   V3.0.3 — mobile empty-state type + frameless search icon
   ========================================================= */

/* The standalone search icon should disappear into the portal canvas:
   exact portal background, no border/shadow, including hover/active states. */
.project-search-toggle,
.project-search-toggle:hover,
.project-search-toggle:active{
  background:var(--bg);
  border:0;
  box-shadow:none;
}

@media (max-width:760px){
  /* Empty-filter/search messaging uses the same typography as the page
     description (.lead) on mobile, while retaining its existing alignment. */
  .empty{
    font-size:12.5px;
    line-height:1.55;
    font-weight:400;
  }

  .project-search-toggle,
  .project-search-toggle:hover,
  .project-search-toggle:active{
    background:var(--bg);
    border:0;
    box-shadow:none;
  }
}


/* V3.0.4 — branded boot screen */
@media (max-width:760px){
  .boot-screen{gap:28px}
  .boot-logo{width:125px;max-width:46vw}
}


/* =========================================================
   V3.0.6 — restore established Team access / invitation UI
   (merged without changing the V3.0.4 dashboard/search/loading refinements)
   ========================================================= */
.portal-access-list,.team-member-list{display:grid;gap:0;border-top:1px solid var(--line);margin-top:0}
.portal-access-row,.team-member-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.portal-access-row>div,.team-member-copy{min-width:0;display:grid;gap:3px}
.portal-access-row span,.team-member-copy span{font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.portal-role-pill{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:26px;min-height:26px;padding:0 9px;border-radius:999px;background:var(--surface-soft);border:1px solid var(--line);font-size:10px;font-weight:600;color:var(--muted);white-space:nowrap;line-height:1}
.account-team-section{margin-top:28px;padding-top:25px;border-top:1px solid var(--line)}
.team-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:25px}
.team-section-head h3{margin:0 0 5px}
.team-member-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex:0 0 auto;white-space:nowrap}
.team-empty-state{padding:18px 0 0}
.compact-notice{padding:12px 14px;margin-top:8px}
.team-access-help-mobile{display:none}
.team-remove-desktop{display:none}
.team-remove-mobile{display:inline}

/* Account identity + image controls from the established team-access layout. */
.account-preview-copy{min-width:0}
.account-display-name{display:block;line-height:1.35}
.account-email{margin-top:2px;font-size:11px!important;line-height:1.4}
.account-image-actions{justify-content:flex-end!important}

/* Admin client access actions. */
.client-editor-actions{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:nowrap}
.client-editor-access-actions{display:flex;align-items:center;gap:10px;min-width:0}
.client-editor-preview-action{margin-left:auto;display:flex;align-items:center;justify-content:flex-end;flex:0 0 auto}
.client-editor-actions #sendInvitation,.client-editor-actions #sendMagicLink{width:154px;min-width:154px}
.client-editor-eye{width:36px!important;min-width:36px!important;height:36px!important;min-height:36px!important}

/* Direct Invite team member action on client dashboard. */
.client-dashboard-header{width:100%}
.client-dashboard-title-row{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.client-dashboard-title-row h1{min-width:0}
.client-dashboard-invite{flex:0 0 auto;min-width:146px}

/* Remove-access confirmation styling from the prior design. */
.team-remove-head h2{font-size:22px!important;line-height:1.15!important}
.team-remove-copy{font-size:12px!important;line-height:1.55!important;margin:0}
.team-remove-actions{flex-direction:row!important;justify-content:flex-end!important;align-items:center!important;gap:10px!important}
.team-remove-actions>*{width:132px!important;min-width:132px!important;max-width:132px!important;height:44px!important;min-height:44px!important;padding-left:14px!important;padding-right:14px!important;font-size:12px!important;box-sizing:border-box!important;white-space:nowrap!important}
.team-remove-actions .danger-button{background:#f1dfdc!important;border-color:#ddb9b3!important;color:#8e514b!important}
.team-remove-actions .danger-button:hover{background:#ead2ce!important;border-color:#d4aaa3!important}

@media (min-width:769px){
  /* Three equal Account-image controls across the row. */
  .account-image-control-row{display:flex!important;align-items:flex-start!important;gap:10px!important;width:100%!important;justify-content:flex-start}
  .account-image-upload-block{flex:1 1 0!important;width:auto!important;min-width:0!important;max-width:none!important}
  .account-image-upload-block .upload-zone{display:flex;width:100%;box-sizing:border-box}
  .account-image-upload-block .help{margin-top:7px}
  .account-image-control-row .account-image-actions{flex:2 1 0!important;display:flex!important;gap:10px!important;width:auto!important;min-width:0!important;max-width:none!important;margin-top:0!important;align-items:flex-start!important}
  .account-image-upload-block .upload-zone,.account-image-control-row .account-image-actions>*{flex:1 1 0!important;width:100%!important;min-width:0!important;max-width:none!important;height:44px!important;min-height:44px!important;box-sizing:border-box!important}

  /* Invite button matches one of the three image actions. */
  .account-team-section .team-invite-button{flex:0 0 calc((100% - 20px) / 3)!important;width:calc((100% - 20px) / 3)!important;min-width:calc((100% - 20px) / 3)!important;max-width:calc((100% - 20px) / 3)!important;height:44px!important;min-height:44px!important;box-sizing:border-box!important;white-space:nowrap!important}
  .account-team-section .team-member-actions{flex:0 0 calc((100% - 20px) / 3)!important;width:calc((100% - 20px) / 3)!important;min-width:calc((100% - 20px) / 3)!important;max-width:calc((100% - 20px) / 3)!important;justify-content:flex-end!important;gap:12px!important}
  .account-team-section .team-member-remove-action{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:22px!important;min-width:22px!important;height:26px!important;padding:0!important;line-height:1!important;font-size:16px!important;text-decoration:none!important}
  .team-remove-desktop{display:inline}
  .team-remove-mobile{display:none}
}

@media (max-width:768px){
  .client-editor-actions{display:grid;grid-template-columns:minmax(0,1fr) 36px;gap:10px;width:100%}
  .client-editor-access-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
  .client-editor-actions #sendInvitation,.client-editor-actions #sendMagicLink{width:100%!important;min-width:0!important;padding-left:8px;padding-right:8px;font-size:10px}
  .client-editor-preview-action{margin-left:0;justify-self:end}

  /* Invite sits below Welcome and above the subtitle, as in the prior mobile design. */
  .client-dashboard-title-row{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:14px}
  .client-dashboard-invite{width:auto!important;min-width:168px!important;align-self:flex-start;white-space:nowrap}

  .account-image-control-row{display:block;width:100%}
  .account-image-upload-block{width:100%}
  .account-image-upload-block .upload-zone{display:flex;width:100%;box-sizing:border-box}
  .account-image-upload-block .help{margin-top:7px}
  .account-image-control-row .account-image-actions{margin-top:22px!important;display:flex!important;flex-direction:row!important;justify-content:flex-end!important;align-items:center!important}
  .account-image-control-row .account-image-actions>*{width:168px!important;min-width:168px!important;max-width:168px!important;height:44px!important;min-height:44px!important;box-sizing:border-box!important;white-space:nowrap!important}

  .team-section-head{flex-direction:column}
  .team-access-help-desktop{display:none}
  .team-access-help-mobile{display:inline}
  .account-team-section .team-invite-button{flex:0 0 auto!important;width:168px!important;min-width:168px!important;max-width:168px!important;height:44px!important;min-height:44px!important;align-self:flex-start!important;white-space:nowrap!important}
  .account-team-section .team-member-row{align-items:center!important;padding:16px 0!important}
  .account-team-section .team-member-copy,.account-team-section .team-member-actions{align-self:center!important}
  .account-team-section .team-member-actions{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-end!important;gap:12px!important}
  .account-team-section .portal-role-pill{box-sizing:border-box!important;height:26px!important;min-height:26px!important;padding:0 9px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;line-height:1!important}
  .account-team-section .team-member-remove-action{box-sizing:border-box!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;height:26px!important;min-height:26px!important;padding:0!important;line-height:1!important}
  .account-team-section .team-remove-mobile{display:inline!important;height:auto!important;line-height:1!important}
}

@media (max-width:390px){
  .account-image-control-row .account-image-actions{flex-direction:column!important;align-items:flex-end!important}
}

@media (max-width:330px){
  .team-remove-actions{flex-direction:column-reverse!important;align-items:flex-end!important}
}


/* V3.0.7 — Clients list reuses the existing dashboard search control styles. */


/* =========================================================
   V3.0.8 — Account / Team access typography normalization
   =========================================================
   One consistent hierarchy on desktop and mobile:
   - Account name + Team access heading: 16px / 600
   - Team member name + standard buttons: 12px / 600
   - Account + team member email: 11px / regular
   - Supporting help copy: 11px
*/
.account-display-name,
.account-team-section .team-section-head h3{
  font-size:16px!important;
  font-weight:600!important;
  line-height:1.35!important;
}

.account-team-section .team-member-copy strong{
  font-size:12px!important;
  font-weight:600!important;
  line-height:1.4!important;
}

.account-email,
.account-team-section .team-member-copy span{
  font-size:11px!important;
  font-weight:400!important;
  line-height:1.4!important;
  color:var(--muted)!important;
}

.account-team-section .team-access-help{
  font-size:11px!important;
  line-height:1.55!important;
}


/* =========================================================
   V3.0.9 — Team role pill typography
   =========================================================
   Keep Owner / Member at the same 11px supporting-text size
   on both desktop and mobile.
*/
.account-team-section .portal-role-pill{
  font-size:11px!important;
}


/* =========================================================
   V3.0.10 — Client deletion + admin portal-access cleanup
   ========================================================= */

/* Small, quiet destructive affordance used only for admin cleanup actions. */
.subtle-delete-button{
  width:30px;
  min-width:30px;
  height:30px;
  min-height:30px;
  padding:0;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#a0a5a2;
  display:inline-grid;
  place-items:center;
  font-size:18px;
  font-weight:400;
  line-height:1;
  transition:.15s ease;
}
.subtle-delete-button:hover{color:var(--danger);background:rgba(168,75,66,.055)}
.subtle-delete-button:focus-visible{outline:2px solid #b98b85;outline-offset:2px}

/* Client list: keep Preview and Delete together, with delete at the row edge. */
.client-row-actions{display:flex;align-items:center;justify-content:center;gap:12px;width:100%}
.clients-overview-table td:nth-child(5){padding-right:14px}
.client-delete-row{flex:0 0 auto}

/* Mobile client cards retain the same two quiet row actions. */
.mobile-client-card-actions{display:flex;align-items:center;justify-content:flex-end;gap:5px;flex:0 0 auto}
.mobile-client-delete{width:30px;min-width:30px;height:30px;min-height:30px}

/* Client editor header: preview + client delete occupy the right-hand action area. */
.client-editor-preview-action{gap:7px}
.client-editor-delete{width:32px;min-width:32px;height:32px;min-height:32px}

/* Admin Portal access rows: compact identity type and a dedicated action gutter.
   Emails intentionally remain 12px in this list. */
.portal-access-copy{min-width:0;display:grid;gap:3px}
.portal-access-row .portal-access-copy strong{
  font-size:12px;
  font-weight:600;
  line-height:1.4;
}
.portal-access-row .portal-access-email{
  font-size:12px;
  font-weight:400;
  line-height:1.4;
  color:var(--muted);
  overflow-wrap:anywhere;
}
.portal-access-actions{
  display:grid;
  grid-template-columns:auto 30px;
  align-items:center;
  justify-content:end;
  gap:12px;
  flex:0 0 auto;
  min-width:112px;
}
.portal-access-row .portal-role-pill{
  font-size:11px!important;
  justify-self:end;
}
.portal-access-remove{justify-self:end}

.client-delete-head h2{font-size:22px!important;line-height:1.15!important}
.client-delete-copy{font-size:12px!important;line-height:1.6!important;margin:0}
.client-delete-actions{justify-content:flex-end!important}
.client-delete-actions>*{min-width:132px}

@media (max-width:768px){
  .mobile-client-card-compact{grid-template-columns:minmax(0,1fr) auto}
  .mobile-client-card-actions{gap:2px}
  .portal-access-row{gap:10px}
  .portal-access-actions{min-width:104px;gap:8px}
  .client-editor-actions{grid-template-columns:minmax(0,1fr) auto}
  .client-editor-preview-action{gap:2px}
  .client-editor-delete{width:30px;min-width:30px;height:30px;min-height:30px}
}

/* =========================================================
   V3.0.11 — Unified delete affordances + inherited team access
   ========================================================= */

/* X controls stay quiet on hover: no red tint, no hover tile. */
.subtle-delete-button:hover,
.team-member-remove-action:hover{
  color:#555c59!important;
  background:transparent!important;
  text-decoration:none!important;
}
.subtle-delete-button:focus-visible,
.team-member-remove-action:focus-visible{
  outline:2px solid #8c9490!important;
  outline-offset:2px;
}

/* Keep the preview eye mathematically centered in desktop Actions columns.
   The delete X floats independently at the row's right inset. */
.row-action-center{
  position:relative;
  width:100%;
  min-height:36px;
  display:grid;
  place-items:center;
}
.row-action-center .row-delete-float{
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
}
.fixed-project-table td:last-child,
.clients-overview-table td:last-child{
  padding-left:var(--table-pad-x);
  padding-right:var(--table-pad-x);
}

/* Destructive editor buttons use the portal's intermediary beige, not red. */
.quiet-delete-button{
  background:#f1eee8!important;
  border-color:#e3e1dc!important;
  color:#9aa09d!important;
}
.quiet-delete-button:hover{
  background:#eae6de!important;
  border-color:#ddd8cf!important;
  color:#686f6c!important;
}

/* Project editor: Preview and Delete are intentionally identical in size. */
.project-editor-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.project-editor-actions > button{
  width:154px;
  min-width:154px;
  height:44px;
  min-height:44px;
}

/* Client editor desktop hierarchy. */
.client-editor-title-row{width:100%}
.client-editor-title-preview{display:none}
.client-editor-mobile-delete{display:none}
.client-editor-access-actions #sendInvitation,
.client-editor-access-actions #sendMagicLink,
.client-editor-access-actions #deleteClientButton{
  width:154px;
  min-width:154px;
  height:44px;
  min-height:44px;
  font-size:12px;
}
.client-editor-desktop-preview{display:block}

/* Team access heading now exactly matches Invite team member typography. */
.account-team-section .team-section-head h3{
  font-size:12px!important;
  font-weight:600!important;
  line-height:1.4!important;
}

/* Account-side member removal is an X on every viewport. */
.account-team-section .team-member-remove-action{
  width:22px!important;
  min-width:22px!important;
  height:26px!important;
  min-height:26px!important;
  padding:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:16px!important;
  line-height:1!important;
}
.team-remove-desktop,.team-remove-mobile{display:none!important}

/* Admin Portal access: names are intentionally smaller; emails remain 12px. */
.portal-access-row .portal-access-copy strong{
  font-size:11px!important;
  font-weight:600!important;
  line-height:1.4!important;
}
.portal-access-row .portal-access-email{
  font-size:12px!important;
}
.portal-access-actions{
  min-width:116px;
  grid-template-columns:auto 30px;
  gap:12px;
}

/* People-with-access remains client-account based, but now exposes every
   portal user inheriting that client account's project access. */
.access-option > span{min-width:0}
.access-option .access-team-users{
  color:#8b9194;
  font-size:10px;
  line-height:1.4;
  margin-top:3px;
  overflow-wrap:anywhere;
}

/* Mobile expanded admin cards: destructive X lives in the center column. */
@media (max-width:760px){
  .mobile-card-expanded.mobile-expanded-with-delete{
    display:none;
    grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr);
    align-items:center;
    gap:10px;
  }
  .admin-mobile-project-card.expanded .mobile-card-expanded.mobile-expanded-with-delete,
  .admin-mobile-client-card.expanded .mobile-card-expanded.mobile-expanded-with-delete{
    display:grid;
  }
  .mobile-expanded-with-delete > :first-child{justify-self:start}
  .mobile-expanded-with-delete > .mobile-expanded-delete{justify-self:center}
  .mobile-expanded-with-delete > [data-edit-project],
  .mobile-expanded-with-delete > [data-edit-client]{justify-self:end}

  /* Compact mobile cards keep the preview eye exactly where it already was. */
  .mobile-client-card-actions{display:flex;align-items:center;justify-content:flex-end}

  /* Client editor: preview eye rises into the title line; the old eye slot
     becomes a compact X. Explicit Delete client remains available too. */
  .client-editor-title-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
  }
  .client-editor-title-preview{display:block;flex:0 0 auto}
  .client-editor-title-eye{width:34px!important;min-width:34px!important;height:34px!important;min-height:34px!important}
  .client-editor-desktop-preview{display:none}
  .client-editor-mobile-delete{display:inline-grid}
  .client-editor-actions{
    display:grid;
    grid-template-columns:minmax(0,1fr) 30px;
    align-items:start;
    gap:10px;
    width:100%;
  }
  .client-editor-access-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    width:100%;
  }
  .client-editor-access-actions #sendInvitation,
  .client-editor-access-actions #sendMagicLink,
  .client-editor-access-actions #deleteClientButton{
    width:100%!important;
    min-width:0!important;
    height:44px!important;
    min-height:44px!important;
    padding-left:12px!important;
    padding-right:12px!important;
    font-size:12px!important;
  }
  .client-editor-preview-action{
    margin-left:0;
    justify-self:end;
    align-self:start;
    min-height:44px;
    display:flex;
    align-items:center;
  }

  /* Same type rules as desktop for the client Account window. */
  .account-team-section .team-section-head h3{font-size:12px!important}
  .account-team-section .team-member-copy strong{font-size:12px!important}
  .account-email,
  .account-team-section .team-member-copy span{font-size:11px!important}
  .account-team-section .portal-role-pill{font-size:11px!important}

  .project-editor-actions{
    display:flex;
    flex-wrap:nowrap;
    gap:8px;
  }
  .project-editor-actions > button{
    flex:1 1 0;
    width:auto;
    min-width:0;
    height:44px;
    min-height:44px;
    font-size:12px;
    padding-left:10px;
    padding-right:10px;
  }
}

/* Keep the Account image picker on the same 12px action tier as the buttons. */
.account-image-upload-block .upload-zone{
  font-size:12px!important;
  font-weight:600!important;
}


/* =========================================================
   V3.0.12 — editor action alignment + unified mobile chevrons
   ========================================================= */

/* Project editor mirrors the client editor action geometry: destructive action
   stays at the left of the action row and the preview eye stays independently
   aligned at the far right. */
.project-editor-actions{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:nowrap;
}
.project-editor-delete-action{display:flex;align-items:center;min-width:0}
.project-editor-delete-action #deleteProjectButton{
  width:154px;
  min-width:154px;
  height:44px;
  min-height:44px;
  font-size:12px;
}
.project-editor-preview-action{
  margin-left:auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex:0 0 auto;
}
.project-editor-eye{
  width:36px!important;
  min-width:36px!important;
  height:36px!important;
  min-height:36px!important;
}

/* Use the exact same chevron drawing for ordinary selects and date fields.
   The native date-picker hit area stays active but its browser icon is hidden,
   so the visible arrow is consistent with every other dropdown. */
.select,
.input[type="date"]{
  padding-right:40px!important;
  background-color:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M.5.5 5 5.5 9.5.5' fill='none' stroke='%236d716e' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:right 14px center!important;
  background-size:10px 6px!important;
}
.input[type="date"]{position:relative}
.input[type="date"]::-webkit-calendar-picker-indicator{
  opacity:0;
  position:absolute;
  right:0;
  top:0;
  width:44px;
  height:100%;
  margin:0;
  padding:0;
  cursor:pointer;
}

@media (max-width:760px){
  /* Client editor: only Invitation + Magic link are visible as text buttons.
     They share one row; the delete X occupies the compact final column. */
  .client-editor-actions{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 30px!important;
    align-items:center!important;
    gap:10px!important;
    width:100%!important;
  }
  .client-editor-access-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
    width:100%!important;
  }
  .client-editor-access-actions #sendInvitation,
  .client-editor-access-actions #sendMagicLink{
    width:100%!important;
    min-width:0!important;
    height:44px!important;
    min-height:44px!important;
    padding-left:8px!important;
    padding-right:8px!important;
    font-size:12px!important;
    white-space:nowrap!important;
  }
  .client-editor-access-actions #deleteClientButton{display:none!important}
  .client-editor-preview-action{
    margin-left:0!important;
    justify-self:end!important;
    align-self:center!important;
    min-height:44px!important;
    display:flex!important;
    align-items:center!important;
  }
  .client-editor-mobile-delete{display:inline-grid!important}

  /* Project editor keeps Delete project + preview eye on the same action row. */
  .project-editor-actions{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 36px!important;
    align-items:center!important;
    gap:10px!important;
    width:100%!important;
  }
  .project-editor-delete-action #deleteProjectButton{
    width:154px!important;
    min-width:154px!important;
    max-width:100%!important;
    height:44px!important;
    min-height:44px!important;
    font-size:12px!important;
  }
  .project-editor-preview-action{
    margin-left:0!important;
    justify-self:end!important;
  }
  .project-editor-eye{
    width:34px!important;
    min-width:34px!important;
    height:34px!important;
    min-height:34px!important;
  }

  /* Mobile uses one visible down-chevron vocabulary everywhere. */
  .dropdown-arrow{width:10px!important;height:6px!important;flex-basis:10px!important}
  .select,
  .input[type="date"]{
    background-position:right 14px center!important;
    background-size:10px 6px!important;
  }
}

/* =========================================================
   V3.0.13 — Portal-wide typography system
   =========================================================
   Canonical interface scale:
   10px — micro labels / compact metadata
   11px — secondary text / helper copy / emails
   12px — standard UI / buttons / row text
   13px — inputs / body copy
   16px — section headings / important card titles
   Large page, modal and branding titles remain deliberate exceptions.

   Icon glyphs (×, +, search clear, etc.) are intentionally excluded from
   the text scale because their font-size controls the icon drawing, not copy.
*/
:root{
  --type-micro:10px;
  --type-meta:11px;
  --type-ui:12px;
  --type-body:13px;
  --type-section:16px;
  --type-modal-title:22px;
}

body{font-size:var(--type-body)}

/* Branding + navigation */
.boot-brand,.brand-text{font-size:var(--type-ui)!important}
.nav-link{font-size:var(--type-ui)!important}
.avatar{font-size:var(--type-meta)!important}
.eyebrow{font-size:var(--type-micro)!important}

/* Primary hierarchy */
h2{font-size:var(--type-modal-title)!important}
h3{font-size:var(--type-section)!important}
.lead{font-size:var(--type-body)!important}
.back-button{font-size:var(--type-ui)!important}

/* Controls */
.primary-button,.secondary-button,.ghost-button,.danger-button,.link-button{font-size:var(--type-ui)!important}
.text-action{font-size:var(--type-meta)!important}
.field label{font-size:var(--type-meta)!important}
.input,.select,.textarea{font-size:var(--type-body)!important}
.help{font-size:var(--type-meta)!important}
.mini-label{font-size:var(--type-micro)!important}
.upload-zone{font-size:var(--type-ui)!important}
.copy-setting-label,.toggle-row{font-size:var(--type-ui)!important}

/* Dropdowns, filters, search */
.access-picker summary{font-size:var(--type-body)!important}
.access-option,.single-client-option{font-size:var(--type-ui)!important}
.access-footer button{font-size:var(--type-meta)!important}
.access-option .access-team-users{font-size:var(--type-micro)!important}
.filter-tab{font-size:var(--type-ui)!important}
.sort-menu,.sort-option{font-size:var(--type-meta)!important}
.project-search-input{font-size:var(--type-meta)!important}

/* Status + tables */
.status-pill{font-size:var(--type-meta)!important}
th{font-size:var(--type-micro)!important}
td{font-size:var(--type-ui)!important}
.project-links-list a{font-size:var(--type-ui)!important}
.empty{font-size:var(--type-body)!important}

/* Client dashboard */
.project-title{font-size:var(--type-section)!important}
.project-meta{font-size:var(--type-meta)!important}
.progress-step{font-size:var(--type-micro)!important}

/* Client project page */
.summary-label,.finals-label{font-size:var(--type-micro)!important}
.summary-stage,.finals-title{font-size:var(--type-section)!important}
.summary-due,.finals-status{font-size:var(--type-meta)!important}
.stage-number,.stage-index,.stage-index-label{font-size:var(--type-micro)!important}
.stage-title{font-size:var(--type-section)!important}
.stage-status{font-size:var(--type-meta)!important}
.contact-note{font-size:var(--type-ui)!important}
.action-fixed,.finals-actions .action-fixed{font-size:var(--type-ui)!important}
.current-stage-card .status-pill{font-size:var(--type-meta)!important}

/* Login / authentication */
.login-title{font-size:28px!important}
.login-description,.modal-intro{font-size:var(--type-body)!important}
.remember-row{font-size:var(--type-meta)!important}
.oauth-button{font-size:var(--type-ui)!important}
.login-divider{font-size:var(--type-micro)!important}

/* Notices / account / transient UI */
.notice,.toast{font-size:var(--type-ui)!important}
.preview-banner{font-size:var(--type-meta)!important}
.account-display-name{font-size:var(--type-section)!important}
.account-email{font-size:var(--type-meta)!important}
.account-team-section .team-section-head h3{font-size:var(--type-ui)!important}
.account-team-section .team-member-copy strong{font-size:var(--type-ui)!important}
.account-team-section .team-member-copy span,
.account-team-section .team-access-help{font-size:var(--type-meta)!important}
.account-team-section .portal-role-pill{font-size:var(--type-meta)!important}

/* Admin client editor / Portal access */
.portal-access-row .portal-access-copy strong,
.portal-access-row .portal-access-email{font-size:var(--type-meta)!important}
.portal-access-row .portal-role-pill{font-size:var(--type-meta)!important}
.client-editor-access-actions #sendInvitation,
.client-editor-access-actions #sendMagicLink,
.client-editor-access-actions #deleteClientButton,
.project-editor-delete-action #deleteProjectButton{font-size:var(--type-ui)!important}

/* Confirmation dialogs */
.team-remove-head h2,.client-delete-head h2{font-size:var(--type-modal-title)!important}
.team-remove-copy,.client-delete-copy,.team-remove-actions>*{font-size:var(--type-ui)!important}

/* Updated/date metadata */
.client-updated-block,
.client-updated-block .updated-heading-label,
.client-updated-block .updated-date-value{font-size:var(--type-micro)!important}

/* Image-control helper action */
.remove-image-link{font-size:var(--type-micro)!important}

/* Mobile type follows the same scale rather than inventing fractional sizes. */
@media (max-width:760px){
  .brand-text{font-size:var(--type-meta)!important}
  .nav-link{font-size:var(--type-ui)!important}
  .lead{font-size:var(--type-ui)!important}
  .empty{font-size:var(--type-ui)!important}

  .filter-tab,.sort-menu,.sort-option{font-size:var(--type-micro)!important}
  .project-search-input{font-size:var(--type-meta)!important}

  .mobile-project-name{font-size:var(--type-ui)!important}
  .mobile-project-client,.mobile-card-expanded{font-size:var(--type-meta)!important}
  .mobile-detail-label,.mobile-client-email,.mobile-client-view,
  .project-action .view-project-button,
  .responsive-table td::before{font-size:var(--type-micro)!important}

  .project-title{font-size:var(--type-ui)!important}
  .project-meta,.mobile-project-extra{font-size:var(--type-meta)!important}
  .progress-step{font-size:var(--type-micro)!important}

  .stage-index,.stage-index-label{font-size:var(--type-micro)!important}
  .stage-title{font-size:var(--type-body)!important}
  .stage-status{font-size:var(--type-micro)!important}
  .action-fixed,.finals-actions .action-fixed{font-size:var(--type-micro)!important}

  .login-title{font-size:26px!important}
  .login-description{font-size:var(--type-ui)!important}

  .stage-editor-name{font-size:var(--type-ui)!important}
  .stage-editor .input,.stage-editor .select,.stage-editor .stage-url,
  .stage-editor .stage-status,.stage-editor .stage-due{font-size:var(--type-body)!important}

  .account-team-section .team-section-head h3,
  .account-team-section .team-member-copy strong{font-size:var(--type-ui)!important}
  .account-email,.account-team-section .team-member-copy span,
  .account-team-section .team-access-help,
  .account-team-section .portal-role-pill{font-size:var(--type-meta)!important}

  .client-editor-access-actions #sendInvitation,
  .client-editor-access-actions #sendMagicLink,
  .project-editor-delete-action #deleteProjectButton{font-size:var(--type-ui)!important}
}

@media (max-width:420px){
  .lead{font-size:var(--type-ui)!important}
}


/* =========================================================
   V3.0.14 — smallest pill type + single date chevron
   ========================================================= */

/* All pill copy uses the smallest canonical portal text size on both
   desktop and mobile. Weight, fill and border continue to provide hierarchy. */
.status-pill,
.portal-role-pill,
.account-team-section .portal-role-pill,
.portal-access-row .portal-role-pill,
.current-stage-card .status-pill,
.project-main .status-pill{
  font-size:var(--type-micro)!important;
}

/* Date inputs already draw the same custom chevron as selects. Explicitly
   remove the platform date-control appearance as well as its native picker
   glyph so mobile browsers cannot render a second arrow beside ours. */
.input[type="date"]{
  appearance:none!important;
  -webkit-appearance:none!important;
}
.input[type="date"]::-webkit-calendar-picker-indicator{
  opacity:0!important;
  color:transparent!important;
  background:transparent!important;
  border:0!important;
  -webkit-appearance:none!important;
}

@media (max-width:760px){
  .status-pill,
  .portal-role-pill,
  .account-team-section .portal-role-pill,
  .portal-access-row .portal-role-pill,
  .current-stage-card .status-pill,
  .project-main .status-pill{
    font-size:var(--type-micro)!important;
  }

  .input[type="date"]{
    appearance:none!important;
    -webkit-appearance:none!important;
  }
}

/* =========================================================
   V3.0.15 — Portal access names match linked-project names
   ========================================================= */
/* Client owner and invited team-member names in the admin Portal access
   list use the same 12px UI tier as names in Linked projects. Emails stay
   on the smaller 11px metadata tier. Applies identically on desktop/mobile. */
.portal-access-row .portal-access-copy strong{
  font-size:var(--type-ui)!important;
}


/* =========================================================
   V3.0.16 — invitation flow + mobile account-image controls
   ========================================================= */
@media (max-width:768px){
  .account-image-control-row .account-image-actions{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:10px!important;
    width:100%!important;
    align-items:stretch!important;
    justify-content:stretch!important;
  }
  .account-image-control-row .account-image-actions>*{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:44px!important;
    min-height:44px!important;
  }
}
@media (max-width:390px){
  .account-image-control-row .account-image-actions{
    flex-direction:row!important;
    align-items:stretch!important;
  }
}


/* V3.0.18 — team invite form now separates first name and last name; all other portal styling unchanged. */

/* =========================================================
   V3.0.19 — Password setup / recovery logo true-centering
   Restores the previously agreed Create/Reset Password alignment.
   ========================================================= */
.login-simple .reset-box .login-brand-mobile.always{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  text-align:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.login-simple .reset-box .login-brand-mobile.always .brand-logo{
  display:block !important;
  margin-left:auto !important;
  margin-right:auto !important;
  object-position:center center !important;
}
.login-simple .reset-box .login-brand-mobile.always .brand-text{
  display:block !important;
  width:100% !important;
  text-align:center !important;
}


/* =========================================================
   V3.0.20 — Authentication screen consistency
   Restores previously agreed password-screen spacing and password controls,
   and keeps the logo centered wherever an auth screen displays it.
   ========================================================= */
.login-page .login-brand-mobile,
.login-simple .reset-box .login-brand-mobile.always{
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}

/* Previously agreed Create/Reset Password spacing below the password fields. */
.login-simple .reset-box .login-submit{
  margin-top:21px !important;
}

/* Previously agreed password visibility controls. */
.password-field-wrap{
  position:relative;
  width:100%;
}
.password-field-wrap .input{
  width:100%;
  padding-right:46px;
}
.password-visibility-toggle{
  position:absolute;
  top:50%;
  right:10px;
  transform:translateY(-50%);
  width:30px;
  height:30px;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:#6f7472;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.password-visibility-toggle:hover{
  background:#f3f2ef;
  color:var(--text);
}
.password-visibility-toggle:focus-visible{
  outline:2px solid #919896;
  outline-offset:2px;
}
.password-visibility-toggle svg{
  width:18px;
  height:18px;
  display:block;
  pointer-events:none;
}
.password-field-wrap input::-ms-reveal,
.password-field-wrap input::-ms-clear{
  display:none;
}
.password-manager-username{
  /* Keep the username field available to browser password managers.
     display:none can cause Chrome/Edge to stop classifying this as a
     create-password form, which removes generated-password suggestions. */
  position:absolute !important;
  left:-10000px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  opacity:0 !important;
  pointer-events:none !important;
  overflow:hidden !important;
}
.login-simple .reset-box .login-help{
  text-align:center;
  min-height:18px;
}

/* Auth utility links are appended below the established form spacing so the
   sign-in and password form internals remain unchanged. */
.auth-links{
  margin-top:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  font-size:10px;
  line-height:1.4;
  color:var(--muted);
  text-align:center;
}
.auth-links a{
  color:var(--muted);
  text-decoration:none;
}
.auth-links a:hover{
  color:var(--text);
  text-decoration:underline;
  text-underline-offset:2px;
}


/* =========================================================
   V3.0.25 — editable avatar affordance + portrait framing
   ========================================================= */
.avatar img,
.account-avatar-large img{
  object-fit:cover;
  object-position:50% 35%;
}
.account-avatar-picker{
  position:relative;
  padding:0;
  border:0;
  font:inherit;
  cursor:pointer;
  flex:0 0 58px;
  isolation:isolate;
  overflow:visible;
}
.account-avatar-picker::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:rgba(23,24,22,0);
  transition:background .16s ease;
  z-index:1;
}
.account-avatar-picker:focus-visible{
  outline:2px solid #8c9490;
  outline-offset:4px;
}
.account-avatar-picker:hover::before,
.account-avatar-picker:focus-visible::before{
  background:rgba(23,24,22,.28);
}
.account-avatar-picker img,
.account-avatar-picker .account-avatar-initials{
  width:58px;
  height:58px;
  border-radius:50%;
}
.account-avatar-picker .account-avatar-initials{
  display:grid;
  place-items:center;
}
.account-avatar-edit{
  position:absolute;
  right:-3px;
  bottom:-3px;
  width:23px;
  height:23px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#fff;
  border:1px solid #d8d9d5;
  box-shadow:0 2px 7px rgba(23,24,22,.12);
  z-index:2;
  transition:transform .16s ease,background .16s ease,border-color .16s ease;
}
.account-avatar-plus{
  position:relative;
  width:9px;
  height:9px;
  display:block;
}
.account-avatar-plus::before,
.account-avatar-plus::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:9px;
  height:1.5px;
  border-radius:999px;
  background:#303432;
  transform:translate(-50%,-50%);
}
.account-avatar-plus::after{
  transform:translate(-50%,-50%) rotate(90deg);
}
.account-avatar-picker:hover .account-avatar-edit,
.account-avatar-picker:focus-visible .account-avatar-edit{
  transform:scale(1.08);
  border-color:#c7cac5;
}

/* Authentication copy: balance lines and never split the product name. */
.login-title,
.login-description{
  text-wrap:balance;
}
.auth-portal-name{
  white-space:nowrap;
}
@media (max-width:420px){
  .login-title .auth-portal-name{
    font-size:clamp(20px,6.4vw,26px);
    letter-spacing:-.03em;
  }
}

/* View project label: full on desktop, shortened on mobile */
.view-project-mobile-label{display:none}
@media (max-width:760px){
  .view-project-full-label{display:none}
  .view-project-mobile-label{display:inline}
}


/* =========================================================
   V3.0.27 — avatar save state + unified mobile View width
   ========================================================= */
/* Disabled Save uses the same visual treatment as the disabled Remove image control. */
#saveAccountAvatar.secondary-button:disabled{
  background:#fff;
  color:var(--text);
  border-color:var(--line);
}

@media (max-width:760px){
  /* Dashboard View and project-stage View use the same mid-size mobile control. */
  .project-action .view-project-button,
  .stage-actions .action-fixed{
    width:96px!important;
    min-width:96px!important;
    height:38px!important;
    min-height:38px!important;
    padding:0 10px!important;
  }

  /* Final-gallery action keeps its longer width because its label is longer. */
  .finals-actions .action-fixed{
    width:112px!important;
    min-width:112px!important;
    height:40px!important;
    min-height:40px!important;
  }
}

@media (max-width:420px){
  .project-action .view-project-button,
  .stage-actions .action-fixed{
    width:96px!important;
    min-width:96px!important;
  }

  .finals-actions .action-fixed{
    width:108px!important;
    min-width:108px!important;
  }
}


/* =========================================================
   V3.0.28 — mobile View buttons match Access gallery
   ========================================================= */
@media (max-width:760px){
  .project-action .view-project-button,
  .stage-actions .action-fixed,
  .finals-actions .action-fixed{
    width:112px!important;
    min-width:112px!important;
    height:40px!important;
    min-height:40px!important;
    padding:0 10px!important;
  }
}

@media (max-width:420px){
  .project-action .view-project-button,
  .stage-actions .action-fixed,
  .finals-actions .action-fixed{
    width:108px!important;
    min-width:108px!important;
  }
}


/* =========================================================
   V3.0.29 — Account image control consistency
   ========================================================= */
/* Nested .field label styling previously made Choose image look muted while
   Remove image used the normal button text colour. Keep both active controls
   on the same foreground colour. */
.account-image-upload-block .upload-zone{
  color:var(--text)!important;
}


/* =========================================================
   V3.0.30 — restore mobile dashboard View alignment
   ========================================================= */
@media (max-width:760px){
  /* The wider View control introduced in V3.0.28 must have a matching
     action column. Keep its right edge on the same inset as the progress row. */
  .project-card{
    grid-template-columns:78px minmax(0,1fr) 128px!important;
  }
  .project-action{
    justify-content:flex-end!important;
    padding-left:0!important;
    padding-right:16px!important;
  }
}

@media (max-width:420px){
  .project-card{
    grid-template-columns:74px minmax(0,1fr) 122px!important;
  }
  .project-action{
    padding-right:14px!important;
  }
}


/* =========================================================
   V3.0.31 — mobile project-action centering + password-manager hints
   ========================================================= */
/* On compact project-status layouts, let the action lane consume the remaining
   row width and centre the main CTA inside that lane. Copy/share utilities are
   anchored independently at the lane's right edge, so they cannot push the CTA
   off-centre. */
@media (max-width:980px){
  .stage-actions{
    position:relative!important;
    flex:1 1 0!important;
    min-width:108px!important;
    margin-left:0!important;
    justify-content:center!important;
  }
  .stage-actions>.stage-secondary-actions{
    position:absolute!important;
    right:0!important;
    top:50%!important;
    transform:translateY(-50%)!important;
  }

  .finals-actions{
    position:relative!important;
    flex:1 1 0!important;
    min-width:108px!important;
    margin-left:0!important;
    justify-content:center!important;
  }
  .finals-actions>.stage-secondary-actions{
    position:absolute!important;
    right:0!important;
    top:50%!important;
    transform:translateY(-50%)!important;
  }
}

@media (max-width:760px){
  /* Existing phone behavior hides utility icons; keep that explicit so only
     the main CTA participates in the centred action lane. */
  .stage-actions>.stage-secondary-actions,
  .finals-actions>.stage-secondary-actions{
    display:none!important;
  }
}


/* =========================================================
   V3.0.33 — client navigation order + dedicated Team access
   ========================================================= */
/* Client desktop order: Account (avatar), Team, Projects, divider,
   Contact us, divider, Sign out. Icons are intentionally mobile-only. */
.client-nav-links .nav-separator{
  display:block;
  width:1px;
  height:18px;
  flex:0 0 1px;
  background:var(--line);
}
.nav-item-icon{
  display:none;
}

/* Team keeps the established content/layout, but it now lives in its own modal
   rather than inside Account settings. */
.team-modal-section{
  margin-top:0!important;
  padding-top:0!important;
  border-top:0!important;
}

@media (max-width:760px){
  .client-nav-links .nav-link.has-menu-icon{
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
  }
  .client-nav-links .nav-item-icon{
    display:block;
    width:17px;
    height:17px;
    flex:0 0 17px;
    color:currentColor;
  }
  .client-nav-links .nav-separator{
    width:100%;
    height:1px;
    flex:0 0 1px;
    margin:6px 0;
    background:var(--line);
  }
}


/* =========================================================
   V3.0.34 — mobile navigation parity + project timeline geometry
   ========================================================= */
/* Admin keeps the established desktop navigation. Its compact hamburger menu
   gets the same icon treatment and grouped ordering as the client menu. */
.admin-mobile-nav-item{
  display:none;
}

@media (max-width:760px){
  .admin-nav-links .admin-desktop-nav-item{
    display:none!important;
  }
  .admin-nav-links .admin-mobile-nav-item.nav-link,
  .client-nav-links .nav-link.has-menu-icon{
    display:flex!important;
    align-items:center;
    gap:10px;
    width:100%;
    border-radius:8px;
    transition:background .15s ease,color .15s ease;
  }
  .admin-nav-links .admin-mobile-nav-item.nav-link:hover,
  .client-nav-links .nav-link.has-menu-icon:hover{
    background:var(--surface-soft);
    color:var(--text);
  }
  .admin-nav-links .nav-item-icon{
    display:block;
    width:17px;
    height:17px;
    flex:0 0 17px;
    color:currentColor;
  }
  .admin-nav-links .nav-separator.admin-mobile-nav-item{
    display:block!important;
    width:100%;
    height:1px;
    flex:0 0 1px;
    margin:6px 0;
    background:var(--line);
  }

  /* The Current stage summary follows the exact width of the timeline card. */
  .project-top .current-stage-card{
    width:100%!important;
    max-width:none!important;
  }

  /* Restore the established right-hand action lane on phone layouts. The
     primary stage/final buttons share one right edge and keep open space to
     their left rather than being centred in the remaining row. */
  .stage-actions,
  .finals-actions{
    position:static!important;
    flex:0 0 auto!important;
    min-width:0!important;
    margin-left:auto!important;
    justify-content:flex-end!important;
    align-items:center!important;
  }
  .stage-actions>.stage-secondary-actions,
  .finals-actions>.stage-secondary-actions{
    display:none!important;
    position:static!important;
    transform:none!important;
  }
  .stage-body{
    padding-right:16px!important;
  }
  .finals-section{
    padding-right:16px!important;
  }
}

@media (max-width:420px){
  .stage-body{
    padding-right:14px!important;
  }
  .finals-section{
    padding-right:14px!important;
  }
}

/* =========================================================
   V3.0.35 — desktop nav parity + centred timeline utilities
   ========================================================= */
/* Desktop client navigation mirrors the admin structure: text items first,
   then the account avatar at the far right. Separators belong to the compact
   hamburger menu only. */
.client-mobile-nav-item{
  display:none!important;
}
.client-nav-links .nav-separator{
  display:none!important;
}

@media (max-width:760px){
  .client-nav-links .client-desktop-nav-item{
    display:none!important;
  }
  .client-nav-links .client-mobile-nav-item.nav-link{
    display:flex!important;
  }
  .client-nav-links .nav-separator.client-mobile-nav-item{
    display:block!important;
  }
}

/* On desktop/tablet, the Copy + Share pair is centred in the complete space
   between the View/Access-gallery button edge and the card's right frame.
   The action grid deliberately extends across the card's right padding so the
   secondary lane is centred against the actual frame, not the content inset. */
@media (min-width:761px){
  .stage-actions,
  .finals-actions{
    display:grid!important;
    grid-template-columns:154px 104px!important;
    width:258px!important;
    min-width:258px!important;
    flex:0 0 258px!important;
    column-gap:0!important;
    row-gap:0!important;
    position:static!important;
    margin-left:auto!important;
    margin-right:-52px!important;
    justify-content:initial!important;
    align-items:center!important;
  }
  .stage-actions>.action-fixed,
  .finals-actions>.action-fixed{
    grid-column:1!important;
    width:154px!important;
    min-width:154px!important;
  }
  .stage-actions>.stage-secondary-actions,
  .finals-actions>.stage-secondary-actions{
    grid-column:2!important;
    position:static!important;
    right:auto!important;
    top:auto!important;
    transform:none!important;
    width:104px!important;
    min-width:104px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:3px!important;
  }
}

/* =========================================================
   V3.0.36 — project-stage field typography + mobile stage spacing
   ========================================================= */
/* Desktop project editor: the Status select uses the same text size as the
   Link and Feedback due fields. Keep this scoped to project-stage controls. */
@media (min-width:761px){
  .stage-editor .stage-status,
  .stage-editor .stage-status option{
    font-size:var(--type-body)!important;
    font-weight:400!important;
  }
}

/* Mobile client timeline: keep every stage marker vertically centred so the
   separator between consecutive stages sits exactly halfway between markers,
   matching the desktop timeline geometry. */
@media (max-width:760px){
  .vertical-timeline .stage-number::before{
    top:50%!important;
  }
}

/* =========================================================
   V3.0.37 — client project summary + timeline stage markers
   ========================================================= */
/* Keep the project heading on its own row, then pair the square cover and
   square Current stage summary on one line. Desktop keeps the pair grouped
   near the left; compact layouts push the summary to the timeline's right edge. */
@media (min-width:761px){
  .project-top{
    display:grid!important;
    grid-template-columns:180px 180px minmax(0,1fr)!important;
    column-gap:20px!important;
    row-gap:20px!important;
    align-items:start!important;
  }
  .project-top-copy{
    grid-column:1/-1!important;
    grid-row:1!important;
  }
  .project-detail-image{
    grid-column:1!important;
    grid-row:2!important;
    width:180px!important;
    height:180px!important;
    aspect-ratio:1/1!important;
    margin:0!important;
  }
  .project-top .current-stage-card{
    grid-column:2!important;
    grid-row:2!important;
    width:180px!important;
    min-width:180px!important;
    max-width:180px!important;
    height:180px!important;
    min-height:180px!important;
    margin:0!important;
    box-sizing:border-box!important;
  }
}

@media (max-width:760px){
  .project-top{
    display:grid!important;
    grid-template-columns:118px 118px!important;
    justify-content:space-between!important;
    column-gap:0!important;
    row-gap:18px!important;
    align-items:start!important;
    width:100%!important;
  }
  .project-top-copy{
    grid-column:1/-1!important;
    grid-row:1!important;
  }
  .project-detail-image{
    grid-column:1!important;
    grid-row:2!important;
    width:118px!important;
    height:118px!important;
    aspect-ratio:1/1!important;
    margin:0!important;
  }
  .project-top .current-stage-card{
    grid-column:2!important;
    grid-row:2!important;
    width:118px!important;
    min-width:118px!important;
    max-width:118px!important;
    height:118px!important;
    min-height:118px!important;
    margin:0!important;
    padding:13px!important;
    box-sizing:border-box!important;
  }
  .project-top .current-stage-card .summary-stage{
    margin:5px 0!important;
  }
  .project-top .current-stage-card .summary-due{
    font-size:10px!important;
    line-height:1.3!important;
    margin-top:6px!important;
  }
}

/* Larger stage markers. The vertical rule keeps using the exact marker centre. */
@media (min-width:761px){
  .vertical-timeline .stage-number::before{
    width:32px!important;
    height:32px!important;
  }
}
@media (max-width:760px){
  .vertical-timeline .stage-number::before{
    width:27px!important;
    height:27px!important;
  }
}

/* Completed stages keep a white row and use the marker itself to communicate
   completion. Add a crisp white checkmark inside the established green circle. */
.vertical-timeline .stage.done .stage-body{
  background:#fff!important;
}
.vertical-timeline .stage.done .stage-number::before{
  background-color:var(--green)!important;
  border-color:var(--green)!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.8 12.3l3.3 3.3 7.2-7.2' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:58% 58%!important;
}

/* A restrained pulse makes Feedback required noticeable without changing the
   established mustard marker or the surrounding stage layout. */
@keyframes rendergram-feedback-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(214,165,28,0)}
  50%{box-shadow:0 0 0 6px rgba(214,165,28,.16)}
}
.vertical-timeline .stage.feedback .stage-number::before{
  animation:rendergram-feedback-pulse 2.2s ease-in-out infinite!important;
}
@media (prefers-reduced-motion:reduce){
  .vertical-timeline .stage.feedback .stage-number::before{
    animation:none!important;
  }
}

/* Nudge Copy + Share toward the main action so the pair sits visually in the
   middle of the remaining space rather than leaning toward the card frame. */
@media (min-width:761px){
  .stage-actions>.stage-secondary-actions,
  .finals-actions>.stage-secondary-actions{
    transform:translateX(-8px)!important;
  }
}


/* =========================================================
   V3.0.38 — simplify client project header + timeline divider
   ========================================================= */
/* The Current stage summary card is intentionally removed from the client
   project view. Keep the cover square in its established position without
   reserving a second summary-card column. */
@media (min-width:761px){
  .project-top{
    grid-template-columns:180px minmax(0,1fr)!important;
  }
}
@media (max-width:760px){
  .project-top{
    grid-template-columns:118px minmax(0,1fr)!important;
    justify-content:start!important;
  }
}

/* Remove the visual divider between the timeline marker lane and stage copy. */
.vertical-timeline .stage-body{
  border-left:0!important;
}


/* =========================================================
   V3.0.39 — project cover / timeline-lane parity + active status
   ========================================================= */
/* Match the project cover square to the timeline marker lane. The timeline
   itself is unchanged: this only brings the cover onto the same 132px desktop
   and 96px compact geometry already used by the stage-marker column. */
@media (min-width:761px){
  .project-top{
    grid-template-columns:132px minmax(0,1fr)!important;
  }
  .project-detail-image{
    width:132px!important;
    height:132px!important;
    min-width:132px!important;
    min-height:132px!important;
    aspect-ratio:1/1!important;
    border-radius:var(--radius)!important;
    margin:0!important;
  }
}

@media (max-width:760px){
  .project-top{
    grid-template-columns:96px minmax(0,1fr)!important;
    justify-content:start!important;
  }
  .project-detail-image{
    width:96px!important;
    height:96px!important;
    min-width:96px!important;
    min-height:96px!important;
    aspect-ratio:1/1!important;
    border-radius:var(--radius)!important;
    margin:0!important;
  }
}

@media (max-width:420px){
  .project-top{
    grid-template-columns:92px minmax(0,1fr)!important;
  }
  .project-detail-image{
    width:92px!important;
    height:92px!important;
    min-width:92px!important;
    min-height:92px!important;
  }
}

/* Client dashboard: In progress uses the same amber family as other active
   project states, while keeping its existing label and status logic. */
.status-in-progress{
  background:var(--amber-bg)!important;
  color:#8d6600!important;
}


/* =========================================================
   V3.0.40 — compact mobile project cards with tap-to-reveal timeline
   ========================================================= */
/* Keep every client-dashboard project card the same compact height on first
   glance. The three-stage circle timeline becomes an expansion row only after
   the project card itself is tapped. Desktop remains unchanged. */
@media (max-width:760px){
  .project-card .mobile-progress-row{
    display:none!important;
  }
  .project-card.expanded .mobile-progress-row{
    display:block!important;
  }
}


/* =========================================================
   V3.0.41 — verified V3.0.39 / V3.0.40 behavior
   ========================================================= */
/* Explicitly preserve the requested active-state treatment. */
.status-in-progress{
  background:var(--amber-bg)!important;
  color:#8d6600!important;
}

/* The cover square follows the marker-lane square on the client project page. */
@media (min-width:761px){
  .project-detail-image{
    width:132px!important;
    height:132px!important;
    min-width:132px!important;
    min-height:132px!important;
  }
}
@media (max-width:760px){
  .project-detail-image{
    width:96px!important;
    height:96px!important;
    min-width:96px!important;
    min-height:96px!important;
  }

  /* Dashboard timeline is disclosure content: hidden until the card is tapped. */
  .project-card .project-action > .progress{
    display:none!important;
  }
  .project-card .mobile-progress-row{
    display:none!important;
  }
  .project-card.expanded .mobile-progress-row{
    display:block!important;
  }
}
@media (max-width:420px){
  .project-detail-image{
    width:92px!important;
    height:92px!important;
    min-width:92px!important;
    min-height:92px!important;
  }
}


/* =========================================================
   V3.0.42 — smaller mobile dashboard View control
   ========================================================= */
/* Client project list only: keep stage/final-gallery actions unchanged while
   reducing the compact dashboard View button footprint. */
@media (max-width:760px){
  .project-card .project-action .view-project-button{
    width:88px!important;
    min-width:88px!important;
    height:36px!important;
    min-height:36px!important;
    padding:0 9px!important;
    font-size:10px!important;
  }
}

@media (max-width:420px){
  .project-card .project-action .view-project-button{
    width:84px!important;
    min-width:84px!important;
    height:34px!important;
    min-height:34px!important;
    padding:0 8px!important;
    font-size:9.5px!important;
  }
}


/* =========================================================
   V3.0.44 — mobile dashboard Invite alignment correction
   ========================================================= */
/* The requested Invite control is the direct client-dashboard action, not the
   Invite button inside the Team modal. Desktop keeps the full wording/layout. */
.dashboard-invite-mobile-label{display:none}

@media (max-width:760px){
  .client-dashboard-title-row{
    width:100%!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    gap:14px!important;
  }
  .client-dashboard-invite{
    align-self:flex-end!important;
    flex:0 0 auto!important;
    width:88px!important;
    min-width:88px!important;
    max-width:88px!important;
    height:36px!important;
    min-height:36px!important;
    margin-right:12px!important;
    padding:0 9px!important;
    font-size:10px!important;
    white-space:nowrap!important;
  }
  .dashboard-invite-full-label{display:none!important}
  .dashboard-invite-mobile-label{display:inline!important}
}

@media (max-width:420px){
  .client-dashboard-invite{
    width:84px!important;
    min-width:84px!important;
    max-width:84px!important;
    height:34px!important;
    min-height:34px!important;
    margin-right:9px!important;
    padding:0 8px!important;
    font-size:9.5px!important;
  }
}


/* =========================================================
   V3.0.45 — mobile dashboard Invite on Welcome row
   ========================================================= */
/* Mobile only: keep Invite on the same line as the Welcome heading. This
   removes the extra vertical row introduced in V3.0.44, so the description,
   filters and project list return to the portal's normal vertical rhythm. */
@media (max-width:760px){
  .client-dashboard-title-row{
    width:100%!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:14px!important;
  }
  .client-dashboard-title-row h1{
    flex:1 1 auto!important;
    min-width:0!important;
    margin:0!important;
  }
  .client-dashboard-invite{
    align-self:center!important;
    flex:0 0 auto!important;
    margin-top:0!important;
    margin-bottom:0!important;
  }
}