/* Synapse Update 104 — shared visual / responsive language */
:root{
  --syn-bg:#090d0e;
  --syn-panel:#111617;
  --syn-panel-2:#171d1e;
  --syn-panel-3:#202829;
  --syn-line:rgba(255,255,255,.11);
  --syn-line-strong:rgba(255,255,255,.18);
  --syn-text:#f4f6f6;
  --syn-muted:#8f999b;
  --syn-red:#f2382d;
  --syn-red-soft:rgba(242,56,45,.12);
  --syn-radius:12px;
  --syn-header-h:58px;
}

html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--syn-bg)}
body{min-width:0;background:var(--syn-bg);color:var(--syn-text)}
img,svg,video,canvas{max-width:100%}
button,a,input,select,textarea{box-sizing:border-box}

/* All primary application headers share the same physical language. */
:is(.quote-topbar,.quote-editor-topbar,.diary-toolbar,.rollcalc-head,.cut-list-topbar,.colour-match-topbar,.contra-topbar,.toolbar,.synapse-standard-header,.client-portal-head){
  position:sticky;
  top:0;
  z-index:120;
  min-height:var(--syn-header-h);
  box-sizing:border-box;
  padding-left:max(14px,env(safe-area-inset-left));
  padding-right:max(14px,env(safe-area-inset-right));
  border-bottom:1px solid var(--syn-line)!important;
  background:rgba(17,22,23,.96)!important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

/* Consistent navigation/action buttons in the page header. */
:is(.quote-topbar,.quote-editor-topbar,.diary-toolbar,.rollcalc-head,.cut-list-topbar,.colour-match-topbar,.contra-topbar,.toolbar,.synapse-standard-header,.client-portal-head)
:is(a,button){
  min-height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--syn-line-strong);
  border-radius:999px;
  padding:6px 11px;
  background:#1c2324;
  color:#fff;
  text-decoration:none;
  font-size:8px;
  font-weight:900;
  line-height:1;
  letter-spacing:.045em;
  white-space:nowrap;
}

:is(.quote-topbar,.quote-editor-topbar,.diary-toolbar,.rollcalc-head,.cut-list-topbar,.colour-match-topbar,.contra-topbar,.toolbar,.synapse-standard-header,.client-portal-head)
:is(a,button):hover{
  border-color:rgba(255,255,255,.30);
  background:#252e30;
  color:#fff;
}

/* The left navigation block always starts at the same visual position. */
:is(.quote-topbar-left-nav,.quote-header-left-nav,.diary-header-left-nav,.rollcalc-head-left,.synapse-header-left){
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
}

/* New common header markup used by fabrication/utility pages. */
.synapse-standard-header{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:12px;
}
.synapse-header-left{justify-self:start}
.synapse-header-title{justify-self:center;min-width:0;text-align:center;display:grid;gap:2px}
.synapse-header-title strong{font-size:12px;letter-spacing:.055em}
.synapse-header-title span{color:var(--syn-muted);font-size:7px;font-weight:800;letter-spacing:.08em}
.synapse-header-actions{justify-self:end;display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}

/* Cards/forms get the same radius/edge treatment without fighting page layouts. */
:is(.settings-panel,.rollcalc-panel,.rollcalc-intro,.rollcalc-primary,.rollcalc-result-card,.rollcalc-visual-card,.card,.client-login-card,.client-portal-card){
  border-radius:var(--syn-radius)!important;
}

/* Better touch behaviour / no iPhone focus zoom. */
@media(max-width:760px){
  :root{--syn-header-h:54px}
  input:not([type=checkbox]):not([type=radio]):not([type=color]),select,textarea{font-size:16px!important}
  button,a{touch-action:manipulation}
  dialog,.modal{max-width:calc(100vw - 18px)!important;max-height:calc(100dvh - 18px)!important}

  :is(.quote-topbar,.quote-editor-topbar,.diary-toolbar,.cut-list-topbar,.colour-match-topbar,.contra-topbar,.toolbar,.synapse-standard-header){
    padding-left:max(9px,env(safe-area-inset-left));
    padding-right:max(9px,env(safe-area-inset-right));
  }

  :is(.quote-topbar,.quote-editor-topbar,.diary-toolbar,.cut-list-topbar,.colour-match-topbar,.contra-topbar,.toolbar,.synapse-standard-header)
  :is(a,button){min-height:40px;padding:7px 10px}

  .synapse-standard-header{grid-template-columns:1fr auto;gap:7px 9px}
  .synapse-header-left{grid-column:1;grid-row:1}
  .synapse-header-actions{grid-column:2;grid-row:1}
  .synapse-header-title{grid-column:1/-1;grid-row:2;justify-self:start;text-align:left;padding-bottom:5px}

  .quote-editor-actions,.quote-top-actions,.diary-actions{gap:5px!important;flex-wrap:wrap!important}
  .quote-editor-actions{width:100%;justify-content:flex-start!important}

  .client-tools-dashboard,.workshop-dashboard-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }

  .tablewrap,.quote-table-wrap,.contra-table-wrap,.sheet-cut-results,.cut-list-results{overflow-x:auto;-webkit-overflow-scrolling:touch}
}

@media(max-width:430px){
  .client-tools-dashboard,.workshop-dashboard-grid{grid-template-columns:1fr!important}
  .synapse-header-actions{max-width:55vw;overflow-x:auto;flex-wrap:nowrap;justify-content:flex-start;scrollbar-width:none}
  .synapse-header-actions::-webkit-scrollbar{display:none}
}

@media(print){
  :is(.quote-topbar,.quote-editor-topbar,.diary-toolbar,.rollcalc-head,.cut-list-topbar,.colour-match-topbar,.contra-topbar,.toolbar,.synapse-standard-header,.client-portal-head){position:static!important;backdrop-filter:none!important}
}


/* Update 105 — Mac header consistency pass */
.equipment-standard-header{width:100%;margin:0 0 12px}
.equipment-standard-header .synapse-header-title strong{font-size:12px;font-weight:900}
.equipment-standard-header #add-item{margin:0!important}
.equipment-page>.equipment-standard-header{height:auto!important;border-radius:0!important}
.equipment-page>.equipment-standard-header a,.equipment-page>.equipment-standard-header button{box-shadow:none!important}
.workshop-dashboard-shell{width:min(1180px,calc(100vw - 34px))!important;max-width:1180px!important;padding-top:0!important}
.workshop-standard-header{width:100%;margin:0 0 18px}
.synapse-header-context{color:rgba(255,255,255,.46);font-size:8px;font-weight:900;letter-spacing:.08em}
.workshop-dashboard-grid{margin:18px auto 0!important;gap:14px!important}
.workshop-dashboard-tile{border:1px solid rgba(255,255,255,.18)!important;border-radius:18px!important;background:rgba(18,23,24,.84)!important;box-shadow:0 16px 42px rgba(0,0,0,.28)}
.workshop-dashboard-tile span{font-size:clamp(12px,1.2vw,18px)!important}
@media(hover:hover){.workshop-dashboard-tile:hover{transform:translateY(-3px)!important;border-color:rgba(242,56,45,.72)!important;background:rgba(242,56,45,.09)!important}}
@media(max-width:760px){.equipment-standard-header .synapse-header-left{flex-wrap:wrap}.workshop-dashboard-shell{width:calc(100% - 18px)!important}.workshop-standard-header{margin-bottom:10px}.workshop-dashboard-grid{margin-top:10px!important}}


/* ======================================================================
   SYNAPSE UPDATE 106 — FINAL SITE FORMATTING PASS
   Diary + Quoting Tool are the visual reference.
   ====================================================================== */
:root{
  --syn-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --syn-bg:#090d0e;
  --syn-panel:#111617;
  --syn-panel-2:#171d1e;
  --syn-panel-3:#202829;
  --syn-input:#0d1213;
  --syn-line:rgba(255,255,255,.11);
  --syn-line-strong:rgba(255,255,255,.18);
  --syn-text:#f4f6f6;
  --syn-muted:#8f999b;
  --syn-muted-2:#667173;
  --syn-red:#f2382d;
  --syn-red-hover:#ff4a3e;
  --syn-red-soft:rgba(242,56,45,.11);
  --syn-green:#75d6a1;
  --syn-radius-sm:8px;
  --syn-radius:12px;
  --syn-radius-lg:16px;
  --syn-shadow:0 16px 42px rgba(0,0,0,.24);
  --syn-header-h:58px;
}

html,body{font-family:var(--syn-font)!important}
body{font-size:13px;line-height:1.4;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,select,textarea{font-family:var(--syn-font)!important}
button{cursor:pointer}
button:disabled{cursor:default}

/* Clear keyboard focus everywhere without changing mouse appearance. */
:where(a,button,input,select,textarea):focus-visible{
  outline:2px solid var(--syn-red)!important;
  outline-offset:2px;
}

/* HEADER PROFILE ------------------------------------------------------ */
:is(.quote-topbar,.quote-editor-topbar,.diary-toolbar,.rollcalc-head,.cut-list-topbar,
    .colour-match-topbar,.contra-topbar,.toolbar,.synapse-standard-header,.client-portal-head,
    .pat-cert-topbar,.workshop-admin-head,.workshop-staff-head,.publish-toolbar){
  min-height:var(--syn-header-h)!important;
  border-bottom:1px solid var(--syn-line)!important;
  background:rgba(17,22,23,.97)!important;
  box-shadow:none!important;
}

:is(.quote-page-title,.quote-editor-heading strong,.diary-title,.synapse-header-title strong,
    .pat-cert-topbar strong,.workshop-admin-head strong,.workshop-staff-head strong){
  color:var(--syn-text)!important;
  font-family:var(--syn-font)!important;
  font-size:12px!important;
  font-weight:900!important;
  line-height:1.15!important;
  letter-spacing:.055em!important;
  text-transform:uppercase;
}

:is(.quote-editor-heading span,.diary-save-status,.synapse-header-title span,
    .pat-cert-topbar .pat-cert-next,.workshop-admin-head span,.workshop-staff-head span){
  color:var(--syn-muted)!important;
  font-size:7px!important;
  font-weight:800!important;
  letter-spacing:.075em!important;
  text-transform:uppercase;
}

/* Header navigation = pill buttons everywhere. */
:is(.quote-topbar,.quote-editor-topbar,.diary-toolbar,.rollcalc-head,.cut-list-topbar,
    .colour-match-topbar,.contra-topbar,.toolbar,.synapse-standard-header,.client-portal-head,
    .pat-cert-topbar,.workshop-admin-head,.workshop-staff-head)
:is(a,button){
  min-height:36px!important;
  padding:6px 11px!important;
  border:1px solid var(--syn-line-strong)!important;
  border-radius:999px!important;
  background:#1c2324!important;
  color:#fff!important;
  box-shadow:none!important;
  text-decoration:none!important;
  font-size:8px!important;
  font-weight:900!important;
  line-height:1!important;
  letter-spacing:.045em!important;
  text-transform:uppercase;
  transition:background .14s ease,border-color .14s ease,transform .14s ease;
}
:is(.quote-topbar,.quote-editor-topbar,.diary-toolbar,.rollcalc-head,.cut-list-topbar,
    .colour-match-topbar,.contra-topbar,.toolbar,.synapse-standard-header,.client-portal-head,
    .pat-cert-topbar,.workshop-admin-head,.workshop-staff-head)
:is(a,button):hover:not(:disabled){background:#262f31!important;border-color:rgba(255,255,255,.31)!important}

/* Main positive action in header remains visibly red. */
:is(.quote-topbar,.quote-editor-topbar,.synapse-standard-header)
:is(.quote-primary,.quote-save-button,#save-contra,#save,#new-plan):not(:disabled){
  border-color:var(--syn-red)!important;
  background:var(--syn-red)!important;
  color:#fff!important;
}

/* PANELS / CARDS ------------------------------------------------------ */
:is(.quote-list-panel,.quote-meta-panel,.quote-totals-panel,.job-costing-panel,.quote-notes-panel,
    .client-admin-panel,.client-share-overview-summary,.client-login-card,.client-portal-quote,
    .client-tools-dashboard-tile,.settings-panel,.card,.cut-list-list,.colour-match-card,
    .saved-colour-matches,.contra-card,.contra-summary article,.rollcalc-panel,.rollcalc-intro,
    .rollcalc-primary,.rollcalc-result-card,.rollcalc-visual-card,.workshop-panel,
    .workshop-staff-file,.workshop-login-card,.equipment-picker-card){
  border-color:var(--syn-line)!important;
  border-radius:var(--syn-radius)!important;
  box-shadow:none;
}

/* General page headings use one hierarchy. */
:is(.settings-page,.client-admin-page,.cut-list-page,.colour-match-page,.contra-page,.rollcalc-shell,
    .workshop-admin-body,.client-portal-shell,.equipment-page) h1{
  font-family:var(--syn-font)!important;
  font-size:clamp(20px,2vw,28px);
  line-height:1.12;
  font-weight:800;
  letter-spacing:-.025em;
}
:is(.settings-page,.client-admin-page,.cut-list-page,.colour-match-page,.contra-page,.rollcalc-shell,
    .workshop-admin-body,.client-portal-shell,.equipment-page) h2{
  font-family:var(--syn-font)!important;
  font-size:14px;
  line-height:1.2;
  font-weight:900;
  letter-spacing:.04em;
}

/* Repeated eyebrow / field labels. */
:is(.quote-meta-panel,.settings-page,.client-admin-page,.cut-list-page,.colour-match-page,.contra-page,
    .rollcalc-shell,.workshop-admin-body,.client-portal-shell,.equipment-page)
:is(label>span,.colour-eyebrow,.contra-eyebrow,.smallcap){
  font-family:var(--syn-font)!important;
  font-size:8px!important;
  font-weight:850!important;
  letter-spacing:.055em!important;
}

/* FORMS --------------------------------------------------------------- */
:is(.settings-page,.client-admin-page,.cut-list-page,.colour-match-page,.contra-page,.rollcalc-shell,
    .workshop-admin-body,.client-portal-shell,.equipment-page,.quote-meta-panel,.quote-import-wrap)
:is(input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]),select,textarea){
  border:1px solid var(--syn-line-strong)!important;
  border-radius:var(--syn-radius-sm)!important;
  background:var(--syn-input)!important;
  color:var(--syn-text)!important;
  box-shadow:none!important;
}
:is(.settings-page,.client-admin-page,.cut-list-page,.colour-match-page,.contra-page,.rollcalc-shell,
    .workshop-admin-body,.client-portal-shell,.equipment-page,.quote-meta-panel,.quote-import-wrap)
:is(input,select,textarea):focus{
  border-color:rgba(242,56,45,.72)!important;
}
::placeholder{color:#697375!important;opacity:1}

/* NORMAL PAGE ACTION BUTTONS ----------------------------------------- */
:is(.settings-page,.client-admin-page,.cut-list-page,.colour-match-page,.contra-page,.rollcalc-shell,
    .workshop-admin-body,.client-portal-shell,.equipment-page,.quote-list-panel,.quote-import-wrap,
    .job-costing-panel,.quote-notes-panel,.editor-actions)
button:not(.quote-line-move):not(.quote-line-remove):not(.quote-section-color):not(.diary-colour-button){
  border-radius:var(--syn-radius-sm);
  font-family:var(--syn-font)!important;
  font-weight:850;
  letter-spacing:.025em;
  transition:background .14s ease,border-color .14s ease,transform .14s ease;
}

:is(.quote-primary,.quote-save-button,.colour-save-button,#roll-calculate,
    .workshop-upload-form button[type=submit],.client-login-card button[type=submit],
    .login-submit,.nigel-remember-yes){
  border-color:var(--syn-red)!important;
  background:var(--syn-red)!important;
  color:#fff!important;
}
:is(.quote-primary,.quote-save-button,.colour-save-button,#roll-calculate,
    .workshop-upload-form button[type=submit],.client-login-card button[type=submit],
    .login-submit,.nigel-remember-yes):hover{background:var(--syn-red-hover)!important}

:is(.quote-delete-button,.quote-danger,.delete-button,.equipment-delete-item,.quote-section-remove){
  border-color:rgba(242,56,45,.46)!important;
  background:rgba(242,56,45,.08)!important;
  color:#ffaaa5!important;
}

/* DASHBOARDS / TILES -------------------------------------------------- */
:is(.dashboard-tile,.client-tools-dashboard-tile,.workshop-dashboard-tile){
  border:1px solid var(--syn-line-strong)!important;
  border-radius:var(--syn-radius-lg)!important;
  background:linear-gradient(180deg,rgba(23,29,30,.96),rgba(15,20,21,.96))!important;
  color:var(--syn-text)!important;
  box-shadow:none!important;
  text-decoration:none!important;
  transition:transform .14s ease,border-color .14s ease,background .14s ease!important;
}
:is(.dashboard-tile,.client-tools-dashboard-tile,.workshop-dashboard-tile)
:is(.tile-title,span){
  font-family:var(--syn-font)!important;
  font-weight:900!important;
  letter-spacing:.045em!important;
}
@media(hover:hover){
  :is(.dashboard-tile,.client-tools-dashboard-tile,.workshop-dashboard-tile):hover{
    transform:translateY(-2px)!important;
    border-color:rgba(242,56,45,.68)!important;
    background:linear-gradient(180deg,rgba(39,26,26,.98),rgba(20,18,18,.98))!important;
  }
}

/* Tables / list headings read consistently. */
:is(.quote-table-head,.published-table-head,.client-share-overview-header,.contra-table-head,
    .job-cost-line-head,.quote-line-header,.diary-grid-head){
  font-family:var(--syn-font)!important;
  font-size:8px!important;
  font-weight:900!important;
  letter-spacing:.045em!important;
  text-transform:uppercase;
}

/* Login screens feel like the same site. */
.login-page,.workshop-login-body{font-family:var(--syn-font)!important}
.login-overlay,.workshop-login-card,.nigel-remember-box{
  border-color:var(--syn-line-strong)!important;
  border-radius:var(--syn-radius-lg)!important;
  background:rgba(17,22,23,.98)!important;
  box-shadow:var(--syn-shadow)!important;
}
.login-page .back-button{
  min-height:36px;display:inline-flex;align-items:center;justify-content:center;
  padding:6px 11px;border:1px solid var(--syn-line-strong);border-radius:999px;
  background:#1c2324;color:#fff;text-decoration:none;font-size:8px;font-weight:900;letter-spacing:.045em;
}
.login-overlay :is(input,button),.workshop-login-card :is(input,button){font-family:var(--syn-font)!important}

/* Published quote toolbar: same controls, without touching printable quote body. */
.publish-toolbar{font-family:var(--syn-font)!important}
.publish-toolbar :is(a,button){border-radius:999px!important;font-size:8px!important;font-weight:900!important;letter-spacing:.04em!important}

/* Little status messages all use the same rounded treatment. */
:is(.quote-error,.client-notice,.dashboard-notice,.settings-message,.workshop-message,.client-login-error,
    .client-portal-load-error,.rollcalc-warning,.colour-warning){
  border-radius:var(--syn-radius-sm)!important;
}

/* MOBILE -------------------------------------------------------------- */
@media(max-width:760px){
  :root{--syn-header-h:54px}
  body{font-size:13px}
  :where(input:not([type=checkbox]):not([type=radio]):not([type=color]),select,textarea){font-size:16px!important}

  :is(.quote-topbar,.quote-editor-topbar,.diary-toolbar,.rollcalc-head,.cut-list-topbar,
      .colour-match-topbar,.contra-topbar,.toolbar,.synapse-standard-header,.client-portal-head,
      .pat-cert-topbar,.workshop-admin-head,.workshop-staff-head)
  :is(a,button){min-height:40px!important}

  :is(.quote-page-title,.quote-editor-heading strong,.diary-title,.synapse-header-title strong){font-size:11px!important}

  :is(.dashboard-tile,.client-tools-dashboard-tile,.workshop-dashboard-tile){border-radius:13px!important}

  .modal-backdrop{padding:max(9px,env(safe-area-inset-top)) max(9px,env(safe-area-inset-right)) max(9px,env(safe-area-inset-bottom)) max(9px,env(safe-area-inset-left))!important}
  .modal,.dialog-card{border-radius:14px!important}
}

@media(max-width:430px){
  .synapse-header-title span{font-size:6.5px!important}
}

@media(print){
  *{box-shadow:none!important}
}