/* MEM Studios / Client workspace
   Art direction copied from user's Eleventy source tokens, not a generic "luxury" skin.
   Portfolio family: Hubiron / Poppins / Instrument Serif.
   Palette: #121212, #eee, #b5b5ff, #610002. */
@font-face{font-family:Hubiron;src:url('./fonts/Hubiron-Medium.woff2') format('woff2');font-weight:500;font-display:optional}
@font-face{font-family:Hubiron;src:url('./fonts/Hubiron-Bold.woff2') format('woff2');font-weight:700;font-display:optional}
@font-face{font-family:Poppins;src:url('./fonts/Poppins-Light.woff2') format('woff2');font-weight:300;font-display:optional}
@font-face{font-family:Poppins;src:url('./fonts/Poppins-Regular.woff2') format('woff2');font-weight:400;font-display:optional}
@font-face{font-family:Poppins;src:url('./fonts/Poppins-Medium.woff2') format('woff2');font-weight:500;font-display:optional}
@font-face{font-family:Instrument Serif;src:url('./fonts/InstrumentSerif-Regular.woff2') format('woff2');font-weight:400;font-display:optional}
:root{
 color-scheme:dark;
 --bg:var(--mem-color-bg);--bg-card:var(--mem-color-surface);--bg-soft:#161616;
 --border-subtle:rgba(238,238,238,.17);
 --accent:var(--mem-color-lilac);--accent-soft:rgba(181,181,255,.10);
 --text:var(--mem-color-text);--text-muted:rgba(238,238,238,.62);--text-soft:rgba(238,238,238,.42);
 --radius-lg:0;--radius-md:0;--shadow-soft:none;
 --font-sans:var(--mem-font-body);
 --font-display:var(--mem-font-display);
 --font-serif:var(--mem-font-editorial);
 --mem-red:var(--mem-color-red);--mem-lilac:var(--mem-color-lilac);--mem-light-red:var(--mem-color-red-light);
 --mem-rule:rgba(238,238,238,.17);--mem-ease:var(--mem-easing-standard)
}
html{background:var(--bg);scroll-behavior:smooth}
body{background:var(--bg)!important;background-image:none!important;background-attachment:scroll;color:var(--text);font:300 var(--mem-type-sm)/1.65 var(--font-sans);-webkit-font-smoothing:antialiased}
body::before,body:before{display:none!important}
::selection{background:var(--accent);color:var(--bg)}
:focus-visible{outline:var(--mem-border-strong) solid var(--accent);outline-offset:0.1875rem}
/* An editorial masthead and section title rather than a glossy app header */
.workspace-wordmark,.login-wordmark{color:var(--text);text-decoration:none;font:500 clamp(1.4375rem,2.5vw,2.3125rem)/1 var(--font-display);text-transform:uppercase;letter-spacing:-.045em;white-space:nowrap}
.workspace-wordmark sup,.login-wordmark sup{font:400 .36em/1 var(--font-sans);vertical-align:top;margin-left:0.1875rem}
.workspace-footer{color:var(--text-muted);font:400 var(--mem-type-3xs)/1.5 var(--font-sans);text-transform:uppercase;letter-spacing:.12em}
header.app-header{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:1.625rem;margin:0 0 3.75rem;padding:clamp(1.875rem,1vw,2.1875rem) 0 1.875rem;border-bottom:var(--mem-border-hairline) solid var(--mem-rule)}
.app-avatar{display:flex;align-items:center;justify-content:center;width:3.125rem;height:3.125rem;border-radius:50%;background:var(--bg-soft);border:var(--mem-border-hairline) solid var(--mem-rule);box-shadow:none;overflow:hidden}
.app-avatar img{height:100%;width:100%;object-fit:cover}
nav.app-nav{display:flex;align-items:center;flex-wrap:wrap;gap:clamp(var(--mem-space-3-5),1.7vw,1.625rem)}
.nav-link,.logout-button{position:relative;border:0;border-radius:0!important;background:none!important;box-shadow:none!important;backdrop-filter:none!important;padding:0.4375rem 0;color:var(--text-muted);text-decoration:none;font:500 var(--mem-type-3xs)/1.4 var(--font-sans);text-transform:uppercase;letter-spacing:.11em;white-space:nowrap;transition:color .22s ease}
.nav-link:hover,.logout-button:hover{color:var(--text)!important;border:0!important;background:none!important}
.nav-link--primary,.nav-link--primary:hover{color:var(--text)!important}
.nav-link--primary::after{content:'';height:0.125rem;position:absolute;bottom:0;left:0;right:0;background-image: var(--mem-accent-gradient)}
.logout-form{margin:0}
.logout-button{cursor:pointer;color:var(--text-soft);font-weight:400}
.workspace-footer{display:flex;align-items:center;justify-content:space-between;gap:0.9375rem;margin-top:var(--mem-space-18);padding:1.875rem 0 0;border-top:var(--mem-border-hairline) solid var(--mem-rule)}
/* The card layout follows MEM's section architecture, not an app-store theme */
.card,.invoice-toolbar-panel,.project-card,.form__fieldset,.table-wrapper{background:transparent;border-radius:0;box-shadow:none;backdrop-filter:none}
.card{margin:0 0 3.75rem;padding:0;border:0}
.card-header{display:flex;align-items:baseline;justify-content:space-between;gap:var(--mem-space-5);padding:0 0 1.375rem;margin-bottom:1.625rem;border-bottom:var(--mem-border-hairline) solid var(--mem-rule)}
.card-title{margin:0;color:var(--text);font:500 clamp(1.625rem,3.5vw,3.25rem)/1.02 var(--font-display);letter-spacing:-.02em;text-transform:uppercase}
.card-meta,.client-field-label,.status-label,.cashflow-chip__label,.form-label,.invoice-toolbar-panel__label,.project-header,.proposal-detail-section-title{color:var(--text-muted);font:400 var(--mem-type-3xs)/1.5 var(--font-sans);letter-spacing:.12em;text-transform:uppercase}
.status-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:var(--mem-border-hairline) solid var(--mem-rule);border-bottom:var(--mem-border-hairline) solid var(--mem-rule)}
.status-pill{display:flex;flex-direction:column;justify-content:space-between;gap:1.375rem;padding:1.625rem clamp(var(--mem-space-3-5),2.2vw,2.375rem);border:0;border-right:var(--mem-border-hairline) solid var(--mem-rule);border-radius:0;background:transparent;box-shadow:none;min-width:0}
.status-pill:first-child{padding-left:0}
.status-pill:last-child{border-right:0}
.status-pill--accent{background:var(--accent);padding-left:clamp(var(--mem-space-4),2.2vw,2.375rem)}
.status-pill--accent .status-label,.status-pill--accent .status-value{color:var(--bg)}
.status-value{font:500 clamp(3.375rem,6.2vw,6.5rem)/.88 var(--font-display);letter-spacing:-.035em;color:var(--text);font-variant-numeric:tabular-nums}
.cashflow-summary{gap:0;border-top:var(--mem-border-hairline) solid var(--mem-rule);border-bottom:var(--mem-border-hairline) solid var(--mem-rule)}
.cashflow-chip,.cashflow-chip--total{background:transparent!important;border:0;border-right:var(--mem-border-hairline) solid var(--mem-rule);box-shadow:none;border-radius:0;padding:var(--mem-space-5) var(--mem-space-7)}
.cashflow-chip:first-child{padding-left:0}.cashflow-chip:last-child{border-right:0}
.cashflow-chip__value{font:500 clamp(1.4375rem,2.5vw,2.5rem)/1 var(--font-display);letter-spacing:-.03em;color:var(--text)}
.cashflow-chip--past .cashflow-chip__value{color:var(--accent)}
.chart-wrapper{border:var(--mem-border-hairline) solid var(--mem-rule);padding:var(--mem-space-4) var(--mem-space-2-5);margin-top:var(--mem-space-5)}
.grid{gap:clamp(1.5625rem,4vw,4.0625rem)}
.grid.grid--two-col{gap:clamp(1.5625rem,4vw,4.0625rem)}
/* Tables behave like an editorial financial statement */
.table-wrapper{overflow-x:auto;border-top:var(--mem-border-hairline) solid var(--mem-rule);border-bottom:var(--mem-border-hairline) solid var(--mem-rule);scrollbar-width:thin;scrollbar-color:var(--text-soft) var(--bg)}
table{background:transparent;font:300 var(--mem-type-xs)/1.5 var(--font-sans)}
thead{background:transparent}
th,td{padding:1.0625rem 0.9375rem;border-bottom:var(--mem-border-hairline) solid rgba(238,238,238,.10);vertical-align:middle}
th{color:var(--text-muted);font:500 var(--mem-type-3xs)/1.4 var(--font-sans);letter-spacing:.10em;text-transform:uppercase}
td{color:var(--text)}
tbody tr:nth-child(2n) td{background:transparent}
tbody tr:hover td{background:var(--accent-soft)}
.invoice-link,.table__cell-link,.client-contact a{color:var(--text);border-bottom:var(--mem-border-hairline) solid rgba(181,181,255,.45);text-decoration:none}
.invoice-link:hover,.table__cell-link:hover,.client-contact a:hover{color:var(--accent);border-color:var(--accent)}
/* Fields and call-to-actions remain recognisably MEM (rounded pills only for actions) */
.form__field input,.form__field select,.form__field textarea,.login-panel input,input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='hidden']),select,textarea{background:var(--bg-soft);color:var(--text);font:400 var(--mem-type-sm)/1.5 var(--font-sans);min-height:3.125rem;border:var(--mem-border-hairline) solid var(--mem-rule);border-radius:0;box-shadow:none;padding:0 var(--mem-space-3-5);border-radius: var(--mem-radius-search)}
.form__field input:focus,.form__field select:focus,.form__field textarea:focus,input:focus,select:focus,textarea:focus{outline:var(--mem-border-hairline) solid var(--accent);outline-offset:0;border-color:var(--accent)}
input::placeholder,textarea::placeholder{color:var(--text-soft)}
select option{color:var(--text);background:var(--bg)}
.form__fieldset{border:var(--mem-border-hairline) solid var(--mem-rule);padding:1.6875rem}
.form__fieldset legend{font:500 var(--mem-type-3xs)/1.5 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);padding:0 var(--mem-space-2)}
.btn,.nav-link--small,.form__actions button,.form__buttons--inline button{display:inline-flex;align-items:center;justify-content:center;min-height:2.9375rem;border:var(--mem-border-hairline) solid var(--mem-rule);border-radius:var(--mem-radius-pill);font:500 var(--mem-type-3xs)/1.3 var(--font-sans);letter-spacing:.12em;text-transform:uppercase;transition:color .25s var(--mem-ease),background .25s var(--mem-ease),border-color .25s var(--mem-ease)}
.btn{padding:0.8125rem 1.625rem;cursor:pointer}
.btn--primary{background:var(--text);color:var(--bg);border-color:var(--text)}
.btn--primary:hover{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.nav-link--small{background:transparent;color:var(--text);padding:0.5625rem 1.0625rem;border:var(--mem-border-hairline) solid var(--mem-rule)}
.nav-link--small:hover{background:var(--text);color:var(--bg);border-color:var(--text)}
.badge-status,.proposal-status,.badge-project{border-radius:var(--mem-radius-pill);background:transparent;padding:0.3125rem var(--mem-space-3);font:400 var(--mem-type-3xs)/1.3 var(--font-sans);letter-spacing:.07em;text-transform:uppercase;border:var(--mem-border-hairline) solid var(--mem-rule)}
.proposal-status--ready{color:#cfe7c0;border-color:rgba(207,231,192,.45)}
.badge-status--draft{color:var(--text-muted)}
.project-card__name,.client-name,.project-detail__name{font:500 clamp(1.5625rem,2.8vw,2.6875rem)/1.03 var(--font-display);letter-spacing:-.02em;text-transform:uppercase}
.proposal-line{border-radius:0;background:var(--bg-card);border:var(--mem-border-hairline) solid var(--mem-rule);padding:var(--mem-space-4-5)}
.proposal-detail-section-title{color:var(--accent)}
.eyebrow{font:500 var(--mem-type-3xs)/1.5 var(--font-sans);text-transform:uppercase;letter-spacing:.14em;color:var(--accent)}
.breadcrumb a:hover{color:var(--accent)}
/* Welcome screen, an intentionally distinct full-bleed composition */
body.login-body{background:var(--bg)!important;min-height:100svh;display:grid;place-items:center;padding:clamp(1.375rem,6vw,5.9375rem)}
.login-panel{position:relative;width:min(100%,45rem);padding:clamp(2.1875rem,5vw,4.6875rem);background:var(--bg-card);border:var(--mem-border-hairline) solid var(--mem-rule);border-radius:0;box-shadow:none}
.login-wordmark{display:inline-block;margin-bottom:clamp(3.125rem,8vw,7.1875rem)}
.login-panel h1{font:500 clamp(3.375rem,7vw,7rem)/.92 var(--font-display);letter-spacing:-.025em;text-transform:uppercase;margin:0.9375rem 0 1.5625rem}
.login-panel .muted{color:var(--text-muted);font:300 var(--mem-type-sm)/1.65 var(--font-sans)}
.login-panel form{margin-top:2.6875rem;display:grid;gap:1.0625rem}
.login-panel button{min-height:3.125rem;justify-self:start;min-width:10.625rem}
/* Tablet and mobile */
@media(max-width:78.125rem){
 header.app-header{align-items:stretch;flex-direction:column;gap:2.1875rem}
 nav.app-nav{width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:var(--mem-space-3);scrollbar-width:thin}
 nav.app-nav>*{flex:0 0 auto}
}
@media(max-width:50rem){
 .card{margin-bottom:var(--mem-space-12)}
 .card-header{align-items:flex-start;flex-direction:column;gap:var(--mem-space-2-5)}
 .grid,.grid.grid--two-col,.form--columns,.client-grid,.invoice-detail-toolbar{grid-template-columns:minmax(0,1fr)}
 .status-value{font-size:4rem}
 .status-pill{padding:1.4375rem var(--mem-space-3)}
 .status-pill:first-child{padding-left:0}
 .cashflow-summary{overflow-x:auto}
 .workspace-footer{flex-direction:column;align-items:start;gap:0.4375rem}
 .proposal-line{grid-template-columns:repeat(2,minmax(0,1fr))}
 .proposal-line .form__field:first-child{grid-column:1/-1}
}
@media(max-width:36.25rem){
 .workspace-wordmark{font-size:var(--mem-type-section)}
 header.app-header{padding-top:2.75rem;margin-bottom:2.8125rem}
 .app-avatar{height:2.8125rem;width:2.8125rem}
 .status-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .status-pill{min-height:9.0625rem;border-bottom:var(--mem-border-hairline) solid var(--mem-rule)}
 .status-pill:nth-child(2){border-right:0}
 .status-pill:nth-child(3),.status-pill:nth-child(4){border-bottom:0}
 .status-pill:nth-child(3){padding-left:0}
 .status-value{font-size:4rem}
 th,td{padding:var(--mem-space-3) 0.6875rem}
 .form__fieldset{padding:var(--mem-space-4-5)}
 .login-panel{padding:1.875rem var(--mem-space-6)}
 .login-panel h1{font-size:3.8125rem}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}

.workspace-wordmark img,.login-wordmark img{display:block;width:clamp(6.125rem,9vw,9.25rem);height:auto}

/* MEM COMPONENT CONSISTENCY V4 — common admin, sign-in and portal controls.
   Shared dimensions and keyboard semantics; keep page-specific colours intact. */
:is(.btn, .form__actions button, .form__buttons--inline button) {
  box-sizing: border-box;
  min-height: var(--mem-ui-button-height);
  padding-inline: var(--mem-button-padding-inline);
  border-radius: var(--mem-radius-button);
  font-size: var(--mem-ui-action-size);
  letter-spacing: var(--mem-ui-action-tracking);
  transition: background-color var(--mem-ui-interaction),
              border-color var(--mem-ui-interaction), color var(--mem-ui-interaction);
}
:is(.form-label, .client-field-label, .status-label) {
  font-size: var(--mem-ui-label-size);
  letter-spacing: var(--mem-track-label);
}
:is(.form__field input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
       .form__field select, .form__field textarea, .login-panel input:not([type=checkbox])) {
  box-sizing: border-box;
  min-height: var(--mem-ui-field-height);
  padding: var(--mem-ui-field-padding-y) var(--mem-ui-field-padding-x);
  border-radius: var(--mem-radius-field);
  font-size: var(--mem-ui-field-size);
}
:is(.badge-status, .badge-project, .proposal-status) {
  border-radius: var(--mem-radius-badge);
  padding: var(--mem-ui-badge-pad-y) var(--mem-ui-badge-pad-x);
  font-size: var(--mem-type-xs);
  letter-spacing: var(--mem-track-status);
}
:is(.table-wrapper table) :is(th, td) {
  padding: var(--mem-ui-table-pad-y) var(--mem-ui-table-pad-x);
}
:is(.btn, .form__actions button, .form__buttons--inline button,
       .form__field input, .form__field select, .form__field textarea,
       .login-panel input, .login-panel button, .portal-text-button,
       .badge-status--interactive):focus-visible {
  outline: var(--mem-ui-focus-outline) solid var(--mem-ui-focus-color);
  outline-offset: var(--mem-ui-focus-offset);
}
:is(.form__field input, .form__field textarea, .form__field select,
       .login-panel input)[aria-invalid="true"] {
  border-color: var(--mem-color-red-text);
}
:is(.btn, .form__actions button, .form__buttons--inline button):is(:disabled, [aria-disabled="true"]) {
  opacity: var(--mem-ui-disabled-opacity);
  cursor: not-allowed;
}
:is(.installment-modal__dialog) { border-radius: var(--mem-radius-dialog); }
@media (prefers-reduced-motion: reduce) {
  :is(.btn, .form__actions button, .form__buttons--inline button) { transition: none; }
}