/* Approved typeface C: Manrope. Text, sizes and weights are preserved. */
@font-face {
  font-family: Manrope;
  src: url('fonts/manrope-variable.ttf') format('truetype');
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}
body, button, input, select, textarea {
  font-family: Manrope, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
/* TripPocket — approved brand, 2026-09-28. */
.brand, .workspace .sidebar .brand {
  font-size: 26px; font-weight: 700; letter-spacing: -.6px;
  gap: 14px; text-transform: none; color: #252d39;
}
.brand small, .workspace .sidebar .brand small {
  font-size: 14px; line-height: 1.5; font-weight: 500;
  letter-spacing: 0; text-transform: none; color: #667080;
  margin-top: 2px;
}
.brand-icon, .workspace .sidebar .brand-icon { width: 58px; height: 58px; }
.login-layout { min-height: 100dvh; grid-template-columns: minmax(0, 1.1fr) minmax(380px, .9fr); }
.login-story { padding: clamp(28px, 5vw, 76px); background: #fff3e5; display: flex; flex-direction: column; }
.login-story .brand { margin-bottom: 0; }
.story-copy { position: relative; margin: auto 0; padding: 64px 0; max-width: 620px; }
.story-copy h1 { font-size: clamp(44px, 5vw, 70px); letter-spacing: -2px; line-height: 1.1; margin: 0 0 18px; }
.story-copy .brand-tagline { font-size: clamp(23px, 2.3vw, 30px); line-height: 1.3; color: #b4470c; letter-spacing: -.4px; margin: 0 0 28px; }
.story-copy p { display: block; max-width: none; font-size: 18px; line-height: 1.75; color: #515b66; margin: 0 0 20px; }
.story-copy .story-closing { color: #252d39; font-weight: 700; margin-top: 30px; margin-bottom: 0; }
.login-panel { padding: 48px 32px; }
.login-app-icon { display: block; width: 88px; height: 88px; margin-bottom: 28px; }
.login-card { width: 100%; max-width: 410px; }
.login-card h2 { font-size: 32px; line-height: 1.2; letter-spacing: -.7px; }
.dashboard-footer > span { color: #596575; }
@media (max-width: 900px) {
  .login-layout { grid-template-columns: 1fr 1fr; }
  .login-story { padding: 32px; }
  .login-panel { padding: 32px 24px; }
  .story-copy { padding: 48px 0; }
}
@media (max-width: 750px) {
  .login-layout { display: flex; flex-direction: column; min-height: 100dvh; }
  .login-story { padding: 26px 24px 8px; }
  .login-story .brand { font-size: 26px; }
  .story-copy { padding: 34px 0 12px; max-width: 620px; }
  .story-copy h1 { font-size: 40px; margin-bottom: 12px; }
  .story-copy .brand-tagline { font-size: 24px; margin-bottom: 22px; }
  .story-copy p { display: block; font-size: 16px; line-height: 1.7; margin-bottom: 16px; }
  .story-copy .story-closing { margin-top: 20px; }
  .login-panel { padding: 32px 24px; }
  .login-app-icon { display: none; }
  .login-card { max-width: 620px; }
  .login-card h2 { font-size: 28px; }
  .workspace .sidebar { gap: 12px; }
  .workspace .sidebar .brand { flex-basis: 100%; font-size: 26px; gap: 12px; }
  .workspace .sidebar .brand small { font-size: 14px; }
  .workspace .sidebar .brand-icon { width: 54px; height: 54px; }
  .workspace .sidebar > .full { margin-left: auto; }
}

.staging-banner {background:#693313;color:#fff;text-align:center;padding:8px;font-size:14px;font-weight:700;}
.account-actions {display:flex;gap:12px;align-items:center;}
.linked-provider {display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid #ffe3cc;}
#sign-in-apple {margin-top:12px;}

/* Keep the brand and primary trip actions available while the page scrolls. */
.workspace .app-header {
 position:sticky;top:0;z-index:10;height:auto;overflow:visible;
 display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 20px;
 padding:14px max(20px,env(safe-area-inset-right)) 12px max(20px,env(safe-area-inset-left));
 background:#fff;border-bottom:1px solid #f0e3d7;box-shadow:0 3px 12px #3b28100a;
}
.workspace .app-header .brand {min-width:0;grid-column:1;grid-row:1;flex-basis:auto;}
.workspace .app-header .session-actions {grid-column:2;grid-row:1;display:flex;align-items:center;gap:14px;}
.workspace .app-header .session-actions > .text-button {margin:0;min-height:44px;font-size:15px;line-height:1.35;font-weight:650;text-align:center;}
.notification-button {position:relative;width:48px;height:48px;border:0;border-radius:12px;background:#fff6eb;color:#c34b06;display:grid;place-items:center;flex-shrink:0;}
.notification-button svg {width:28px;height:28px;}
.notification-badge {position:absolute;top:-2px;right:-4px;min-width:22px;height:22px;padding:0 5px;border-radius:99px;background:#dc343c;color:white;border:2px solid white;display:grid;place-items:center;font-size:11px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;}
.header-trip-actions {grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;}
.header-trip-tools {display:flex;align-items:center;gap:8px;min-width:0;}
.header-trip-tools .button {font-size:14px;padding:9px 12px;min-height:44px;gap:6px;color:#596575;}
.header-trip-tools .ui-icon {width:20px;height:20px;}
#header-add-expense {font-size:16px;font-weight:650;min-height:48px;padding:12px 18px;flex-shrink:0;white-space:nowrap;}
.account-profile {display:flex;align-items:center;gap:12px;padding:0 0 22px;margin-bottom:22px;border-bottom:1px solid var(--line);}
.account-profile .avatar {width:42px;height:42px;font-size:20px;}
.account-profile > div {display:grid;gap:5px;flex:1;min-width:0;}
.account-profile strong {font-size:18px;overflow-wrap:anywhere;}
.account-profile span:not(.avatar),.account-profile small {font-size:14px;overflow-wrap:anywhere;line-height:1.5;color:#667080;}
.account-profile > button {font-size:15px;min-height:44px;flex-shrink:0;}
.account-link-consent {display:flex;gap:10px;align-items:flex-start;}
.account-link-consent input {width:20px;height:20px;min-height:20px;margin:1px 0 0;flex-shrink:0;accent-color:var(--orange);}
#enable-push:disabled {background:#e7e9ed;border-color:#d5dae0;color:#596575;opacity:1;cursor:default;}
@media (max-width:600px) {
 .workspace .app-header {padding:12px max(12px,env(safe-area-inset-right)) 10px max(12px,env(safe-area-inset-left));gap:12px 8px;}
 .workspace .app-header .brand {gap:8px;font-size:23px;letter-spacing:-.6px;}
 .workspace .app-header .brand small {font-size:11px;white-space:nowrap;}
 .workspace .app-header .brand-icon {width:46px;height:46px;}
 .workspace .app-header .session-actions {gap:8px;}
 .workspace .app-header .session-actions > .text-button {font-size:13px;max-width:75px;}
 .notification-button {width:44px;height:44px;}
 .header-trip-actions {gap:8px;}
 .header-trip-tools {gap:6px;}
 .header-trip-tools .button {font-size:12px;padding:8px;gap:4px;line-height:1.25;}
 .header-trip-tools .ui-icon {width:18px;height:18px;}
 #header-add-expense {font-size:14px;min-height:46px;padding:10px 12px;}
 .account-profile {flex-wrap:wrap;}
 .account-profile > div {min-width:160px;}
 .account-profile > button {margin-left:auto;}
}
@media (max-width:380px) {
 .workspace .app-header .brand {font-size:20px;gap:7px;}
 .workspace .app-header .brand small {font-size:10px;}
 .workspace .app-header .brand-icon {width:40px;height:40px;}
 .workspace .app-header .session-actions {gap:4px;}
 .workspace .app-header .session-actions > .text-button {font-size:12px;max-width:66px;}
 .header-trip-tools .button {font-size:11px;padding:6px;}
 .header-trip-tools .ui-icon {width:16px;height:16px;}
 #header-add-expense {font-size:13px;padding:9px;}
}