/* ──────────────────────────────────────────────────────────────
   ItsMyBritain – shell
   - Thin fixed header
   - Transparent-looking fixed footer
   - No text shadows; micro stroke for clarity
   - Subtle scrims + backdrop-filter for auto-contrast
   ────────────────────────────────────────────────────────────── */

:root{
  --brand:#0b3d91;            /* deep navy */
  --ink:#0f172a;              /* body text */
  --muted:#64748b;
  --bg:#ffffff;

  --hdr-h:44px;
  --ftr-h:36px;

  --z-header:1000;
  --z-footer:900;
  --z-cookie:1100;
  --z-modal:1200;
  
  
  --imb-header-h: 44px;     /* adjust if your header height differs */
  --imb-top-gap: 5px;      /* desired gap */
}



@supports not (scrollbar-gutter: stable) {
  html { overflow-y: scroll; } /* always show a (disabled) vertical scrollbar */
}

*{box-sizing:border-box}
html,body{height:100%}
body.imb-body{
  margin:0; background:var(--bg); color:var(--ink);
  padding-top:calc(var(--hdr-h) + env(safe-area-inset-top));
  padding-bottom:calc(var(--ftr-h) + env(safe-area-inset-bottom));
  font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}

/* ── Header (fixed, thin, adaptive contrast) ────────────────── */
.imb-header{
  position:fixed; top:0; left:0; right:0; height:var(--hdr-h);
  background:rgba(255,255,255,0.04);              /* keeps it “transparent-looking” */
  backdrop-filter: blur(8px) saturate(140%) contrast(1.05);
  -webkit-backdrop-filter: blur(8px) saturate(140%) contrast(1.05);
  border-bottom:0;
  z-index:var(--z-header);
}
.imb-header::before{
  /* A very soft top-to-bottom scrim to guarantee contrast on bright BGs */
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,0.22), rgba(0,0,0,0.00));
  pointer-events:none;
}
.imb-header__inner{
  max-width:1200px; height:100%; margin:0 auto; padding:0 14px;
  display:flex; align-items:center; justify-content:space-between; gap:10px; position:relative;
}
.imb-logo{display:inline-flex; align-items:center; gap:10px; text-decoration:none}
.imb-logo__img{height:22px; width:auto; display:block; border-radius:4px}
.imb-logo__text{
  font-weight:700; letter-spacing:.1px;
  color:#ffffff !important;
  -webkit-text-stroke:0.2px var(--brand);  /* micro stroke, no shadow */
  text-decoration:none;
}

.imb-nav{display:flex; gap:14px}
.imb-nav__link{
  color:#ffffff !important;
  -webkit-text-stroke:0.2px var(--brand);
  text-decoration:none; padding:6px 8px; border-radius:6px;
}
.imb-nav__link:hover,
.imb-nav__link:focus-visible{
  text-decoration:underline; outline:none;
}

/* ── Main content helper ────────────────────────────────────── */
.imb-main{max-width:1200px; margin:0 auto; padding:16px}

/* ── Footer (fixed, transparent-looking, adaptive contrast) ─── */
.imb-footer{
  position:fixed; left:0; right:0; bottom:0; height:var(--ftr-h);
  background:rgba(255,255,255,0.02);              /* effectively transparent */
  backdrop-filter: blur(6px) brightness(0.92);    /* gently darkens bright BGs */
  -webkit-backdrop-filter: blur(6px) brightness(0.92);
  border-top:0;
  z-index:var(--z-footer);
}
.imb-footer::before{
  /* subtle scrim from bottom up to ensure readable text on light BGs */
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,0.20), rgba(0,0,0,0.00));
  pointer-events:none;
}
.imb-footer__inner{
  max-width:1200px; margin:0 auto; height:100%; padding:0 14px;
  display:flex; align-items:center; justify-content:space-between;
  font-size:13px; position:relative;
}
/* Footer text/links: white + micro stroke; no shadows */
.imb-footer__inner,
.imb-footer__inner a,
.imb-footer__inner .imb-link{
  color:#ffffff !important;
  -webkit-text-stroke:0.2px var(--brand);
  text-decoration:none;
}
.imb-footer__inner a:hover,
.imb-footer__inner .imb-link:hover,
.imb-footer__inner a:focus-visible,
.imb-footer__inner .imb-link:focus-visible{
  text-decoration:underline; outline:none;
}

/* Avoid stroke on the actual logo image */
.imb-logo__img{-webkit-text-stroke:0 transparent}

/* ── Buttons (cookie UI) ───────────────────────────────────── */
.imb-btn{
  appearance:none; border:1px solid transparent; border-radius:10px;
  padding:7px 12px; font-weight:600; cursor:pointer; background:#fff; color:var(--ink);
}
.imb-btn--primary{background:var(--brand); color:#fff}
.imb-btn--outline{border-color:var(--brand); color:var(--brand)}
.imb-btn--ghost{border-color:#cbd5e1; background:transparent}

/* ── Cookie banner (compact, discreet) ─────────────────────── */
.imb-cc{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(var(--ftr-h) + 10px + env(safe-area-inset-bottom));
  width:min(980px,calc(100% - 24px));
  background:#fff; border:1px solid #e2e8f0;
  border-radius:14px; padding:10px 12px;
  box-shadow:0 8px 30px rgba(0,0,0,.08);
  z-index:var(--z-cookie); font-size:14px;
}
.imb-cc.is-hidden{display:none}
.imb-cc__row{display:flex; gap:12px; align-items:center; justify-content:space-between}
.imb-cc__copy{display:flex; flex-direction:column; gap:4px}
.imb-cc__text{color:var(--muted)}
.imb-cc__link{color:var(--brand); text-decoration:none}
.imb-cc__inline-btn{border:0; background:none; color:var(--brand); text-decoration:underline; cursor:pointer}

/* ── Cookie modal ──────────────────────────────────────────── */
.imb-cc-modal{position:fixed; inset:0; display:grid; place-items:center; background:rgba(15,23,42,.35); z-index:var(--z-modal)}
.imb-cc-modal.is-hidden{display:none}
.imb-cc-modal__panel{
  width:min(720px,calc(100% - 24px));
  background:#fff; border-radius:16px; overflow:hidden;
  box-shadow:0 8px 30px rgba(0,0,0,.10);
}
.imb-cc-modal__head{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid #e2e8f0}
.imb-cc-modal__body{padding:16px; display:grid; gap:12px}
.imb-cc-modal__foot{padding:12px 16px; border-top:1px solid #e2e8f0; display:flex; gap:8px; justify-content:flex-end}
.imb-cc-modal__close{font-size:24px; line-height:1; background:none; border:0; cursor:pointer}
.imb-cc-opt{display:flex; align-items:center; justify-content:space-between; border:1px solid #e2e8f0; border-radius:12px; padding:12px}
.imb-cc-opt__meta{color:var(--muted); font-size:13px}

/* ── Switch (cookie toggles) ───────────────────────────────── */
.imb-switch{display:flex; align-items:center; gap:8px; user-select:none}
.imb-switch input{
  appearance:none; width:38px; height:22px; background:#e2e8f0;
  border-radius:999px; position:relative; outline:none; cursor:pointer; transition:background .2s;
}
.imb-switch input:checked{background:color-mix(in oklab, #fff 0%, var(--brand) 100%)}
.imb-switch input::after{
  content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; background:#fff; border-radius:50%; transition:transform .2s
}
.imb-switch input:checked::after{transform:translateX(16px)}

/* ── Responsive tweaks ─────────────────────────────────────── */
@media (max-width:720px){
  .imb-nav{display:none}
  .imb-cc__row{flex-direction:column; align-items:stretch}
  .imb-cc__actions{display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap}
}

/* ── Focus visibility ──────────────────────────────────────── */
a:focus-visible, button:focus-visible{outline:2px solid var(--brand); outline-offset:2px}


/* === Unified link behaviour (header + footer + cookie link) === */

/* Base (subtle translucent pills) */
.imb-header .imb-nav__link,
.imb-footer__inner a,
.imb-footer__inner .imb-link[data-cc-open]{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(255,255,255,0.12);          /* translucent by default */
  color:#ffffff !important;
  -webkit-text-stroke:0.2px var(--brand);      /* tiny stroke, no shadow */
  text-decoration:none;
  transition:
    background .18s ease,
    color .18s ease,
    transform .12s ease,
    -webkit-text-stroke .18s ease,
    box-shadow .18s ease;
  -webkit-backdrop-filter: blur(4px) saturate(140%);
  backdrop-filter: blur(4px) saturate(140%);
}

/* Hover/focus: lose transparency, grow slightly, flip to navy text */
.imb-header .imb-nav__link:hover,
.imb-header .imb-nav__link:focus-visible,
.imb-footer__inner a:hover,
.imb-footer__inner a:focus-visible,
.imb-footer__inner .imb-link[data-cc-open]:hover,
.imb-footer__inner .imb-link[data-cc-open]:focus-visible{
  background:rgba(255,255,255,0.95);          /* almost opaque: “lose transparency” */
  color:var(--brand) !important;              /* navy text on light pill */
  -webkit-text-stroke:0;                      /* cleaner on light bg */
  transform:scale(1.06);
  text-decoration:none;
  outline:none;
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce){
  .imb-header .imb-nav__link,
  .imb-footer__inner a,
  .imb-footer__inner .imb-link[data-cc-open]{
    transition:none;
  }
  .imb-header .imb-nav__link:hover,
  .imb-footer__inner a:hover,
  .imb-footer__inner .imb-link[data-cc-open]:hover{
    transform:none;
  }
}

/* Optional: make the inline "Cookie settings" inside the banner match */
.imb-cc .imb-cc__inline-btn{
  display:inline-block;
  padding:3px 9px;
  border-radius:999px;
  border:1px solid var(--brand);
  background:rgba(255,255,255,0.12);
  color:var(--brand);
  text-decoration:none;
  transition:background .18s ease, transform .12s ease, color .18s ease;
}
.imb-cc .imb-cc__inline-btn:hover,
.imb-cc .imb-cc__inline-btn:focus-visible{
  background:rgba(255,255,255,0.95);
  color:var(--brand);
  transform:scale(1.06);
  outline:none;
}
/* --- Fix: popups hidden behind blurred header/footer --- */

/* 1) Keep header/footer layers contained and predictable */
.imb-header, .imb-footer { isolation: isolate; }           /* start a new stacking context */
.imb-header__inner, .imb-footer__inner { position: relative; z-index: 1; }
.imb-header::before, .imb-footer::before { z-index: 0; }   /* scrims stay behind their text */

/* 2) Put cookie UI absolutely on top (beats Safari/WebKit quirks) */
#imb-cookie-modal { position: fixed; z-index: 2147483647 !important; }
#imb-cookie-banner { position: fixed; z-index: 2147483646 !important; }
.imb-cc-modal__panel { position: relative; z-index: 1; }   /* panel above its dim layer */

/* 3) If you have other popups/menus, give them a safe top layer too */
.menu, .popover, .dropdown, .dialog { position: relative; z-index: 2147483645; }
/* ── Fix stacking: put blur/scrims on pseudos; keep UI above them ── */

/* Contain each bar’s stacking; content above its own scrim */
.imb-header,
.imb-footer { isolation: isolate; }

/* Remove backdrop-filter from the bars themselves (if present) */
.imb-header,
.imb-footer { background: transparent !important; }

/* HEADER: blur/scrim lives on ::before UNDER the text */
.imb-header::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.22), rgba(0,0,0,0.00)),
    rgba(255,255,255,0.04);
  -webkit-backdrop-filter: blur(8px) saturate(140%) contrast(1.05);
  backdrop-filter: blur(8px) saturate(140%) contrast(1.05);
  z-index:0; pointer-events:none;
}
.imb-header__inner{ position:relative; z-index:1; }

/* FOOTER: blur/scrim on ::before UNDER the text */
.imb-footer::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(0,0,0,0.20), rgba(0,0,0,0.00)),
    rgba(255,255,255,0.02);
  -webkit-backdrop-filter: blur(6px) brightness(0.92);
  backdrop-filter: blur(6px) brightness(0.92);
  z-index:0; pointer-events:none;
}
.imb-footer__inner{ position:relative; z-index:1; }

/* Cookie UI and any other dialogs ALWAYS on top (beats WebKit bugs) */
#imb-cookie-modal { position: fixed; z-index: 2147483647 !important; }
#imb-cookie-banner{ position: fixed; z-index: 2147483646 !important; }
.imb-cc-modal__panel{ position: relative; z-index: 1; }

/* Optional: any other popups/menus you use */
.menu,.popover,.dropdown,.dialog{ position:relative; z-index: 2147483645; }
/* Background root lives at the very back */
#bg-root{
  position: fixed;
  inset: 0;
  z-index: -1;               /* behind all normal content */
  pointer-events: none;
}
#bg-root canvas{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  display: block;
  pointer-events: none !important;
  z-index: -1 !important;
}

/* Keep main UI above background safely */
.imb-header{ position: fixed; top:0; left:0; right:0; z-index: 1000; }
.imb-footer{ position: fixed; left:0; right:0; bottom:0; z-index: 900; }
.imb-main   { position: relative; z-index: 10; }

/* Cookie UI absolutely on top */
#imb-cookie-modal  { position: fixed; z-index: 2147483647 !important; }
#imb-cookie-banner { position: fixed; z-index: 2147483646 !important; }

/* (Optional) belt-and-braces: keep header/footer effects under their text */
.imb-header,.imb-footer{ isolation:isolate }
.imb-header__inner,.imb-footer__inner{ position:relative; z-index:1 }
.imb-header::before,.imb-footer::before{ z-index:0; pointer-events:none }


/* ===== BG FADE PATCH ===== */
#bg-fade {
  position: fixed;
  inset: 0;
  /* slightly-varied navy so fade feels “natural” with the flag */
  background:
    radial-gradient(120% 100% at 50% 0%,
      rgba(11,26,58,0.92) 0%,
      rgba(11,26,58,0.78) 40%,
      rgba(11,26,58,0.60) 60%,
      rgba(11,26,58,0.00) 100%),
    #0b1a3a;
  opacity: 0;
  transition: opacity 5.45s ease;
  pointer-events: none;
  z-index: -1; /* sits above the flag canvas, below content (see below) */
}
#bg-fade.bg-fade--show { opacity: 1; }

/* Make sure the flag canvas is below the overlay */
#flag-wave-canvas,
.flag-wave-canvas,
canvas[data-flag-wave] {
  position: fixed !important;
  inset: 0 !important;
  z-index: -2 !important;
}

/* Make sure page chrome/content stay above overlay */
header, main, footer, .glass-box, .site-wrap {
  position: relative;
  z-index: 1;
}

  /* Tunables (match your actual heights if different) */
  :root{
    --imb-header-h: 14px;   /* height of your top bar */
    --imb-footer-h: 44px;   /* height of your bottom bar */
  }

  /* Fix the header to the top */
  .imb-header{
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;  /* above wash & canvas */
  }

  /* Fix the footer to the bottom */
  .imb-footer{
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 1000;  /* above wash & canvas */
  }

  /* Reserve space so content never hides under fixed bars */
  .imb-main{
    padding-top: var(--imb-header-h);
    padding-bottom: calc(var(--imb-footer-h) + 16px);
    min-height: calc(100vh - var(--imb-header-h) - var(--imb-footer-h));
  }
  
  /* Reserve header height + 15px, not more */
.imb-main{
  padding-top: calc(var(--imb-header-h) + var(--imb-top-gap));
  /* keep your existing bottom padding as-is */
}

/* Remove any extra top margin on the first section/card */
.imb-main > .glass-box:first-of-type,
.imb-main > section:first-of-type,
.imb-main > .card:first-of-type {
  margin-top: 0 !important;
}

  /* Make sure background layers are always behind chrome */
  #flagBackgroundCanvas{ position: fixed; inset: 0; z-index: 0; pointer-events: none; }
  .flag-wash{ z-index: 1; }

/* Areas of Interest grid */
.areas-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 480px){ .areas-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px){ .areas-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1060px){ .areas-grid{ grid-template-columns: repeat(4, 1fr); } }

.area-card{
  --glass-bg: rgba(255,255,255,.06);
  --glass-br: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--glass-br);
  text-decoration: none;
  color: inherit;
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 22px rgba(0,0,0,.18);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.area-card:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.09);
  box-shadow: 0 8px 28px rgba(0,0,0,.22);
}

.area-icon{
  --sz: 48px;
  width: var(--sz); height: var(--sz);
  min-width: var(--sz);
  border-radius: 50%;
  display: inline-grid; place-items: center;
  background: radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.35), rgba(255,255,255,.08)) , var(--area-accent, #4a6bb1);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.25);
}
.area-icon img{
  width: 60%; height: 60%; display: block;
}
.area-initial{
  font-weight: 700; font-size: 18px; line-height: 1; color: #fff;
}

.area-meta{ display:flex; flex-direction: column; min-width: 0; }
.area-name{ font-weight: 700; }
.area-desc{
  color: rgba(255,255,255,.85);
  font-size: .95rem;
  opacity: .8;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* clamp to 2 lines */
  -webkit-box-orient: vertical; overflow: hidden;
}
/* --- Glam upgrade for Areas of Interest --- */
.area-card{
  --glass-bg: rgba(255,255,255,.06);
  --glass-bg-hover: rgba(255,255,255,.10);
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; border-radius: 18px;
  text-decoration: none; color: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06)) ,
              var(--glass-bg);
  backdrop-filter: blur(12px);
  box-shadow:
    0 10px 26px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.20);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.area-card:hover{
  transform: translateY(-2px);
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.08)) ,
              var(--glass-bg-hover);
  box-shadow:
    0 14px 34px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.25);
}

.area-icon{
  --sz: 56px;
  width: var(--sz); height: var(--sz); min-width: var(--sz);
  border-radius: 50%;
  display: grid; place-items: center;
  position: relative; isolation: isolate;
  background:
    radial-gradient(120% 120% at 30% 15%, rgba(255,255,255,.45), rgba(255,255,255,.08)) ,
    radial-gradient(100% 100% at 70% 80%, rgba(255,255,255,.20), transparent 60%) ,
    var(--area-accent, #5f7bd1);
  box-shadow:
    0 10px 20px rgba(0,0,0,.35),
    0 0 0 2px rgba(255,255,255,.28) inset,
    0 -10px 20px rgba(0,0,0,.22) inset;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

/* specular “shine” */
.area-icon::before{
  content: "";
  position: absolute; inset: 2px 6px 38% 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
  filter: blur(0.5px); opacity: .7; pointer-events: none;
}

/* subtle outer glow on hover */
.area-card:hover .area-icon{
  transform: translateY(-1px) scale(1.04);
  box-shadow:
    0 12px 26px rgba(0,0,0,.40),
    0 0 0 2px rgba(255,255,255,.35) inset,
    0 -12px 24px rgba(0,0,0,.26) inset,
    0 0 22px color-mix(in srgb, var(--area-accent) 45%, transparent);
}

/* Make whatever SVG we have pop as a white glyph with soft depth */
.area-icon img{
  width: 62%; height: 62%; display: block;
  filter:
    brightness(0) saturate(100%) invert(1) /* turn to white */
    drop-shadow(0 1px 1px rgba(0,0,0,.25))
    drop-shadow(0 3px 8px rgba(0,0,0,.20));
}

/* Letter fallback – bold, centered */
.area-initial{
  font-weight: 800; font-size: 20px; line-height: 1; color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.28);
}

.area-name{ font-weight: 800; letter-spacing:.2px; }
.area-desc{ opacity:.85; }


/* ===== Letter tool polish ===== */
#letter-tool { padding: 18px; }

#letter-tool .lt-grid{
  display:grid;
  grid-template-columns: 1.6fr 1fr;
  gap:18px 22px;
  align-items:start;
}
@media (max-width: 980px){
  #letter-tool .lt-grid{ grid-template-columns: 1fr; }
}

/* top selectors row */
#letter-tool .lt-top{
  display:grid; gap:12px;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 640px){
  #letter-tool .lt-top{ grid-template-columns: 1fr; }
}

/* main form fields */
#letter-tool .lt-fields{
  display:grid; gap:12px;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 900px){
  #letter-tool .lt-fields{ grid-template-columns: 1fr; }
}
#letter-tool .field{ display:flex; flex-direction:column; gap:6px; }
#letter-tool .field label{ font-weight:700; }

/* email & code rows with buttons aligned to the right */
#letter-tool .lt-email-row,
#letter-tool .lt-otp-row{
  display:grid; gap:8px;
  grid-template-columns: 1fr auto;
  align-items:end;
}
#letter-tool .lt-email-row .imb-btn,
#letter-tool .lt-otp-row .imb-btn{ white-space:nowrap; }

/* action row (Generate PDFs etc.) */
#letter-tool .lt-actions{
  display:flex; gap:10px; justify-content:flex-end; align-items:center;
  margin-top:6px;
}
#letter-tool .lt-note{ color:rgba(255,255,255,.85); font-size:.95rem; }

/* MP card on the right */
#letter-tool .lt-mp{
  background: rgba(255,255,255,.06);
  border-radius: 16px;
  padding: 14px;
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 22px rgba(0,0,0,.18);
}
#letter-tool .lt-mp .mp-head{
  display:flex; gap:12px; align-items:flex-start;
}
#letter-tool .lt-mp img{
  width:144px; height:144px; object-fit:cover;
  border-radius:12px; box-shadow: 0 6px 18px rgba(0,0,0,.28);
}
#letter-tool .lt-mp .mp-meta{
  display:flex; flex-direction:column; gap:6px; min-width:0;
}
#letter-tool .lt-mp .mp-name{ font-weight:800; font-size:1.1rem; }
#letter-tool .lt-mp .mp-party{ opacity:.9; }
#letter-tool .lt-mp .mp-confirm{ margin-top:8px; display:flex; gap:8px; align-items:center; }

/* tidy inputs to full width within the grid cells */
#letter-tool input[type="text"],
#letter-tool input[type="email"],
#letter-tool input[type="tel"],
#letter-tool input[type="number"],
#letter-tool select,
#letter-tool textarea{
  width:100%;
}