/* =======================================
   LINCmail – CLB 3L–4L Email Simulator
   Step 2: Mobile-first CSS (≤768px) with best practices
   ======================================= */
[hidden] { display: none !important; }
/* -----------------
   Design Tokens
   ----------------- */
:root {
  --color-primary: #E90101;       /* base red */
  --color-primary-dark: #C20000;  /* hover red */
  --color-primary-darker: #990000; /* pressed red */
  --color-delete: #C10000;
  --color-delete-hover: #B50300;
  --color-sidebar-hover: #FF7070;
  --color-grey-hover: #F4F4F5;
  --color-text: #1E1E1F;
  --color-muted: #717182;
  --color-sidebar-bg: #FDADAC;

  --font-body: 'Inter', sans-serif;
  --fs-body: 20px;
  --fs-header: 18px;
  --fs-subject: 20px;
  --fs-title: 24px;
  --fs-caption: 14px;

  --radius-sm: 10px;
  --radius-pill: 999px;
  --radius-snackbar: 24px;
  --radius-modal: 12px;

  --shadow-card: 0 2px 6px rgba(0,0,0,0.1);
  --shadow-fab: 0 4px 12px rgba(0,0,0,0.2);
  --shadow-snackbar: 0 4px 12px rgba(0,0,0,0.2);
  --shadow-hover: 0 2px 4px rgba(0,0,0,0.15);

  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
}

/* Respect user motion preferences — EXCEPT keep the welcome splash animated */
@media (prefers-reduced-motion: reduce) {
  /* Default: disable motion site-wide */
  * {
    transition: none !important;
    animation: none !important;
  }
  /* Exception: allow the splash to animate on this page */
  #welcome-splash,
  #welcome-splash * {
    transition: unset !important;  /* restores normal transitions */
    animation: unset !important;   /* restores normal animations (if any) */
  }
}


/* -----------------
   Base Styles
   ----------------- */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-text);
  background: #fff;
}

main {
  height: 100dvh; /* Full height panel on mobile */
  overflow-y: auto;
}

h1, h2, h3 {
  margin: 0;
  font-weight: 600;
}

button, input {
  font-family: inherit;
  font-size: inherit;
  border: none;
  outline: none;
}

/* Focus-visible for accessibility
   - Exclude .recipient-input because its whole field is highlighted instead */
button:focus-visible,
input:not(.recipient-input):focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* When anything inside a recipient-field has focus,
   highlight the outer box instead of the inner input */
.recipient-field:focus-within {
  border-color: var(--color-primary);
}

/* =======================================
   Welcome Splash Overlay (ADD-ONLY)
   - Fullscreen white overlay above the app
   - Animate only opacity + transform (GPU-friendly)
   - Controlled by body classes + JS removing [hidden]
   ======================================= */
#welcome-splash {
  position: fixed;
  inset: 0;
  /* White background to ensure strong contrast & hide app underneath */
  background: inherit;
  /* Respect iPhone notches / safe areas */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
  display: flex;                 /* active once [hidden] is removed */
  align-items: center;
  justify-content: center;
  z-index: 11000;                /* above sidebar/scrims */
  /* No transitions here; we animate the inner center */
}

.splash__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(12px, 3vh, 24px);

  /* Enter baseline: subtle scale-in (no parent fade) */
  transform: scale(0.98);
  will-change: transform;
  transition: transform 1200ms cubic-bezier(0.22,0.61,0.36,1);
}

/* Splash child fades (uniform speed; GPU-friendly) */
.splash__org,
.splash__title,
.splash__app {
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity   1200ms cubic-bezier(0.22,0.61,0.36,1),
    transform 1200ms cubic-bezier(0.22,0.61,0.36,1);
}

/* When splash turns on, fade ALL items in together (no stagger) */
body.splash-on .splash__org,
body.splash-on .splash__title,
body.splash-on .splash__app {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0ms;
}

/* On exit, fade out at the same slow speed, no delay */
.splash__center.splash-exit .splash__org,
.splash__center.splash-exit .splash__title,
.splash__center.splash-exit .splash__app {
  opacity: 0;
  transform: translateY(0);
  transition-duration: 1200ms;  /* match TRANS_MS in JS */
  transition-delay: 0ms;
}




/* When the splash is showing, fade/scale to 100% */
body.splash-on #welcome-splash .splash__center {
  transform: scale(1);
}

/* Exit: JS adds .splash-exit to fade out quickly (no overshoot) */
.splash__center.splash-exit {
  transform: scale(1.00);
}


/* Type & sizing */
.splash__title {
  font-size: clamp(20px, 5vw, 28px);
  font-weight: 700;
  color: var(--color-text);
  margin: clamp(4px, 1vh, 8px) 0;
}

/* Logos scale responsively */
.splash__org,
.splash__app {
  width: clamp(140px, 45vw, 320px);
  height: auto;
}

/* Optional: avoid scroll while splash is visible */
body.splash-on {
  overflow: hidden;
}

/* Login card: lightly hidden while splash is up, revealed after */
[data-login-card] {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity   240ms ease,
    transform 240ms ease;
}

body.splash-on [data-login-card] {
  opacity: 0;
  transform: translateY(6px);   /* small, accessible movement */
  pointer-events: none;         /* avoid accidental taps under splash */
}

body.splash-done [data-login-card] {
  opacity: 1;
  transform: translateY(0);
}

/* Respect reduced motion: animation already disabled via your global rule */

/* -----------------
   Header
   ----------------- */
#app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-sm) var(--spacing-md);
  background: #fff;
  box-shadow: var(--shadow-card);
}

#app-title {
  font-size: var(--fs-title);
}

#header-actions button {
  margin-left: var(--spacing-sm);
  background: none;
  cursor: pointer;
}

/* -----------------
   Navigation (mobile drawer)
   ----------------- */
/* Slide-in drawer (left) */
#sidebar {
  position: fixed;
  top: 0;
  left: 0;
  /* Match Figma width but stay responsive on small screens */
  /* Exact Figma width, but don’t overflow smaller phones */
  width: min(393px, 100vw);
  height: 100dvh;
  background: var(--color-sidebar-bg);
  box-shadow: var(--shadow-card);
  padding: 0; /* inner column will handle spacing */

  /* Animation: slide + fade */
  transform: translateX(-100%);
  opacity: 0;
  transition:
    transform 0.28s cubic-bezier(.2,.8,.2,1),
    opacity   0.24s ease-out;

  will-change: transform, opacity;
  z-index: 9999; /* per Figma spec */
}


/* Drawer open state (support both names) */
#sidebar.is-open,
#sidebar.open {
  transform: translateX(0);
  opacity: 1;     /* fade in */
}



/* Dim background while the drawer is open */
#sidebar-scrim {
  position: fixed;
  inset: 0;               /* top:0; right:0; bottom:0; left:0 */
  background: rgba(0, 0, 0, 0.25);
  z-index: 900;           /* just under the sidebar */
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* Shown when JS toggles .show */
#sidebar-scrim.show {
  opacity: 1;
}

/* ===== Logo + Icon filenames mapping (ADD-ONLY) ===== */

/* 1) Folders: point each item to the correct SVG filename you provided. 
      Keep the path "images/". If your files are NOT in /images, change the path. */
#sidebar .nav-link[data-target="inbox-view"]  { --icon: url("images/inbox-icon.svg"); }
#sidebar .nav-link[data-target="sent-view"]   { --icon: url("images/sent-icon.svg"); }
#sidebar .nav-link[data-target="junk-view"]   { --icon: url("images/junk-icon.svg"); }
#sidebar .nav-link[data-target="drafts-view"] { --icon: url("images/drafts-icon.svg"); }
#sidebar .nav-link[data-target="trash-view"]  { --icon: url("images/trash-icon.svg"); }

/* 2) Sign Out: you didn’t provide a signout icon file, so ensure no icon is drawn */
.signout-button::before { content: none; }

/* 3) Logo: show the LINCmail logo image when the logo container is empty.
      Place logo-placeholder.png in /images/. 
      If your logo <img> is present, this CSS won’t interfere. */
.lincmail-logo:empty {
  min-height: 128.57px;                 /* match Figma height */
  background: url("images/logo-placeholder.png") no-repeat center / 180px 128.57px;
  /* The container is already centered and full-width from your earlier rules */
}

/* ===== Sidebar Scrim: click-blocker layering (ADD-ONLY) ===== */
/* Keep sidebar on top, scrim right under it, above everything else */
:root{
  --z-sidebar: 10002; /* sidebar top-most */
  --z-scrim:   10001; /* scrim just under sidebar */
}

/* raise the sidebar above all */
#sidebar { z-index: var(--z-sidebar); }

/* raise scrim above app UI and block clicks only when shown */
#sidebar-scrim {
  z-index: var(--z-scrim);
  pointer-events: none;        /* don't block when hidden/faded */
  touch-action: none;          /* avoid touch-through on mobile */
}

#sidebar-scrim.show {
  pointer-events: auto;        /* block clicks/taps when visible */
}


#sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#sidebar li {
  margin-bottom: var(--spacing-md);
}

#sidebar a,
#sidebar button {
  display: block;
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  text-align: left;
  text-decoration: none;
  color: var(--color-text);
  border-radius: var(--radius-sm);
  background: transparent;
}

@media (hover: hover) and (pointer: fine) {
  /* Hover for folder items only */
  #sidebar .nav-link:hover {
    background: #FF7070;   /* requested hover color */
    color: #000;           /* ensure text/icon (currentColor) stays readable */
  }
  /* Keep active pill red even on hover */
  #sidebar .nav-link[aria-current="page"]:hover,
  #sidebar .nav-link.active:hover {
    background: #E90101;   /* same as your active state */
    color: #fff;
  }
}

/* Touch/press feedback for mobile (devices without hover) */
@media (hover: none) and (pointer: coarse) {
  /* Show the same color when a folder is pressed or keyboard-focused */
  #sidebar .nav-link:active,
  #sidebar .nav-link:focus-visible {
    background: var(--color-sidebar-hover); /* #FF7070 */
    color: #000;
  }

  /* Keep active pill red even on press/focus */
  #sidebar .nav-link[aria-current="page"]:active,
  #sidebar .nav-link.active:active,
  #sidebar .nav-link[aria-current="page"]:focus-visible,
  #sidebar .nav-link.active:focus-visible {
    background: #E90101;
    color: #fff;
  }
}


/* ===== Sidebar (Figma structure & styles) — ADD-ONLY ===== */

/* Inner column: 291px wide with vertical gaps */
.sidebar-content {
  display: flex;
  flex-direction: column;
  width: 291px;
  height: 100dvh;                 /* keep full height */
  max-height: 100vh;              /* don’t exceed viewport */
  background-color: var(--color-sidebar-bg); /* #FDADAC */
  padding-top: 4px;               /* slightly tighter */
  padding-bottom: calc(32px + env(safe-area-inset-bottom)); /* room above iOS home bar */
  gap: 16px;
  overflow-y: auto;               /* enable vertical scroll */
  -webkit-overflow-scrolling: touch; /* smooth on iOS */
}
/* Main vertical stack above the footer */
.frame-minus-footer {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  height: 100%;
  flex: 1;            /* pushes footer to bottom */
  min-height: 0;      /* allow shrinking so scroll can work */
  /* optional: if you prefer scroll here instead of .sidebar-content, add:
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
  */
}
/* (optional) centered logo area */
.lincmail-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 10px 0 10px;    /* moved farther up: remove top padding */
  width: 100%;
}
.lincmail-logo img {
  width: 144px;              /* 80% of 180 */
  height: auto;              /* keep aspect ratio */
}


/* Folder stack – padding stays INSIDE its 100% width */
.folders {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 36px 0 28px;   /* RIGHT = 36px (nice pink strip; tweak 32–40) */
  width: 100%;
  box-sizing: border-box;      /* ✅ prevents overflow past the pink drawer */
}

/* List – no extra right padding (avoid double gap) */
.folders ul {
  list-style: none;
  margin: 0;
  padding: 0;                  /* ✅ single source of gap = .folders right padding */
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;      /* safety: padding won't expand width if added later */
}


/* override earlier li margin to avoid double spacing */
.folders li { margin-bottom: 0; }

/* Style your existing .nav-link buttons to match Figma items */
#sidebar .nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  background: none;
  color: #000;
  width: 100%;
  box-sizing: border-box; /* NEW: include padding in width calcs */
  text-align: left;
  cursor: pointer;
  border: none;
  font: inherit;
  transition: background 0.2s ease;
}


/* Adjust how far the active pill sits in from the left/right of the list */
:root { --active-pill-inset: 16px; } /* tweak 12–24px to taste */

/* Active pill: fills row, capped by a right gap (no overflow) */
#sidebar .nav-link[aria-current="page"],
#sidebar .nav-link.active {
  background: #E90101;
  color: #fff;
  display: flex;
  width: 100%;                      /* fill the padded row */
  border-radius: 14px;
  /* keep the same left padding as default so the icon has room */
  padding: 14px 22px 14px 48px;
  box-sizing: border-box;
}




/* Footer + Sign Out pill button */
.sidebar-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Mobile: lift Sign Out slightly while honoring iOS safe area */
  padding: 8px 0 calc(28px + env(safe-area-inset-bottom)) 0;
}

/* Desktop-only: push Sign Out higher so it isn't cut off
   on smartboards/projectors (wider screens only) */
@media (min-width: 900px) {
  .sidebar-footer {
    /* Increase bottom padding further on desktop to move Sign Out up a bit more */
    padding-bottom: calc(84px + env(safe-area-inset-bottom)); /* try 84px; tweak if needed */
  }
}




/* Scoped to the drawer to beat `#sidebar a,#sidebar button` */
#sidebar .signout-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: max-content;          /* prevents full-width */
  padding: 12px 26px 12px 26px;  /* top right bottom left – reduces left padding only */
  border-radius: 999px;
  border: 2px solid #1F2937;
  background-color: #FFFFFF;
  color: #000000;
  font-size: 16px;

  /* Align left edge of pill with folder pills (matches .folders { padding-left: 28px; }) */
  align-self: flex-start;
  margin-left: 28px;           /* mobile/base: align with folder list inset */

  cursor: pointer;
  transition: background 0.2s ease;
}


@media (hover: hover) and (pointer: fine) {
  #sidebar .signout-button:hover { background-color: #e5e7eb; } /* slightly darker for clearer hover */
}

/* (disabled) Sign Out pseudo-icon — using real <img> instead
#sidebar .signout-button::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  -webkit-mask: url("images/sign-icon.svg") no-repeat center / contain;
  mask: url("images/sign-icon.svg") no-repeat center / contain;
  background-color: currentColor;
}
*/



/* ===== Sidebar hamburger (inside drawer) — ADD-ONLY ===== */
.hamburger-frame {
  padding: 8px 0 8px 12px;   /* less vertical space above the logo */
  width: fit-content;
  height: fit-content;
}

.hamburger-button {
  width: 52px;   /* bigger tap target and visual match to header */
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}


.hamburger-button img {
  width: 40px;   /* was 34px; make the bars visually larger */
  height: 28px;  /* was 24px */
}


/* If you ever switch to the inline SVG version, keep sizes in sync */
.hamburger-svg { width: 32px; height: 22px; display: block; fill: currentColor; }


/* Accessible focus */
.hamburger-button:focus-visible {
  outline: 2px solid #1F2937;
  outline-offset: 2px;
  border-radius: 6px;
}

/* ===== Sidebar Tweaks (width + icons) — ADD-ONLY ===== */

/* (a) WIDTH: make the drawer a bit narrower than 393px.
   Tip: adjust  --sidebar-width: 300px;  or 320px  to taste. */
:root {
  --sidebar-width: 300px;      /* keep your current value here */
  --active-right-gap: 24px;    /* NEW: how much extra pink on the right */
}

#sidebar {
  /* last declaration wins, so this overrides the earlier width */
  width: min(var(--sidebar-width), 100vw);
}



/* Safety on very small phones */
@media (max-width: 360px) {
  #sidebar { width: 100vw; }
}

/* (b) ICONS: CSS-only icons using your existing data-target values.
   This draws a 20x20 icon at the left of each .nav-link.
   NOTE: You will still see the emoji in your current HTML until we remove
   them later. If it looks doubled, that’s expected for now. */

/* space for the icon */
#sidebar .nav-link {
  position: relative;
  padding-left: 48px; /* adds room so text doesn’t overlap the icon */
}

/* the icon itself (monochrome; inherits currentColor) */
#sidebar .nav-link::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-color: currentColor;
  /* SVG mask so the icon color follows text color (active = white) */
  -webkit-mask: var(--icon) no-repeat center / contain;
  mask: var(--icon) no-repeat center / contain;
}


/* map each button to an icon (update paths if your folder differs) */
#sidebar .nav-link[data-target="inbox-view"]  { --icon: url("images/inbox-icon.svg"); }
#sidebar .nav-link[data-target="sent-view"]   { --icon: url("images/sent-icon.svg"); }
#sidebar .nav-link[data-target="junk-view"]   { --icon: url("images/junk-icon.svg"); }
#sidebar .nav-link[data-target="drafts-view"] { --icon: url("images/drafts-icon.svg"); }
#sidebar .nav-link[data-target="trash-view"]  { --icon: url("images/trash-icon.svg"); }

/* Sign Out pill uses an inline <img>; no pseudo-icon needed */
#sidebar .signout-button::before { content: none !important; }
/* (Do not add padding-left here; keep the earlier padding:
   #sidebar .signout-button { padding: 12px 20px 12px 12px; } ) */

/* -----------------
   Login Layout (refined for mobile-first)
   ----------------- */
#login-view {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background-color: #fff;
  padding: 0 var(--spacing-md) var(--spacing-md);
  box-sizing: border-box;
}

/* Free Play desktop: push login content down (Task 1/2 unaffected) */
body:not(.task1-mode):not(.task2-mode) #login-view {
  padding-top: 110px;
}

body:not(.task1-mode):not(.task2-mode) #login-view .login-card {
  margin-top: 12px;
}

/* Logo section */
.login-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-lg);
}

.login-logo img {
  width: 160px;  /* Slightly smaller for better balance */
  height: auto;
}

/* Login intro: fade in logo, Help button, and card together (scoped to Login only) */
#login-view .login-logo img,
#login-view #login-help,
#login-view .login-card {
  animation: loginFadeIn 0.7s ease-out 0.05s both; /* medium speed, slight delay */
}

/* Keyframes for login fade-in */
@keyframes loginFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}



.login-card {
  width: auto;
  max-width: 373px;              /* matches your Figma card */
  background: var(--Background-Surface, #fff);
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
  padding: 32px;
  margin: 0 var(--spacing-lg);   /* adds left-right breathing room */
  display: flex;
  flex-direction: column;
  align-items: stretch; /* was: center — lets children use full card width */
  gap: 20px;
}


/* Center the login heading text only */
#login-heading {
  text-align: center;
}



.login-subtext {
  text-align: center;
  color: var(--color-muted);
  font-size: 16px;
  line-height: 1.4;
  margin-top: 4px;
  margin-bottom: 12px;
  max-width: 280px;    /* keeps nice readable width */
}


#login-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  width: 100%; /* make inputs' 100% actually fill the card */
}


/* Form Labels */
#login-form label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #000;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;          /* space between label and field */
}

/* Input Fields */
#login-form input {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 16px;
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.10);
  background: #E9EBEF;
  font-size: 16px;
  color: var(--color-text);
  box-sizing: border-box;
}

#login-form input:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

/* Password Wrapper */
.password-field {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

/* Password Input */
.password-field input {
  width: 100%;
  height: 48px;
  padding: 12px 48px 12px 18px;   /* room for the eye icon on the right */
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.10);
  background: #E9EBEF;
  font-size: 16px;                /* keeps iOS from zooming */
  color: var(--color-text);
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}


/* Eye Toggle Button */
.password-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: url("images/eye-open-icon.svg") no-repeat center;
  background-size: 24px 16px;
  border: none;
  width: 32px;
  height: 32px;
  padding: 0;
  cursor: pointer;
  opacity: 0.7;
  transition: background-image 0.15s ease, opacity 0.2s ease;
  z-index: 2;                     /* sits above the input only where the icon is */

  /* NEW: eye stays tappable */
  pointer-events: auto;
}


.password-toggle:hover,
.password-toggle:focus {
  opacity: 1;
  outline: none;
}

/* When pressed (eye closed) */
.password-toggle[aria-pressed="true"] {
  background-image: url("images/eye-closed-icon.svg");
  background-size: 28px 20px;
  right: 10px; /* nudged 2px closer to edge for visual centering */
}



/* Keep IE/Edge legacy buttons hidden (harmless elsewhere) */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
  display: none;
}

/* iOS Safari fix:
   Do NOT hide WebKit password decoration/clear containers.
   Hiding them can break tap/focus on real devices when type="password".
   Our custom eye icon stacks above anyway. */


#login-submit {
  background: var(--color-primary);
  color: #fff;
  padding: var(--spacing-md);
  border-radius: var(--radius-pill);
  cursor: pointer;
  box-shadow: var(--shadow-card);
  border: none;
  font-weight: 600;
  transition: background-color 0.25s ease, transform 0.1s ease;
  margin-top: 8px;
}

#login-submit:hover {
  background: var(--color-primary-dark);  /* darker red */
}

#login-submit:active {
  background: var(--color-primary-darker); /* darkest on press */
  transform: scale(0.97);
}




/* -----------------
   Global Help Button (top-right corner)
   ----------------- */
#login-help {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid #B0B0B0;
  background: #E9EBEF;
  color: #000;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: background-color 0.2s ease, transform 0.1s ease;
}

/* Landing Help: reuse the same styling */
#landing-help {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top));
  right: 16px;
  z-index: 1200;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid #B0B0B0;
  background: #E9EBEF;
  color: #000;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: background-color 0.2s ease, transform 0.1s ease;
}

#landing-help:hover { background: #D9DBDF; }
#landing-help:active { transform: scale(0.97); }




#login-help:hover {
  background: #D9DBDF;
}

#login-help:active {
  transform: scale(0.97);
}

/* -----------------
   QR Button (top-left, matches Help styling)
   ----------------- */
#login-qr,
#task1-qr-button,
#landing-qr {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid #B0B0B0;
  background: #E9EBEF;
  color: #000;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: background-color 0.2s ease, transform 0.1s ease;
  min-width: 56px; /* Short label but keeps a good tap target */
}

#login-qr:hover,
#task1-qr-button:hover {
  background: #D9DBDF;
}

#login-qr:active,
#task1-qr-button:active {
  transform: scale(0.97);
}

/* Normalize utility buttons (Help + QR) to identical height */
#login-help,
#login-qr,
#task1-qr-button {
  line-height: 1;       /* prevents the emoji on Help from inflating the line box */
  min-height: 44px;     /* consistent tap target and identical visual height */
}


/* -----------------
   Help Overlay + Snackbar (fixed version)
   ----------------- */
#help-overlay {
  position: fixed;
  inset: 0;                          /* full viewport */
  background: rgba(0, 0, 0, 0.5);
  align-items: center;
  justify-content: center;

  /* Raise above sidebar + confirm layers */
  z-index: 10008;
}

/* Use the existing [hidden] attribute to control visibility */
#help-overlay[hidden] {
  display: none !important;
}

/* If your JS ever adds .active, keep it compatible */
#help-overlay.active:not([hidden]) {
  display: flex;
}

/* When not hidden (default show state), render as flex to center the card */
#help-overlay:not([hidden]) {
  display: flex;
}


/* Snackbar card */
.help-snackbar {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  padding: 24px;
  max-width: 320px;
  width: 90%;
  text-align: center;
  animation: fadeIn 0.3s ease;
  user-select: text;                 /* allow copying */
  font-size: 20px; 
}

/* Mobile: allow scrolling if the Help modal is taller than the screen */
@media (max-width: 600px) {
  .help-snackbar {
    max-height: 80vh;
    overflow-y: auto;
  }
}


.help-snackbar h3,
.help-snackbar p,
.help-snackbar ul,
.help-snackbar li {
  user-select: text;                 /* allow copying inside snackbar */
}


.help-snackbar h3 {
  font-size: 20px;
  margin-bottom: 12px;
}

.help-snackbar p {
  margin-bottom: 8px;
  white-space: pre-line; /* respect \n line breaks */
}

.landing-help-line1 {
  display: block;
  text-align: center;
  margin-bottom: 6px;
  font-weight: 600;
}

.landing-help-line2 {
  display: block;
  text-align: left;
  margin-bottom: 0px; /* smaller gap before bullets */
}

.landing-help-list {
  text-align: left;
  margin: 0 0 4px;  /* tighter gap above, small gap below */
  padding-left: 20px;
}

.landing-help-list li {
  margin-bottom: 8px; /* more space between Task 1/Task 2/Free Play */
}

.landing-help-list li:last-child {
  margin-bottom: 0; /* no extra space after the last bullet */
}

.landing-help-end {
  display: block;
  text-align: center;
  margin: 0; /* remove extra gap before the final line */
}


.help-snackbar ul {
  text-align: left;
  margin: 8px 0 16px;
  padding-left: 20px;
}

.help-snackbar button {
  background: var(--color-primary);
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  margin-top: 20px;
  box-shadow: var(--shadow-card);
  transition: background-color 0.25s ease, transform 0.1s ease;
}

.help-snackbar button:hover {
  background: var(--color-primary-dark);  /* same darker red */
}

.help-snackbar button:active {
  background: var(--color-primary-darker); /* same darkest red */
  transform: scale(0.97);
}

/* -----------------
   QR Overlay (matches Help overlay behavior)
   ----------------- */
#qr-overlay {
  position: fixed;
  inset: 0;                          /* full viewport */
  background: rgba(0, 0, 0, 0.5);
  align-items: center;
  justify-content: center;
  z-index: 10008;                     /* same stacking as help overlay */
}

/* Use [hidden] to control visibility */
#qr-overlay[hidden] {
  display: none !important;
}

/* If JS adds .active, remain compatible */
#qr-overlay.active:not([hidden]) {
  display: flex;
}

/* When not hidden, render as flex to center the card */
#qr-overlay:not([hidden]) {
  display: flex;
}

/* Large, responsive QR image (slightly smaller + safe on short screens) */
#qr-image {
  display: block;
  max-width: min(76vw, 440px);  /* smaller than before */
  max-height: 68vh;             /* never taller than 68% of the screen */
  width: 100%;                  /* fill available width up to max-width */
  height: auto;
  margin: 0 auto 16px;
  user-select: none;
}

/* Close button in QR modal (matches help button look) */
#qr-close {
  background: var(--color-primary);
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  box-shadow: var(--shadow-card);
  transition: background-color 0.25s ease, transform 0.1s ease;
}

#qr-close:hover {
  background: var(--color-primary-dark);
}

#qr-close:active {
  background: var(--color-primary-darker);
  transform: scale(0.97);
}

/* === QR Modal hardening (ensures visible white card) === */
#qr-overlay:not([hidden]) {
  display: flex !important;          /* center children when visible */
  align-items: center;
  justify-content: center;
}

/* give breathing room around the card on tiny screens */
#qr-overlay {
  padding: 16px; /* adds space so the card never kisses the edges */
}

#qr-overlay .qr-modal {
  background-color: #fff !important; /* force white card */
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  padding: 20px;
  max-width: 520px;              /* was 560px */
  width: min(88vw, 520px);       /* was 92vw -> adds extra side margin */
  text-align: center;
  position: relative;
  overflow: hidden;
  animation: fadeIn 0.3s ease;
}


/* keep the slightly smaller, safe image sizing */
#qr-image {
  display: block;
  max-width: min(70vw, 360px);  /* smaller width */
  max-height: 60vh;             /* shorter so it fits on smartboards */
  width: 100%;
  height: auto;
  margin: 8px auto 16px;        /* tiny top space under the title */
  user-select: none;
}


/* -----------------
   Snackbar (temporary message)
   ----------------- */
#login-snackbar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(50, 50, 50, 0.95); /* slightly transparent dark */
  color: #fff;
  padding: 14px 28px; /* more breathing room */
  border-radius: 10px;
  font-size: 16px;
  display: inline-block;
  min-width: 260px; /* ensures consistent width */
  max-width: 340px; /* caps width for long text */
  text-align: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); /* subtle glow */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 3000;
}


#login-snackbar.show {
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}

/* ==========================
   Shared Snackbar Adjustments
   ========================== */

/* Apply same base styling to all snackbar IDs */
#compose-snackbar,
#reply-snackbar,
#global-snackbar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: #323232;
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 15px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 3000;

  /* ✅ NEW fixes */
  display: block;
  max-width: 320px;
  min-width: 220px;
  text-align: center;
  white-space: normal;
  line-height: 1.3;
  word-wrap: break-word;
}



/* Shared "show" animation state */
#compose-snackbar.show,
#reply-snackbar.show,
#global-snackbar.show {
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}

/* Mobile-safe offset — raise snackbar slightly above keyboard/buttons */
@media (max-height: 700px) or (max-width: 480px) {
  #login-snackbar,
  #compose-snackbar,
  #reply-snackbar,
  #global-snackbar {
    bottom: 64px; /* lifts snackbar higher on small devices */
  }
}


/* ==========================
   Confirm Snackbar (Matches All Others)
   ========================== */
#confirm-snackbar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  background: #323232;      /* 🔹 same dark background */
  color: #fff;              /* 🔹 same white text */
  text-align: center;
  max-width: 320px;
  min-width: 220px;
  padding: 12px 20px;
  border-radius: 8px;       /* 🔹 matches other snackbars */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  z-index: 5000;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease; /* 🔹 same timing */
  line-height: 1.3;
}

/* Show animation */
#confirm-snackbar.show {
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}

/* Inner layout (unchanged) */
#confirm-snackbar p {
  margin-bottom: 12px;
  font-weight: 500;
}

#confirm-snackbar .confirm-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}

/* Use your existing button variants */
#confirm-snackbar .send-button {
  height: 36px;
  padding: 0 18px;
}

#confirm-snackbar .cancel-button {
  height: 36px;
  padding: 0 18px;
  background: #fff;
  color: #000;
  border: 2px solid #000;
}

/* ---- Paste the overrides below this line ---- */

/* Match global primary button look: red, rounded, focus ring */
#confirm-snackbar .confirm-actions button {
  border-radius: var(--radius-sm, 10px);
  font-weight: 600;
  cursor: pointer;
  border: 0;
  box-shadow: var(--shadow-snackbar, 0 4px 12px rgba(0,0,0,0.2));
}

#confirm-snackbar .send-button {
  background: var(--color-primary, #E90101);
  color: #fff;
}

#confirm-snackbar .send-button:hover {
  filter: brightness(0.95);
}

#confirm-snackbar .cancel-button {
  background: #fff;
  color: #000;
  border: 2px solid #000;  /* keep outlined style */
}

#confirm-snackbar .cancel-button:hover {
  background: #f5f5f5;
}

/* Accessible keyboard focus */
#confirm-snackbar .confirm-actions button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Hover gated */
@media (hover: hover) and (pointer: fine) {
  #login-submit:hover {
    background: #d50000;
  }
}

/* -------------------------------------------
   INBOX HEADER – ACCOUNT MOBILE HEADER BAR
   (responsive-ready, mobile-first)
--------------------------------------------*/

/* Outer header container */
.header-bar {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  background: var(--color-sidebar-bg, #FDADAC);
  padding: 30px 4px 0 0;
  height: 128px;
  box-sizing: border-box;
  width: 100%;
}

/* Inner header content wrapper */
.header-content {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 80px;
  padding: 0 4px;
  flex: 1 0 0;
}

/* Profile group (menu + avatar + name + inbox) */
.profile-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding-top: 24px;
  flex: 1;
}

/* Menu icon */
.profile-group .menu-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  cursor: pointer;
}

/* Avatar */
.profile-group img {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}

/* Spacer frame */
.profile-group .spacer {
  width: 3px;
  height: 48px;
  padding: 10px;
  gap: 10px;
  flex-shrink: 0;
}

/* User info container (name + inbox label) */
.user-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 6px;
}

/* User name */
.user-info .user-name {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text, #000);
}

/* Inbox label (with small icon) */
.user-info .inbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.user-info .inbox-label img {
  width: 18px;
  height: 18px;
  aspect-ratio: 1/1;
}

.user-info .inbox-label span {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-muted, #717182);
}

/* Header folder title supports a small inline icon (e.g., Sent arrow) */
.mail-header .folder-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* The small icon beside the folder title in headers */
.mail-header .folder-title .folder-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  object-fit: contain;
}

/* Safety: if any older style injects an icon via ::before, disable it in headers */
.mail-header .folder-title::before {
  content: none !important;
}



/* Right-side icon group (trash, search, settings) */
.icon-group {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  gap: 30px;
  padding-right: 16px;
}

.icon-group img {
  width: 20px;
  height: 20px;
  aspect-ratio: 1/1;
  cursor: pointer;
}

/* Divider (below header) */
.header-divider {
  width: 100%;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.1);
}

/* -------------------------------------------
   RESPONSIVE ADJUSTMENTS
--------------------------------------------*/
@media (min-width: 480px) {
  .header-bar {
    padding: 32px 16px 0 16px;
  }

  .profile-group img {
    width: 60px;
    height: 60px;
  }

  .user-info .user-name {
    font-size: 22px;
  }

  .user-info .inbox-label span {
    font-size: 19px;
  }
}

@media (min-width: 768px) {
  .header-bar {
    justify-content: center;
    height: 140px;
  }

  .icon-group {
    gap: 40px;
  }
}

/* -------------------------------------------
   INBOX HEADER – Figma Accurate Styling
--------------------------------------------*/
 /* =====================================
    MAIL HEADER — Unified (Inbox + Compose)
    Final Figma-accurate layout
    ===================================== */

 .mail-header {
  position: sticky;
  top: 0;
  z-index: 1100;
  display: flex;
  align-items: center;            /* anchor all header items to the bottom edge */
  justify-content: space-between;
  background: var(--color-sidebar-bg, #FDADAC);
  padding: 36px 24px 18px 24px;  
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  border: none;
    /* ↓ Reduced avatar/icon sizes; keeps vertical centering math intact */
  --avatar: 44px;
  --icon: 22px;
  --center-offset: calc((var(--avatar) - var(--icon)) / 2);

}

/* Center every item inside the header row */
.mail-header > * {
  align-self: center;
}


/* inner elements */
.mail-header .user-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 0; /* override global .user-avatar { margin-right:12px } so text sits closer */
}


.mail-header .user-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 6px;
}

.mail-header .user-name {
  font-size: 20px;
  font-weight: 600;
  color: #000;
  margin: 0;
}

.mail-header .header-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 0; /* keep row flush with bottom edge */
  transform: none;

}

/* Ensure header action icons are a consistent size and avoid baseline shift */
.mail-header .header-actions img {
  width: 22px;
  height: 22px;
  display: block;
}

/* Align hamburger icon to avatar's vertical center inside the mail header */
.mail-header .hamburger {
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  margin-right: 12px;
  transform: none;
}


/* Force inner content lower inside the pink area */
.inbox-header .user-avatar,
.inbox-header .user-info,
.inbox-header .hamburger,
.inbox-header .header-actions {
  position: relative;
  top: 0px; /* moves everything visually lower inside the header */
}


.inbox-header > * {
  display: flex;
  align-items: center; /* ensures avatar, hamburger, and icons align */
  margin-top: 0px;
}

/* Left group (menu + avatar + name + folder) */
.inbox-header .hamburger {
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  margin-right: 12px;
}

.user-avatar {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 12px;
  flex-shrink: 0;
}

/* --- Avatar button reset: remove default gray fill/border, keep clear focus --- */
.avatar-btn {
  background: transparent;   /* removes gray button background */
  border: none;              /* removes default border */
  padding: 0;                /* prevents extra box around the img */
  margin: 0 12px 0 0;        /* keep the 12px gap before the name */
  line-height: 0;            /* eliminates inline gap around the img */
  border-radius: 50%;        /* keeps the clickable area circular */
  display: inline-flex;      /* centers the image within the button */
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.avatar-btn:focus-visible {
  outline: 2px solid var(--color-primary, #E90101); /* accessible focus ring */
  outline-offset: 3px;                               /* offset ring from the circle */
  border-radius: 50%;
}

/* Text group */
.user-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 6px;
}


/* User name */
.user-name {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 20px;
  font-weight: 600;
  color: #000;
  margin: 0;
}

/* Folder title (Inbox) */
.folder-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-muted, #717182);
  margin: 0;
}

.folder-title::before {
  content: url("images/inbox-icon.svg");
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: middle;
}

/* Right-side icons */
.header-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;                 /* tighter, Figma-accurate spacing */
  margin-left: auto;         /* pushes icons to the far right */
}

.header-actions button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.header-actions img {
  width: 24px;
  height: 24px;
  display: block;
}

/* =========================
   Tooltip: login email bubble
   - Hidden by default; JS positions it near the avatar
   - High contrast, readable, wraps long emails
   - Fade-only animation; respects reduced motion
   ========================= */
[data-email-tip][hidden] {
  display: none !important; /* ensure fully removed when hidden */
}

[data-email-tip] {
  position: fixed;                 /* robust to layout; JS sets exact top/left */
  top: 0;
  left: 0;
  max-width: 260px;
  padding: 8px 10px;
  font-size: 14px;
  line-height: 1.3;
  color: #fff;
  background: #111;                /* high contrast on pink header */
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  z-index: 10003;                  /* above sidebar (10002) and scrim (10001) */
  opacity: 0;                      /* animated in when opened */
  transform: translateY(0);        /* small nudge on open for subtle affordance */
  pointer-events: none;            /* bubble never steals focus/taps */
  overflow-wrap: anywhere;         /* wrap very long emails */
  -webkit-font-smoothing: antialiased;
  will-change: opacity, transform;
  transition: opacity 140ms ease-out, transform 140ms ease-out;
}


[data-email-tip].is-open {
  opacity: 1;
  transform: translateY(2px);      /* tiny motion; no bounce */
}

@media (prefers-reduced-motion: reduce) {
  [data-email-tip] {
    transition: none;
    transform: none;
  }
  [data-email-tip].is-open {
    transform: none;
  }
}


/* =====================================
   COMPOSE HEADER (Compact Variant)
   ===================================== */
.compact-header {
  padding: 8px 16px;            /* reduce height */
  min-height: 56px;             /* match Figma */
  align-items: center;
}

.compact-header .user-avatar {
  width: 32px;
  height: 32px;
}

.compact-header .user-name {
  font-size: 15px;
}

.compact-header .user-subtitle {
  font-size: 12px;
  color: #6B7280;               /* subtle gray */
}

.compact-header .header-actions button {
  font-size: 18px;              /* keep icons balanced */
}

/* Divider below header */

.inbox-divider {
  width: 100%;
  height: 1px;
  background-color: #E6E6E6; /* light gray from Figma */
  position: relative;
  z-index: 10;
}

/* -------------------------------------------
   RESPONSIVE ADJUSTMENTS
--------------------------------------------*/
@media (min-width: 480px) {
    .inbox-header {
    padding: 0;
    align-items: center;
    margin-top: 0;
  }


  .user-avatar {
    width: 60px;
    height: 60px;
  }

  .user-name {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #000;
    margin: 0;
  }

  .folder-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #717182;
  margin: 0;
  }
}

@media (min-width: 768px) {
    .inbox-header {
    justify-content: center;
    height: auto;
    margin-top: 0;
  }

  .header-actions {
    gap: 40px;
  }
}


/* -----------------
   Inbox
   ----------------- */
/* Inbox layout: remove outer padding so header reaches screen edges */
#inbox-view {
  padding: 0;
}

/* Add padding only inside the scrollable content area */
.inbox-content {
  padding: var(--spacing-md);
}

/* Inbox-only: remove top padding so Select all sits flush under the header
   This avoids extra vertical space that made the bar look taller and the
   checkbox slightly off-center. */
#inbox-view .inbox-content {
  padding-top: 0;
}


/* Select All row */
.select-all-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;     /* left matches email rows exactly */
  height: 48px;
  background-color: #FFF;
  border-bottom: 1px solid #E6E6E6;
}

/* Inbox-only: normalize Select-all height to match other folders (mobile/base) */
#inbox-view .select-all-row {
  height: 48px;          /* same as global */
  padding-top: 0;        /* guard against any inherited top/bottom padding */
  padding-bottom: 0;
}


/* NEW — Auto-hide Select All when the folder list is empty (Sent + Trash) */
#sent-view:has(#sent-list:not(:has(li))) .select-all-row,
#trash-view:has(#trash-list:not(:has(li))) .select-all-row {
  display: none;
}

.select-all-row input[type="checkbox"] {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid #717182;
  background-color: #FFF;
  flex-shrink: 0;
  margin: 0;           /* new: remove UA default margins */
}


.select-all-row label {
  color: #717182;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
}

/* Email list (ul) */
.email-list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #FFF;
}

/* One email row (li) */
.email-list li {
  display: flex;
  align-items: flex-start;   /* was: center — top-align the row content */
  gap: 10px;
  padding: 12px 16px;        /* was: 16px — a bit tighter vertically */
  min-height: 72px;          /* was: 94px — shorter rows to fit more items */
  border-bottom: 1px solid #E6E6E6;
}


/* Checkbox in each row */
.email-list li input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin: 0;
}

/* SENT — align each row's checkbox exactly under the Select-all checkbox */
#sent-view .email-list li input[type="checkbox"] {
  /* A small right nudge; adjust 2–8px if needed on your screen */
  transform: translateX(2px);
  /* Fallback if some rule zeroes margins elsewhere */
  margin-left: 2px;
}


/* Avatar */
.email-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Unread red dot (inline beside avatar) */
.unread-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #E90101;   /* matches design token */
  flex-shrink: 0;
}

/* Sender + subject column */
.email-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}

/* Sender name (Sofia Doyle) */
.email-info h3 {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #000;
}

.email-info .subject {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Drafts + Trash recipient label — visible on mobile, no extra <p> margin */
#drafts-view .recipient-label,
#trash-view  .recipient-label {
  display: block;
  margin: 0;                 /* ✅ removes the extra blank line */
  line-height: 1.25;         /* tighter text stack */
}

/* Desktop only: shared typography for Drafts + Trash */
@media (min-width: 992px) {
  #drafts-view .recipient-label,
  #trash-view  .recipient-label {
    display: block;
    margin: 0;               /* keep margin zero at desktop */
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #717182;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}



/* === Sent view compact layout (prevents the blank "first slot") === */
#sent-view .email-info p {           /* kill default <p> margins in Sent rows */
  margin: 0;                         /* this pulls the subject to the very top */
  line-height: 1.25;
}

#sent-view .email-info {             /* slightly tighter vertical gap */
  gap: 4px;                          /* was 6px globally */
}

#sent-view .email-list li {          /* Sent-only row size + top align */
  align-items: flex-start;           /* ensure content starts at the top */
  padding: 8px 12px;                 /* a bit tighter than global */
  min-height: 56px;                  /* smaller row so more items fit */
}

#sent-view .select-all-row {         /* make sure there's no extra gap below it */
  margin-bottom: 0;
}

/* Mobile/default: center the Sent row checkbox to align with avatar */
#sent-view .email-list li > input[type="checkbox"] {
  align-self: center;      /* vertical centering within the row */
  margin-top: 2px;         /* tiny nudge; adjust to 1–3px if needed */
}

/* Mobile/default: center the avatar vertically to match the checkbox */
#sent-view .email-list li > img.email-avatar {
  align-self: center;      /* overrides the row’s flex-start */
  /* optional: micro-nudge if it looks a hair high/low
     margin-top: 1px;
  */
}

/* Desktop-only: align Sent row sizing with Drafts + align checkbox */
@media (min-width: 992px) {
  /* Match Drafts’ comfortable row size on desktop */
  #sent-view .email-list li {
    min-height: 80px;      /* same as global/Drafts */
    padding: 12px 16px;    /* same as global/Drafts */
    align-items: center;   /* center avatar/checkbox like Drafts */
  }


  #sent-view .email-list li > input[type="checkbox"] {
    margin-left: 6px;      /* your horizontal nudge */
    align-self: center;    /* keep vertical centering */
    margin-top: 0;         /* reset desktop micro-nudge */
  }
}



/* Right side date/time */
.email-list li time {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  color: var(--color-muted, #717182);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  line-height: normal;
  white-space: nowrap;
  text-align: right;
}

/* Make first line (date) slightly larger */
.email-list li time::first-line {
  font-size: 14px;
}

/* ------------------------------
   UNREAD / READ STATE STYLES
--------------------------------*/

/* Unread: red dot visible + bold sender */
.email-list li.unread .unread-dot {
  display: inline-block;
}

.email-list li.unread h3 {
  font-weight: 700;              /* bolder sender name */
  color: #000;                   /* strong contrast */
}

/* Read: dot hidden + lighter sender text */
.email-list li.read .unread-dot {
  display: none;
}

.email-list li.read h3 {
  font-weight: 500;              /* normal weight */
  color: #717182;                /* muted gray tone */
}



/* Finalize unread dot behavior for all folders */
.unread-dot { display: inline-block; }          /* default: visible */
.email-list li.read .unread-dot { display: none; } /* hide ONLY when read */


/* ------------------------------
   HOVER / TAP FEEDBACK
--------------------------------*/

/* Light gray background when hovering or tapping */
.email-list li:hover,
.email-list li:focus-within {
  background-color: #F7F7F7;       /* subtle light gray feedback */
  cursor: pointer;                 /* signals interactivity */
}

/* Slightly darker on active press (mobile tap) */
.email-list li:active {
  background-color: #EDEDED;
}


/* -----------------
   Floating Action Button
   ----------------- */
#fab-new-mail {
  position: fixed;
  bottom: var(--spacing-lg);
  right: var(--spacing-lg);
  background: var(--color-primary);
  color: #fff;
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-fab);
  cursor: pointer;
  font-weight: bold;
  /* NEW: lay out icon + label nicely */
  display: inline-flex;
  align-items: center;
   /* +2px spacing between icon and text */
  gap: calc(var(--spacing-sm) + 8px);
  line-height: 1;
}

/* Desktop-only: raise New Mail FAB so it lines up better
   with the Sign Out button in the sidebar */
@media (min-width: 900px) {
  #fab-new-mail {
    bottom: calc(var(--spacing-lg) + 48px); /* tweak 40–64px after testing */
  }
}



/* NEW: size only the FAB's icon (won’t affect header icons) */
#fab-new-mail .folder-icon {
  width: 20px;
  height: 18px;
  flex: 0 0 auto;
  display: inline-block;

  /* Make the gray SVG appear white on the red button */
  filter: brightness(0) invert(1);

  /* Nudge the icon down a bit for visual alignment with the text */
  transform: translateY(1px);

  /* Helps inline image align better with text baseline */
  vertical-align: middle;
}

/* +2px extra space between icon and "New Mail" text */
#fab-new-mail > span {
  margin-left: 4px;
}

/* Hover gated */
@media (hover: hover) and (pointer: fine) {
  #fab-new-mail:hover {
    background: #d50000;
    box-shadow: var(--shadow-hover);
  }
}

/* Hide New Mail FAB only when the Reply screen is visible */
body:has(#reply-view:not([hidden])) #fab-new-mail {
  display: none;
}

/* ----------------- 


/* -----------------
   Snackbar
   ----------------- */
#snackbar-region {
  position: fixed;
  bottom: var(--spacing-lg);
  left: 50%;
  transform: translateX(-50%);
  max-width: 90%;
  z-index: 2000;
}

/* =======================================
   Folder Views (Inbox, Sent, Junk, etc.)
   ======================================= */

/* Shared section spacing */
section[id$="-view"][hidden] {
  display: none;
}
section[id$="-view"] {
  flex-direction: column;
  min-height: 100dvh;
  background: #fff;
}

/* JS removes [hidden] when active */
section:not([hidden]) {
  display: flex;
}

/* Folder headers – keep pink background for Inbox */
header[class$="-header"]:not(.mail-header):not(.email-detail-header):not(.detail-safe-header) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-sm) var(--spacing-md);
  box-shadow: var(--shadow-card);
  border-bottom: 1px solid var(--color-grey-hover);
}




.hamburger {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
}

/* Avatar + info block */
.user-avatar {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  margin-right: 12px;
}

.user-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: var(--spacing-sm);
}

.user-name {
  font-size: var(--fs-header);
  color: var(--color-muted);
}

.folder-title {
  display: flex;
  align-items: center;       /* aligns text baseline with icon */
  gap: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #717182;            /* muted gray from Figma */
  margin: 0;
}
.folder-title::before {
  content: url("images/inbox-icon.svg");
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: middle;
}

/* Header right icons */
.header-actions button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.25rem;
  margin-left: var(--spacing-sm);
}

/* ---------- Email Lists ---------- */
.email-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.email-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  min-height: 80px;
  border-bottom: 1px solid #E6E6E6;
}

.email-info h3 {
  font-size: var(--fs-header);
  margin: 0;
}

.email-info .subject {
  font-size: var(--fs-subject);
  margin: 0;
  color: var(--color-muted);
}

/* Desktop-only: ensure Sent & Drafts subjects are the same size */
@media (min-width: 992px) {
  #sent-view   .email-info .subject,
  #drafts-view .email-info .subject {
    font-size: var(--fs-subject);   /* forces parity even if a view overrides elsewhere */
  }
}

/* Inbox content grows under the sticky header */
.inbox-content {
  flex: 1;
  overflow-y: auto;
}


/* ---------- Email Detail View ---------- */
#email-detail-view {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  padding: 16px;
  font-family: var(--font-body);
  color: var(--color-text);
  background-color: #fff;
  min-height: 100vh;
}

body.task1-mode #email-detail-view {
  padding-top: 0; /* remove the space above the blue bar */
}

/* Task 2: remove the gap above the blue step banner */
body.task2-mode #email-detail-view {
  padding-top: 0;
}



/* ---------- White App Header (Email Detail Top Bar) ---------- */
.email-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FFFFFF;
  height: 71px;
  padding: 0 18px;
  border-bottom: 1px solid #E6E6E6;
}

.menu-icon,
.settings-icon {
  background: none;
  border: none;
  font-size: 24px;
  color: var(--color-text);
  cursor: pointer;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.user-name {
  font-weight: 600;
  font-size: 16px;
  color: var(--color-text);
}


/* ... about 10 lines above your inbox-header styles */

/* ---------- Email Detail Safe-Zone Header (White Bar) ---------- */
.detail-safe-header {
  background-color: #FFF;
  padding: env(safe-area-inset-top, 10px) 8px 6px 0; /* top right bottom left */
  display: flex;
  align-items: center;
  height: 40px;
  /* remove shadow to visually connect with pink header */
  box-shadow: none;

  /* NEW: keep Back header pinned while scrolling the email */
  position: sticky;
  position: -webkit-sticky; /* iOS Safari */
  top: 0; /* respect safe-area via padding above */
  z-index: 1000; /* stay above the email body as it scrolls */
}


.back-btn {
  background: none;
  border: none;
  color: #111827; /* your default text color token */
  cursor: pointer;

  /* Larger, comfy tap area (WCAG-friendly) */
  width: 55px;
  height: 55px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* Nudge toward the left edge (from your working version) */
  margin-left: -12px;
  /* We size the SVG directly, so we don't rely on font-size */
}

.back-btn svg {
  width: 28px;   /* bump to 32–34px if you want bigger */
  height: 28px;
  display: block; /* avoids baseline gaps */
}

.back-btn:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 2px;
}

.back-btn:active {
  opacity: 0.6;
}
/* Hover feedback (desktop only) */
@media (hover: hover) and (pointer: fine) {
  .back-btn:hover {
    background-color: #F4F4F5; /* soft gray circle behind arrow */
    border-radius: 50%;        /* makes the gray perfectly round */
    transform: scale(1.05);    /* tiny lift */
    transition: all 0.2s ease;
  }
}

/* ... about 10 lines after continue with .email-header styles */


/* ---------- Email Detail Header (Figma Pink Bar) ---------- */
.email-detail-header {
  background-color: var(--color-sidebar-bg);
  padding: 4px 0 6px 16px;
  border-radius: 0 0 4px 4px;
  color: var(--color-text);
  margin: 0;
}
/* =========================================================
   FINAL HEADER REFERENCE BLOCK – CLB 3L–4L LINCMail
   ---------------------------------------------------------
   • Controls all visible pink spacing and right-edge alignment
   • .email-header-content  = inner pink layout (subject + sender row)
   • .email-sender-row      = avatar + sender info + date/time

   Current working values (10-09-2025):
     padding-top: 24px
     padding-bottom: 20px
     padding-left: 16px
     padding-right (set on sender row): 16px
   ---------------------------------------------------------
   To adjust spacing:
     ↑ Increase/decrease top & bottom padding on .email-header-content
     → Keep .email-sender-row padding-right: 16px for edge alignment
   ========================================================= */

/* Pink header inner layout – visual padding control */
.email-header-content {
  display: flex;
  flex-direction: column;        /* stack subject and sender row vertically */
  justify-content: flex-start;
  align-items: stretch;
  padding: 16px 0 16px 16px;    /* more pink above & below */
  gap: 16px;                    /* space between subject and sender row */
  box-sizing: border-box;
  width: 100%;
}

.email-sender-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 16px; /* right edge alignment matches pink edge */
}

.email-header-content #detail-datetime {
  position: relative;
  bottom: 2px; /* fine-tune baseline match visually */
}

/* LEFT COLUMN – subject above, sender row below */
.email-header-left {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Sender + Date/Time Row (Final Alignment Fix) */
.email-sender-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;   /* align sender text and datetime by text baseline */
  gap: 12px;
  margin-top: 8px;
}

/* Date/Time – flush right and vertically balanced */
#detail-datetime {
  text-align: right;
  font-size: 14px;
  line-height: 1.3;
  color: #374151;
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertically center date/time to sender block */
}


/* Right-aligned date/time */
#detail-datetime {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  text-align: right;
  font-size: 14px;
  line-height: 1.2;
  color: #374151;
}



/* Left side (subject + sender info) */
.email-header-left {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

/* Subject line */
.email-subject {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  line-height: 1.2;
  color: #111827;
}

.email-sender {
  display: flex;
  align-items: flex-start;  /* top-aligns avatar with text block */
  gap: 10px;
}


/* Avatar */
.email-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
}


/* Sender text */
.sender-info {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  gap: 4px;             /* space between name and email */
  padding-bottom: 0;    /* <-- remove extra bottom padding */
}

.sender-name {
  font-weight: 600;
  font-size: 16px;
  margin: 0;
}

.sender-email {
  font-size: 14px;     /* was 13px — slight bump for clarity */
  color: #4B5563;
  margin: 0;
  line-height: 1.2;
}

/* Right-aligned date/time */
#detail-datetime {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;  /* bottom of its column */
  align-items: flex-end;
  text-align: right;
  font-size: 14px;
  line-height: 1.2;
  color: #374151;
  margin-bottom: 0;           /* <-- remove extra nudge */
}



/* Body text */
/* ---------- Email Body Container (Figma Spec) ---------- */
.email-body {
  background: #FFFFFF;
  display: block; /* was flex — let inline text wrap naturally on one line */
  /* removed flex props that forced odd line breaks */
  padding: 20px 16px;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--color-text);
}

.email-body p {
  margin-bottom: 1em;
}


/* Reply button */
.email-actions {
  margin-top: 16px;
}

/* ---------- Reply Button (Figma Mobile Spec) ---------- */
.reply-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 150px;
  padding: 10px 14px;
  border: 1px solid var(--color-text);
  border-radius: 999px; /* pill shape */
  background: #FFFFFF;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: none;
  margin: 16px 0 40px 16px; /* top margin and left offset */
  transform: scale(1);             /* sets baseline for animation */
  transition: all 0.25s ease;      /* enables smooth hover motion */
}

.reply-button:hover {
  background: #F4F4F5;
}

.reply-button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .reply-button:hover {
    background: #F4F4F5;
    color: #111827;
    transform: scale(1.03);  /* small lift */
  }
}

.reply-button:active {
  background: #E5E7EB;
  transform: scale(0.97);
}



.email-actions {
  display: flex;
  justify-content: flex-start;
}


/* ---------- Accessibility: Focus and Tap Feedback ---------- */

/* Reply button focus state (keyboard users) */
.reply-button:focus-visible {
  outline: 3px solid var(--color-primary-dark);
  outline-offset: 3px;
}

/* Reply button active/tap feedback */
.reply-button:active {
  transform: scale(0.97);
  background-color: var(--color-primary-dark);
}

/* ---------- Force fix: Seamless white + pink header connection ---------- */
.detail-safe-header {
  box-shadow: none !important;     /* removes divider shadow */
  margin-bottom: 0 !important;     /* removes any extra space */
  border-bottom: none !important;  /* removes faint border if any */
  height: 20px !important;
  padding-top: env(safe-area-inset-top, 10px) !important;
  padding-bottom: 6px !important;
}

.email-detail-header {
  margin-top: 0 !important;        /* removes top gap */
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}


/* ---------- FAB positioning for folders ---------- */
#fab-new-mail {
  display: none; /* ⚑ hidden until login succeeds */
  z-index: 1500;
}

/* New Mail FAB focus state */
#fab-new-mail:focus-visible {
  outline: 3px solid var(--color-primary-dark);
  outline-offset: 4px;
}

/* New Mail FAB active/tap feedback */
#fab-new-mail:active {
  transform: scale(0.97);
  background-color: var(--color-primary-dark);
}




/* ---------- Responsive breakpoint ---------- */
@media (min-width: 768px) {

  /* Two-column layout when Inbox is visible */
  main:has(#inbox-view:not([hidden])) {
    display: grid;
    grid-template-columns: 220px 1fr;
    min-height: 100vh;
  }

  /* Left column (sidebar) */
  #sidebar {
    grid-column: 1 / 2;
    width: 220px;
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
  }

  /* Right column (inbox) */
  #inbox-view {
    grid-column: 2 / 3;
    width: 100%;
    max-width: none;
    background-color: #fff;
    display: flex;
    flex-direction: column;
  }

  section[id$="-view"] {
    flex-direction: column;
    overflow-y: auto;
  }

  #fab-new-mail {
    right: var(--spacing-md);
    bottom: var(--spacing-md);
  }

  /* -----------------------------------------
     TABLET VIEW – INBOX SCALING
  ------------------------------------------*/
    .email-list li {
    padding: 18px 24px;
    min-height: 96px;
    gap: 14px;
  }

  .email-avatar { width: 56px; height: 56px; }
  .unread-dot { width: 18px; height: 18px; }
  .email-info h3 { font-size: 20px; }
  .email-info .subject { font-size: 16px; }
  .email-list li time { font-size: 13px; gap: 8px; }
  .email-list li time::first-line { font-size: 15px; }
  .select-all-row { height: 56px; padding: 0 24px; }

  /* Inbox-only: normalize Select-all height to match other folders (tablet/desktop) */
  #inbox-view .select-all-row {
    height: 56px;      /* same as global at ≥768px */
    padding-top: 0;
    padding-bottom: 0;
  }


} /* end @media */

/* ===== EMAIL DETAIL — FINAL OVERRIDES (fix datetime alignment) ===== */
.email-sender-row {
  display: flex;
  justify-content: space-between;
  align-items: center;       /* center against the sender text block */
  gap: 12px;
  margin-top: 6px;           /* breathing room under subject */
}

.email-sender {
  align-items: flex-start;   /* top-align avatar to text; avoids “avatar-center” bias */
}

#detail-datetime {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;   /* center date+time to the sender text stack */
  text-align: right;
  font-size: 14px;
  line-height: 1.2;
  color: #374151;
  transform: translateY(-3px); /* tiny optical nudge to counter avatar height */
}

/* ======================
   Compose Screen Styles
   ====================== */

 .compose-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px; /* uniform padding; header is separate & sticky, so no extra top clearance needed */
  align-items: flex-start;
  width: 100%;
  background-color: #fff;
  box-sizing: border-box;
}

.compose-form .form-group {
  width: 100%;
}

/* Hide visible labels but keep screen reader access */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}

/* Placeholder color styling */
.compose-form input::placeholder,
.compose-form textarea::placeholder {
  color: #717182;   /* muted gray */
  font-style: italic;    /* italic text */
  opacity: 1;
  font-size: 16px;
}



/* ======================
   Compose Form – Labels & Fields
   ====================== */

.compose-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.compose-form label {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #000;
  line-height: 24px;
}


/* Helper / error text for recipient fields (To / CC)
   - Small, subtle line under the field
   - Hidden when empty so it doesn’t create extra space */
.recipient-helper {
  margin: 4px 0 0;             /* small space above text, no extra below */
  font-size: 1rem;          /* slightly smaller than regular text */
  line-height: 1.3;
  color: var(--color-primary); /* red, matches your main accent */
}

/* When there is no text, remove the element from layout
   so the Add CC button sits directly under the field */
.recipient-helper:empty {
  display: none;
}


/* All text inputs and textarea */
.compose-form input,
.compose-form textarea {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 2px solid #717182;
  border-radius: 8px;
  font-family: inherit;
  font-size: 16px;
  color: #111;
  background-color: #F4F4F5;
  box-sizing: border-box;
}

/* Recipient chips / multi-address container for To/CC
   - Makes the field look like a normal input but allows chips + input inside */
.recipient-field {
  display: flex;
  flex-wrap: wrap;          /* allow chips + input to wrap to new line if needed */
  align-items: center;
  gap: 4px;
  width: 100%;
  min-height: 44px;         /* match other inputs */
  padding: 4px 6px;         /* a little inner padding around chips/input */
  border: 2px solid #717182;
  border-radius: 8px;
  background-color: #F4F4F5;
  box-sizing: border-box;
}

/* Area where chips will sit inside the field */
.recipient-chip-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

/* Visual pill for each email address chip inside To/CC */
.recipient-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;      /* nice rounded pill */
  background-color: #E4E4E7; /* soft gray to match your theme */
  font-size: 16px;
  line-height: 1.2;
  color: #000;
}

/* Small "x" button to remove a chip */
.recipient-chip-remove {
  border: none;
  background: transparent;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.recipient-chip-remove:hover {
  opacity: 0.8;
}


/* The actual typing area inside the chip field
   - Looks like part of the same box, not a separate input */
.compose-form .recipient-input {
  flex: 1 0 120px;          /* grow to fill remaining space, but don’t get too tiny */
  min-width: 80px;
  min-height: 32px;
  padding: 4px 6px;
  border: none;             /* outer .recipient-field already has a border */
  background: transparent;  /* blend into the container */
  font-family: inherit;
  font-size: 16px;
  color: #111;
  box-sizing: border-box;
}

/* Ensure no border appears on focus/active either */
.compose-form .recipient-input:focus,
.compose-form .recipient-input:active {
  border: none;
}

/* Recipient input uses the parent .recipient-field for focus,
   so no separate outline is needed on the inner input */
.compose-form .recipient-input:focus-visible {
  outline: none;
}




/* Textarea tweaks */
.compose-form textarea {
  resize: vertical;
  min-height: 120px;
}

/* Action buttons row */
.compose-actions {
  display: flex;
  justify-content: flex-start; /* keep buttons together on the left */
  gap: 16px;
  margin-top: 12px;
  width: 100%;
}

.compose-actions .cancel-button,
.compose-actions .send-button {
  flex: 0 0 auto;   /* do NOT stretch */
  width: auto;      /* override any global width:100% buttons */
  height: 48px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  padding: 0 22px;  /* slightly wider than before */
}


/* Button variants */
.cancel-button {
  background-color: #fff;
  border: 2px solid #000;
  color: #000;
}

.send-button {
  background-color: #E90101;
  border: none;
  color: #fff;
}

/* Compact secondary button for "Add CC" — same look, smaller size */
.cc-toggle {
  display: inline-block;      /* so padding + radius render nicely */
  background-color: #e0e0e0;     /* match cancel-button look */
  border: 2px solid #717182;
  color: #000;
  border-radius: 8px;         /* same rounded corners */
  font-size: 16px;            /* smaller than 16px main buttons */
  font-weight: 600;
  padding: 4px 10px;          /* compact padding to keep current size */
  line-height: 1.2;
  cursor: pointer;
}

.cc-toggle:hover {
  background-color: #f5f5f5;  /* subtle hover like a real button */
}

.cc-toggle:focus-visible {
  outline: 3px solid #000;    /* clear keyboard focus */
  outline-offset: 2px;
}

/* ===== Sign Out Confirm Modal ===== */
.confirm-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 10006;
  opacity: 0;
  transition: opacity .18s ease;

  /* NEW: keep it truly hidden and non-clickable unless .show is added */
  display: none;
  pointer-events: none;
}
.confirm-scrim.show {
  opacity: 1;
  display: block;       /* now it exists */
  pointer-events: auto; /* and can receive taps to close */
}

/* Full-viewport layer; do not rely on parent layout for centering */
.confirm-dialog {
  position: fixed;
  inset: 0;
  z-index: 10007;       /* above scrim + sidebar */
  pointer-events: none; /* clicks go only to the card */
}

/* Absolutely center the card so L/R space is always equal */
.confirm-card {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  color: #111;
  width: min(92vw, 360px);
  border-radius: 16px;
  box-shadow: var(--shadow-card, 0 6px 24px rgba(0,0,0,.2));
  padding: 26px 22px 24px;
  box-sizing: border-box;
  pointer-events: auto; /* allow clicks on the card */
}

/* NEW: Fade/scale the dialog card to match scrim timing (.18s) */
.confirm-dialog .confirm-card {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.98);
  transition: opacity .18s ease, transform .18s ease;
}
.confirm-dialog.show .confirm-card {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}


.confirm-card h2 {
  font-size: 20px;
  margin: 0 0 12px 0;
}
.confirm-card p {
  font-size: 18px;
  margin: 0 0 18px 0;
  color: #444;
}

/* Make Safe Link and Warning modals match */
#phishing-modal .confirm-card h2,
#safe-link-modal .confirm-card h2 {
  font-size: 22px;
}

#phishing-modal .confirm-card p,
#safe-link-modal .confirm-card p {
  font-size: 20px;
  line-height: 1.6; /* line-height (space between lines) */
}

/* Slightly larger title on the sign-out confirm modal */
#signout-confirm .confirm-card h2 {
  font-size: 20px;
  line-height: 1.35;
}

/* Countdown modal: larger, clearer typography (scoped so other modals stay the same) */
#signout-countdown .confirm-card h2 {
  font-size: 20px;
  line-height: 1.3;
}
#signout-countdown .confirm-card p {
  font-size: 16px;
  line-height: 1.45;
}
#signout-countdown #signout-count {
  font-size: 22px;      /* make the number stand out */
  font-weight: 700;
}

/* Optional: small bump on tablet/desktop */
@media (min-width: 768px) {
  #signout-countdown .confirm-card h2 { font-size: 22px; }
  #signout-countdown .confirm-card p  { font-size: 18px; }
  #signout-countdown #signout-count   { font-size: 24px; }
}

.confirm-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 6px;
}


.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 108px;
  height: 44px;
  border-radius: 10px;
  font-size: 16px;
  padding: 0 16px;
  cursor: pointer;
  border: 2px solid transparent;
}

.btn-danger {
  background: #E90101;
  color: #fff;
  border-color: #E90101;
}
.btn-outline {
  background: #fff;
  color: #1F2937;
  border-color: #1F2937;
}

@media (hover:hover) and (pointer:fine) {
  .btn-danger:hover { filter: brightness(0.95); }
  .btn-outline:hover { background: #f9f9f9; }
}


/* Bigger phishing warning text (phishing modal only) */
#phishing-modal .confirm-card h2 {
  font-size: 22px;
}

#phishing-modal .confirm-card p {
  font-size: 20px;
  line-height: 1.6;
}

/* =========================================================
   DEV MODE — temporarily show Inbox and hide Login
   ========================================================= */


/* #login-view {
  display: none !important;
}
#inbox-view {
  display: block !important;
} */

/* ===== Sent – Center the empty state and auto-hide when list has items ===== */
#sent-view .sent-content {
  /* Fill the remaining space below the sticky header */
  flex: 1;
  display: grid;
  grid-template-rows: auto 1fr; /* row 1 = select-all; row 2 = main area */
}

#sent-view .select-all-row { grid-row: 1; }
#sent-list { grid-row: 2; }

/* Center the message in the main content area (row 2) */
#sent-view .empty-state {
  grid-row: 2;
  display: grid;
  place-items: center;        /* centers vertically + horizontally */
  text-align: center;
  color: var(--color-muted, #717182);
  font-size: 16px;
  padding: 16px;
}

/* Hide the empty-state as soon as Sent has at least one email <li> */
#sent-list:has(li) + .empty-state {
  display: none;
}
/* ===== Fix: perfect horizontal centering for Sent empty-state ===== */
#sent-view .empty-state {
  /* Center within the Sent grid row no matter the list padding */
  justify-self: center;   /* center the grid item itself */
  width: 100%;            /* let text center across full row width */
  text-align: center;     /* center the text lines */
  margin: 0;              /* remove any stray margins */
  padding-left: 0;        /* avoid left-only padding offsets */
  padding-right: 0;
}

/* ===== Fix: perfect center for Sent empty-state (overrides) ===== */
#sent-view .sent-content { 
  position: relative;  /* anchor for absolute centering */
}

/* Put the message in the exact middle of the content area */
#sent-view .empty-state {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* center both axes precisely */
  width: 100%;
  max-width: 480px;                 /* keeps the line length readable */
  text-align: center;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
  pointer-events: none;             /* don't block clicks behind it */
}

/* When Sent has items, hide the empty-state (keep this rule) */
#sent-list:has(li) + .empty-state { display: none; }

/* ===== Inbox – Center the empty state and auto-hide when list has items (mirror Sent) ===== */
#inbox-view .inbox-content {
  /* Fill remaining space below sticky header and anchor absolute centering */
  flex: 1;
  display: grid;
  grid-template-rows: auto 1fr;  /* row 1 = select-all; row 2 = main area */
  position: relative;            /* anchor for absolute center */
}
#inbox-view .select-all-row { grid-row: 1; }
#inbox-view .email-list     { grid-row: 2; }

/* Exact middle of the content area (like Sent) */
#inbox-view .empty-state {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 480px;
  text-align: center;
  color: var(--color-muted, #717182);
  font-size: 16px;
  margin: 0;
  padding: 16px;
  pointer-events: none;       /* don’t block taps behind it */
}

/* Auto-hide when Inbox has items (relies on empty-state being after the list) */
#inbox-view .email-list:has(li) + .empty-state { display: none; }



/* ===== Trash – Center the empty state and auto-hide when list has items (mirror Sent) ===== */
#trash-view .trash-content {
  /* Fill the remaining space below the sticky header */
  flex: 1;
  display: grid;
  grid-template-rows: auto 1fr;  /* row 1 = select-all; row 2 = main area */
  position: relative;            /* anchor for absolute centering (same as Sent) */
}

#trash-view .select-all-row { grid-row: 1; }
#trash-list { grid-row: 2; }

/* Put the message in the exact middle of the content area (same as Sent) */
#trash-view .empty-state {
  grid-row: 2;                   /* lives in the content area */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* center both axes precisely */
  width: 100%;
  max-width: 480px;                 /* keeps the line length readable */
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--color-muted, #717182);
  font-size: 16px;
  margin: 0;
  padding: 16px;
  padding-left: 0;                 /* match Sent overrides */
  padding-right: 0;
  pointer-events: none;            /* don't block clicks behind it */
}

/* Hide the empty-state as soon as Trash has at least one email <li> (same as Sent) */
#trash-list:has(li) + .empty-state {
  display: none;
}

/* ===== Drafts – Center the empty state and auto-hide when list has items (mirror Sent) ===== */
#drafts-view .drafts-content {
  /* Fill the remaining space below the sticky header */
  flex: 1;
  display: grid;
  grid-template-rows: auto 1fr;  /* row 1 = select-all; row 2 = main area */
  position: relative;            /* anchor for absolute centering */
}

#drafts-view .select-all-row { grid-row: 1; }
#draft-list { grid-row: 2; }

/* Put the message in the exact middle of the content area (same technique as Sent) */
#drafts-view .empty-state {
  grid-row: 2;                      /* lives in the content area */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* center both axes precisely */
  width: 100%;
  max-width: 480px;                 /* keeps the line length readable */
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--color-muted, #717182);
  font-size: 16px;
  margin: 0;
  padding: 16px;
  padding-left: 0;                  /* match Sent overrides */
  padding-right: 0;
  pointer-events: none;             /* don't block clicks behind it */
}

/* Hide the empty-state as soon as Drafts has at least one email <li> (same as Sent) */
#draft-list:has(li) + .empty-state {
  display: none;
}

/* ===== Junk – Center and pad the warning banner ===== */
#junk-view .junk-banner {
  text-align: center;          /* center text */
  padding: 12px 16px;          /* comfy vertical padding */
  margin: 8px 0 12px;          /* a bit of space from select-all and list */
  color: var(--color-muted, #717182);
}

/* ===== Junk – Center the empty state and auto-hide (mirror Sent) ===== */
#junk-view .junk-content {
  /* Header is above; this fills the remaining space and anchors absolute centering */
  flex: 1;
  display: grid;
  grid-template-rows: auto auto 1fr; /* 1=select-all, 2=banner, 3=list area */
  position: relative;                /* anchor for absolute centering */
}
#junk-view .select-all-row { grid-row: 1; }
#junk-view .junk-banner    { grid-row: 2; }
#junk-view .email-list     { grid-row: 3; }

/* Exact middle of the content area */
#junk-view .empty-state {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 480px;
  text-align: center;
  color: var(--color-muted, #717182);
  font-size: 16px;
  margin: 0;
  padding: 16px;
  pointer-events: none;  /* don’t block taps behind it */
}

/* Hide the message when the list has items (requires message after the list) */
#junk-view .email-list:has(li) + .empty-state { display: none; }

/* ===== Drafts – Center the empty state and auto-hide when list has items (mirror Sent) ===== */
#drafts-view .drafts-content {
  /* Fill remaining space below sticky header and anchor absolute centering */
  flex: 1;
  display: grid;
  grid-template-rows: auto 1fr;  /* row 1 = select-all; row 2 = list area */
  position: relative;            /* anchor for absolute centering */
}
#drafts-view .select-all-row { grid-row: 1; }
#drafts-view #draft-list     { grid-row: 2; }

/* Exact middle of the content area */
#drafts-view .empty-state {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 480px;
  text-align: center;
  color: var(--color-muted, #717182);
  font-size: 16px;
  margin: 0;
  padding: 16px;
  pointer-events: none;          /* don’t block taps behind it */
}

/* Hide the message when the list has items (requires message after the list) */
#drafts-view #draft-list:has(li) + .empty-state { display: none; }


/* ===== Sent/Detail – tighten To/CC gap =====
   The To: and CC: lines are rendered as <p> siblings in #detail-body.
   Browsers give <p> a big default margin; remove it so CC sits right under To.
   This targets ONLY those header paragraphs (direct children), not the message body. */
#detail-body > p {
  margin: 0;              /* remove big default paragraph gap */
}
#detail-body > p + p {
  margin-top: 0;          /* ensure CC is flush under To */
}

/* Optional: keep a little breathing room before the message body divider, if present */
#detail-body > hr {
  margin: 8px 0;
}

/* ===== Desktop frame v3: fixed left sidebar + exact content offset ===== */
@media (min-width: 1024px) {
  /* Sidebar: fixed to the far left, width matches inner column (291px) */
    #sidebar {
    display: block !important;   /* override [hidden] */
    position: fixed;             /* ignore body margin, stay flush left */
    top: 0;
    left: 0;
    height: 100dvh;
    width: 291px;                /* match .sidebar-content width */
    transform: none !important;  /* no slide-in */
    opacity: 1 !important;       /* fully visible */
    transition: none;            /* no animation on desktop */
    z-index: var(--z-sidebar, 10002);
    box-sizing: border-box;      /* include any future borders/padding in width */
    padding-bottom: var(--spacing-xl, 32px); /* Desktop-only: add pink space below Sign out */
  }

  /* ➕ Desktop-only spacing above the logo so it isn't glued to the top */
  #sidebar .lincmail-logo {
    margin-top: var(--spacing-xxl, 48px); /* increase if you want even more space */
    margin-left: -8px; /* nudge logo slightly left on desktop; adjust -4 to -12px to taste */
    margin-bottom: var(--spacing-lg, 24px); /* ↑ a bit more space under the logo on desktop */
  }

     /* Desktop-only: add extra pink space under Sign Out and align it with folder pills */
  .sidebar-footer {
    padding-bottom: var(--spacing-xxl, 48px);
    align-items: flex-start;   /* left-align content on desktop */
    padding-left: 28px;        /* match .folders left padding */
    padding-right: 36px;       /* (optional) match .folders right padding */
  }

  /* Desktop-only: remove the mobile left offset so it lines up with folder pills */
  #sidebar .signout-button {
    margin-left: 0 !important; /* override base 66px on desktop */
  }

  /* Remove the dim overlay on desktop entirely */
  #sidebar-scrim {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

 /* Desktop-only: position New Mail FAB slightly lower and further left */
  #fab-new-mail {
    bottom: calc(var(--spacing-xl, 32px) + 8px);   /* lower: ~40px from bottom */
    right:  calc(var(--spacing-xxl, 48px) + 24px); /* further left: ~72px from right */
  }


     /* Offset main content so it never sits under the sidebar */
  body > main {
    /* Turn OFF the tablet grid on desktop so there’s no empty left column */
    display: block !important;
    grid-template-columns: unset !important;
    grid-template-areas: unset !important;
    column-gap: 0 !important;
    gap: 0 !important;

    /* Exact horizontal offset equals the fixed sidebar width */
    margin-left: 291px;

    /* In case a tablet rule added a left pad to simulate the grid column */
    padding-left: 0;
  }

  /* 🔒 Desktop-only: while Login view is visible, hide sidebar and remove offset */
  body:has(#login-view:not([hidden])) #sidebar {
    display: none !important;
  }
  body:has(#login-view:not([hidden])) > main {
    margin-left: 0 !important;
  }

  /* (context continues) */
  section[id$="-view"] > main {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  /* Reset nested folder <main> (e.g., .sent-content, .junk-content, etc.) */
  section[id$="-view"] > main {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
  
  /* Remove any leftover left padding/gutters in non-Inbox folder views (desktop only) */
  #sent-view > .mail-header,
  #junk-view > .mail-header,
  #drafts-view > .mail-header,
  #trash-view > .mail-header,
  #detail-view > .detail-safe-header,
  #compose-view > .mail-header {
    padding-left: 0 !important;
  }

  #sent-view > main,
  #junk-view > main,
  #drafts-view > main,
  #trash-view > main,
  #detail-view > main,
  #compose-view > main {
    padding-left: 0 !important;
  }

     /* Hide the top app-bar hamburger on desktop; keep sidebar's close button intact */
  .mail-header .hamburger,
  .detail-safe-header .hamburger {
    display: none !important;
  }

  /* Desktop-only: hide the sidebar drawer close button (hamburger inside #sidebar) */
  #sidebar .hamburger-frame,
  #sidebar .hamburger-button {
    display: none !important;
  }

  /* Restore comfortable left padding inside headers on desktop */
  /*#inbox-view  > .mail-header,
  #sent-view   > .mail-header,
  #junk-view   > .mail-header,
  #drafts-view > .mail-header,
  #trash-view  > .mail-header,
  #compose-view > .mail-header,
  #detail-view > .detail-safe-header { 
     padding-left: calc(var(--spacing-lg, 24px) + 12px) !important; /* shift group right ~12px on desktop only */
     /*padding-right: calc(var(--spacing-lg, 24px) + 12px) !important; /* add more pink on the right edge (settings side) */
  /*}


  /* Add more pink below avatar/name/folder on desktop 
  #inbox-view  > .mail-header,
  #sent-view   > .mail-header,
  #junk-view   > .mail-header,
  #drafts-view > .mail-header,
  #trash-view  > .mail-header,
  #compose-view > .mail-header {
      padding-bottom: 26px !important;
  } */
}

/* ===== Task 1 Start Screen ===== */
body.task-start-active {
  overflow: hidden;
}

.task-start-overlay {
  position: fixed;
  inset: 0;
  background: #f4f4f5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 18px;
  z-index: 12000;
  overflow-y: auto;
}

.task-start-overlay[hidden] {
  display: none !important;
}

.task-start-card {
  width: min(520px, 100%);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
  padding: 24px 22px 26px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.task-start-logo {
  width: 180px;
  max-width: 70%;
  height: auto;
  align-self: center;
  margin-bottom: 18px;
}

.task-qr-button {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid #B0B0B0;
  background: #E9EBEF;
  color: #000;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: background-color 0.2s ease, transform 0.1s ease;
  z-index: 1;
  min-width: 56px;
  min-height: 44px;
  line-height: 1;
}

.task-qr-button:hover {
  background: #D9DBDF;
}

.task-qr-button:active {
  transform: scale(0.97);
}

.task-start-title {
  font-size: 30px;
  line-height: 1.3;
  text-align: center;
  margin: 0 0 0;
}

.task-start-subtitle {
  display: block;
  margin: -2px 0 8px;
  font-size: 22px;
  line-height: 1.5;
  color: #1e1e1f;
  text-align: center;
  font-weight: 700;
}

.task-start-steps {
  margin: 14px 0 28px;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #1e1e1f;
}

.task-start-steps li {
  font-size: 16px;
  line-height: 1.4;
}

.task-start-button {
  width: 100%;
  margin-top: 4px;
  padding: 14px 18px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(233, 1, 1, 0.22);
}

.task-start-button:focus-visible {
  outline: 3px solid var(--color-primary-dark);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .task-start-button:hover {
    background: var(--color-primary-dark);
  }
}

.task-start-button:active {
  background: var(--color-primary-dark);
  transform: translateY(1px);
}

/* Hide free-play QR button when Task 1 mode is active */
body.task1-mode #login-qr {
  display: none !important;
}

/* Task 1 QR overlay (reuses login QR styles) */
#task1-qr-overlay,
#task2-qr-overlay,
#qr-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  align-items: center;
  justify-content: center;
  z-index: 10008;
  padding: 16px;
}

#task1-qr-overlay,
#task2-qr-overlay {
  z-index: 13000; /* above Task 1 card overlay */
}

#task1-qr-overlay[hidden],
#task2-qr-overlay[hidden],
#qr-overlay[hidden] {
  display: none !important;
}

#task1-qr-overlay.active:not([hidden]),
#task2-qr-overlay.active:not([hidden]),
#qr-overlay.active:not([hidden]) {
  display: flex;
}

#task1-qr-overlay:not([hidden]),
#task2-qr-overlay:not([hidden]),
#qr-overlay:not([hidden]) {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

#task1-qr-overlay .qr-modal,
#task2-qr-overlay .qr-modal,
#qr-overlay .qr-modal {
  background-color: #fff !important;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  padding: 20px;
  max-width: 520px;
  width: min(88vw, 520px);
  text-align: center;
  position: relative;
  overflow: hidden;
  animation: fadeIn 0.3s ease;
}

#task1-qr-image,
#task2-qr-image,
#qr-image {
  display: block;
  max-width: min(76vw, 440px);
  max-height: 68vh;
  width: 100%;
  height: auto;
  margin: 0 auto 16px;
  user-select: none;
}

#task1-qr-close,
#task2-qr-close,
#qr-close {
  background: var(--color-primary);
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  box-shadow: var(--shadow-card);
  transition: background-color 0.25s ease, transform 0.1s ease;
}

#task1-qr-close:hover,
#task2-qr-close:hover,
#qr-close:hover {
  background: var(--color-primary-dark);
}

#task1-qr-close:active,
#task2-qr-close:active,
#qr-close:active {
  background: var(--color-primary-darker);
  transform: scale(0.97);
}

/* ============ Task Step Bar ============ 
.task-step-bar {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  border-bottom: 1px solid #e0e0e0;
  background-color: #f7f7f7;
  margin-bottom: 0;
}
*/

.task-step-bar-main {
  display: flex;
  align-items: center;
  gap: 8px;
}

.task-step-bar-text {
  margin: 0;
  flex: 1;
  font-size: 0.95rem;
}

.task-step-bar-message {
  margin: 4px 0 0;
  font-size: 0.85rem;
  min-height: 1em;
}

/* The Next button: pill-shaped, hidden by default */
.task-step-bar-next {
  display: none;
  padding: 6px 16px;
  border-radius: 999px;
  border: none;
  font: inherit;
  cursor: pointer;
}

/* Login view variant: center text and show as a card */
#login-view .task-step-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #f3f5f7;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  box-shadow: var(--shadow-card, 0 8px 22px rgba(20, 21, 64, 0.08));
  width: 100%;
  max-width: 373px; /* match login card width */
  margin: 12px auto 16px;
  padding: 14px 16px;
  min-height: 86px;
  gap: 0;
}
#login-view .task-step-card .task-step-bar-main {
  min-height: 48px;
  align-items: center;
  justify-content: center;
  flex: 1;
}
#login-view .task-step-card .task-step-bar-text,
#login-view .task-step-card .task-step-bar-message {
  text-align: center;
}
#login-view .task-step-card .task-step-bar-text {
  font-size: 1.1rem;
}

.task-step-subtext {
  display: block;
  font-weight: 600;
  color: #0b67ff;
  margin-top: 2px;
}

#inbox-view .task-step-bar-main {
  justify-content: center;
  min-height: 48px;
  align-items: center;
}
#inbox-view .task-step-bar-text,
#inbox-view .task-step-bar-message {
  text-align: center;
}
#inbox-view .task-step-bar-text {
  font-size: 1.1rem;
}
#inbox-view .task-step-bar-message {
  margin: 0;
  min-height: 0;
}

#login-view .task-step-card .task-step-bar-message {
  margin: 0;
  min-height: 0;
}

.task-step-bar-text {
  font-weight: 700;
  color: #0b67ff;
}

/* Match Step 2 styling on the email detail task bar (Step 3) */
#email-detail-view .task-step-bar-main {
  justify-content: center;
  min-height: 48px;
  align-items: center;
}

#email-detail-view .task-step-bar-text,
#email-detail-view .task-step-bar-message {
  text-align: center;
}

#email-detail-view .task-step-bar-text {
  font-size: 1.1rem;
}

#email-detail-view .task-step-bar-message {
  margin: 0;
  min-height: 0;
}

/* Hide the floating New Mail FAB in Task 1 mode only */
.task1-mode #fab-new-mail {
  display: none;
}

/* Task 1 Step 3 mini-quiz panel */
.task-quiz-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 900px;
  margin: 0 auto;
  padding: 12px 16px calc(18px + env(safe-area-inset-bottom));
  background: #e9ecef;
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-modal) var(--radius-modal) 0 0;
  box-shadow: var(--shadow-card, 0 2px 6px rgba(0,0,0,0.1));
  transform: translateY(100%);
  opacity: 0;
  transition: transform 240ms ease, opacity 240ms ease;
  z-index: 4000;
  pointer-events: none;
  max-height: 50vh;
  overflow-y: auto;
  box-sizing: border-box;
}

.task-quiz-panel.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

@media (min-width: 1024px) {
  .task-quiz-panel {
    left: 291px; /* match fixed sidebar width so we don't cover it */
    right: calc(var(--spacing-lg, 24px) + 12px);
    max-width: none;
    margin: 0;
  }
}

.task-quiz-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  align-items: center;
}

.task-quiz-steps {
  display: flex;
  gap: 8px;
}

.task-quiz-step {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  border: 2px solid #e0e0e0;
  background: #fff;
  color: var(--color-text);
  font-weight: 700;
  cursor: pointer;
}

.task-quiz-step.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.task-quiz-step.is-complete {
  background: #1f9d55;
  border-color: #1f9d55;
  color: #fff;
}

.task-quiz-step.is-incorrect {
  background: #E90101;
  border-color: #E90101;
  color: #fff;
}

.task-quiz-step.is-unanswered {
  background: #4a5568;
  border-color: #4a5568;
  color: #fff;
}

.task-quiz-toggle {
  background: none;
  border: none;
  padding: 6px 8px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.task-quiz-toggle::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  border: solid #4a5568;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  transition: transform 180ms ease;
}

.task-quiz-panel.is-collapsed .task-quiz-toggle::before {
  transform: rotate(-135deg);
}

.task-quiz-content {
  display: flex;
  flex-direction: column;
  gap: 0px;
}

.task-quiz-question {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text);
}

.task-quiz-options {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.task-quiz-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid #e2e2e2;
  background: #fff;
  box-shadow: var(--shadow-card, 0 2px 6px rgba(0,0,0,0.1));
  text-align: left;
  cursor: pointer;
}

.task-quiz-option .task-quiz-option-marker {
  width: 18px;
  height: 18px;
  border: 2px solid #c5c5c5;
  border-radius: 50%;
  flex-shrink: 0;
  background: #fff;
}

.task-quiz-option .task-quiz-option-text {
  flex: 1;
  display: block;
}

.task-quiz-option.is-selected {
  border-color: var(--color-primary);
}

.task-quiz-option.is-selected .task-quiz-option-marker {
  border-color: var(--color-primary);
  background: var(--color-primary);
}
/*the message area between answers and the green card */
.task-quiz-feedback {
  margin: 2px 0 0;
  min-height: 1.2em;
  font-size: 0.95rem;
  font-weight: 600;
}

/* Collapse the feedback space when it has no text */
.task-quiz-feedback:empty {
  margin: 0;            /* remove extra gap */
  min-height: 0;        /* remove reserved height */
}



.task-quiz-feedback.is-correct {
  color: #1f9d55;
}

.task-quiz-feedback.is-incorrect {
  color: var(--color-primary);
}

.task-quiz-panel.is-collapsed .task-quiz-content {
  display: none;
}

.task-quiz-panel.is-collapsed {
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
  padding-top: 10px;
}

/* Give the email content breathing room while the quiz is open */
#email-detail-view.task-quiz-open .email-body {
  padding-bottom: 240px;
}

#email-detail-view.task-quiz-open.task-quiz-collapsed .email-body {
  padding-bottom: 140px;
}

/* Keep Task 1 step bar visible while scrolling in email detail */
#email-detail-view .task-step-bar {
  position: sticky;
  top: 0;
  z-index: 2500;
  background: #f7f7f7;
}

/* Task step completion modal */
.task-step-complete-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .6);
  z-index: 12000;
}

.task-step-complete-modal[hidden] {
  display: none;
}

.task-step-complete-card {
  background: #fff;
  border-radius: var(--radius-modal, 12px);
  box-shadow: var(--shadow-card, 0 2px 6px rgba(0,0,0,0.1));
  padding: 28px 20px 24px;
  text-align: center;
  width: min(420px, 90vw);
}

.task-step-complete-check {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #1f9d55;
  margin: 0 auto 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.task-step-complete-check::after {
  content: "";
  width: 18px;
  height: 10px;
  border: 3px solid #fff;
  border-top: 0;
  border-right: 0;
  transform: rotate(-45deg);
  display: block;
}

.task-step-complete-title {
  margin: 0 0 20px;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.5;
}

.task-step-complete-next {
  margin-top: 16px;
}

/* Task step error modal */
.task-step-error-modal .task-step-error-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #1f4ba5; /* blue circle */
  margin: 0 auto 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Exclamation mark inside the circle */
.task-step-error-icon::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 50%;
  width: 6px;
  height: 24px;
  background: #fff;
  border-radius: 3px;
  transform: translateX(-50%);
}

.task-step-error-icon::after {
  content: "";
  position: absolute;
  bottom: 10px;
  left: 50%;
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 50%;
  transform: translateX(-50%);
}


/* Task 1 recap (final success modal) */
.task-step-complete-card {
  width: min(420px, calc(100vw - 32px));
  margin: 0 16px;
}

.task-step-complete-next {
  background: #d9d9d9;
  color: #111827;
  border-color: #c9c9c9;
}

@media (hover:hover) and (pointer:fine) {
  .task-step-complete-next:hover {
    background: #cfcfcf;
  }
}

.task1-recap-logo {
  display: none;
  width: 140px;
  height: auto;
  margin: 0 auto 14px;
}

.task1-recap, 
#task2-recap {
  display: none;
  margin-top: 12px;
  text-align: left;
}

.task1-recap-intro,
#task2-recap .task1-recap-intro {
  margin: 0 0 16px;
  font-weight: 700;
}

.task1-recap-list,
#task2-recap .task1-recap-list {
  margin: 0;
  padding-left: 22px;
}

.task1-recap-list li,
#task2-recap .task1-recap-list li {
  margin-bottom: 10px;
}

.task1-recap-check,
#task2-recap .task1-recap-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-left: 8px;
  border-radius: 3px;
  border: 2px solid #111;
  background: #fff;
  position: relative;
  overflow: visible;
  vertical-align: middle;
}

.task1-recap-check::after,
#task2-recap .task1-recap-check::after {
  content: "";
  position: absolute;
  width: 13px;
  height: 8px;
  border: 3.5px solid #1f9d55;
  border-top: 0;
  border-right: 0;
  border-radius: 2px;
  transform: rotate(-45deg) translate(1px, -2px);
  transform-origin: center;
  display: block;
}

.task-step-complete-card.task1-recap-active .task-step-complete-check {
  background: none;
  width: 120px;
  height: auto;
  margin-bottom: 18px;
}

.task-step-complete-card.task1-recap-active .task-step-complete-check::after {
  display: none;
}

.task-step-complete-card.task1-recap-active .task1-recap-logo {
  display: block;
}

.task-step-complete-card.task1-recap-active .task-step-complete-title {
  margin-bottom: 18px;
}

.task-step-complete-card.task1-recap-active #task2-recap {
  display: block;
}


/* Task step modals: subtle depth + entrance animation */
.task-quiz-panel {
  max-height: 60vh;
  padding: 20px 20px calc(26px + env(safe-area-inset-bottom));
}

.task-quiz-header {
  margin-bottom: 12px;
}

.task-quiz-steps {
  gap: 14px;
}

.task-quiz-question {
  margin-top: 8px;
  margin-bottom: 16px;
  font-size: 1.1rem;
  line-height: 1.45;
}

.task-quiz-content {
  gap: 8px;
}

.task-quiz-options {
  gap: 14px;
}

.task-step-complete-modal {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: none;
}

.task-step-complete-card {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.06);
  animation: taskStepModalPop 160ms ease-out;
  transform-origin: center;
}

@keyframes taskStepModalPop {
  0% { opacity: 0; transform: scale(0.97) translateY(4px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Task 1 Step 3 mini-quiz: green marker on correct selection */
.task-quiz-option.is-selected.is-correct {
  border-color: #1f9d55;
}

.task-quiz-option.is-selected.is-correct .task-quiz-option-marker {
  border-color: #1f9d55;
  background: #1f9d55;
}

/* Sign-out countdown modal: logo + roomier spacing */
#signout-countdown .confirm-card {
  padding: 36px 26px 32px;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}

.signout-count-logo {
  width: 140px;
  max-width: 80%;
  height: auto;
  margin-bottom: 12px;
}

#signout-countdown .confirm-card h2 {
  margin: 0 0 18px 0;
}

#signout-countdown .confirm-card p {
  margin: 0 0 22px 0;
}

/* Task 1 Step 3 mini-quiz: success card + next question button */
.task-quiz-success {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 0px;
}

/* green success card */
.task-quiz-success-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  background: #f1fbf5;
  border: 1px solid #b7e5c7;
  margin-bottom: 16px;
}

.task-quiz-success-icon {
  width: 24px;
  height: 22px;
  border-radius: 50%;
  background: #1f9d55;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.task-quiz-success-icon::after {
  content: "✓";
}

.task-quiz-success-text {
  margin: 0;
  font-weight: 700;
  color: #155724;
  line-height: 1.4;
}

.task-quiz-next {
  width: 100%;
  padding: 14px 16px;
  border-radius: 999px;
  border: none;
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: var(--shadow-card, 0 3px 10px rgba(0,0,0,0.18));
}

.task-quiz-next:active {
  transform: translateY(1px);
}

/* =========================================
   Task step banner refresh (pale blue card)
   ========================================= */
.task-step-bar {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: calc(100% - 24px);
  max-width: 1100px;
  margin: 16px auto 14px;
  padding: 16px 20px 14px 26px;
  background: #e5f0ff;
  border: 1px solid #d2e3ff;
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(27, 73, 165, 0.08);
  box-sizing: border-box;
  overflow: hidden;
}

#inbox-view .task-step-bar,
#sent-view .task-step-bar {
  position: sticky;
  top: 0;
  z-index: 2400;
  width: 100%;
  max-width: none;
  margin: 0 0 -20px 0; /* overlap header area to hide gap */
  padding: 14px 16px 12px 24px;
  border-radius: 0;
  border-bottom: 0;
}

@media (max-width: 640px) {
  body.task2-mode #sent-view .task-step-bar {
    margin: 0; /* prevent cutting into the pink Sent header on mobile */
  }
}


#email-detail-view .task-step-bar {
  position: sticky;
  top: 0;
  z-index: 2500;
  margin: 0;                   /* removes the gap above/below */
  max-width: none;
  padding: 14px 16px 12px 24px;
  border-radius: 0;
  background: #e5f0ff;
  border-color: #d2e3ff;
}

@media (min-width: 641px) {
  #email-detail-view .task-step-bar {
    width: calc(100% + 32px);  /* cancels 16px left + 16px right container padding */
    margin: 0 -16px 0 -16px;   /* pulls the bar to the edges; no vertical shift */
  }
}


.task-step-bar::before {
  content: "";
  position: absolute;
  display: none;
}

.task-step-bar-main {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

.task-step-bar-main::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 44px;
  background: #1f4ba5;
  margin-right: 12px;
  margin-left: 2px;
  align-self: center;
}

.task-step-bar-text {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.35;
  font-weight: 700;
  color: #1f4ba5;
}

.task-step-bar-message {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
  color: #5d6675;
  min-height: 1.2em;
}

.task-step-subtext {
  color: #1f4ba5;
  font-weight: 400;
}

#compose-view .task-step-bar {
  position: sticky;
  top: 0;
  z-index: 2400;
  width: 100%;
  max-width: none;
  margin: 0 0 -20px 0;      /* same overlap as inbox */
  padding: 14px 16px 12px 24px; /* same as inbox */
  border-radius: 0;
  border-bottom: 0;
  box-shadow: none;
}

#compose-view .task-step-bar-main {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

#compose-view .task-step-bar-main::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 44px;             /* same stripe height as inbox */
  background: #1f4ba5;
  margin-right: 12px;
  margin-left: 2px;
  align-self: center;
}

/* Compose: row layout and no extra message line */
#compose-view .task-step-bar {
  flex-direction: row;
  align-items: center;
  gap: 0;
}

#compose-view .task-step-bar-message {
  display: none;
  min-height: 0;
}



#login-view .task-step-card {
  align-items: flex-start;
  background: #e5f0ff;
  border: 1px solid #d2e3ff;
  box-shadow: 0 10px 26px rgba(27, 73, 165, 0.1);
  width: calc(100% - 32px);
  max-width: 460px;
  margin: 0 auto 14px;
  padding: 16px 20px 14px 26px;
  min-height: auto;
}

#login-view .task-step-card .task-step-bar-main {
  min-height: auto;
  justify-content: flex-start;
  align-items: center;
}

#login-view .task-step-card .task-step-bar-text,
#login-view .task-step-card .task-step-bar-message {
  text-align: left;
}

#inbox-view .task-step-bar-main,
#email-detail-view .task-step-bar-main {
  justify-content: flex-start;
  align-items: center;
}

#inbox-view .task-step-bar-text,
#inbox-view .task-step-bar-message,
#email-detail-view .task-step-bar-text,
#email-detail-view .task-step-bar-message {
  text-align: left;
}



@media (max-width: 640px) {
  

  #login-view .task-step-card {
    width: 100vw;
    max-width: none;
    margin: 0 calc(50% - 50vw) 0;
    border-radius: 0;
    position: sticky;
    top: 0;
    z-index: 2400;
  }

     body:not(.task1-mode):not(.task2-mode) #login-view {
    padding-top: calc(112px + env(safe-area-inset-top, 0px));
  }

  body:not(.task1-mode):not(.task2-mode) #login-view .login-card {
    margin-top: 24px;
  }


    #email-detail-view .task-step-bar {
    width: calc(100% + 32px);  /* cancel 16px left + 16px right padding */
    max-width: none;
    margin: 0 -16px 0 -16px;
    border-radius: 0;
    padding: 14px 16px 12px 24px;     /* match other bars */
  }

    #inbox-view .task-step-bar {
    width: calc(100% + 32px);  /* cancel 16px left + 16px right padding */
    max-width: none;
    margin: 0 -16px 0 -16px;
    border-radius: 0;
    padding: 14px 16px 12px 24px;
  }


  .task-step-bar-text {
    font-size: 1.02rem;
  }

  .task-step-bar-message {
    font-size: 0.92rem;
  }
}

/* Login view: place banner above Help with comfortable spacing */
body.task1-mode #login-view,
body.task2-mode #login-view {
  align-items: center;
}

body.task1-mode #login-help,
body.task2-mode #login-help {
  position: static;
  top: auto;
  right: auto;
  z-index: auto;
  align-self: flex-end;
  margin: 10px 18px 22px auto;
}

@media (max-width: 640px) {
  body.task1-mode #login-help,
  body.task2-mode #login-help {
    margin: 8px 14px 18px auto;
  }
}

@media (min-width: 900px) {
  body.task1-mode #login-view .task-step-card,
  body.task2-mode #login-view .task-step-card {
    width: 100vw;
    max-width: none;
    align-self: stretch;
    margin: 0 calc(50% - 50vw) 0;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
    position: sticky;
    top: 0;
    z-index: 2400;
  }

  body.task1-mode #login-view .task-step-card .task-step-bar-main,
  body.task2-mode #login-view .task-step-card .task-step-bar-main {
    align-items: center;
    max-width: 820px;
    margin-left: clamp(40px, 15vw, 520px);
    margin-right: auto;
  }

  body.task1-mode #login-view .task-step-card .task-step-bar-text,
  body.task1-mode #login-view .task-step-card .task-step-bar-message,
  body.task2-mode #login-view .task-step-card .task-step-bar-text,
  body.task2-mode #login-view .task-step-card .task-step-bar-message {
    text-align: left;
  }

  body.task1-mode #login-view .task-step-card .task-step-bar-message,
  body.task2-mode #login-view .task-step-card .task-step-bar-message {
    max-width: 820px;
    margin-left: clamp(40px, 15vw, 520px);
    margin-right: auto;
    color: #6a7180;
  }
}

/* Ensure second-line message uses a soft gray on all task banners */
.task-step-bar-message {
  color: #6a7180;
}

/* Explicit message color override for Task bar (highest specificity needed) */
.task-step-bar .task-step-bar-message {
  color: #6a7180;
}

/* Hide the empty second line so the banner stays compact */
.task-step-bar-message:empty {
  display: none;
  min-height: 0;
}

/* Hide task banners when not in Task 1 or Task 2 */
body:not(.task1-mode):not(.task2-mode) .task-step-bar {
  display: none !important;
}

/* Ensure in-line parenthetical subtext is gray (e.g., "(press the Help button for info)") */
.task-step-bar .task-step-subtext {
  color: #6a7180;
  font-weight: 400;
}

/* ----- Task 1 Start overlay mobile spacing fix (v72) ----- */
@media (max-width: 560px) {
  .task-start-overlay {
    justify-content: flex-start;
    align-items: center;
    padding-top: calc(96px + env(safe-area-inset-top, 0px));
  }

  .task-start-card {
    margin-top: 8px;
  }

  #task1-start-overlay .task-qr-button {
    position: absolute;
    top: calc(12px + env(safe-area-inset-top, 0px));
    left: 16px;
    right: auto;
    width: auto;
    max-width: 140px;
    z-index: 2;
  }
}

/* ----- Task 1 Step 2 mobile: stack pink inbox header under blue step bar ----- */
@media (max-width: 640px) {
  body.task1-mode #inbox-view .mail-header {
    top: calc(64px + env(safe-area-inset-top, 0px));
    z-index: 2300; /* just under the sticky step bar (2400) */
  }
}

/* Hide Help when a task start overlay is up */
body.task-start-active #login-help {
  display: none !important;
}

/* Match Task 1 Help positioning in Task 2 mode */
body.task2-mode #login-help {
  position: static;
  top: auto;
  right: auto;
  z-index: auto;
  align-self: flex-end;
  margin: 10px 18px 22px auto;
}

/* Success modal: consistent focus ring on Next Step */
.task-step-complete-next:focus,
.task-step-complete-next:focus-visible {
  outline: 2px solid #1f9d55;  /* green to match success */
  outline-offset: 3px;
  border-radius: 12px;
}

/* Error modal: remove green focus ring */
.task-step-error-modal .task-step-complete-next:focus,
.task-step-error-modal .task-step-complete-next:focus-visible {
  outline: none;
}

@media (max-width: 640px) {
  /* Mobile: balance pink header padding (less top, a bit more bottom) */
    .mail-header {
    padding: calc(16px + env(safe-area-inset-top)) 12px 16px 12px;
    padding-top: calc(16px + env(safe-area-inset-top));
  }

    /* Compose header: add back a bit more top padding on mobile */
  #compose-view > .mail-header {
    padding: 32px 12px 14px 12px !important; /* more top than bottom */
  }


  /* Mobile: reduce the downward push of inner items */
  .inbox-header .user-avatar,
  .inbox-header .user-info,
  .inbox-header .hamburger,
  .inbox-header .header-actions {
    top: 0px; /* was 30px */
  }

    /* Mobile: extra breathing room for Sent header under the banner */
    #sent-view > .mail-header {
    padding: calc(16px + env(safe-area-inset-top)) 12px 16px 12px !important; /* match Inbox header sizing on mobile */
  }


  


}

@media (min-width: 641px) {
  /* Desktop: nudge inbox header content up a bit */
  .inbox-header .user-avatar,
  .inbox-header .user-info,
  .inbox-header .hamburger,
  .inbox-header .header-actions {
    top: 0px; /* was 30px */
  }
}


@media (min-width: 900px) {
  #sent-view > .mail-header {
    padding-left: 24px !important; /* aligns the pink header with the blue banner on desktop */
  }
}

  #junk-view > .mail-header,
  #drafts-view > .mail-header,
  #trash-view > .mail-header {
    padding-left: 24px !important; /* match Inbox/Sent header alignment on desktop */
  }


/* Task 2 recap: keep checks on the right, prevent line wraps before them */
#task2-recap .task1-recap-list li {
  position: relative;
  padding-right: 28px;
}

#task2-recap .task1-recap-check {
  position: absolute;
  right: 0;
  top: 0;
  margin-left: 0;
}

/* Extra spacing and width for Task 1 + Task 2 final success modals */
.task-step-complete-card.task1-recap-active {
  padding-bottom: 36px;                /* more room at the bottom */
  width: min(500px, calc(100vw - 20px));
  min-height: 520px;                   /* taller card so spacing fits */
}

.task-step-complete-card.task1-recap-active .task-step-complete-title {
  margin-bottom: 28px;                 /* more space before the intro line */
}

.task-step-complete-card.task1-recap-active .task1-recap-intro {
  margin-top: 0;
  margin-bottom: 24px;                 /* space between intro and list */
}

.task-step-complete-card.task1-recap-active .task1-recap-list {
  margin-bottom: 28px;                 /* bigger gap above the Close button */
}

.task-step-complete-card.task1-recap-active .task-step-complete-next {
  margin-top: 0;
  margin-bottom: 0;
}

.task-step-complete-card.task1-recap-active .task-step-complete-next {
  margin-top: 32px; /* adds space between Step 8 and the Close button */
}

/* Extra space under the recap title (Task 1 + Task 2) */
.task-step-complete-card.task1-recap-active .task-step-complete-title {
  margin-bottom: 32px;
}


/* =======================================
   Landing Page
   ======================================= */
.landing-screen {
  position: relative;
  min-height: 100vh;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.landing-panel {
  position: relative;
  margin-top: calc(52px + env(safe-area-inset-top));
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  max-width: 480px;
  width: 100%;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.landing-logos {
  display: flex;
  flex-direction: column;
  gap: 6px;           /* smaller gap between the two logos */
  align-items: center;
  margin-bottom: 16px; /* more space before the “Welcome” title */
}


.landing-org-logo,
.landing-app-logo {
  height: auto;
  max-width: 100%;
}

.landing-org-logo {
  width: 150px;   /* smaller */
  opacity: 0.7;   /* keep semi-transparent */
  margin-top: -12px; /* move up */
}

.landing-app-logo {
  width: 165px;   /* slightly smaller */
  margin-top: -6px;  /* move up a bit */
}



.landing-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  text-align: center;
}

.landing-subtitle {
  margin: 0 0 16px 0; /* add space below */
  text-align: center;
  color: #555;
  font-size: 18px;
}

.landing-card-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px; /* space before the footer text */
}


.landing-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 14px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  text-decoration: none;
  color: inherit;
  border: 1px solid #eee;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.landing-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  border-color: #ddd;
}

.landing-card:focus-visible {
  outline: 2px solid #0b5ed7;
  outline-offset: 2px;
}

.landing-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 2px solid #d93025;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #d93025;
}

.landing-card-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.landing-card-title {
  font-weight: 700;
  font-size: 20px;
}

.landing-card-subtitle {
  color: #555;
  font-size: 16px;
}

.landing-card-chevron {
  font-size: 22px;
  color: #888;
}

.landing-footer {
  margin: 0;
  text-align: center;
  color: #666;
  font-size: 16px;
}


.landing-info-dialog {
  display: flex;
  align-items: center;
  justify-content: center;
}

.landing-info-card {
  max-width: 420px;
  width: calc(100% - 32px);
}

@media (min-width: 768px) {
  .landing-screen {
    padding: 32px;
  }
  .landing-panel {
    padding: 36px 28px;
  }
  .landing-title {
    font-size: 26px;
  }
}

/* Prevent scrolling or seeing the simulator while landing is active */
body.landing-active {
  overflow: auto; /* allow scrolling on landing */
}

body.landing-active main {
  display: none !important;
}

.landing-panel {
  margin: 24px auto;
}

body.landing-active #landing-screen {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 16px 80px;
  padding-top: calc(96px + env(safe-area-inset-top));
}

/* Leave Task modal: neutral blue accent and side-by-side buttons */
.leave-task-dialog .confirm-card {
  border: 2px solid #2c68c5;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
.leave-task-dialog h2 {
  color: #1f4f9f;
}
.leave-task-actions {
  justify-content: space-between;
}
.leave-task-actions .btn {
  flex: 1;
}
.leave-task-actions .btn:first-child {
  color: #1f4f9f;
  border-color: #1f4f9f;
}
.leave-task-actions .btn:last-child {
  background: #2c68c5;
  color: #fff;
}
@media (max-width: 480px) {
  .leave-task-actions {
    flex-direction: row;
    gap: 10px;
  }
}


/* Tighter spacing for landing help */
.help-snackbar ul.landing-help-list {
  margin: 0 0 8px;
}
.landing-help-line2 {
  margin-bottom: 2px;
}

/* Desktop-only: make landing Help wider and shorter */
@media (min-width: 900px) {
  .help-snackbar {
    max-width: 520px;
    width: 86%;
    padding: 20px 28px;
    font-size: 18px;
  }

  .help-snackbar h3 {
    margin-bottom: 10px;
  }

  .help-snackbar ul.landing-help-list {
    margin: 0 0 6px;
  }

  .landing-help-list li {
    margin-bottom: 6px;
  }

  .help-snackbar button {
    margin-top: 16px;
  }
}

/* Free Practice QR URL text */
#qr-url {
  margin: 0 0 12px;
  font-size: 14px;
  color: #333;
  overflow-wrap: anywhere;
}

#landing-qr:hover { background: #D9DBDF; }
#landing-qr:active { transform: scale(0.97); }
#landing-qr { line-height: 1; min-height: 44px; }

/* Desktop-only: tighter sidebar spacing + lower Sign Out (v91 tweak) */
@media (min-width: 1024px) {
  #sidebar .sidebar-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    gap: 10px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }

  #sidebar .frame-minus-footer {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    gap: 10px;
  }

  #sidebar .lincmail-logo {
    margin-top: 24px;
    margin-bottom: 12px;
  }

  #sidebar .lincmail-logo img {
    width: 128px;
  }

  #sidebar .folders {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-top: 4px;
    padding-bottom: 16px;
  }

  #sidebar .folders ul {
    gap: 6px;
  }

  #sidebar .sidebar-footer {
    flex: 0 0 auto;
    margin-top: auto;
    padding-bottom: 8px;
  }
}

@media (min-width: 768px) {
  body.task1-mode #inbox-view,
  body.task1-mode #email-detail-view,
  body.task2-mode #inbox-view,
  body.task2-mode #compose-view,
  body.task2-mode #sent-view {
    overflow: visible;
    overflow-y: visible;
  }
}

@media (min-width: 768px) {
  body.task1-mode #inbox-view > .mail-header,
  body.task2-mode #inbox-view > .mail-header,
  body.task2-mode #sent-view > .mail-header,
  body.task2-mode #compose-view > .mail-header {
    top: var(--taskStepBarH, 64px);
    z-index: 2300;
  }
}

@media (min-width: 768px) {
  body.task1-mode #login-view,
  body.task2-mode #login-view {
    overflow: visible;
    overflow-y: visible;
  }

  body.task1-mode #login-view .task-step-card,
  body.task2-mode #login-view .task-step-card {
    position: sticky;
    top: 0;
    z-index: 2400;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  /* Tablet: don't reserve a sidebar column when the drawer is hidden */
  main:has(#inbox-view:not([hidden])):has(#sidebar[hidden]) {
    grid-template-columns: 1fr;
  }

  main:has(#inbox-view:not([hidden])):has(#sidebar[hidden]) #inbox-view {
    grid-column: 1 / -1;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  /* Tablet: keep Sign Out visible; let the folder stack scroll */
  #sidebar .sidebar-content {
    overflow: hidden;
  }

  #sidebar .frame-minus-footer {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    overflow-y: auto;
  }

  #sidebar .sidebar-footer {
    flex: 0 0 auto;
    margin-top: auto;
  }
}

@media (min-width: 641px) and (max-width: 899px) {
  body.task1-mode #login-view .task-step-card,
  body.task2-mode #login-view .task-step-card {
    width: 100vw;
    max-width: none;
    margin: 0 calc(50% - 50vw) 0;
    border-radius: 0;
  }
}

/* ----- Task Mode mobile: keep pink header stacked under blue step bar ----- */
@media (max-width: 640px) {
  body.task1-mode #inbox-view > .mail-header,
  body.task2-mode #inbox-view > .mail-header,
  body.task2-mode #compose-view > .mail-header,
  body.task2-mode #sent-view > .mail-header {
    position: -webkit-sticky;
    position: sticky;
    top: var(--taskStickyStackTop, calc(64px + env(safe-area-inset-top, 0px)));
    z-index: 2300;
    background-color: var(--color-sidebar-bg, #FDADAC);
  }
}

/* ===== v97 sidebar overlap fix (mobile + tablet) ===== */
@media (max-width: 1023px) {
    #sidebar .sidebar-content { overflow: hidden; }
    #sidebar .frame-minus-footer {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding-bottom: calc(96px + env(safe-area-inset-bottom));

  }


}