/* ============================================================
   FouadDev Prompt Factory V7.0 — Responsive Layout Repair
   Loaded after app.css, studio-v22.css and theme-system.css.

   PROBLEM:
   At common laptop widths the Studio header allowed the action column to
   consume nearly all available space. Combined with overflow-wrap:anywhere,
   headings and labels could collapse to one-character-per-line columns.

   WHY THIS LAYER EXISTS:
   Responsive behavior is presentation-only. It is isolated here so member,
   quota, prompt, mail, billing and database modules are not modified.
   ============================================================ */

/* ---------- Global intrinsic sizing ---------- */
html,
body{
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:clip;
}

body{margin:0;}

img,svg,video,canvas,iframe{max-width:100%;height:auto;}

table{max-width:100%;}

.marketing-shell *,
.account-shell *,
.app-shell *,
.workspace *,
.auth-card *{
  min-width:0;
}

/* Never split normal words letter-by-letter. Long machine strings are handled
   separately below. This directly fixes the vertical "Transformez" defect. */
h1,h2,h3,h4,p,li,a,button,strong,small,span,label{
  overflow-wrap:normal;
  word-break:normal;
}

code,pre,.prompt-output,.semantic-filename,.url-value,[data-long-token]{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* ---------- Shared fluid containers ---------- */
.marketing-shell{
  width:min(1440px,calc(100% - clamp(24px,4vw,72px)))!important;
  max-width:1440px!important;
  margin-inline:auto!important;
  padding:clamp(14px,2vw,28px) 0 clamp(48px,6vw,84px)!important;
}

.account-shell{
  width:min(1180px,calc(100% - clamp(24px,4vw,64px)))!important;
  margin-inline:auto!important;
}

.auth-card{max-width:calc(100vw - 24px)!important;}

/* ---------- Marketing header ---------- */
.marketing-nav{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:clamp(12px,2vw,28px)!important;
  padding:clamp(12px,1.8vw,24px) 0!important;
}

.marketing-nav .brand{flex:1 1 260px;min-width:0;}
.marketing-nav .brand strong,.marketing-nav .brand span{max-width:100%;}

.marketing-nav-actions{
  flex:1 1 520px;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  min-width:0;
}

/* ---------- Membership hero ---------- */
.membership-hero{
  display:grid!important;
  grid-template-columns:minmax(0,1.52fr) minmax(300px,.70fr)!important;
  gap:clamp(16px,2vw,28px)!important;
  align-items:stretch!important;
  margin:clamp(24px,4vw,54px) 0 clamp(22px,3vw,36px)!important;
}

.membership-copy,.membership-lock-card{
  min-width:0!important;
  padding:clamp(22px,3vw,42px)!important;
}

.membership-copy h1{
  max-width:16ch!important;
  margin:.32em 0 .42em!important;
  font-size:clamp(42px,4.55vw,72px)!important;
  line-height:.96!important;
  letter-spacing:-.045em!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
}

.membership-copy p{max-width:52rem!important;font-size:clamp(16px,1.35vw,20px)!important;line-height:1.62!important;}
.membership-lock-card h2{font-size:clamp(25px,2.1vw,34px)!important;line-height:1.08!important;}
.membership-lock-card ul{margin-block:16px 20px!important;padding-left:22px!important;}
.membership-lock-card li{line-height:1.55!important;margin-bottom:8px!important;}

.guest-demo-grid{grid-template-columns:minmax(260px,.65fr) minmax(0,1.35fr)!important;}
.marketing-proof{grid-template-columns:repeat(4,minmax(0,1fr))!important;}
.pricing-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;}
.comparison-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;}

/* ---------- Tables scroll locally ---------- */
.account-card:has(.data-table),.panel:has(.data-table){overflow-x:auto;-webkit-overflow-scrolling:touch;}
.data-table{min-width:720px;}

/* ============================================================
   AUTHENTICATED STUDIO
   ============================================================ */
body[data-authenticated="1"] .app-shell{
  display:grid!important;
  grid-template-columns:minmax(216px,250px) minmax(0,1fr)!important;
  width:100%!important;
  max-width:none!important;
}

body[data-authenticated="1"] .sidebar{
  width:auto!important;
  min-width:0!important;
  max-width:250px!important;
}

body[data-authenticated="1"] .sidebar .brand strong,
body[data-authenticated="1"] .sidebar .brand span,
body[data-authenticated="1"] .eyebrow{
  overflow-wrap:normal!important;
  word-break:normal!important;
  hyphens:none!important;
}

body[data-authenticated="1"] .workspace{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  padding:clamp(18px,2vw,30px) clamp(16px,2.3vw,40px) clamp(72px,7vw,100px)!important;
}

/* The topbar uses intrinsic wrapping rather than a brittle two-column grid.
   If the action group needs more room it moves to its own row automatically. */
body[data-authenticated="1"] .topbar{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:clamp(14px,2vw,28px)!important;
  width:100%!important;
}

body[data-authenticated="1"] .topbar>div:first-child{
  flex:1 1 520px!important;
  min-width:min(100%,420px)!important;
  max-width:900px!important;
}

body[data-authenticated="1"] .topbar h1{
  max-width:18ch!important;
  margin-block:.15em .22em!important;
  font-size:clamp(36px,3.7vw,62px)!important;
  line-height:1!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  hyphens:none!important;
}

body[data-authenticated="1"] .topbar p{max-width:850px!important;}

body[data-authenticated="1"] .topbar-actions{
  flex:1 1 560px!important;
  width:auto!important;
  max-width:720px!important;
  min-width:0!important;
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
}

body[data-authenticated="1"] .topbar-actions .fd-theme-control{flex:0 1 250px;min-width:220px;}
body[data-authenticated="1"] .topbar-actions .account-chip{flex:1 1 230px;min-width:210px!important;max-width:330px;}
body[data-authenticated="1"] .topbar-actions .button,
body[data-authenticated="1"] .topbar-actions form{flex:0 1 auto;max-width:100%;}
body[data-authenticated="1"] .topbar-actions form .button{width:100%;}

body[data-authenticated="1"] .studio-command-deck{
  grid-template-columns:minmax(0,1fr) minmax(250px,300px)!important;
}

body[data-authenticated="1"] .metrics-strip{grid-template-columns:repeat(6,minmax(0,1fr))!important;}
body[data-authenticated="1"] .layout-grid{grid-template-columns:minmax(0,1fr) minmax(300px,36%)!important;}
body[data-authenticated="1"] .section-card,body[data-authenticated="1"] .panel{min-width:0!important;}

/* ---------- 1440 and below: common laptop / browser at 100% ---------- */
@media(max-width:1440px){
  .marketing-shell{width:min(1280px,calc(100% - 32px))!important;}
  .membership-copy h1{font-size:clamp(40px,4.4vw,62px)!important;}
  .pricing-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}

  body[data-authenticated="1"] .topbar>div:first-child,
  body[data-authenticated="1"] .topbar-actions{
    flex-basis:100%!important;
    max-width:none!important;
  }

  body[data-authenticated="1"] .topbar-actions{justify-content:flex-start!important;}
  body[data-authenticated="1"] .metrics-strip{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
  body[data-authenticated="1"] .layout-grid{grid-template-columns:1fr!important;}
  body[data-authenticated="1"] .sticky-panel{position:static!important;max-height:none!important;}
}

/* ---------- 1180 and below: compact Studio shell ---------- */
@media(max-width:1180px){
  .marketing-nav{align-items:flex-start!important;}
  .marketing-nav-actions{justify-content:flex-start!important;width:100%;}
  .membership-hero{grid-template-columns:1fr!important;}
  .membership-copy h1{max-width:18ch!important;font-size:clamp(38px,6vw,60px)!important;}
  .membership-lock-card{display:block;}
  .guest-demo-grid{grid-template-columns:1fr!important;}
  .marketing-proof{grid-template-columns:repeat(2,minmax(0,1fr))!important;}

  body[data-authenticated="1"] .app-shell{display:block!important;}
  body[data-authenticated="1"] .sidebar{
    position:relative!important;
    width:100%!important;
    max-width:none!important;
    height:auto!important;
    border-right:0!important;
    border-bottom:1px solid var(--line)!important;
  }

  body[data-authenticated="1"] .sidebar .brand{
    padding:12px 16px!important;
    border-bottom:0!important;
  }

  body[data-authenticated="1"] .sidebar .side-nav,
  body[data-authenticated="1"] .sidebar .side-card,
  body[data-authenticated="1"] .sidebar .side-footer{display:none!important;}

  body[data-authenticated="1"] .workspace{padding:16px 14px 94px!important;}
  body[data-authenticated="1"] .mobile-studio-bar{display:grid!important;}
  body[data-authenticated="1"] .studio-command-deck{grid-template-columns:1fr!important;}
  body[data-authenticated="1"] .intelligence-orbit{display:none!important;}
}

/* ---------- 900 and below ---------- */
@media(max-width:900px){
  .marketing-shell{width:calc(100% - 24px)!important;}
  .membership-copy h1{font-size:clamp(36px,7.8vw,54px)!important;}
  .comparison-grid,.marketing-proof,.pricing-grid{grid-template-columns:1fr!important;}
  .guest-demo-head{flex-direction:column!important;}

  body[data-authenticated="1"] .topbar h1{font-size:clamp(34px,7.5vw,52px)!important;max-width:20ch!important;}
  body[data-authenticated="1"] .topbar-actions{width:100%!important;}
}

/* ---------- 760 and below ---------- */
@media(max-width:760px){
  .marketing-shell{width:calc(100% - 18px)!important;padding-top:8px!important;}
  .marketing-nav-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important;}
  .marketing-nav-actions .fd-theme-control{grid-column:1/-1;width:100%!important;}
  .marketing-nav-actions .button{width:100%!important;}

  .membership-hero{margin-top:18px!important;gap:12px!important;}
  .membership-copy,.membership-lock-card,.guest-demo-section,.membership-comparison,.pricing-card,.marketing-cta{border-radius:18px!important;padding:18px!important;}
  .membership-copy h1{max-width:none!important;font-size:clamp(34px,10vw,48px)!important;line-height:.99!important;}
  .membership-copy p{font-size:16px!important;}
  .marketing-hero-actions,.membership-copy .marketing-hero-actions{display:grid!important;grid-template-columns:1fr!important;}
  .membership-copy .button,.membership-lock-card .button{width:100%!important;}

  .account-shell{width:calc(100% - 18px)!important;}
  .account-actions{display:grid!important;grid-template-columns:1fr!important;}
  .account-actions .button,.account-actions form,.account-actions form .button{width:100%!important;}
  .data-table{min-width:640px;}

  body[data-authenticated="1"] .topbar>div:first-child{min-width:0!important;}
  body[data-authenticated="1"] .topbar-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    width:100%!important;
    max-width:none!important;
  }
  body[data-authenticated="1"] .topbar-actions .fd-theme-control,
  body[data-authenticated="1"] .topbar-actions .account-chip{grid-column:1/-1;width:100%!important;max-width:none!important;min-width:0!important;}
  body[data-authenticated="1"] .topbar-actions .button,
  body[data-authenticated="1"] .topbar-actions form,
  body[data-authenticated="1"] .topbar-actions form .button{width:100%!important;justify-content:center!important;}
  body[data-authenticated="1"] .metrics-strip{grid-template-columns:1fr 1fr!important;}
  body[data-authenticated="1"] .command-status-grid{grid-template-columns:1fr 1fr!important;}
}

/* ---------- Small phone ---------- */
@media(max-width:480px){
  .marketing-nav .brand span{display:none!important;}
  .marketing-nav-actions{grid-template-columns:1fr!important;}
  .marketing-nav-actions .fd-theme-control{grid-column:1;}
  .membership-copy h1{font-size:clamp(31px,11.5vw,42px)!important;}
  .membership-lock-card h2{font-size:25px!important;}
  .fd-theme-option{min-height:38px!important;}

  body[data-authenticated="1"] .workspace{padding-inline:9px!important;}
  body[data-authenticated="1"] .topbar-actions{grid-template-columns:1fr!important;}
  body[data-authenticated="1"] .topbar-actions .fd-theme-control,
  body[data-authenticated="1"] .topbar-actions .account-chip{grid-column:1;}
  body[data-authenticated="1"] .metrics-strip,
  body[data-authenticated="1"] .command-status-grid{grid-template-columns:1fr!important;}
}

/* ---------- Short laptop height ---------- */
@media(max-height:820px) and (min-width:901px){
  .marketing-shell{padding-top:10px!important;}
  .marketing-nav{padding-block:10px!important;}
  .membership-hero{margin-top:24px!important;}
  .membership-copy,.membership-lock-card{padding-block:26px!important;}
  .membership-copy h1{margin-block:.22em .30em!important;font-size:clamp(39px,4.2vw,60px)!important;}
  .membership-copy p{line-height:1.52!important;}

  body[data-authenticated="1"] .workspace{padding-top:16px!important;}
  body[data-authenticated="1"] .topbar{padding-top:0!important;padding-bottom:14px!important;}
  body[data-authenticated="1"] .topbar h1{margin-block:6px!important;font-size:clamp(34px,3.25vw,54px)!important;}
}

/* ============================================================
   V7.7.1 — ADMIN INFORMATION ARCHITECTURE + 100% ZOOM BASELINE
   One visible command per function, grouped destinations, no horizontal page
   overflow on standard browser zoom. Page content may scroll vertically and
   data tables may scroll inside their own card only.
   ============================================================ */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

.auth-page.admin-auth-page{
  display:block!important;
  min-height:100vh;
  padding:0 0 48px!important;
}

.admin-auth-page .account-shell{
  width:min(1480px,calc(100% - 24px))!important;
  max-width:1480px!important;
  margin:0 auto!important;
  padding:24px 0 48px!important;
}

.fd-admin-shellbar,
.fd-admin-shellbar *{box-sizing:border-box;min-width:0}
.fd-admin-shellbar{
  position:sticky;
  top:0;
  z-index:120;
  width:100%;
  padding:10px max(12px,calc((100vw - 1480px)/2));
  border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--fd-surface-1) 94%,transparent);
  backdrop-filter:blur(22px);
  box-shadow:0 12px 34px rgba(0,0,0,.12);
}
.fd-admin-shellbar-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.fd-admin-brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:190px;
  color:var(--text);
  text-decoration:none;
}
.fd-admin-brand-mark{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  flex:0 0 38px;
  border-radius:12px;
  background:linear-gradient(135deg,var(--fd-accent-a),var(--fd-accent-b));
  color:var(--fd-accent-text);
  font-weight:950;
}
.fd-admin-brand>span:last-child{display:grid;gap:1px}
.fd-admin-brand strong{font-size:13px;line-height:1.15}
.fd-admin-brand small{color:var(--muted);font-size:10px;line-height:1.2}
.fd-admin-shellbar-controls{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}
.fd-admin-shellbar .fd-theme-control{
  min-height:40px;
  box-shadow:none;
}
.fd-admin-shellbar .fd-theme-option{min-height:32px;padding:6px 10px}
.fd-admin-update-form{margin:0;display:inline-flex}
.fd-admin-update-button{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:40px;
  margin:0;
  padding:8px 13px;
  border:1px solid transparent;
  border-radius:11px;
  background:linear-gradient(135deg,var(--fd-accent-a),var(--fd-accent-b));
  color:var(--fd-accent-text);
  font:900 11px/1.1 var(--font);
  white-space:nowrap;
  cursor:pointer;
  box-shadow:0 8px 22px rgba(74,192,170,.14);
}
.fd-admin-update-button:hover{transform:translateY(-1px)}
.fd-admin-update-button:focus-visible{outline:0;box-shadow:0 0 0 3px var(--fd-focus)}

.fd-admin-menu{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  padding-top:9px;
  margin-top:9px;
  border-top:1px solid var(--line);
}
.fd-admin-menu-link,
.fd-admin-menu-group>summary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:7px 11px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--fd-control-idle);
  color:var(--text);
  font:800 10.5px/1.15 var(--font);
  text-decoration:none;
  cursor:pointer;
  white-space:nowrap;
}
.fd-admin-menu-link:hover,
.fd-admin-menu-group>summary:hover{border-color:color-mix(in srgb,var(--primary) 48%,var(--line))}
.fd-admin-menu-link.is-active{border-color:color-mix(in srgb,var(--primary) 58%,var(--line));background:color-mix(in srgb,var(--primary) 11%,var(--fd-control-idle))}
.fd-admin-menu-group{position:relative}
.fd-admin-menu-group>summary{list-style:none}
.fd-admin-menu-group>summary::-webkit-details-marker{display:none}
.fd-admin-menu-group>summary::after{content:'⌄';margin-left:7px;color:var(--muted)}
.fd-admin-menu-group[open]>summary::after{transform:rotate(180deg)}
.fd-admin-menu-group>div{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  z-index:130;
  display:grid;
  gap:4px;
  min-width:220px;
  padding:7px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--fd-surface-1);
  box-shadow:0 20px 50px rgba(0,0,0,.22);
}
.fd-admin-menu-group>div a,
.fd-admin-menu-group>div button{
  appearance:none;
  width:100%;
  min-height:36px;
  padding:8px 10px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--text);
  font:750 11px/1.25 var(--font);
  text-align:left;
  text-decoration:none;
  cursor:pointer;
}
.fd-admin-menu-group>div a:hover,
.fd-admin-menu-group>div button:hover,
.fd-admin-menu-group>div .is-active{background:var(--fd-control-idle)}
.fd-admin-menu-group>div form{margin:0}
.fd-update-guidance{padding:13px 14px;border:1px solid var(--line);border-radius:12px;background:var(--fd-control-idle)}
.fd-update-guidance p{margin:.45rem 0 0}

/* Admin forms progressively reduce columns before they become cramped. */
@media(max-width:1240px){
  .admin-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media(max-width:900px){
  .fd-admin-shellbar{position:relative;padding:9px 10px}
  .fd-admin-shellbar-top{align-items:stretch;flex-direction:column}
  .fd-admin-shellbar-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(190px,.8fr);width:100%}
  .fd-admin-shellbar-controls .fd-theme-control{width:100%}
  .fd-admin-update-form,.fd-admin-update-button{width:100%}
  .fd-admin-menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .fd-admin-menu-link,.fd-admin-menu-group>summary{width:100%;white-space:normal;text-align:center}
  .fd-admin-menu-group>div{position:static;margin-top:5px;min-width:0;box-shadow:none}
  .admin-auth-page .account-shell{width:calc(100% - 18px)!important;padding-top:16px!important}
}

@media(max-width:600px){
  .fd-admin-brand{min-width:0}
  .fd-admin-shellbar-controls{grid-template-columns:1fr}
  .fd-admin-menu{grid-template-columns:1fr}
  .admin-form-grid{grid-template-columns:1fr!important}
  .admin-auth-page .account-shell{width:calc(100% - 12px)!important}
}