/* MEM STUDIOS CSS CLEANUP v1: Phase 2 rules merged ahead of workspace UX */
/* Phase 2 additions only; existing MEM design tokens/layout remain the source of truth. */

.uw-rows {
  border-top: var(--mem-border-hairline) solid var(--mem-rule)
}

.uw-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.9375rem;
  padding: 1.1875rem 0;
  border-bottom: var(--mem-border-hairline) solid var(--mem-rule);
  color: var(--text);
  text-decoration: none
}

.uw-row:hover strong {
  color: var(--accent)
}

.uw-row strong {
  display: block;
  font: var(--mem-weight-medium) 0.875rem/1.4 var(--font-sans)
}

.uw-row small {
  display: block;
  color: var(--text-muted);
  font-size: var(--mem-type-2xs);
  margin-top: 0.3125rem
}

.uw-empty {
  color: var(--text-muted);
  font-size: var(--mem-type-xs);
  line-height: 1.7
}

.uw-empty {
  padding: 1.375rem 0
}

.uw-alert,
.uw-notice {
  padding: 0.9375rem var(--mem-space-5);
  border: var(--mem-border-hairline) solid var(--mem-rule);
  margin: 0 0 1.875rem;
  background: var(--bg-card)
}

.uw-alert {
  border-left: 0.1875rem solid #c37575
}

.uw-notice {
  border-left: 0.1875rem solid var(--accent)
}

.uw-filters {
  display: grid;
  grid-template-columns: minmax(12.5rem, 1fr) minmax(11.25rem, 15rem) auto;
  align-items: end;
  gap: var(--mem-space-4);
  margin: 0 0 1.875rem
}

.uw-filters label {
  display: grid;
  gap: 0.5625rem;
  color: var(--text-muted);
  font: var(--mem-weight-medium) 0.625rem/1.4 var(--font-sans);
  letter-spacing: .09em;
  text-transform: uppercase
}

.uw-availability-form {
  max-width: 50rem;
  grid-template-columns: repeat(2, minmax(0, 1fr))
}

.uw-availability-form label:has(textarea) {
  grid-column: 1/-1
}

.uw-back {
  margin-bottom: 2.1875rem
}

.uw-back a {
  color: var(--accent);
  text-decoration: none
}

@media(max-width:46.875rem) {
  .uw-filters {
    grid-template-columns: 1fr
  }

  .uw-availability-form {
    grid-template-columns: 1fr
  }

  .uw-availability-form label:has(textarea) {
    grid-column: auto
  }
}

/* MEM Studios workspace — UX layer (October 2026 redesign)
   Loaded after app.css, mem-tokens.css and mem-theme.css; workspace-motion.css follows.
   Same brand (Hubiron / Poppins / Instrument Serif, #121212 #eee #b5b5ff #610002);
   this file fixes structure and readability:
   - grouped sidebar instead of a 12-item header row, bottom tab bar on phones
   - 14–15px regular body text, 12px+ labels, muted text that passes 4.5:1
   - one big heading per page; section titles scaled down
*/
:root {
  --ws-bg: var(--mem-color-bg);
  --ws-side: var(--mem-color-sidebar);
  --ws-raise: var(--mem-color-surface);
  --ws-hover: var(--mem-color-hover);
  --ws-active: var(--mem-color-selected);
  --ws-line: var(--mem-color-border);
  --ws-line-strong: var(--mem-color-border-strong);
  --ws-text: var(--mem-color-text);
  --ws-muted: var(--mem-color-text-muted);
  --ws-faint: var(--mem-color-text-faint);
  --ws-lilac: var(--mem-color-lilac);
  --ws-lilac-ink: var(--mem-color-lilac-ink);
  --ws-red: var(--mem-color-red);
  --ws-red-text: var(--mem-color-red-text);
  --ws-red-tint: var(--mem-color-red-tint);
  --ws-green: var(--mem-color-success);
  --ws-sidebar-w: var(--mem-layout-sidebar);
  --text-muted: var(--mem-color-text-muted);
  --text-soft: var(--mem-color-text-faint);
}

/* ---------- Readability ---------- */
body {
  font: var(--mem-weight-regular) var(--mem-type-body)/var(--mem-leading-body) var(--mem-font-body)
}

.card-title {
  font-size: clamp(1.375rem, 2vw, var(--mem-type-h3)) !important;
  line-height: 1.05
}

.card-header {
  padding-bottom: var(--mem-space-3-5);
  margin-bottom: var(--mem-space-4-5)
}

.card {
  margin-bottom: 2.75rem
}

.card-meta,
.client-field-label,
.status-label,
.cashflow-chip__label,
.form-label,
.invoice-toolbar-panel__label,
.project-header,
th {
  font-size: var(--mem-type-xs) !important;
  letter-spacing: .06em !important
}

td,
table {
  font-size: var(--mem-type-body)
}

.form__field input,
.form__field select,
.form__field textarea,
input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='hidden']),
select,
textarea {
  font-size: var(--mem-type-body)
}

textarea {
  padding: var(--mem-space-3) var(--mem-space-3-5)
}

.btn,
.nav-link--small,
.form__actions button,
.form__buttons--inline button {
  font-size: var(--mem-type-xs);
  letter-spacing: var(--mem-track-label);
  min-height: 2.75rem
}

.status-value {
  font-size: clamp(2.75rem, 4.6vw, 4.75rem)
}

.ws-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap
}

.ws-skip {
  position: absolute;
  left: 0.75rem;
  top: -3.75rem;
  z-index: 50;
  background: var(--ws-text);
  color: var(--ws-bg);
  padding: var(--mem-space-2-5) var(--mem-space-4)
}

.ws-skip:focus {
  top: 0.75rem
}

/* ---------- Shell ---------- */
.ws-shell {
  display: flex;
  min-height: 100vh;
  min-height: 100svh
}

.ws-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  flex: 0 0 var(--ws-sidebar-w);
  width: var(--ws-sidebar-w);
  box-sizing: border-box;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1.625rem;
  padding: 1.625rem var(--mem-space-3-5) var(--mem-space-4-5);
  background: var(--ws-side);
  border-right: var(--mem-border-hairline) solid var(--ws-line);
  z-index: 40
}

.ws-sidebar__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--mem-space-3)
}

.ws-brand img {
  display: block;
  height: auto
}

.ws-sidebar .ws-sidebar__close {
  display: none
}

.ws-main-col {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column
}

.ws-main {
  flex: 1;
  width: 100%;
  max-width: var(--mem-layout-content-max);
  box-sizing: border-box;
  margin: 0 auto;
  padding: var(--mem-space-3) var(--mem-layout-gutter) var(--mem-space-10);
  display: flex;
  flex-direction: column;
  gap: var(--mem-layout-content-gap)
}

.ws-main-col .workspace-footer {
  width: 100%;
  max-width: var(--mem-layout-content-max);
  box-sizing: border-box;
  margin: var(--mem-space-6) auto 0;
  padding: var(--mem-space-2) var(--mem-layout-gutter) var(--mem-space-2);
  font-size: var(--mem-type-4xs);
  color: var(--mem-color-text)
}

.ws-topbar {
  display: flex;
  align-items: center;
  gap: var(--mem-space-4);
  width: 100%;
  max-width: var(--mem-layout-content-max);
  box-sizing: border-box;
  margin: 0 auto var(--mem-space-7);
  padding: var(--mem-layout-content-gap) var(--mem-layout-gutter) 0;
  min-height: var(--mem-control-height)
}

.ws-topbar__brand {
  display: none
}

.ws-topbar__context {
  display: flex;
  align-items: baseline;
  gap: var(--mem-space-2-5);
  min-width: 0;
  font-size: var(--mem-type-h5);
  color: var(--ws-muted);
  font-family: var(--mem-font-editorial)
}

.ws-topbar__section {
  color: var(--ws-muted)
}

.ws-topbar__sub:empty {
  display: none
}

.ws-topbar__sub {
  color: var(--ws-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.ws-topbar__sub::before {
  content: '/';
  margin-right: var(--mem-space-2-5);
  color: var(--ws-faint)
}

/* ---------- Sidebar nav ---------- */
.ws-nav {
  display: flex;
  flex-direction: column;
  gap: var(--mem-space-5)
}

.ws-nav__group {
  display: flex;
  flex-direction: column;
  gap: var(--mem-space-0-5)
}

.ws-nav__label {
  margin: 0 0 var(--mem-space-1-5);
  padding: 0 var(--mem-space-3);
  font-size: var(--mem-type-2xs);
  font-weight: var(--mem-weight-medium);
  letter-spacing: var(--mem-track-eyebrow);
  text-transform: uppercase;
  color: var(--ws-faint)
}

.ws-nav__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mem-space-2);
  min-height: var(--mem-control-height-sm);
  padding: 0 var(--mem-space-3);
  color: var(--ws-muted);
  text-decoration: none;
  border-radius: var(--mem-radius-sm);
  font-size: var(--mem-type-body);
  transition: background .15s ease, color .15s ease
}

.ws-nav__item {
  justify-content: flex-start
}

.ws-nav__icon {
  flex: none;
  display: block;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none
}

.ws-nav__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.ws-nav__item .ws-count {
  margin-left: auto
}

.ws-nav-symbols {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none
}

.ws-account__logout-icon {
  display: none
}

.ws-sidebar__collapse {
  width: 2rem;
  height: 2rem;
  flex: none
}

.ws-sidebar__collapse svg {
  transition: transform var(--mem-duration-fast, .2s) ease
}

.ws-sidebar__collapse:focus-visible {
  outline: var(--mem-ui-focus-outline, .125rem) solid var(--mem-color-lilac);
  outline-offset: .125rem
}

.ws-nav__item:hover {
  color: var(--ws-text);
  background: var(--ws-hover)
}

.ws-nav__item.is-active {
  color: var(--ws-text);
  background: var(--ws-active)
}

.ws-count {
  min-width: 1.375rem;
  height: 1.375rem;
  padding: 0 var(--mem-space-2);
  box-sizing: border-box;
  border-radius: var(--mem-radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--mem-type-2xs);
  font-weight: var(--mem-weight-medium);
  background: #2a2a40;
  color: #d4d4ff;
  white-space: nowrap
}

.ws-count--alert {
  background: var(--ws-red);
  color: var(--ws-red-tint)
}

.ws-avail {
  display: inline-flex;
  align-items: center;
  gap: var(--mem-space-1-5);
  font-size: var(--mem-type-xs);
  color: var(--ws-muted)
}

.ws-avail__dot {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: var(--mem-radius-circle);
  background: var(--ws-faint)
}

.ws-avail--open {
  color: var(--ws-green)
}

.ws-avail--open .ws-avail__dot {
  background: #9fd88a;
  box-shadow: 0 0 0 .2rem rgba(159, 216, 138, .16)
}

.ws-avail--limited {
  color: var(--mem-color-warning)
}

.ws-avail--limited .ws-avail__dot {
  background: #e8bd5a;
  box-shadow: 0 0 0 .2rem rgba(232, 189, 90, 0.297)
}

.ws-avail--booked {
  color: var(--ws-red-text)
}

.ws-avail--booked .ws-avail__dot {
  background: #ff8a80;
  box-shadow: 0 0 0 .2rem rgba(255, 139, 128, 0.288)
}

.ws-sidebar__foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--mem-space-0-5);
  padding-top: var(--mem-space-3-5);
  border-top: var(--mem-border-hairline) solid var(--ws-line)
}

.ws-account {
  display: flex;
  align-items: center;
  gap: var(--mem-space-2-5);
  padding: var(--mem-space-3) var(--mem-space-3) 0
}

.ws-account__avatar {
  width: 2rem;
  height: 2rem;
  flex: none;
  border-radius: var(--mem-radius-circle);
  overflow: hidden;
  background: var(--ws-lilac);
  color: var(--ws-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--mem-type-sm);
  font-weight: 600
}

.ws-account__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.ws-account__name {
  flex: 1;
  min-width: 0;
  font-size: var(--mem-type-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.ws-account form {
  margin: 0
}

.ws-link-btn {
  background: none;
  border: 0;
  padding: var(--mem-space-2) var(--mem-space-1);
  min-height: 2.25rem;
  color: var(--ws-muted);
  font: 400 0.75rem var(--font-sans);
  cursor: pointer
}

.ws-link-btn:hover {
  color: var(--ws-text)
}

/* New menu */
.ws-new {
  position: relative
}

.ws-new>summary {
  list-style: none;
  width: 100%;
  box-sizing: border-box
}

.ws-new>summary::-webkit-details-marker {
  display: none
}

.ws-new__menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.375rem);
  z-index: 45;
  display: flex;
  flex-direction: column;
  padding: var(--mem-space-1-5);
  background: #1e1e1e;
  border: var(--mem-border-hairline) solid var(--ws-line-strong);
  box-shadow: 0 1.125rem 2.5rem rgba(0, 0, 0, .45)
}

.ws-new__menu a {
  display: flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0 var(--mem-space-3);
  color: var(--ws-text);
  text-decoration: none;
  font-size: var(--mem-type-body)
}

.ws-new__menu a:hover {
  background: var(--ws-active);
  color: var(--ws-text)
}

/* ---------- Buttons & badges ---------- */
.ws-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mem-space-2);
  text-transform: uppercase;
  padding: 0 var(--mem-control-padding-x);
  box-sizing: border-box;
  border: var(--mem-border-hairline) solid var(--ws-line-strong);
  background: transparent;
  color: var(--ws-text);
  font: var(--mem-weight-medium) 0.65rem/1 var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s ease, border-color .2s ease, color .2s ease
}

.ws-btn:hover {
  border-color: var(--ws-text);
  color: var(--ws-text)
}

.ws-btn--primary {
  background: var(--ws-text);
  border-color: var(--ws-text);
  color: var(--ws-bg);
  font-weight: 600
}

.ws-btn--primary:hover {
  background: var(--ws-lilac);
  border-color: var(--ws-lilac);
  color: var(--ws-bg)
}

.ws-btn--sm {
  padding: 0 0.9375rem;
  font-size: var(--mem-type-xs)
}

.ws-btn--danger {
  color: var(--ws-red-text);
  border-color: rgba(255, 180, 173, .4)
}

.ws-btn--danger:hover {
  color: var(--ws-red-tint);
  border-color: var(--ws-red-text);
  background: rgba(97, 0, 2, .35)
}

/* Button icon from the shared sprite (templates/_icons.html → btn_icon). Sized to the label. */
.ws-btn__icon {
  flex: none;
  width: 1.3em;
  height: 1.3em;
  margin-inline-start: -0.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round
}

.ws-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: var(--mem-border-hairline) solid var(--ws-line-strong);
  background: transparent;
  color: var(--ws-text);
  cursor: pointer
}

.ws-icon-btn:hover {
  border-color: var(--ws-text)
}

.ws-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--mem-space-1-5);
  font-weight: var(--mem-weight-medium);
  line-height: 1.3;
  white-space: nowrap;
  text-transform: none;  /* labels are written as they should read, even inside tables */
  border: var(--mem-border-hairline) solid var(--ws-line-strong);
  color: var(--ws-text)
}

.ws-badge--overdue {
  background: var(--ws-red);
  border-color: var(--ws-red);
  color: var(--ws-red-tint) !important
}

.ws-badge--pending {
  border-color: rgba(181, 181, 255, .6);
  color: #d4d4ff !important
}

.ws-badge--paid {
  border-color: rgba(159, 216, 138, .5);
  color: var(--ws-green) !important
}

.ws-badge--draft {
  border-style: dashed;
  color: #bdbdbd !important
}

.ws-badge--cancelled {
  color: var(--ws-faint) !important;
  text-decoration: line-through
}

.ws-badge--enquiry {
  background: var(--ws-lilac);
  border-color: var(--ws-lilac);
  color: var(--ws-bg) !important
}

.ws-badge--expired {
  border-color: color-mix(in srgb, var(--mem-color-warning) 55%, transparent);
  color: var(--mem-color-warning) !important
}

.ws-badge--archived {
  border-color: var(--ws-line);
  color: var(--ws-faint) !important
}

/* A badge that is also a button (e.g. change an installment's status). */
/* :where() keeps this at zero specificity so status colours (e.g. Overdue's fill) still win. */
:where(button.ws-badge) {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  font-family: inherit;
  background-color: transparent;
}

.ws-badge--interactive {
  cursor: pointer;
  transition: border-color var(--mem-ui-interaction), background-color var(--mem-ui-interaction);
}

.ws-badge--interactive:hover {
  border-color: currentColor;
}

.ws-badge--interactive:not(.ws-badge--overdue, .ws-badge--enquiry):hover {
  background-color: var(--mem-ui-row-hover);
}

.ws-badge--interactive:focus-visible {
  outline: var(--mem-ui-focus-outline) solid var(--mem-ui-focus-color);
  outline-offset: var(--mem-ui-focus-offset);
}

/* ---------- Page header ---------- */
.ws-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--mem-space-5);
  margin: 0 0 var(--mem-layout-page-head-gap);
  position: relative;
  z-index: 2
}

.ws-page-head__text {
  display: flex;
  flex-direction: column;
  gap: var(--mem-space-2-5);
  margin: var(--mem-space-6) 0;
  min-width: 0
}

.ws-page-head__eyebrow {
  margin: 0;
  font-size: .65rem;
  color: var(--ws-muted);
  letter-spacing: .1rem;
  font-weight: var(--mem-weight-medium);
  text-transform: uppercase
}

.ws-page-head h1 {
  margin: 0;
  font: var(--mem-weight-medium) var(--mem-type-page-title)/var(--mem-leading-display) var(--mem-font-editorial);
  text-transform: capitalize;
  letter-spacing: -.01em;
  color: var(--ws-text);
  overflow-wrap: anywhere
}

.ws-page-head__lede {
  margin: 0;
  font-size: var(--mem-type-body-lg);
  color: var(--ws-muted)
}

.ws-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mem-space-2-5);
  margin: var(--mem-space-6) 0;
  align-items: center
}

.ws-section {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--mem-layout-section-gap)
}

.ws-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--mem-space-4);
  padding-bottom: var(--mem-space-3-5)
}

.ws-section__head h2 {
  margin: 0;
  font: var(--mem-weight-medium) var(--mem-type-section)/1 var(--mem-font-display);
  text-transform: uppercase;
  letter-spacing: var(--mem-track-subtle);
  color: var(--ws-text)
}

.ws-section__head a,
.ws-section__head span {
  font-size: var(--mem-type-sm);
  color: var(--ws-muted)
}

.ws-section__head a {
  color: var(--ws-muted);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: var(--mem-track-action);
  font-size: var(--mem-type-2xs);
  font-weight: var(--mem-weight-medium)
}

.ws-section__head a:hover {
  color: var(--text)
}

.ws-section__head a>svg {
  vertical-align: middle;
  margin: -0.125em 0.275rem 0 0
}

.ws-empty {
  padding: var(--mem-space-7) 0;
  margin: 0;
  color: var(--ws-muted);
  font-size: var(--mem-type-body);
  border-top: var(--mem-border-hairline) solid var(--ws-line);
  border-bottom: var(--mem-border-hairline) solid var(--ws-line)
}

.ws-notice {
  padding: var(--mem-space-3-5) var(--mem-space-4);
  border: var(--mem-border-hairline) solid var(--ws-line-strong);
  color: var(--ws-muted);
  font-size: var(--mem-type-body)
}

/* ---------- Today ---------- */
.today-item {
  display: flex;
  align-items: center;
  gap: var(--mem-space-4-5);
  flex-wrap: wrap;
  padding: var(--mem-space-4-5) var(--mem-space-5);
  border-bottom: var(--mem-border-hairline) solid var(--ws-line)
}

.today-item:first-of-type {
  border-top: var(--mem-border-hairline) solid var(--ws-line)
}

.today-item--overdue {
  background: #1d1414;
  border: var(--mem-border-hairline) solid rgba(255, 140, 130, .28)
}

.today-item--overdue+.today-item--overdue {
  border-top: 0
}

.today-item__body {
  flex: 1 1 17.5rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1875rem
}

.today-item__title {
  font-size: var(--mem-type-body-lg);
  font-weight: var(--mem-weight-medium);
  color: var(--ws-text);
  text-decoration: none
}

a.today-item__title:hover {
  color: var(--ws-lilac)
}

.today-item__detail {
  font-size: var(--mem-type-sm);
  color: var(--ws-muted)
}

.today-item__amount {
  font: var(--mem-weight-medium) 1.625rem/1 var(--font-display);
  font-variant-numeric: tabular-nums
}

.today-item__actions {
  display: flex;
  gap: var(--mem-space-2);
  flex-wrap: wrap
}

.today-item__actions form {
  margin: 0
}

.today-clear {
  display: flex;
  align-items: center;
  gap: var(--mem-space-3-5);
  padding: 1.375rem var(--mem-space-5);
  border: var(--mem-border-hairline) solid var(--ws-line);
  color: var(--ws-muted);
  font-size: var(--mem-type-h5);
  font-family: var(--font-serif);
  line-height: var(--mem-leading-tight);
  border-radius: var(--mem-radius-md)
}

.today-clear strong {
  color: var(--ws-text);
  font-weight: var(--mem-weight-medium)
}

.money-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
  gap: .8rem
}

.money-tile {
  background: var(--bg-soft);
  box-shadow: #00000029 0 0.125rem 0.3125rem;
  border-top: .2px solid #eee3;
  border-bottom: var(--mem-border-hairline) solid #eeeeee05;
  border-left: .2px solid #eee3;
  border-radius: var(--mem-radius-panel);
  padding: 1.375rem;
  display: flex;
  flex-direction: column;
  gap: var(--mem-space-3-5);
  text-decoration: none;
  text-transform: uppercase;
  color: var(--ws-text);
  transition: filter var(--mem-ui-interaction), transform var(--mem-ui-interaction)
}

a.money-tile:hover {
  transform: translateY(-2px)
}

.money-tile__label,
.money-tile__note {
  color: var(--ws-text);
  letter-spacing: .07rem;
  font-weight: var(--mem-weight-medium);
  text-transform: uppercase;
  font-size: .65rem
}

.money-tile__value {
  font: var(--mem-weight-medium) clamp(2.125rem, 3.2vw, 2.75rem)/.9 var(--font-display);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums
}

.money-tile__note {
  border-top: var(--mem-border-hairline) solid var(--ws-line);
  padding-top: var(--mem-field-padding-block);
  border-top: var(--mem-border-hairline) solid var(--mem-color-border);
  padding-top: var(--mem-space-3)
}

.money-tile--alert .money-tile__label,
.money-tile--alert .money-tile__value {
  color: var(--ws-red-text)
}

.money-tile--accent {
  background-image: var(--mem-accent-gradient);
  border-left-color: #f57171a3;
  border-bottom-width: 0
}

a.money-tile--accent:hover {
  filter: saturate(0.6);
}

.today-cols {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mem-space-20)
}

.today-cols>.ws-section {
  flex: 3 1 26.25rem;
  min-width: 0
}

.today-cols>.ws-section--narrow {
  flex: 2 1 18.75rem
}

.ws-row {
  display: flex;
  align-items: center;
  gap: var(--mem-space-4);
  padding: var(--mem-space-4) var(--mem-space-1);
  border-top: var(--mem-border-hairline) solid var(--ws-line);
  text-decoration: none;
  color: var(--ws-text)
}

.ws-row:last-child {
  border-bottom: var(--mem-border-hairline) solid var(--ws-line)
}

.ws-row:hover {
  background: #171717;
  color: var(--ws-text)
}

.ws-row__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: var(--mem-leading-tight);
  gap: var(--mem-space-1-5)
}

.ws-row__main strong,
.inv-row__client strong,
.hub-list__main strong {
  font-size: var(--mem-type-sm);
  font-weight: var(--mem-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--mem-track-label)
}

.ws-row__main small {
  font-size: var(--mem-type-xs);
  color: var(--ws-muted)
}

.ws-row__num {
  font: var(--mem-weight-medium) 1.75rem/1 var(--font-display);
  font-variant-numeric: tabular-nums
}

.ws-progress {
  width: 9.375rem;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--mem-space-1-5);
  font-size: var(--mem-type-2xs);
  color: var(--ws-muted)
}

.ws-progress__track {
  display: block;
  height: 0.25rem;
  border-radius: var(--mem-radius-pill);
  overflow: hidden;
  background: #2a2a2a
}

.ws-progress__fill {
  display: block;
  height: var(--mem-space-1);
  background-image: var(--mem-accent-gradient);
  border-radius: var(--mem-radius-pill)
}

/* ---------- Invoices list ---------- */
.inv-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--mem-space-3-5)
}

.inv-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mem-space-1-5)
}

.inv-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--mem-space-2);
  min-height: 2.5rem;
  padding: 0 var(--mem-space-4);
  border-radius: var(--mem-radius-pill);
  border: var(--mem-border-hairline) solid var(--ws-line-strong);
  color: #cfcfcf;
  text-decoration: none;
  font-size: var(--mem-type-sm);
  font-weight: var(--mem-weight-medium)
}

.inv-tab:hover {
  border-color: var(--ws-text);
  color: var(--ws-text)
}

.inv-tab.is-active {
  background: var(--ws-text);
  border-color: var(--ws-text);
  color: var(--ws-bg)
}

.inv-tab span {
  opacity: .7;
  font-variant-numeric: tabular-nums
}

.inv-search {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mem-space-2-5);
  margin: 0
}

.inv-search__field {
  position: relative;
  display: flex;
  align-items: center
}

.inv-search__field svg {
  position: absolute;
  left: 0.875rem;
  pointer-events: none
}

.inv-search input[type=search] {
  width: 16.25rem;
  max-width: 100%;
  min-height: 2.75rem !important;
  padding-left: var(--mem-space-10) !important
}

.inv-search select {
  min-height: 2.75rem !important
}

.inv-summary {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  padding: var(--mem-space-4-5) 0;
  border-top: var(--mem-border-hairline) solid var(--ws-line);
  border-bottom: var(--mem-border-hairline) solid var(--ws-line)
}

.inv-summary div {
  display: flex;
  flex-direction: column;
  gap: var(--mem-space-1-5)
}

.inv-summary span {
  font-size: var(--mem-type-3xs);
  font-weight: var(--mem-weight-medium);
  letter-spacing: 0.07rem;
  text-transform: uppercase;
  color: var(--ws-text);
  padding-bottom: var(--mem-space-2);
  border-bottom: var(--mem-border-hairline) solid var(--mem-color-border);
  margin-bottom: var(--mem-space-3)  
}

.inv-summary strong {
  font: var(--mem-weight-medium) 1.875rem/1 var(--font-display);
  font-variant-numeric: tabular-nums
}

.inv-table {
  overflow-x: auto;
  border-bottom: var(--mem-border-hairline) solid var(--ws-line)
}

.inv-row {
  display: grid;
  grid-template-columns: 9.375rem minmax(12.5rem, 1.6fr) 6.25rem 10.625rem 7.5rem minmax(11.25rem, auto);  /* last column fits "Awaiting payment" */
  align-items: center;
  gap: var(--mem-space-4);
  min-width: 56.25rem;
  min-height: 4rem;
  padding: 0 var(--mem-space-3-5);
  border-top: var(--mem-border-hairline) solid var(--ws-line);
  text-decoration: none;
  color: var(--ws-text);
  font-size: var(--mem-type-sm)
}

a.inv-row:hover {
  background: #181818;
  color: var(--ws-text)
}

.inv-row--head {
  min-height: 2.75rem;
  border-top: 0;
  font-size: var(--mem-type-3xs);
  font-weight: var(--mem-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--mem-track-action);
  color: var(--ws-muted)
}

.inv-row__num {
  font-variant-numeric: tabular-nums;
  color: #cfcfcf
}

.inv-row__client {
  display: flex;
  flex-direction: column;
  gap: var(--mem-space-0-5);
  min-width: 0
}

.inv-row__client small {
  font-size: var(--mem-type-sm);
  color: var(--ws-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.inv-row__muted {
  color: #cfcfcf
}

.inv-row__late {
  color: var(--ws-red-text);
  font-weight: var(--mem-weight-medium)
}

.inv-row__amount {
  text-align: right;
  font-weight: var(--mem-weight-medium);
  font-variant-numeric: tabular-nums
}

.inv-row__amount small {
  display: block;
  font-size: var(--mem-type-xs);
  font-weight: var(--mem-weight-regular);
  color: var(--ws-muted)
}

/* ---------- Invoice detail ---------- */
.invd-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mem-space-2-5);
  font-size: var(--mem-type-h5);
  font-family: var(--mem-font-editorial);
  color: var(--ws-muted)
}

.invd-crumbs a {
  color: var(--ws-muted);
  text-decoration: none
}

.invd-crumbs a:hover {
  color: var(--ws-text)
}

.invd-crumbs [aria-current] {
  color: var(--ws-text)
}

.invd-more {
  position: relative
}

.invd-more>summary {
  list-style: none
}

.invd-more>summary::-webkit-details-marker {
  display: none
}

.invd-more__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.375rem);
  z-index: 30;
  min-width: 13.75rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--mem-space-1-5);
  background: var(--ws-raise);
  border-radius: var(--mem-radius-md);
  border: var(--mem-border-hairline) solid var(--ws-line-strong);
  box-shadow: 0 1.125rem 2.5rem rgba(0, 0, 0, .45)
}

.invd-more__menu a,
.invd-more__menu button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 2.5rem;
  padding: 0 var(--mem-space-3);
  background: none;
  border: 0;
  color: var(--ws-text);
  text-decoration: none;
  font: 400 0.875rem var(--font-sans);
  text-align: left;
  cursor: pointer
}

.invd-more__menu a:hover,
.invd-more__menu button:hover {
  background: var(--ws-active)
}

.invd-more__menu a,
.invd-more__menu button {
  gap: var(--mem-space-2)
}

.invd-more__menu svg {
  flex-shrink: 0
}

.invd-more__note {
  max-width: 16rem;
  margin: 0;
  padding: var(--mem-space-2) var(--mem-space-3);
  color: var(--ws-muted);
  font-size: var(--mem-type-xs);
  line-height: var(--mem-leading-tight)
}

.invd-more__menu form {
  margin: 0;
  width: 100%
}

/* Menus open to the left of their button (so they never run off the right edge).
   workspace-ux.js adds --start when that would slide under the sidebar. */
.invd-more--start .invd-more__menu {
  left: 0;
  right: auto
}

.invd-more__menu {
  max-width: calc(100vw - 2rem)
}

.invd-more__menu :is(a, button) {
  white-space: nowrap
}

.invd-more__menu .is-danger {
  color: var(--ws-red-text)
}

.invd-more__menu hr {
  align-self: stretch;  /* the menu is a flex column aligned to the start; without this the line has no width */
  border: 0;
  border-top: var(--mem-border-hairline) solid var(--ws-line);
  margin: var(--mem-space-1-5) 0
}

/* Dropdown items (the "…" menus and the sidebar "New" menu): icon + label, same look everywhere. */
.ws-new__menu {
  background: var(--ws-raise);
  border-radius: var(--mem-radius-md)
}

.ws-new__menu a {
  gap: var(--mem-space-2);
  font: 400 0.875rem var(--font-sans)
}

:is(.invd-more__menu, .ws-new__menu) .ws-btn__icon {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  color: var(--ws-muted);
  transition: color var(--mem-ui-interaction)
}

:is(.invd-more__menu, .ws-new__menu) :is(a, button):hover .ws-btn__icon {
  color: var(--ws-text)
}

.invd-more__menu .is-danger .ws-btn__icon,
.invd-more__menu .is-danger:hover .ws-btn__icon {
  color: currentColor
}

.invd-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: var(--mem-border-hairline) solid var(--ws-line);
  border-bottom: var(--mem-border-hairline) solid var(--ws-line)
}

.invd-step {
  padding: var(--mem-space-4) var(--mem-space-4) var(--mem-space-4) 0;
  display: flex;
  flex-direction: column;
  gap: var(--mem-space-1-5);
  margin-top: -0.0625rem;
  border-top: var(--mem-border-strong) solid transparent
}

.invd-step+.invd-step {
  padding-left: var(--mem-space-4)
}

.invd-step span {
  font-size: var(--mem-type-sm);
  color: var(--ws-muted)
}

.invd-step strong {
  font-size: var(--mem-type-body);
  font-weight: var(--mem-weight-medium)
}

.invd-step.is-done {
  border-top-color: transparent;
  background: linear-gradient(90deg, var(--mem-color-red-light), var(--ws-lilac)) no-repeat;
  background-origin: border-box;
  background-size: 400% var(--mem-border-strong);
  background-position: var(--step-pos, 0%) 0
}

.invd-step:nth-child(2) { --step-pos: 33.333% }
.invd-step:nth-child(3) { --step-pos: 66.667% }
.invd-step:nth-child(4) { --step-pos: 100% }

.invd-step.is-late {
  border-top-color: #ff8a80
}

.invd-step.is-late strong {
  color: var(--ws-red-text)
}

.invd-step.is-muted strong {
  color: var(--ws-faint)
}

.invd-layout {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mem-space-10);
  align-items: flex-start
}

.invd-doc {
  flex: 3 1 30rem;
  min-width: 0;
  background: var(--bg-soft);
  box-shadow: #00000029 0 0.125rem 0.3125rem;
  border-top: .2px solid #eee3;
  border-bottom: var(--mem-border-hairline) solid #eeeeee05;
  border-left: .2px solid #eee3;
  border-radius: var(--mem-radius-panel);
  padding: clamp(1.375rem, 3vw, 2.75rem);
  display: flex;
  flex-direction: column;
  gap: 1.875rem
}

.invd-doc__top {
  display: flex;
  justify-content: space-between;
  gap: var(--mem-space-5);
  flex-wrap: wrap
}

.invd-doc__ref {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: var(--mem-space-0-5);
  font-size: var(--mem-type-sm);
  color: var(--ws-muted)
}

.invd-doc__ref strong {
  color: var(--ws-text);
  font-weight: var(--mem-weight-medium)
}

.invd-parties {
  display: flex;
  gap: var(--mem-space-10);
  flex-wrap: wrap;
  font-size: var(--mem-type-xs)
}

.invd-parties>div {
  display: flex;
  flex-direction: column;
  gap: var(--mem-space-0-5);
  min-width: 0
}

.invd-parties strong {
  font-weight: var(--mem-weight-medium)
}

.invd-parties span {
  color: var(--ws-muted);
  overflow-wrap: anywhere
}

.invd-label {
  margin: 0 0 var(--mem-space-1);
  font-size: var(--mem-type-xs);
  font-weight: var(--mem-weight-medium);
  letter-spacing: var(--mem-track-action);
  text-transform: uppercase;
  color: var(--ws-muted)
}

.invd-items {
  overflow-x: auto
}

.invd-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.75rem 6rem 3.25rem 6.5rem;
  gap: var(--mem-space-4);
  min-width: 32.5rem;
  padding: var(--mem-space-3-5) 0;
  font-size: var(--mem-type-body);
  border-bottom: var(--mem-border-hairline) solid rgba(238, 238, 238, .08)
}

.invd-line--head {
  padding: var(--mem-space-2-5) 0;
  font-size: var(--mem-type-xs);
  color: var(--ws-muted);
  letter-spacing: var(--mem-track-action);
  font-weight: var(--mem-weight-medium);
  text-transform: uppercase;
  border-bottom-color: rgba(238, 238, 238, .14)
}

.invd-line>:not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums
}

.invd-line small {
  display: block;
  color: var(--ws-muted);
  font-size: var(--mem-type-sm)
}

.invd-line ul {
  margin: var(--mem-space-1-5) 0 0;
  padding-left: var(--mem-space-4-5);
  color: var(--ws-muted);
  font-size: var(--mem-type-sm)
}

.invd-totals {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--mem-space-1-5);
  font-size: var(--mem-type-xs);
  color: var(--ws-muted)
}

.invd-totals__grand {
  display: flex;
  align-items: baseline;
  gap: var(--mem-space-6);
  margin-top: var(--mem-space-2);
  color: var(--ws-text)
}

.invd-totals__grand strong {
  font: var(--mem-weight-medium) 2.125rem/1 var(--font-display);
  font-variant-numeric: tabular-nums
}

.invd-notes {
  font-size: var(--mem-type-body);
  color: var(--ws-muted);
  white-space: pre-line
}

.invd-side {
  flex: 2 1 18.75rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.875rem
}

.invd-side h2 {
  margin: 0 0 var(--mem-space-3);
  font-size: var(--mem-type-xs);
  font-weight: var(--mem-weight-medium);
  letter-spacing: var(--mem-track-eyebrow);
  text-transform: uppercase;
}

.invd-kv {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--mem-space-4);
  padding: var(--mem-space-2-5) 0;
  border-top: var(--mem-border-hairline) solid rgba(238, 238, 238, .08);
  font-size: var(--mem-type-xs)
}

.invd-kv>:first-child {
  color: var(--ws-muted);
  font-weight: var(--mem-weight-medium);
  font-size: var(--mem-type-xs)
}

.invd-kv a {
  overflow-wrap: anywhere;
  color: var(--ws-text);
  font-weight: var(--mem-weight-medium)
}

.invd-kv .is-late {
  color: var(--ws-red-text);
  font-weight: var(--mem-weight-medium)
}

.invd-kv .is-paid {
  color: var(--ws-green)
}

/* PDF download: theme switch and button on one line. */
.invd-pdf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mem-space-2-5);
  margin: 0
}

.invd-pdf .invd-theme {
  margin: 0
}

.invd-pdf .ws-btn {
  flex: 1 1 12rem
}

.invd-side.enq-version>:last-child {
  border-top: var(--mem-border-hairline) solid rgba(238, 238, 238, .08);
  padding-top: var(--mem-space-6)
}

/* Side-panel actions: equal-width buttons on a grid instead of a ragged stack. */
.invd-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--mem-space-2-5);
  margin-top: var(--mem-space-3)
}

.invd-actions form {
  display: contents
}

.invd-actions .ws-btn {
  width: 100%
}

.invd-note {
  margin: var(--mem-space-3) 0 0;
  font-size: var(--mem-type-xs);
  line-height: 1.5;
  color: var(--ws-muted)
}

/* ---------- Enquiry page (uses the invoice layout: document + side panel) ---------- */
.enq-doc {
  gap: var(--mem-space-8)
}

.enq-doc__label {
  margin: 0 0 var(--mem-space-3);
  font-size: var(--mem-type-xs);
  font-weight: var(--mem-weight-medium);
  letter-spacing: var(--mem-track-eyebrow);
  text-transform: uppercase
}

.enq-message {
  margin: 0;
  padding: 0 0 0 var(--mem-space-5);
  font: var(--mem-weight-regular) clamp(1.125rem, 1.6vw, 1.375rem)/1.3 var(--mem-font-editorial);
  color: var(--ws-text);
  background: var(--ws-active);
  padding: var(--mem-space-5) var(--mem-space-7);
  border-radius: var(--mem-radius-sm);
  position: relative;
  white-space: pre-line;
  overflow-wrap: anywhere
}

.enq-message:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0.125rem;
  height: 100%;
  background: var(--mem-accent-gradient)
}

.enq-value {
  text-align: right;
  white-space: pre-line;
  overflow-wrap: anywhere
}

.invd-kv--stack {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--mem-space-1-5)
}

.invd-kv--stack .enq-value {
  text-align: left
}

.invd-kv a .ws-btn__icon {
  width: 1em;
  height: 1em;
  margin: 0 var(--mem-space-1-5) -0.125em 0;
  vertical-align: baseline
}

.enq-form {
  display: flex;
  flex-direction: column;
  gap: var(--mem-space-4)
}

.enq-form .pf-field select,
.enq-form .pf-field input,
.enq-form .pf-field textarea {
  width: 100%
}

.enq-form__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--mem-space-2-5)
}

.enq-form__main {
  grid-column: 1 / -1
}

.invd-kv--first {
  border-top: 0;
  padding-top: 0
}

.invd-theme {
  display: inline-flex;
  border: var(--mem-border-hairline) solid var(--ws-line-strong);
  border-radius: var(--mem-radius-pill);
  padding: 0.1875rem
}

.invd-theme label {
  position: relative;
  cursor: pointer
}

.invd-theme input {
  position: absolute;
  opacity: 0;
  pointer-events: none
}

.invd-theme span {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0 var(--mem-space-3-5);
  border-radius: var(--mem-radius-pill);
  font-size: var(--mem-type-sm);
  color: var(--ws-muted)
}

.invd-theme input:checked+span {
  background: var(--ws-text);
  font-weight: var(--mem-weight-medium);
  color: var(--ws-bg)
}

.invd-theme input:focus-visible+span {
  outline: var(--mem-border-strong) solid var(--ws-lilac);
  outline-offset: 0.125rem
}

.invd-danger {
  border-top: var(--mem-border-hairline) solid var(--ws-line);
  padding-top: var(--mem-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--mem-space-2-5)
}

.invd-danger p {
  margin: 0;
  font-size: var(--mem-type-sm);
  color: var(--ws-muted)
}

/* ---------- Tab bar & drawer (phones) ---------- */
.ws-tabbar {
  display: none
}

.ws-scrim {
  display: none
}

@media (max-width:56.25rem) {
  .ws-shell {
    display: block
  }

  .ws-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    height: auto;
    width: min(86vw, 18.75rem);
    transform: translateX(-102%);
    transition: transform .25s var(--mem-ease, ease);
    box-shadow: none
  }

  .ws-sidebar .ws-sidebar__close {
    display: inline-flex
  }

  .ws-nav-open .ws-sidebar {
    transform: none;
    box-shadow: 1.5rem 0 3.75rem rgba(0, 0, 0, .6)
  }

  .ws-nav-open .ws-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 35;
    background: rgba(0, 0, 0, .55)
  }

  .ws-topbar {
    padding-top: var(--mem-space-4-5)
  }

  .ws-topbar__brand {
    display: block
  }

  .ws-topbar__context {
    display: none
  }

  .ws-main {
    padding: var(--mem-space-2) var(--mem-layout-gutter) var(--mem-space-7)
  }

  .ws-main-col .workspace-footer {
    padding: var(--mem-space-5) var(--mem-layout-gutter) 6.875rem;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--mem-space-1-5)
  }

  .ws-tabbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    padding: var(--mem-space-1) var(--mem-space-1-5) calc(var(--mem-space-2) + env(safe-area-inset-bottom));
    background: var(--ws-side);
    border-top: var(--mem-border-hairline) solid var(--ws-line-strong)
  }

  .ws-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--mem-space-1);
    min-height: 3.5rem;
    padding: 0;
    background: none;
    border: 0;
    color: var(--ws-muted);
    font: 400 0.6875rem var(--font-sans);
    text-decoration: none;
    cursor: pointer
  }

  .ws-tab.is-active {
    color: var(--ws-text)
  }

  .ws-page-head h1 {
    font-size: clamp(2rem, 9vw, 2.75rem)
  }

  .today-item {
    padding: var(--mem-space-4)
  }

  .today-item__actions {
    width: 100%
  }

  .today-item__actions .ws-btn {
    flex: 1
  }

  .invd-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .invd-step:nth-child(3) {
    padding-left: 0
  }

  .inv-search input[type=search] {
    width: 100%
  }

  .inv-search,
  .inv-search__field {
    flex: 1 1 13.75rem
  }
}

@media (max-width:35rem) {
  .ws-progress {
    width: 6.875rem
  }

  .money-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .money-tile {
    padding: var(--mem-space-4);
    gap: var(--mem-space-2-5)
  }

  .money-tile__value {
    font-size: 1.625rem
  }

  .ws-section__head span {
    display: none
  }

  .ws-section__head h2 {
    font-size: var(--mem-type-h5)
  }
}

@media (prefers-reduced-motion:reduce) {
  .ws-sidebar {
    transition: none
  }
}

@media print {

  .ws-sidebar,
  .ws-tabbar,
  .ws-topbar,
  .workspace-footer {
    display: none !important
  }
}

/* =====================================================================
   Connected pages (client & project hubs, lists, quote form, search, toasts)
   Follows the Oct 2026 refinements: serif page titles, small uppercase
   tracked labels, soft rounded cards with a hairline edge.
   ===================================================================== */
.ws-label,
.hub-list__row--head,
.pf-h,
.pf-field>span,
.ws-palette__group {
  font-size: .65rem;
  font-weight: var(--mem-weight-medium);
  letter-spacing: .1rem;
  text-transform: uppercase;
  color: var(--ws-muted)
}

/* Search button in the sidebar */
.ws-search-btn {
  display: flex;
  align-items: center;
  gap: var(--mem-space-2-5);
  width: 100%;
  min-height: 2.75rem;
  padding: 0 var(--mem-space-3-5);
  box-sizing: border-box;
  border-radius: var(--mem-radius-search);
  border: var(--mem-border-hairline) solid var(--ws-line);
  background: var(--ws-raise);
  color: var(--ws-muted);
  font: 400 0.8125rem var(--font-sans);
  cursor: pointer;
  text-align: left
}

.ws-search-btn:hover {
  color: var(--ws-text);
  border-color: var(--ws-line-strong)
}

.ws-search-btn span {
  flex: 1
}

.ws-search-btn kbd,
.ws-palette kbd {
  font: var(--mem-weight-medium) .6rem var(--font-sans);
  letter-spacing: .06rem;
  color: var(--ws-faint);
  border: var(--mem-border-hairline) solid var(--ws-line);
  border-radius: var(--mem-radius-xs);
  padding: var(--mem-space-0-5) var(--mem-space-1-5)
}

/* Toasts */
.ws-toasts {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: var(--mem-space-2);
  max-width: min(26.25rem, calc(100vw - 2.5rem))
}

.ws-toast {
  display: flex;
  align-items: center;
  gap: var(--mem-space-3);
  padding: var(--mem-space-3) var(--mem-space-2-5) var(--mem-space-3) var(--mem-space-4);
  border-radius: var(--mem-radius-panel);
  background: #1e1e1e;
  border: var(--mem-border-hairline) solid var(--ws-line-strong);
  border-left: 0.1875rem solid #9fd88a;
  box-shadow: 0 1.125rem 2.5rem rgba(0, 0, 0, .45);
  font-size: var(--mem-type-body);
  color: var(--ws-text);
  animation: ws-toast-in .22s var(--mem-ease, ease)
}

.ws-toast--error {
  border-left-color: #ff8a80
}

.ws-toast>span {
  flex: 1
}

.ws-toast form {
  margin: 0
}

.ws-toast__undo {
  background: none;
  border: 0;
  padding: var(--mem-space-1-5) var(--mem-space-2);
  color: var(--ws-lilac);
  font: 600 .65rem var(--font-sans);
  letter-spacing: .1rem;
  text-transform: uppercase;
  cursor: pointer
}

.ws-toast__close {
  background: none;
  border: 0;
  width: 2rem;
  height: 2rem;
  border-radius: var(--mem-radius-circle);
  color: var(--ws-muted);
  font-size: var(--mem-type-h6);
  cursor: pointer
}

.ws-toast__close:hover {
  background: var(--ws-active);
  color: var(--ws-text)
}

.ws-toast.is-leaving {
  opacity: 0;
  transform: translateY(0.375rem);
  transition: all .2s ease
}

@keyframes ws-toast-in {
  from {
    opacity: 0;
    transform: translateY(0.5rem)
  }

  to {
    opacity: 1;
    transform: none
  }
}

/* Search palette */
.ws-palette {
  padding: 0;
  border: 0;
  background: transparent;
  width: min(40rem, calc(100vw - 2rem));
  max-height: min(70vh, 35rem);
  margin: 12vh auto auto;
  color: var(--ws-text)
}

.ws-palette::backdrop {
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(0.125rem)
}

.ws-palette__box {
  display: flex;
  flex-direction: column;
  background: var(--mem-color-surface);
  border: var(--mem-border-hairline) solid var(--ws-line-strong);
  box-shadow: 0 1.875rem 5rem rgba(0, 0, 0, .6);
  overflow: hidden;
  max-height: inherit
}

.ws-palette__field {
  display: flex;
  align-items: center;
  gap: var(--mem-space-3);
  padding: 0 var(--mem-space-4);
  border-bottom: var(--mem-border-hairline) solid var(--ws-line);
  color: var(--ws-muted)
}

.ws-palette__field input {
  flex: 1;
  min-height: 3.625rem !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  padding: 0 !important;
  font-size: var(--mem-type-lead) !important;
  color: var(--ws-text) !important
}

.ws-palette__results {
  overflow-y: auto;
  padding: var(--mem-space-2)
}

.ws-palette__group {
  margin: var(--mem-space-2-5) var(--mem-space-2-5) var(--mem-space-1)
}

.ws-palette__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--mem-space-4);
  min-height: 2.75rem;
  padding: var(--mem-space-2-5) var(--mem-space-3);
  border-radius: var(--mem-radius-md);
  color: var(--ws-text);
  text-decoration: none;
  font-size: var(--mem-type-body)
}

.ws-palette__item small {
  color: var(--ws-muted);
  font-size: var(--mem-type-xs);
  text-align: right
}

.ws-palette__item.is-active {
  background: var(--ws-active)
}

.ws-palette__empty {
  margin: var(--mem-space-3-5) var(--mem-space-3);
  color: var(--ws-muted);
  font-size: var(--mem-type-body)
}

/* Hub pages */
.hub-contact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mem-space-1-5) var(--mem-space-4-5);
  margin: 0;
  font-size: var(--mem-type-body);
  color: var(--ws-muted)
}

.hub-contact a {
  color: var(--ws-text)
}

.hub-missing {
  color: var(--mem-color-warning) !important
}

.ws-page-head__eyebrow a {
  color: inherit
}

.ws-page-head__eyebrow a:hover {
  color: var(--ws-text)
}

.hub-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13.75rem, 1fr));
  gap: 0.0625rem;
  margin: 0;
  background: var(--ws-line);
  border: var(--mem-border-hairline) solid var(--ws-line);
  border-radius: var(--mem-radius-panel);
  overflow: hidden
}

.hub-details>div {
  background: var(--bg-soft, #161616);
  padding: var(--mem-space-4) var(--mem-space-4-5);
  display: flex;
  flex-direction: column;
  gap: var(--mem-space-1-5)
}

.hub-details dt {
  font-size: .65rem;
  font-weight: var(--mem-weight-medium);
  letter-spacing: .1rem;
  text-transform: uppercase;
  color: var(--ws-muted)
}

.hub-details dd {
  margin: 0;
  font-size: var(--mem-type-body);
  overflow-wrap: anywhere
}

.hub-details__wide {
  grid-column: 1/-1
}

.hub-pre {
  white-space: pre-line
}

.hub-muted {
  color: var(--ws-faint);
  font-weight: 400
}

.hub-status {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--mem-space-1);
  margin: var(--mem-space-1-5) 0 0;
  padding: 0.1875rem;
  border: var(--mem-border-hairline) solid var(--ws-line-strong);
  border-radius: var(--mem-radius-pill);
  align-self: flex-start
}

.hub-status button {
  min-height: 2.125rem;
  padding: 0 var(--mem-space-3-5);
  border: 0;
  border-radius: var(--mem-radius-pill);
  background: transparent;
  color: var(--ws-muted);
  font: var(--mem-weight-medium) .62rem var(--font-sans);
  letter-spacing: .1rem;
  text-transform: uppercase;
  cursor: pointer
}

.hub-status button:hover {
  color: var(--ws-text)
}

.hub-status button[aria-pressed=true] {
  background: var(--ws-text);
  color: var(--ws-bg)
}

.hub-share {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mem-space-2-5);
  align-items: center
}

.hub-share input {
  flex: 1 1 20rem;
  min-height: 2.75rem !important;
  border-radius: var(--mem-radius-md);
  font-size: var(--mem-type-sm) !important;
  color: var(--ws-muted) !important
}

.hub-pstatus--active {
  border-color: rgba(159, 216, 138, .5);
  color: var(--ws-green)
}

.hub-pstatus--on_hold {
  border-color: rgba(243, 213, 143, .5);
  color: var(--mem-color-warning)
}

.hub-pstatus--completed {
  color: var(--ws-muted)
}

.hub-pstatus--cancelled {
  color: var(--ws-faint);
  text-decoration: line-through
}

.hub-search {
  width: 15rem;
  max-width: 100%;
  min-height: 2.75rem !important;
  padding-left: var(--mem-space-10) !important;
  border-radius: var(--mem-radius-md)
}

.inv-toolbar button.inv-tab {
  background: transparent;
  cursor: pointer;
  font-family: var(--font-sans)
}

.inv-toolbar button.inv-tab.is-active {
  background: var(--ws-text);
  color: var(--ws-bg)
}

/* Generic list rows (clients, projects, quotes) */
.hub-list {
  display: flex;
  flex-direction: column;
  border-top: var(--mem-border-hairline) solid var(--ws-line);
  border-bottom: var(--mem-border-hairline) solid var(--ws-line)
}

.hub-list__row {
  display: grid;
  grid-template-columns: minmax(13.75rem, 2fr) 1fr 1fr 1fr minmax(10rem, 1fr);
  gap: var(--mem-space-4);
  align-items: center;
  min-height: 4.25rem;
  padding: var(--mem-space-2-5) var(--mem-space-3-5);
  border-top: var(--mem-border-hairline) solid var(--ws-line);
  text-decoration: none;
  color: var(--ws-text);
  font-size: var(--mem-type-body)
}

.hub-list__row:first-child {
  border-top: 0
}

a.hub-list__row:hover {
  background: #181818;
  color: var(--ws-text)
}

.hub-list__row[hidden] {
  display: none
}

.hub-list__row--head {
  min-height: 2.625rem;
  font-size: var(--mem-type-3xs)
}

.hub-list--projects .hub-list__row {
  grid-template-columns: minmax(13.75rem, 2fr) 1fr minmax(12.5rem, 1.4fr) 1fr
}

.hub-list--docs .hub-list__row {
  grid-template-columns: minmax(15rem, 2.2fr) 1fr 1fr minmax(7.5rem, 1fr) 1fr
}

.hub-list__main {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-items: start;
  flex-direction: column;
}

/* Row identity: a type icon before the title/subtitle of a list row (see templates/_icons.html). */
.hub-ident.hub-ident {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--mem-space-3);
  min-width: 0
}

.hub-ident__icon {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  color: var(--ws-muted);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round
}

.hub-ident__text.hub-ident__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--mem-space-1);
  min-width: 0
}

.hub-ident__text small {
  width: auto;
  max-width: 100%;
  overflow: hidden
}

:is(a.hub-list__row, a.ws-row, a.hub-ident):hover .hub-ident__icon {
  color: var(--ws-text)
}

.hub-list__main span {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--mem-space-1);
  line-height: var(--mem-leading-tight)
}

.hub-list__main small {
  color: var(--ws-muted);
  font-size: var(--mem-type-xs);
  white-space: nowrap;
  overflow-x: clip;
  width: 15rem;
  text-overflow: ellipsis
}

.hub-list__cell {
  display: flex;
  align-items: center;
  gap: var(--mem-space-2);
  flex-wrap: wrap;
  color: #cfcfcf
}

.hub-list__cell.ie-r {
  justify-content: flex-end
}

.hub-list__cell strong {
  font-weight: var(--mem-weight-medium);
  color: var(--ws-text);
  font-variant-numeric: tabular-nums
}

.hub-list__k {
  display: none
}

.hub-list__progress {
  width: auto
}

/* Enquiry → project */

/* Quote / proposal form */
.pf {
  display: flex;
  flex-direction: column;
  gap: var(--mem-space-3);
  max-width: 61.25rem
}

.pf-section {
  display: flex;
  flex-direction: column;
  gap: var(--mem-space-4);
  padding: var(--mem-space-6);
  border-radius: .8rem;
  background: var(--bg-soft, #161616);
  border: var(--mem-border-hairline) solid var(--ws-line)
}

.pf-h {
  display: flex;
  align-items: center;
  gap: var(--mem-space-2-5);
  margin: 0
}

.pf-n {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--mem-radius-circle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ws-text);
  color: var(--ws-bg);
  font-size: .6rem;
  letter-spacing: 0
}

.pf-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mem-space-4)
}

.pf-field {
  display: flex;
  flex-direction: column;
  gap: var(--mem-space-1-5);
  min-width: 0
}

.pf-field--wide {
  grid-column: 1/-1
}

.pf-field em {
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ws-faint);
  margin-left: var(--mem-space-1-5)
}

.pf-field small {
  font-size: var(--mem-type-xs);
  color: var(--ws-faint)
}

.pf-field input,
.pf-field select,
.pf-text textarea,
.pf-line input {
  border-radius: var(--mem-radius-md) !important;
  width: 100%;
  box-sizing: border-box
}

.pf-link {
  font-size: var(--mem-type-xs);
  color: var(--ws-muted);
  align-self: flex-start
}

.pf-check {
  display: flex;
  gap: var(--mem-space-2);
  align-items: center;
  font-size: var(--mem-type-xs);
  color: var(--ws-muted)
}

.pf-lines {
  display: flex;
  flex-direction: column;
  gap: var(--mem-space-2)
}

.pf-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5.625rem 8.125rem 6.875rem 2.25rem;
  gap: var(--mem-space-2-5);
  align-items: center
}

.pf-line--head {
  font-size: .62rem;
  font-weight: var(--mem-weight-medium);
  letter-spacing: .1rem;
  text-transform: uppercase;
  color: var(--ws-muted)
}

.pf-line input {
  min-height: 2.875rem !important
}

.pf-line__total {
  text-align: right;
  font-weight: var(--mem-weight-medium);
  font-variant-numeric: tabular-nums
}

.pf-line .ie-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--mem-radius-circle);
  border: 0;
  background: transparent;
  color: var(--ws-muted);
  font-size: var(--mem-type-h6);
  cursor: pointer
}

.pf-line .ie-icon:hover {
  background: var(--ws-active);
  border-color: var(--ws-text);
  color: var(--ws-text)
}

.pf-lines__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--mem-space-3);
  flex-wrap: wrap
}

.pf-total {
  display: inline-flex;
  align-items: baseline;
  gap: var(--mem-space-3)
}

.pf-total>span {
  font-size: .65rem;
  font-weight: var(--mem-weight-medium);
  letter-spacing: .1rem;
  text-transform: uppercase;
  color: var(--ws-muted)
}

.pf-total strong {
  font: var(--mem-weight-medium) 1.75rem/1 var(--font-display);
  font-variant-numeric: tabular-nums
}

.pf-text {
  border-top: var(--mem-border-hairline) solid var(--ws-line);
  padding-top: var(--mem-space-3)
}

.pf-text:first-of-type {
  border-top: 0;
  padding-top: 0
}

.pf-text summary {
  cursor: pointer;
  min-height: 2.25rem;
  display: flex;
  align-items: center;
  gap: var(--mem-space-2);
  font-size: var(--mem-type-body);
  font-weight: var(--mem-weight-medium);
  list-style: none
}

.pf-text summary::-webkit-details-marker {
  display: none
}

.pf-text summary::before {
  content: '+';
  width: 1.125rem;
  color: var(--ws-muted)
}

.pf-text[open] summary::before {
  content: '−'
}

.pf-text textarea {
  margin-top: var(--mem-space-2);
  min-height: 5.625rem;
  resize: vertical
}

.pf-filled {
  font-weight: 400;
  color: var(--ws-green);
  font-size: var(--mem-type-xs)
}

.pf-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--mem-space-3);
  flex-wrap: wrap;
  margin-top: var(--mem-space-2);
  padding: var(--mem-space-3-5) var(--mem-space-4-5);
  border-radius: .8rem;
  background: #1b1b1b;
  border: var(--mem-border-hairline) solid var(--ws-line-strong);
  box-shadow: 0 -0.625rem 1.875rem rgba(0, 0, 0, .35)
}

.pf-bar__actions {
  display: flex;
  gap: var(--mem-space-2-5);
  flex-wrap: wrap
}

@media (max-width:56.25rem) {
  .ws-toasts {
    left: 0.875rem;
    right: 0.875rem;
    bottom: 5.375rem;
    max-width: none
  }

  .hub-search {
    width: 100%
  }

.pf-grid {
    grid-template-columns: 1fr
  }

  .pf-section {
    padding: var(--mem-space-4-5) var(--mem-space-3-5)
  }

  .pf-line {
    grid-template-columns: 1fr 4.375rem 2.25rem;
    row-gap: var(--mem-space-1-5)
  }

  .pf-line>input:first-child {
    grid-column: 1/3
  }

  .pf-line .ie-icon {
    grid-column: 3;
    grid-row: 1
  }

  .pf-line>input[name=item_quantity] {
    grid-column: 2;
    grid-row: 2
  }

  .pf-line>input[name=item_price] {
    grid-column: 1;
    grid-row: 2
  }

  .pf-line__total {
    grid-column: 3;
    grid-row: 2;
    font-size: var(--mem-type-xs)
  }

  .pf-line--head {
    display: none
  }

  .pf-bar {
    bottom: 4.5rem
  }
}

.ws-topbar__search {
  display: none
}

@media (max-width:56.25rem) {
  .ws-topbar__search {
    display: inline-flex;
    margin-left: auto;
    order: 3
  }
}

.ws-topbar__context[hidden] {
  display: none
}



/* Loading states: do not conceal server-rendered content or block interaction. */
:where([hidden]) {
  display: none !important
}

.ws-load-indicator {
  position: fixed;
  inset: 0 0 auto;
  z-index: 9999;
  height: 0.1875rem;
  overflow: hidden;
  background: rgba(181, 181, 255, .12);
  pointer-events: none
}

.ws-load-indicator::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 33%;
  background: var(--ws-lilac, var(--mem-color-lilac));
  animation: ws-navigation-progress 1.15s ease-in-out infinite
}

@keyframes ws-navigation-progress {
  from {
    transform: translateX(-110%)
  }

  to {
    transform: translateX(310%)
  }
}

@media(prefers-reduced-motion:reduce) {
  .ws-load-indicator::before {
    animation: none;
    width: 100%
  }
}

/* MEM COMPONENT CONSISTENCY V4 — application-only interactive components. */
:is(.ws-btn, .ws-icon-btn, .inv-tab, .ie-seg button) {
  box-sizing: border-box;
  transition: background-color var(--mem-ui-interaction),
    border-color var(--mem-ui-interaction), color var(--mem-ui-interaction);
}

.ws-btn {
  min-height: var(--mem-ui-button-height);
  font-size: var(--mem-ui-action-size);
  letter-spacing: var(--mem-ui-action-tracking);
  border-radius: var(--mem-radius-button);
}

.ws-btn--sm {
  min-height: var(--mem-ui-button-height-sm);
}

.ws-icon-btn {
  width: var(--mem-ui-button-height);
  height: var(--mem-ui-button-height);
  border-radius: var(--mem-radius-button);
}

.ws-badge {
  padding: var(--mem-ui-badge-pad-y) var(--mem-ui-badge-pad-x);
  border-radius: var(--mem-radius-badge);
  font-size: var(--mem-type-xs);
  letter-spacing: var(--mem-track-status);
}

:is(.ws-btn, .ws-icon-btn, .ws-tab, .ws-search-btn, .inv-tab,
  .ws-palette__item, .ws-toast__undo, .ws-toast__close,
  .ie-seg button, .hub-list__row, .inv-row):focus-visible {
  outline: var(--mem-ui-focus-outline) solid var(--mem-ui-focus-color);
  outline-offset: var(--mem-ui-focus-offset);
}

:is(.ws-btn, .ws-icon-btn, .inv-tab, .ie-seg button):is(:disabled, [aria-disabled="true"]) {
  opacity: var(--mem-ui-disabled-opacity);
  cursor: not-allowed;
}

.ws-badge {
  max-width: 100%;
}

:is(.hub-list__row:not(.hub-list__row--head), .inv-row:not(.inv-row--head)) {
  transition: background-color var(--mem-ui-interaction);
}

:is(.hub-list__row:not(.hub-list__row--head), .inv-row:not(.inv-row--head)):hover {
  background-color: var(--mem-ui-row-hover);
}

.ws-palette__box {
  border-radius: var(--mem-ui-dialog-radius);
}

/* Search input intentionally suppresses its own ring; show it on the wrapper. */
.ws-palette__field:focus-within {
  box-shadow: inset 0 -0.125rem 0 var(--mem-ui-focus-color);
}

@media (prefers-reduced-motion: reduce) {

  :is(.ws-btn, .ws-icon-btn, .inv-tab, .ie-seg button,
    .hub-list__row, .inv-row) {
    transition: none;
  }
}

/* Desktop sidebar — persistent compact mode; mobile drawer remains unchanged. */
@media (min-width:56.3125rem) {
  html.ws-sidebar-collapsed {
    --ws-sidebar-w: var(--mem-layout-sidebar-collapsed);
  }

  .ws-sidebar,
  .ws-main-col {
    transition: width .26s var(--mem-easing-standard), flex-basis .26s var(--mem-easing-standard);
  }

  html.ws-sidebar-collapsed .ws-sidebar {
    padding-left: var(--mem-space-2);
    padding-right: var(--mem-space-2);
    gap: var(--mem-space-4);
    overflow-x: hidden;
  }

  html.ws-sidebar-collapsed .ws-sidebar__top {
    padding: 0;
    flex-direction: column;
    gap: var(--mem-space-3);
  }

  html.ws-sidebar-collapsed .ws-sidebar__top .ws-brand img {
    width: 2.375rem;
    max-width: 100%;
    margin: auto;
  }

  html.ws-sidebar-collapsed .ws-sidebar__collapse svg {
    transform: rotate(180deg);
  }

  html.ws-sidebar-collapsed .ws-nav {
    gap: var(--mem-space-3);
  }

  html.ws-sidebar-collapsed .ws-nav__group {
    padding-top: var(--mem-space-2);
    border-top: var(--mem-border-hairline) solid var(--ws-line);
  }

  html.ws-sidebar-collapsed .ws-nav__group:first-child {
    padding-top: 0;
    border-top: 0;
  }

  html.ws-sidebar-collapsed .ws-nav__label,
  html.ws-sidebar-collapsed .ws-nav__text,
  html.ws-sidebar-collapsed .ws-search-btn span,
  html.ws-sidebar-collapsed .ws-search-btn kbd,
  html.ws-sidebar-collapsed .ws-new__label,
  html.ws-sidebar-collapsed .ws-avail,
  html.ws-sidebar-collapsed .ws-account__name,
  html.ws-sidebar-collapsed .ws-account__logout-label {
    display: none;
  }

  html.ws-sidebar-collapsed .ws-nav__item {
    padding: 0;
    justify-content: center;
    position: relative;
  }

  html.ws-sidebar-collapsed .ws-nav__icon {
    width: 1.1875rem;
    height: 1.1875rem;
  }

  html.ws-sidebar-collapsed .ws-nav__item .ws-count {
    position: absolute;
    right: var(--mem-space-1);
    top: var(--mem-space-1);
    width: .4375rem;
    height: .4375rem;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    font-size: 0;
  }

  html.ws-sidebar-collapsed .ws-search-btn,
  html.ws-sidebar-collapsed .ws-new>summary {
    width: 100%;
    min-height: var(--mem-control-height);
    padding: 0;
    justify-content: center;
  }

  html.ws-sidebar-collapsed .ws-search-btn svg {
    width: 1.1875rem;
    height: 1.1875rem;
  }

  html.ws-sidebar-collapsed .ws-new>summary svg {
    width: 1.1875rem;
    height: 1.1875rem;
  }

  html.ws-sidebar-collapsed .ws-new__menu {
    display: none;
  }

  html.ws-sidebar-collapsed .ws-sidebar__foot {
    padding-top: var(--mem-space-2);
  }

  html.ws-sidebar-collapsed .ws-account {
    padding: var(--mem-space-3) 0 0;
    flex-direction: column;
    gap: var(--mem-space-2);
  }

  html.ws-sidebar-collapsed .ws-account__logout-icon {
    display: block;
  }

  html.ws-sidebar-collapsed .ws-account .ws-link-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--mem-control-height);
    height: var(--mem-control-height);
    padding: 0;
  }
}

@media (max-width:56.25rem) {
  .ws-sidebar__collapse {
    display: none;
  }

  .ws-nav__item .ws-nav__icon {
    width: 1.125rem;
    height: 1.125rem;
  }
}

@media (prefers-reduced-motion:reduce) {

  .ws-sidebar,
  .ws-main-col {
    transition: none !important;
  }

  .ws-sidebar__collapse svg {
    transition: none;
  }
}

/* MEM badge icons: the icon follows what the badge says, not its colour.
   Classes give a default; data-icon="name" overrides it (data-icon="none" hides it).
   Icons are decorative: the badge text stays the accessible label. */
:root {
  --ws-i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ws-i-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 7.5V12l3 2' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ws-i-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.5L21.5 20h-19z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 10v4M12 17h.01' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ws-i-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ws-i-pencil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13.5 6.5l4 4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ws-i-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='11' width='14' height='9' rx='2' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ws-i-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='12' r='3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ws-i-eye-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4 4l16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ws-i-open: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-dasharray='3 3.1'/%3E%3C/svg%3E");
  --ws-i-receipt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3h12v18l-3-2-3 2-3-2-3 2z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9 8h6M9 12h6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ws-i-send: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 3L10 14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M21 3l-7 18-4-7-7-4z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ws-i-message: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h16v11H10l-5 4v-4H4z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 9.5h8M8 12.5h5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ws-i-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10 8.5v7l5.5-3.5z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ws-i-pause: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10 9v6M14 9v6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ws-i-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M20 20l-4.5-4.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ws-i-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 16.9l-5.2 2.7 1-5.8-4.3-4.1 5.9-.9z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ws-i-document: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 3h7l4 4v14H7z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14 3v4h4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ws-i-archive: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h16v4H4z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5 9v10h14V9M10 13h4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.ws-badge::before {
  content: none;
  flex: 0 0 auto;
  width: 1.15em;
  height: 1.15em;
  background: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}

.ws-badge.ws-badge--paid::before,
.ws-badge.ws-badge--completed::before,
.ws-badge.hub-pstatus--completed::before,
.ws-badge.cp-pstatus--completed::before,
.ws-badge.enq-status--won::before,
.ws-badge.ws-badge[data-icon="check"]::before {
  content: "";
  -webkit-mask-image: var(--ws-i-check);
  mask-image: var(--ws-i-check);
}
.ws-badge.ws-badge--pending::before,
.ws-badge.ws-badge--awaiting_client::before,
.ws-badge.ws-badge--expired::before,
.ws-badge.ws-badge[data-icon="clock"]::before {
  content: "";
  -webkit-mask-image: var(--ws-i-clock);
  mask-image: var(--ws-i-clock);
}
.ws-badge.ws-badge--overdue::before,
.ws-badge.ws-badge[data-icon="alert"]::before {
  content: "";
  -webkit-mask-image: var(--ws-i-alert);
  mask-image: var(--ws-i-alert);
}
.ws-badge.ws-badge--cancelled::before,
.ws-badge.hub-pstatus--cancelled::before,
.ws-badge.cp-pstatus--cancelled::before,
.ws-badge.enq-status--not-a-fit::before,
.ws-badge.ws-badge[data-icon="x"]::before {
  content: "";
  -webkit-mask-image: var(--ws-i-x);
  mask-image: var(--ws-i-x);
}
.ws-badge.ws-badge--draft::before,
.ws-badge.ws-badge[data-icon="pencil"]::before {
  content: "";
  -webkit-mask-image: var(--ws-i-pencil);
  mask-image: var(--ws-i-pencil);
}
.ws-badge.ws-badge[data-icon="lock"]::before {
  content: "";
  -webkit-mask-image: var(--ws-i-lock);
  mask-image: var(--ws-i-lock);
}
.ws-badge.ws-badge[data-icon="eye"]::before {
  content: "";
  -webkit-mask-image: var(--ws-i-eye);
  mask-image: var(--ws-i-eye);
}
.ws-badge.ws-badge[data-icon="eye-off"]::before {
  content: "";
  -webkit-mask-image: var(--ws-i-eye-off);
  mask-image: var(--ws-i-eye-off);
}
.ws-badge.ws-badge[data-icon="open"]::before {
  content: "";
  -webkit-mask-image: var(--ws-i-open);
  mask-image: var(--ws-i-open);
}
.ws-badge.ws-badge[data-icon="receipt"]::before {
  content: "";
  -webkit-mask-image: var(--ws-i-receipt);
  mask-image: var(--ws-i-receipt);
}
.ws-badge.ws-badge[data-icon="send"]::before {
  content: "";
  -webkit-mask-image: var(--ws-i-send);
  mask-image: var(--ws-i-send);
}
.ws-badge.ws-badge--enquiry::before,
.ws-badge.enq-status--new::before,
.ws-badge.ws-badge[data-icon="message"]::before {
  content: "";
  -webkit-mask-image: var(--ws-i-message);
  mask-image: var(--ws-i-message);
}
.ws-badge.hub-pstatus--active::before,
.ws-badge.cp-pstatus--active::before,
.ws-badge.ws-badge[data-icon="play"]::before {
  content: "";
  -webkit-mask-image: var(--ws-i-play);
  mask-image: var(--ws-i-play);
}
.ws-badge.hub-pstatus--on_hold::before,
.ws-badge.cp-pstatus--on_hold::before,
.ws-badge.ws-badge[data-icon="pause"]::before {
  content: "";
  -webkit-mask-image: var(--ws-i-pause);
  mask-image: var(--ws-i-pause);
}
.ws-badge.enq-status--reviewing::before,
.ws-badge.ws-badge[data-icon="search"]::before {
  content: "";
  -webkit-mask-image: var(--ws-i-search);
  mask-image: var(--ws-i-search);
}
.ws-badge.enq-status--qualified::before,
.ws-badge.ws-badge[data-icon="star"]::before {
  content: "";
  -webkit-mask-image: var(--ws-i-star);
  mask-image: var(--ws-i-star);
}
.ws-badge.enq-status--proposal::before,
.ws-badge.ws-badge[data-icon="document"]::before {
  content: "";
  -webkit-mask-image: var(--ws-i-document);
  mask-image: var(--ws-i-document);
}
.ws-badge.enq-status--archived::before,
.ws-badge.ws-badge--archived::before,
.ws-badge.ws-badge[data-icon="archive"]::before {
  content: "";
  -webkit-mask-image: var(--ws-i-archive);
  mask-image: var(--ws-i-archive);
}

.ws-badge.ws-badge[data-icon="none"]::before {
  content: none;
}

.mem-quote-breakdown .hub-list__row{grid-template-columns:minmax(220px,2fr) minmax(65px,.5fr) minmax(110px,.8fr) minmax(110px,.8fr) minmax(130px,1fr)}

/* Quote cost breakdown: a table on desktop and tablet; on a phone each line is a
   card like the invoice list (service left, amount right, "qty × price" and the
   billing state below). Switches on the list's own width. */
.mem-quote-breakdown {
  container: qbreak / inline-size
}

.mem-quote-breakdown .qb-meta {
  display: none
}

@container qbreak (max-width: 40rem) {
  .mem-quote-breakdown > .hub-list__row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--mem-space-1) var(--mem-space-4);
    align-items: baseline;
    min-height: 0;
    padding: var(--mem-space-4) var(--mem-space-1)
  }

  .mem-quote-breakdown > .hub-list__row--head,
  .mem-quote-breakdown .qb-qty,
  .mem-quote-breakdown .qb-unit {
    display: none
  }

  .mem-quote-breakdown .hub-list__main {
    grid-column: 1;
    grid-row: 1;
    min-width: 0
  }

  .mem-quote-breakdown .hub-list__main small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
  }

  .mem-quote-breakdown .qb-amount {
    grid-column: 2;
    grid-row: 1;
    text-align: right;
    font-weight: 500;
    white-space: nowrap
  }

  .mem-quote-breakdown .qb-meta {
    display: block;
    grid-column: 1;
    grid-row: 2;
    color: var(--ws-muted);
    font-size: var(--mem-type-sm)
  }

  .mem-quote-breakdown .qb-billing {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    text-align: right;
    font-size: var(--mem-type-sm)
  }
}

/* =====================================================================
   Lists on tablets and phones
   ---------------------------------------------------------------------
   Lists switch to a compact layout from their *own* width (container
   queries), not the screen's: on a tablet the sidebar leaves the list
   narrow even though the screen is wide. Desktop (wide lists) is untouched.
   Pattern = the invoice list on phones: details on the left, the key
   figure or status on the right, no column labels.
   ===================================================================== */
.hub-list:not(.mem-quote-breakdown) {
  container: hublist / inline-size
}

.inv-table {
  container: invtable / inline-size
}

/* One summary line per row, only shown in the compact layout. */
.hub-list__meta {
  display: none
}

@container hublist (max-width: 56rem) {

  /* Every list: single column, no header row */
  .hub-list:not(.mem-quote-breakdown) > .hub-list__row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--mem-space-1-5) var(--mem-space-4);
    align-items: start;
    min-height: 0;
    padding: var(--mem-space-4) var(--mem-space-1)
  }

  .hub-list:not(.mem-quote-breakdown) > .hub-list__row--head {
    display: none
  }

  .hub-list__main {
    grid-column: 1 / -1
  }

  .hub-list__main small,
  .hub-ident__text small {
    width: auto;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
  }

  .hub-list__cell {
    font-size: var(--mem-type-sm)
  }

  .hub-list__k {
    display: inline;
    margin-right: var(--mem-space-1);
    font-size: var(--mem-type-3xs);
    letter-spacing: var(--mem-track-label);
    text-transform: uppercase;
    color: var(--ws-faint)
  }

  .hub-list__progress {
    grid-column: 1 / -1
  }

  /* Portal settings lists and the client's invoice list: actions on their own line */
  .pa-invoices > .hub-list__row > .ie-r:last-child,
  .pa-people > .hub-list__row > .ie-r {
    grid-column: 1 / -1;
    justify-content: flex-start
  }

  .hub-list.cp-docs > .hub-list__row {
    grid-template-columns: 2.5rem minmax(0, 1fr)
  }

  /* ---- Card lists (clients, projects, quotes, proposals, enquiries, portals) ---- */
  .hub-list.hub-list--cards > .hub-list__row {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: var(--mem-space-1)
  }

  .hub-list--cards > .hub-list__row > .hub-list__main {
    grid-column: 1;
    grid-row: 1
  }

  .hub-list--cards > .hub-list__row > .hub-list__cell,
  .hub-list--cards > .hub-list__row > .hub-list__progress {
    display: none
  }

  .hub-list--cards > .hub-list__row > .hub-list__aside {
    display: flex;
    grid-column: 2;
    grid-row: 1 / span 2;  /* beside the title and the summary line, so two badges never push the summary down */
    flex-direction: column;
    align-items: flex-end;
    gap: var(--mem-space-1-5);
    font-size: var(--mem-type-sm)
  }

  /* Quotes and proposals have two: the amount on top, the state under it. */
  .hub-list--docs > .hub-list__row > .hub-list__aside {
    grid-row: 2
  }

  .hub-list--docs > .hub-list__row > .hub-list__aside--top {
    grid-row: 1
  }

  .hub-list--cards > .hub-list__row > .hub-list__meta {
    display: block;
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    /* line up with the title, after the row icon */
    padding-left: calc(1.125rem + var(--mem-space-3));
    font-size: var(--mem-type-xs);
    line-height: 1.45;
    color: var(--ws-muted);
    overflow-wrap: anywhere  /* wraps instead of cutting the summary off */
  }

  /* "Nothing owed" dash is noise in the compact layout */
  .hub-list--cards > .hub-list__row > .hub-list__aside .hub-muted {
    display: none
  }

  .hub-list--cards > .hub-list__row > .hub-list__meta.inv-row__late {
    color: var(--ws-red-text)
  }

  /* Enquiries: the message is the point, so it stays (two lines at most). */
  .enq-list > .hub-list__row > .enq-list__msg {
    display: -webkit-box;
    grid-column: 1 / -1;
    grid-row: 3;
    padding-left: calc(1.125rem + var(--mem-space-3));
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
  }

  /* Portals: Preview / Manage on their own line under the summary. */
  .pa-list > .hub-list__row > .pa-list__actions {
    display: flex;
    grid-column: 1 / -1;
    grid-row: 3;
    justify-content: flex-start;
    padding-left: calc(1.125rem + var(--mem-space-3));
    margin-top: var(--mem-space-2)
  }
}

/* Invoice tables (Invoices, Finances, client and project pages) */
@container invtable (max-width: 57rem) {
  .inv-table > .inv-row {
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--mem-space-1) var(--mem-space-3);
    padding: var(--mem-space-3-5) var(--mem-space-1);
    min-height: 0
  }

  .inv-table > .inv-row--head {
    display: none
  }

  .inv-table > .inv-row > span:nth-child(1) {
    order: 1;
    font-size: var(--mem-type-sm)
  }

  .inv-table > .inv-row > span:nth-child(5) {
    order: 2
  }

  .inv-table > .inv-row > span:nth-child(2) {
    order: 3
  }

  .inv-table > .inv-row > span:nth-child(6) {
    order: 4;
    justify-self: end;
    align-self: start
  }

  .inv-table > .inv-row > span:nth-child(4) {
    order: 5;
    font-size: var(--mem-type-sm)
  }

  .inv-table > .inv-row > span:nth-child(3) {
    display: none
  }
}

/* =====================================================================
   Sign-in page — same tokens, button and colours as the workspace.
   (#password beats the generic input rule in mem-theme.css.)
   ===================================================================== */
body.mem-login {
  min-height: 100svh;
  margin: 0;
  display: grid;
  place-items: center;
  padding: var(--mem-space-6) var(--mem-space-4);
  background:
    radial-gradient(48rem 28rem at 50% -12%, rgba(181, 181, 255, .07), transparent 62%),
    radial-gradient(36rem 22rem at 50% 112%, rgba(155, 1, 4, .10), transparent 60%),
    var(--ws-bg);
  color: var(--ws-text)
}

.mem-login__wrap {
  width: min(100%, 25rem);
  display: grid;
  gap: var(--mem-space-5)
}

.mem-login__card {
  position: relative;
  overflow: hidden;
  padding: var(--mem-space-8, 2.5rem) var(--mem-space-7, 2rem) var(--mem-space-7, 2rem);
  background: var(--ws-raise);
  border: var(--mem-border-hairline) solid var(--ws-line);
  border-radius: var(--mem-radius-panel);
  box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, .35)
}

/* Brand line along the top, the same gradient as the loading bar. */
.mem-login__card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(45deg, var(--mem-color-red-light, #9b0104) 15%, var(--ws-lilac))
}

.mem-login__logo {
  display: inline-block;
  margin-bottom: var(--mem-space-7, 2rem)
}

.mem-login__logo img {
  display: block;
  width: 6.5rem;
  height: auto
}

.mem-login__eyebrow {
  margin: 0 0 var(--mem-space-2);
  font-size: var(--mem-type-3xs);
  font-weight: var(--mem-weight-medium);
  letter-spacing: var(--mem-track-action);
  text-transform: uppercase;
}

.mem-login__title {
  margin: 0;
  font: var(--mem-weight-medium) clamp(2.5rem, 9vw, 3rem)/1 var(--mem-font-editorial);
  letter-spacing: -.01em;
  color: var(--ws-text)
}

.mem-login__lede {
  margin: var(--mem-space-2) 0 0;
  font-size: var(--mem-type-sm);
  line-height: 1.55;
  color: var(--ws-muted)
}

.mem-login__error {
  display: flex;
  align-items: flex-start;
  gap: var(--mem-space-2);
  margin: var(--mem-space-5) 0 0;
  padding: var(--mem-space-3);
  border-radius: var(--mem-radius-md);
  background: rgba(155, 1, 4, .18);
  border: var(--mem-border-hairline) solid rgba(255, 180, 173, .22);
  color: var(--ws-red-text);
  font-size: var(--mem-type-sm);
  line-height: 1.45
}

.mem-login__error .ws-btn__icon {
  flex-shrink: 0;
  margin: .1rem 0 0
}

.mem-login__form {
  display: grid;
  gap: var(--mem-space-2);
  margin-top: var(--mem-space-6)
}

.mem-login__label {
  font-size: var(--mem-type-3xs);
  letter-spacing: var(--mem-track-label);
  text-transform: uppercase;
  color: var(--ws-muted)
}

.mem-login__field {
  position: relative
}

.mem-login #password {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--mem-ui-field-height);
  margin: 0;
  padding: 0 3rem 0 var(--mem-space-4);
  background: var(--ws-bg);
  color: var(--ws-text);
  border: var(--mem-border-hairline) solid var(--ws-line-strong);
  border-radius: var(--mem-radius-md);
  font: 400 var(--mem-type-body)/1 var(--mem-font-body);
  outline: none;
  box-shadow: none;
  transition: border-color var(--mem-ui-interaction)
}

.mem-login #password:hover {
  border-color: var(--ws-muted)
}

.mem-login #password:focus-visible {
  border-color: var(--ws-lilac);
  box-shadow: 0 0 0 3px rgba(181, 181, 255, .18)
}

.mem-login #password[aria-invalid="true"] {
  border-color: var(--ws-red-text)
}

.mem-login__reveal {
  position: absolute;
  top: 50%;
  right: var(--mem-space-1-5);
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: var(--mem-radius-circle);
  background: none;
  color: var(--ws-muted);
  cursor: pointer;
  transition: color var(--mem-ui-interaction), background-color var(--mem-ui-interaction)
}

.mem-login__reveal:hover {
  color: var(--ws-text);
  background: var(--ws-hover)
}

.mem-login__reveal:focus-visible {
  outline: var(--mem-ui-focus-outline) solid var(--mem-ui-focus-color);
  outline-offset: 1px
}

.mem-login__reveal svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round
}

.mem-login__submit {
  width: 100%;
  justify-content: center;
  margin-top: var(--mem-space-4)
}

.mem-login__foot {
  margin: 0;
  text-align: center;
  font-size: var(--mem-type-xs);
  color: var(--ws-faint)
}

.mem-login__foot a {
  color: var(--ws-muted)
}

.mem-login__foot a:hover {
  color: var(--ws-text)
}

@media (max-width: 30rem) {
  .mem-login__card {
    padding: var(--mem-space-7, 2rem) var(--mem-space-5) var(--mem-space-6)
  }
}

/* =====================================================================
   Dialogs (instalment status) — a raised card with choice rows.
   ===================================================================== */
.ws-dialog {
  box-sizing: border-box;
  width: min(100% - 2rem, 26rem);
  max-height: calc(100svh - 2rem);
  overflow: auto;
  padding: var(--mem-space-6);
  background: var(--ws-raise);
  border: var(--mem-border-hairline) solid var(--ws-line-strong);
  border-radius: var(--mem-radius-panel);
  box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, .5)
}

.installment-modal--open .ws-dialog {
  animation: ws-dialog-in .18s ease-out both
}

@keyframes ws-dialog-in {
  from { opacity: 0; transform: translateY(.5rem) scale(.98) }
  to { opacity: 1; transform: none }
}

@media (prefers-reduced-motion: reduce) {
  .installment-modal--open .ws-dialog { animation: none }
}

.ws-dialog__close {
  position: absolute;
  top: var(--mem-space-3);
  right: var(--mem-space-3)
}

.ws-dialog__close .ws-btn__icon {
  margin: 0
}

.ws-dialog__eyebrow {
  margin: 0 0 var(--mem-space-1-5);
  font-size: var(--mem-type-3xs);
  letter-spacing: var(--mem-track-action);
  font-weight: var(--mem-weight-medium);
  text-transform: uppercase
}

.ws-dialog__title {
  margin: 0;
  padding-right: 2.5rem;
  font: var(--mem-weight-medium) var(--mem-type-section)/1 var(--mem-font-display);
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--ws-text)
}

.ws-dialog__lede {
  margin: var(--mem-space-2) 0 0;
  font-size: var(--mem-type-sm);
  color: var(--ws-muted)
}

.ws-choices {
  display: grid;
  gap: var(--mem-space-2);
  margin: var(--mem-space-5) 0 0;
  padding: 0;
  border: 0;
  min-width: 0
}

.ws-choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--mem-space-3);
  padding: var(--mem-space-3);
  border: var(--mem-border-hairline) solid var(--ws-line);
  border-radius: var(--mem-radius-md);
  cursor: pointer;
  transition: border-color var(--mem-ui-interaction), background-color var(--mem-ui-interaction)
}

.ws-choice:hover {
  background: var(--ws-hover);
  border-color: var(--ws-line-strong)
}

/* The radio stays in the page for keyboard and screen readers; the row shows the state. */
.ws-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none
}

.ws-choice:has(input:checked) {
  border-color: var(--ws-lilac);
  background: var(--ws-active)
}

.ws-choice:has(input:focus-visible) {
  outline: var(--mem-ui-focus-outline) solid var(--mem-ui-focus-color);
  outline-offset: 2px
}

.ws-choice__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--mem-radius-circle);
  border: var(--mem-border-hairline) solid currentColor;
  color: var(--ws-muted)
}

.ws-choice__icon .ws-btn__icon {
  margin: 0
}

.ws-choice__icon--pending { color: var(--ws-lilac) }
.ws-choice__icon--paid { color: var(--ws-green) }
.ws-choice__icon--cancelled { color: var(--ws-muted) }

.ws-choice__text {
  display: grid;
  gap: .125rem;
  min-width: 0
}

.ws-choice__text strong {
  font-size: var(--mem-type-body);
  font-weight: var(--mem-weight-medium);
  color: var(--ws-text)
}

.ws-choice__text small {
  font-size: var(--mem-type-xs);
  color: var(--ws-muted)
}

/* A tick at the end of the chosen row */
.ws-choice::after {
  content: '';
  margin-left: auto;
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: var(--mem-radius-circle);
  border: var(--mem-border-hairline) solid var(--ws-line-strong)
}

.ws-choice:has(input:checked)::after {
  border: .3rem solid var(--ws-lilac);
  background: var(--ws-raise)
}

.ws-dialog__actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--mem-space-2);
  margin-top: var(--mem-space-5)
}

/* =====================================================================
   Proposal page — same structure as the quote page, plus option groups,
   add-ons, recording the client's choice and a content summary.
   ===================================================================== */
.pd-note {
  margin: calc(var(--mem-space-2) * -1) 0 0
}

/* Option / add-on group headers inside the pricing list */
.pd-pricing .pd-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--mem-space-4);
  padding: var(--mem-space-4) var(--mem-space-3) var(--mem-space-3);
  border-bottom: var(--mem-border-hairline) solid var(--ws-line)
}

.pd-pricing .pd-group + .hub-list__row,
.pd-pricing .hub-list__row + .pd-group {
  border-top: 0
}

.pd-pricing .hub-list__row + .pd-group {
  margin-top: var(--mem-space-4)
}

.pd-group__name {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--mem-space-1) var(--mem-space-3);
  min-width: 0
}

.pd-group__name strong {
  font: var(--mem-weight-medium) var(--mem-type-sm)/1.3 var(--mem-font-body);
  letter-spacing: var(--mem-track-action);
  text-transform: uppercase
}

.pd-group__name small {
  font-size: var(--mem-type-xs);
  color: var(--ws-muted)
}

.pd-group__letter {
  display: inline-grid;
  place-items: center;
  align-self: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--mem-radius-circle);
  border: var(--mem-border-hairline) solid var(--ws-lilac);
  color: var(--ws-lilac);
  font-size: var(--mem-type-2xs);
  font-weight: var(--mem-weight-medium)
}

.pd-group.is-chosen .pd-group__letter {
  background: var(--ws-lilac);
  color: var(--ws-bg)
}

.pd-group__total {
  display: inline-flex;
  align-items: center;
  gap: var(--mem-space-2);
  font: var(--mem-weight-medium) 1.25rem/1 var(--mem-font-display);
  white-space: nowrap
}

.pd-group--addons .pd-group__name strong {
  color: var(--ws-muted)
}

/* Lines that aren't part of what will be billed (other options, unticked add-ons) */
.pd-pricing .pd-row--off > :not(.qb-billing) {
  opacity: .5
}

/* Recording the client's answer: option cards + add-on cards */
.pd-record {
  display: grid;
  gap: var(--mem-space-4);
  margin-top: var(--mem-space-4)
}

.pd-choices {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  margin: 0
}

.pd-legend {
  grid-column: 1 / -1;
  margin-bottom: var(--mem-space-1);
  padding: 0;
  font-size: var(--mem-type-3xs);
  letter-spacing: var(--mem-track-label);
  text-transform: uppercase;
  color: var(--ws-muted)
}

.pd-letter {
  font-size: var(--mem-type-xs);
  font-weight: var(--mem-weight-medium)
}

/* Add-ons are checkboxes: a square tick instead of the round dot */
.ws-choice--check::after {
  border-radius: var(--mem-radius-xs, .25rem)
}

.ws-choice--check:has(input:checked)::after {
  border: 0;
  background: var(--ws-lilac) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121212' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 75% no-repeat
}

.pd-accepted {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--mem-space-3)
}

.pd-accepted .today-item__detail {
  margin: 0
}

/* Content summary: label column + value column, like the invoice side panel */
.pd-content {
  margin: 0;
  border-top: var(--mem-border-hairline) solid var(--ws-line)
}

.pd-content__row {
  display: grid;
  grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr);
  gap: var(--mem-space-2) var(--mem-space-6);
  padding: var(--mem-space-4) 0;
  border-bottom: var(--mem-border-hairline) solid var(--ws-line)
}

.pd-content dt {
  display: flex;
  flex-direction: column;
  gap: var(--mem-space-0-5);
  font-size: var(--mem-type-xs);
  letter-spacing: var(--mem-track-eyebrow);
  text-transform: uppercase;
  color: var(--ws-muted)
}

.pd-content dt small {
  letter-spacing: 0;
  text-transform: none;
  color: var(--ws-faint)
}

.pd-content dd {
  margin: 0;
  font-size: var(--mem-type-sm);
  line-height: 1.6;
  color: var(--ws-text)
}

.pd-list {
  display: grid;
  gap: var(--mem-space-2);
  margin: 0;
  padding: 0;
  list-style: none
}

.pd-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--mem-space-1) var(--mem-space-3)
}

.pd-list strong {
  font-weight: var(--mem-weight-medium)
}

.pd-list small {
  color: var(--ws-muted);
  font-size: var(--mem-type-xs)
}

.pd-list--steps {
  counter-reset: pd-step
}

.pd-list--steps li::before {
  counter-increment: pd-step;
  content: counter(pd-step, decimal-leading-zero);
  font-size: var(--mem-type-2xs);
  color: var(--ws-lilac);
  font-variant-numeric: tabular-nums
}

.pd-tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--mem-space-1-5)
}

.pd-tags > span {
  padding: .125rem var(--mem-space-2);
  border: var(--mem-border-hairline) solid var(--ws-line-strong);
  border-radius: var(--mem-radius-pill);
  font-size: var(--mem-type-2xs);
  color: var(--ws-muted)
}

.pd-portal {
  justify-content: flex-start
}

@media (max-width: 40rem) {
  .pd-content__row {
    grid-template-columns: minmax(0, 1fr)
  }
}

/* Proposal content, shown in full (sections, cards, bullets, timeline, payment) */
.pd-k {
  display: flex;
  flex-direction: column;
  gap: var(--mem-space-0-5);
  font-size: var(--mem-type-xs);
  font-weight: var(--mem-weight-medium);
  letter-spacing: var(--mem-track-eyebrow);
  text-transform: uppercase;
  color: var(--ws-text)
}

.pd-k small {
  letter-spacing: 0;
  text-transform: none;
  font-size: var(--mem-type-4xs);
  text-transform: uppercase;
  letter-spacing: var(--mem-ui-action-tracking);
  line-height: var(--mem-leading-display);
  font-style: italic;
  color: var(--ws-faint)
}

.pd-v {
  min-width: 0;
  font-size: var(--mem-type-sm);
  line-height: 1.65;
  color: var(--ws-text)
}

.pd-v > * + * {
  margin-top: var(--mem-space-3)
}

.pd-v p {
  margin-bottom: 0;
  color: var(--ws-muted)
}

.pd-v > :first-child {
  margin-top: 0
}

.pd-muted {
  padding: var(--mem-space-3) var(--mem-space-4);
  border: var(--mem-border-hairline) dashed var(--mem-color-border-strong);
  border-radius: var(--mem-radius-md);
  font-style: italic;
  font-size: var(--mem-type-xs);
  color: var(--ws-muted)
}

.pd-cover,
.pd-sec__img {
  display: block;
  width: min(100%, 22rem);
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--mem-radius-md);
  border: var(--mem-border-hairline) solid var(--ws-line)
}

.pd-sec__title {
  margin: 0;
  font: var(--mem-weight-medium) 1.375rem/1.15 var(--mem-font-editorial);
  color: var(--ws-text)
}

.pd-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--mem-space-2);
  margin-left: 0;
  padding: 0;
  list-style: none
}

.pd-cards__head {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: var(--mem-space-6);
}

.pd-cards li {
  display: flex;
  flex-direction: column;
  gap: var(--mem-space-1);
  padding: var(--mem-space-3) var(--mem-space-4);
  justify-content: space-between;
  border: var(--mem-border-hairline) dashed var(--mem-color-border-strong);
  border-radius: var(--mem-radius-md)
}

.pd-cards__n {
  font-size: var(--mem-type-5xs);
  border: var(--mem-border-hairline) solid var(--mem-color-border-strong);
  letter-spacing: var(--mem-ui-action-tracking);
  border-radius: var(--mem-radius-button);
  line-height: var(--mem-leading-display);
  padding: var(--mem-space-1) var(--mem-space-2);
  font-weight: var(--mem-weight-medium);
  font-variant-numeric: tabular-nums
}

.pd-cards strong {
  font-weight: var(--mem-weight-medium);
  line-height: var(--mem-leading-body)
}

.pd-cards p {
  font-size: var(--mem-type-xs);
  color: var(--ws-muted)
}

.pd-bullets {
  padding: var(--mem-space-3) var(--mem-space-4);
  border: var(--mem-border-hairline) dashed var(--mem-color-border-strong);
  border-radius: var(--mem-radius-md);
}

.pd-bullets__title {
  display: block;
  margin-bottom: var(--mem-space-1);
  font-size: var(--mem-type-2xs);
  letter-spacing: var(--mem-track-action);
  font-weight: var(--mem-weight-medium);
  text-transform: uppercase
}

.pd-bullets ul,
.pd-steps ul {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--ws-muted)
}

.pd-steps {
  display: grid;
  gap: var(--mem-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: pd-step
}

.pd-steps > li {
  position: relative;
  padding-left: 3.5rem
}

.pd-steps > li::before {
  counter-increment: pd-step;
  content: counter(pd-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: .1rem;
  font-size: var(--mem-type-5xs);
  font-weight: var(--mem-weight-medium);
  border: var(--mem-border-hairline) solid var(--mem-color-border-strong);
  letter-spacing: var(--mem-ui-action-tracking);
  border-radius: var(--mem-radius-button);
  line-height: var(--mem-leading-display);
  padding: var(--mem-space-1) var(--mem-space-2);
  font-variant-numeric: tabular-nums
}

.pd-steps__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--mem-space-1) var(--mem-space-3)
}

.pd-steps__head strong {
  font-weight: var(--mem-weight-medium)
}

.pd-steps__head small {
  color: var(--ws-muted);
  font-size: var(--mem-type-4xs);
  text-transform: uppercase;
  letter-spacing: var(--mem-ui-action-tracking);
  line-height: var(--mem-leading-display);
  font-style: italic
}

.pd-pay {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none
}

.pd-pay li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4rem minmax(6rem, auto);
  gap: var(--mem-space-3);
  align-items: baseline;
  padding: var(--mem-space-2) 0;
  border-bottom: var(--mem-border-hairline) solid var(--ws-line)
}

.pd-pay li:first-child {
  padding-top: 0
}

.pd-pay li:last-child {
  border-bottom: 0
}

.pd-pay li > span:first-child {
  display: flex;
  flex-direction: column
}

.pd-pay small {
  color: var(--ws-muted);
  font-size: var(--mem-type-xs)
}

.pd-pay__pct {
  color: var(--ws-muted);
  text-align: right;
  font-variant-numeric: tabular-nums
}

.pd-pay__amt {
  text-align: right;
  font-weight: var(--mem-weight-medium);
  font-variant-numeric: tabular-nums;
  white-space: nowrap
}

.pd-group__sub {
  flex-basis: 100%;
  color: var(--ws-faint)
}

/* =====================================================================
   Proposal & quote editor — outline, labelled rows, lighter panels.
   ===================================================================== */
.pf {
  max-width: 76rem
}

.pf-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--mem-space-5)
}

.pf-main {
  display: flex;
  flex-direction: column;
  gap: var(--mem-space-4);
  min-width: 0
}

/* Outline: chips on small screens, a sticky column on wide ones */
.pf-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mem-space-3)
}

.pf-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mem-space-1-5);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: pf-nav
}

.pf-nav__list a {
  display: inline-flex;
  align-items: center;
  gap: var(--mem-space-2);
  min-height: 2.25rem;
  padding: 0 var(--mem-space-3);
  border: var(--mem-border-hairline) solid var(--ws-line-strong);
  border-radius: var(--mem-radius-pill);
  font-size: var(--mem-type-sm);
  color: var(--ws-muted);
  text-decoration: none
}

.pf-nav__list a::before {
  counter-increment: pf-nav;
  content: counter(pf-nav);
  font-size: var(--mem-type-2xs);
  color: var(--ws-faint);
  font-variant-numeric: tabular-nums
}

.pf-nav__list a:hover {
  color: var(--ws-text)
}

.pf-nav__list a[aria-current] {
  color: var(--ws-text);
  position: relative;
  border-radius: var(--mem-radius-md);
}

.pf-nav__list a[aria-current]::before {
  color: var(--ws-lilac)
}

.pf-nav__list a[aria-current]::after {
  background: var(--ws-accent-gradient);
  content: '';
  position: absolute;
  top: 0.5rem;
  bottom: 0.5rem;
  left: -1px;
  width: 0.125rem;
}

.pf-nav__total {
  display: none
}

.pf-nav__preview {
  display: none
}

@media (min-width: 78rem) {
  .pf-layout {
    grid-template-columns: 12.5rem minmax(0, 1fr);
    gap: var(--mem-space-8, 2.5rem);
    align-items: start
  }

  .pf-nav {
    position: sticky;
    top: var(--mem-space-6);
    flex-direction: column;
    align-items: stretch;
    gap: var(--mem-space-5)
  }

  .pf-nav__list {
    flex-direction: column;
    gap: 0;
    border-left: var(--mem-border-hairline) solid var(--ws-line)
  }

  .pf-nav__list a {
    display: flex;
    min-height: 2.5rem;
    margin-left: -1px;
    padding: 0 var(--mem-space-3);
    border: 0;
    border-left: 2px solid transparent;
    border-radius: 0
  }

  .pf-nav__list a[aria-current] {
    background: linear-gradient(90deg, rgba(181, 181, 255, .08), transparent)
  }

  .pf-nav__total {
    display: flex;
    flex-direction: column;
    gap: var(--mem-space-1);
    padding: var(--mem-space-4);
    border: var(--mem-border-hairline) solid var(--ws-line);
    border-radius: var(--mem-radius-panel);
    background: var(--ws-raise)
  }

  .pf-nav__total span {
    font-size: var(--mem-type-3xs);
    letter-spacing: var(--mem-track-label);
    text-transform: uppercase;
    color: var(--ws-muted)
  }

  .pf-nav__total strong {
    font: var(--mem-weight-medium) 1.5rem/1.1 var(--mem-font-display);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere
  }

  .pf-nav__preview {
    display: inline-flex;
    align-items: center;
    gap: var(--mem-space-2);
    font-size: var(--mem-type-xs);
    color: var(--ws-muted)
  }

  .pf-nav__preview:hover {
    color: var(--ws-text)
  }
}

/* Section cards: headings like the rest of the workspace */
.pf-section {
  scroll-margin-top: var(--mem-space-6);
  gap: var(--mem-space-5);
  border-radius: var(--mem-radius-panel);
  background: var(--ws-raise)
}

.pf-h {
  gap: var(--mem-space-3);
  font: var(--mem-weight-medium) var(--mem-type-section)/1 var(--mem-font-display);
  letter-spacing: .02em;
  color: var(--ws-text)
}

.pf-n {
  width: 1.625rem;
  height: 1.625rem;
  background: transparent;
  border: var(--mem-border-hairline) solid var(--ws-lilac);
  color: var(--ws-lilac);
  font: var(--mem-weight-medium) var(--mem-type-2xs)/1 var(--mem-font-body)
}

.pf-section > .pf-hint {
  margin-top: calc(var(--mem-space-3) * -1);
  max-width: 44rem
}

.pf .pf-sub {
  margin: var(--mem-space-3) 0 0;
  padding-top: var(--mem-space-5);
  border-top: var(--mem-border-hairline) solid var(--ws-line)
}

.pf .pf-addons {
  border-top: var(--mem-border-hairline) solid var(--ws-line);
  padding-top: var(--mem-space-5);
  gap: var(--mem-space-3)
}

.pf .pf-addons > .pf-head,
.pf .pf-addons > .pf-costs {
  align-self: stretch
}

.pf .pf-addons .pf-sub {
  margin-top: 0;
  padding-top: 0;
  border-top: 0
}

/* Each priced line is a soft card; the label row lines up with its fields */
.pf .proposal-line {
  background: var(--ws-raise);
  border: var(--mem-border-hairline) solid var(--ws-line);
  border-radius: var(--mem-radius-md);
  padding: var(--mem-space-4)
}

.pf .pf-line.pf-head {
  padding: 0 calc(var(--mem-space-4) + 1px)
}

.pf .pf-lines {
  gap: var(--mem-space-2)
}

/* Panels inside a section: one quiet level, no dashed borders */
.pf .pf-block,
.pf .pf-option {
  padding: var(--mem-space-5);
  background: var(--ws-bg);
  border: var(--mem-border-hairline) solid var(--ws-line);
  border-radius: var(--mem-radius-md)
}

.pf .pf-card-row {
  border-style: solid;
  border-color: var(--ws-line);
  background: var(--ws-raise)
}

.pf .pf-line--rich + .pf-line--rich {
  border-top-style: solid;
  border-top-color: var(--ws-line)
}

.pf .pf-option__letter,
.pf .pf-block [data-block-n] {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  margin-bottom: .55rem;
  border-radius: var(--mem-radius-circle);
  border: var(--mem-border-hairline) solid var(--ws-line-strong);
  font: var(--mem-weight-medium) var(--mem-type-2xs)/1 var(--mem-font-body);
  color: var(--ws-text);
  align-self: end
}

/* Column labels above repeated rows */
.pf-head {
  min-height: 0 !important;
  font-size: var(--mem-type-3xs);
  font-weight: var(--mem-weight-medium);
  letter-spacing: var(--mem-track-label);
  text-transform: uppercase;
  color: var(--ws-muted)
}

.pf-head > span {
  padding-left: .15rem
}

.pf-line.pf-head {
  margin-bottom: calc(var(--mem-space-2) * -1)
}

/* Hide a label row when its list is empty */
.pf-head:has(+ .pf-phases:not(:has(.pf-phase-row))),
.pf-head:has(+ .pf-costs:not(:has(.pf-cost-row))),
.pf-head:has(+ [data-ms-rows]:not(:has(.pf-ms-row))),
.pf-head:has(+ .pf-lines:not(:has(.proposal-line))) {
  display: none
}

/* Tick-boxes in the app's colour */
.pf input[type=checkbox] {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--ws-text)
}

.pf .pf-check {
  display: inline-flex;
  align-items: center;
  gap: var(--mem-space-2);
  align-self: flex-start;
  cursor: pointer;
  font-size: var(--mem-type-xs);
  color: var(--ws-muted);
  text-transform: none;
  letter-spacing: 0
}

/* "Show as from price" keeps its own rule (only shown for add-ons) */
.pf .pf-line__from {
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0
}

/* The words: each text is a quiet row that opens */
.pf-text summary {
  font-weight: var(--mem-weight-regular)
}

.pf-text summary::before {
  display: inline-grid;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: var(--mem-radius-circle);
  border: var(--mem-border-hairline) solid var(--ws-line-strong);
  font-size: var(--mem-type-sm)
}

.pf-filled {
  margin-left: auto
}

/* Save bar: matches the cards */
.pf-bar {
  border-radius: var(--mem-radius-panel);
  background: var(--ws-raise)
}

@media (max-width: 56.25rem) {
  .pf-head {
    display: none !important
  }
}

/* Paragraphs and phase cards on the proposal page */
.pp-paras p {
  margin: 0
}

.pp-paras p + p {
  margin-top: .75em
}

/* Portfolio pieces shown in a proposal */
.pd-work {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: var(--mem-space-3);
  margin: 0;
  padding: 0;
  list-style: none
}

.pd-work a {
  color: inherit;
  text-decoration: none
}

.pd-work a:hover strong {
  text-decoration: underline
}

.pd-work li,
.pd-work a {
  display: flex;
  flex-direction: column;
  gap: var(--mem-space-1)
}

.pd-work img {
  width: 100%;
  aspect-ratio: 1.91 / 1;
  object-fit: cover;
  border-radius: var(--mem-radius-xs);
  border: var(--mem-border-hairline) solid var(--ws-line)
}

.pd-work strong {
  font-weight: var(--mem-weight-medium);
  line-height: 1.3
}

.pd-work small {
  font-size: var(--mem-type-xs);
  color: var(--ws-muted)
}

/* Editor: timeline phases as labelled cards, each with its own paragraph */
.pf .pf-phases {
  gap: var(--mem-space-3)
}

.pf .pf-phase-row {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 2fr) minmax(7rem, 1fr) 2.25rem;
  grid-template-areas:
    "n title when x"
    ". text text text"
    ". steps steps steps";
  gap: var(--mem-space-3);
  align-items: end;
  padding: var(--mem-space-4);
  background: var(--ws-bg);
  border: var(--mem-border-hairline) solid var(--ws-line);
  border-radius: var(--mem-radius-md)
}

.pf .pf-phase-row__n {
  grid-area: n;
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  margin-bottom: .55rem;
  border-radius: var(--mem-radius-circle);
  border: var(--mem-border-hairline) solid var(--ws-line-strong);
  font-size: var(--mem-type-2xs);
  color: var(--ws-text)
}

.pf .pf-phase-row__title { grid-area: title }
.pf .pf-phase-row__when { grid-area: when }
.pf .pf-phase-row > .ie-icon { grid-area: x; margin-bottom: .3rem }
.pf .pf-phase-row__text { grid-area: text }
.pf .pf-phase-row__steps { grid-area: steps }

.pf .pf-phase-row textarea {
  min-height: 4.5rem;
  resize: vertical
}

@media (max-width: 40rem) {
  .pf .pf-phase-row {
    grid-template-columns: 1.75rem minmax(0, 1fr) 2.25rem;
    grid-template-areas:
      "n title x"
      "when when when"
      "text text text"
      "steps steps steps"
  }
}

/* Portfolio picker */
.pf-work {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: var(--mem-space-3)
}

.pf-work__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--mem-space-2);
  padding: var(--mem-space-2);
  border: var(--mem-border-hairline) solid var(--mem-color-border);
  border-radius: var(--mem-radius-md);
  background: var(--ws-bg);
  cursor: pointer;
  box-shadow: #00000029 0 2px 5px;
  transition: border-color var(--mem-ui-interaction)
}

.pf-work__item:hover {
  border-color: var(--ws-line-strong)
}

.pf-work__item:has(input:checked) {
  border-color: var(--ws-line-strong);
  background: var(--ws-active);
  box-shadow: rgb(181 181 255 / 21%) 0 0.125rem .7rem
}

.pf-work__item:has(input:focus-visible) {
  outline: var(--mem-ui-focus-outline) solid var(--mem-ui-focus-color);
  outline-offset: 2px
}

.pf .pf-work__item input {
  position: absolute;
  top: var(--mem-space-3);
  right: var(--mem-space-3);
  z-index: 1
}

.pf-work__img {
  display: block;
  aspect-ratio: 1.91 / 1;
  overflow: hidden;
  border-radius: var(--mem-radius-sm);
  background: var(--ws-raise)
}

.pf-work__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.pf-work__text {
  display: flex;
  flex-direction: column;
  gap: .125rem;
  padding: 0 var(--mem-space-1) var(--mem-space-1)
}

.pf-work__text strong {
  font-size: var(--mem-type-sm);
  font-weight: var(--mem-weight-medium);
  line-height: 1.3
}

.pf-work__text small {
  font-size: var(--mem-type-3xs);
  color: var(--ws-muted)
}

/* Portfolio page: projects read from memstudios.co */
.pfo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: var(--mem-space-4);
  margin: 0;
  padding: 0;
  list-style: none
}

.pfo-card__link {
  display: flex;
  flex-direction: column;
  gap: var(--mem-space-3);
  height: 100%;
  padding: var(--mem-space-3);
  color: inherit;
  text-decoration: none;
  background: var(--ws-raise);
  border: var(--mem-border-hairline) solid var(--ws-line);
  border-radius: var(--mem-radius-md);
  transition: border-color var(--mem-ui-interaction)
}

.pfo-card__link:hover {
  border-color: var(--ws-line-strong)
}

.pfo-card__img {
  aspect-ratio: 1.91 / 1;
  overflow: hidden;
  display: grid;
  place-items: center;
  border-radius: var(--mem-radius-sm);
  background: var(--ws-bg);
  color: var(--ws-faint);
  font-size: var(--mem-type-xs)
}

.pfo-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.pfo-card__text {
  display: flex;
  flex-direction: column;
  gap: .125rem
}

.pfo-card__text strong {
  font-weight: var(--mem-weight-medium)
}

.pfo-card__text small {
  font-size: var(--mem-type-xs);
  color: var(--ws-muted)
}

.pfo-card__used {
  margin-top: var(--mem-space-1);
  color: var(--ws-faint) !important
}

.pfo-note {
  margin-top: var(--mem-space-5)
}

/* Editor: status line and refresh button above the project picker */
.pf-work-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--mem-space-2) var(--mem-space-4);
  margin-bottom: var(--mem-space-4)
}

.pf-work-bar__status {
  font-size: var(--mem-type-xs);
  color: var(--ws-muted)
}

.pf-work-bar__status.is-error {
  color: var(--ws-red-text)
}

/* ── Editor tidy-up: repeated blocks share one layout ──────────────────────
   Sections, options and phases: the number (or letter) sits in its own
   column and everything else lines up on the same left edge as the fields
   beside it. */
.pf {
  --pf-gutter: calc(1.75rem + var(--mem-space-3))
}

.pf .pf-block,
.pf .pf-option {
  gap: var(--mem-space-4)
}

.pf .pf-block > :not(.pf-block__head):not([type=hidden]),
.pf .pf-option > :not(.pf-option__head):not([type=hidden]) {
  margin-left: var(--pf-gutter)
}

.pf .pf-option__head {
  grid-template-columns: 1.75rem minmax(0, 1.4fr) minmax(0, 1fr) auto
}

.pf .pf-block__head {
  grid-template-columns: 1.75rem minmax(0, 1fr) minmax(0, 1.6fr) auto
}

.pf .pf-option__extra {
  padding-left: 0
}

/* Lines inside an option: the column labels sit on the card's fields */
.pf .pf-option > .pf-line.pf-head {
  margin-bottom: calc(var(--mem-space-4) * -1 + var(--mem-space-1))
}

/* Small actions under a list keep their natural width */
.pf .pf-block__row,
.pf .pf-lines__foot {
  align-items: center
}

/* Optional toggles (bullet list, own payment schedule) read as one quiet row */
.pf .pf-block > .pf-text,
.pf .pf-option > .pf-text {
  padding-top: var(--mem-space-3);
  border-top: var(--mem-border-hairline) solid var(--ws-line)
}

/* Settings: same select style as the other fields */
.pf .pf-field #status_select {
  padding: 0 14px;
  font-size: inherit;
  color: var(--ws-text);
  background: var(--ws-bg);
  backdrop-filter: none
}

.pf .pf-field--full {
  grid-column: 1 / -1
}

.pf-image__label em {
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ws-faint);
  margin-left: var(--mem-space-1-5)
}

@media (max-width: 48rem) {
  .pf .pf-block > :not(.pf-block__head):not([type=hidden]),
  .pf .pf-option > :not(.pf-option__head):not([type=hidden]) {
    margin-left: 0
  }

  .pf .pf-option__head {
    grid-template-columns: 1fr
  }

  .pf .pf-block__head,
  .pf .pf-option__head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center
  }

  /* Number on the left, tools on the right, fields underneath */
  .pf .pf-block__head [data-block-n],
  .pf .pf-option__head .pf-option__letter {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0
  }

  .pf .pf-block__tools,
  .pf .pf-option__remove {
    grid-column: 2;
    grid-row: 1;
    justify-self: end
  }

  .pf .pf-block__head .pf-field,
  .pf .pf-option__head .pf-field {
    grid-column: 1 / -1
  }

  /* Priced lines on a phone: title, then quantity · price · total */
  .pf .pf-line--rich {
    grid-template-columns: 4.5rem minmax(0, 1fr) auto
  }

  .pf .pf-line--rich > input[name=item_description] {
    grid-column: 1 / 3;
    grid-row: 1
  }

  .pf .pf-line--rich > .ie-icon {
    grid-column: 3;
    grid-row: 1;
    justify-self: end
  }

  .pf .pf-line--rich > input[name=item_quantity] {
    grid-column: 1;
    grid-row: 2
  }

  .pf .pf-line--rich > input[name=item_price] {
    grid-column: 2;
    grid-row: 2
  }

  .pf .pf-line--rich > .pf-line__total {
    grid-column: 3;
    grid-row: 2;
    align-self: center;
    padding-top: 0
  }

  .pf .pf-line--rich > .pf-line__details,
  .pf .pf-line--rich > .pf-line__from {
    grid-column: 1 / -1
  }
}

/* ── Editor: write in place ────────────────────────────────────────────────
   Titles look like titles, small labels like small labels, "one per line"
   boxes are lists, and text boxes grow with what you write. */

/* Text boxes grow with their content (a script does the same where this
   isn't supported) */
#proposal-editor-form textarea {
  field-sizing: content;
  min-height: 5rem;
  resize: none;
  overflow-y: hidden
}

#proposal-editor-form .pf-card-row textarea {
  min-height: 3.5rem
}

/* Field labels that the field itself makes obvious: kept for screen readers */
#proposal-editor-form .pf-field--bare > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap
}

/* Borderless until you point at them */
#proposal-editor-form .pf-field--bare input,
#proposal-editor-form .pf-card-row input[name=card_title],
#proposal-editor-form .pf-card-row textarea {
  background: transparent !important;
  border-color: transparent !important;
  transition: border-color var(--mem-ui-interaction), background-color var(--mem-ui-interaction)
}

#proposal-editor-form .pf-field--bare input:hover,
#proposal-editor-form .pf-card-row input[name=card_title]:hover,
#proposal-editor-form .pf-card-row textarea:hover {
  border-color: var(--ws-line) !important
}

#proposal-editor-form .pf-field--bare input:focus,
#proposal-editor-form .pf-card-row input[name=card_title]:focus,
#proposal-editor-form .pf-card-row textarea:focus {
  border-color: var(--ws-line-strong) !important;
  background: var(--ws-raise) !important
}

#proposal-editor-form .pf-title input {
  min-height: 3rem;
  font: var(--mem-weight-medium) var(--mem-type-h5)/1.15 var(--mem-font-display);
  text-transform: uppercase;
  letter-spacing: .01em
}

#proposal-editor-form .pf-kicker input {
  min-height: 2rem;
  font-size: var(--mem-type-2xs);
  font-weight: var(--mem-weight-medium);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ws-lilac)
}

#proposal-editor-form .pf-sumline input {
  min-height: 2.25rem;
  font-size: var(--mem-type-sm);
  color: var(--ws-muted)
}

#proposal-editor-form .pf-card-row input[name=card_title] {
  font-weight: var(--mem-weight-medium)
}

#proposal-editor-form .pf-card-row textarea {
  font-size: var(--mem-type-sm);
  color: var(--ws-muted)
}

/* Timing as a pill, like on the client page */
#proposal-editor-form .pf-phase-row__when input {
  min-height: 2.25rem;
  border-radius: var(--mem-radius-pill, 999px) !important;
  border-color: var(--ws-line) !important;
  font-size: var(--mem-type-xs);
  letter-spacing: .04em;
  text-align: center
}

/* Heads: number + small label + tools on one line, the title underneath */
#proposal-editor-form .pf-block__head {
  grid-template-columns: 1.75rem minmax(0, 1fr) auto;
  grid-template-areas:
    "n kicker tools"
    ". title title";
  align-items: center;
  row-gap: 0
}

#proposal-editor-form .pf-block__head [data-block-n] { grid-area: n; margin-bottom: 0 }
#proposal-editor-form .pf-block__head .pf-kicker { grid-area: kicker }
#proposal-editor-form .pf-block__head .pf-title { grid-area: title }
#proposal-editor-form .pf-block__head .pf-block__tools { grid-area: tools; grid-column: auto; grid-row: auto }

#proposal-editor-form .pf-option__head {
  grid-template-columns: 1.75rem minmax(0, 1fr) auto;
  grid-template-areas:
    "n title remove"
    ". sum sum";
  align-items: center;
  row-gap: 0
}

#proposal-editor-form .pf-option__head .pf-option__letter { grid-area: n; margin-bottom: 0 }
#proposal-editor-form .pf-option__head .pf-title { grid-area: title }
#proposal-editor-form .pf-option__head .pf-sumline { grid-area: sum }
#proposal-editor-form .pf-option__head .pf-option__remove { grid-area: remove; grid-column: auto; grid-row: auto }

#proposal-editor-form .pf-phase-row {
  grid-template-columns: 1.75rem minmax(0, 1fr) 9rem 2.25rem;
  align-items: center
}

#proposal-editor-form .pf-phase-row__n {
  margin-bottom: 0
}

#proposal-editor-form .pf-phase-row > .ie-icon {
  margin-bottom: 0
}

/* Lists: one point per row */
#proposal-editor-form .pf-list {
  display: flex;
  flex-direction: column;
  gap: var(--mem-space-1);
  min-width: 0
}

#proposal-editor-form .pf-line--rich > .pf-list {
  grid-column: 1 / -2
}

#proposal-editor-form .pf-list__items {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--mem-border-hairline) solid var(--ws-line)
}

#proposal-editor-form .pf-list__item {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr) 2rem;
  align-items: center;
  border-bottom: var(--mem-border-hairline) solid var(--ws-line);
  transition: background-color var(--mem-ui-interaction)
}

#proposal-editor-form .pf-list__item::before {
  content: "";
  justify-self: center;
  width: .3125rem;
  height: .3125rem;
  border-radius: var(--mem-radius-circle);
  background: var(--ws-lilac)
}

#proposal-editor-form .pf-list__item:focus-within {
  background: var(--ws-raise)
}

#proposal-editor-form .pf-list .pf-list__input {
  width: 100%;
  min-width: 0;
  min-height: 2.5rem !important;
  height: auto !important;
  padding: 0 var(--mem-space-2) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none;
  font-size: var(--mem-type-sm);
  color: var(--ws-text)
}

#proposal-editor-form .pf-list__remove {
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--mem-radius-circle);
  background: transparent;
  color: var(--ws-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--mem-ui-interaction)
}

#proposal-editor-form .pf-list__item:hover .pf-list__remove,
#proposal-editor-form .pf-list__item:focus-within .pf-list__remove {
  opacity: 1
}

#proposal-editor-form .pf-list__remove:hover {
  color: var(--ws-text);
  background: rgba(255, 255, 255, .06)
}

#proposal-editor-form .pf-list__add {
  align-self: flex-start;
  padding: var(--mem-space-1) var(--mem-space-2);
  border: 0;
  border-radius: var(--mem-radius-md);
  background: transparent;
  color: var(--ws-muted);
  font-size: var(--mem-type-xs);
  cursor: pointer
}

#proposal-editor-form .pf-list__add:hover,
#proposal-editor-form .pf-list__add:focus-visible {
  color: var(--ws-text)
}

/* Numbers without spinner arrows */
#proposal-editor-form input[type=number] {
  appearance: textfield;
  -moz-appearance: textfield
}

#proposal-editor-form input[type=number]::-webkit-inner-spin-button,
#proposal-editor-form input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0
}

@media (hover: none) {
  #proposal-editor-form .pf-list__remove {
    opacity: 1
  }
}

@media (max-width: 48rem) {
  #proposal-editor-form .pf-line--rich > .pf-list {
    grid-column: 1 / -1
  }

  /* Phones: number and tools on top, the name full width underneath */
  #proposal-editor-form .pf-option__head {
    grid-template-columns: 1.75rem minmax(0, 1fr) auto;
    grid-template-areas:
      "n . remove"
      "title title title"
      "sum sum sum"
  }

  #proposal-editor-form .pf-block__head {
    grid-template-areas:
      "n kicker tools"
      "title title title"
  }

  #proposal-editor-form .pf-phase-row {
    grid-template-columns: 1.75rem minmax(0, 1fr) 2.25rem;
    grid-template-areas:
      "n when x"
      "title title title"
      "text text text"
      "steps steps steps"
  }

  #proposal-editor-form .pf-phase-row__when {
    justify-self: start;
    width: 9rem
  }

  /* An older phone rule puts every phase field in the first column */
  #proposal-editor-form .pf-phase-row__n { grid-area: n }
  #proposal-editor-form .pf-phase-row__title { grid-area: title }
  #proposal-editor-form .pf-phase-row__when { grid-area: when }
  #proposal-editor-form .pf-phase-row > .ie-icon { grid-area: x }
  #proposal-editor-form .pf-phase-row__text { grid-area: text }
  #proposal-editor-form .pf-phase-row__steps { grid-area: steps }
}