/* Wrong Book redesign foundation shell V1. */
.wb-shell-owned{
  min-height:100vh;
  display:grid;
  grid-template-columns:72px minmax(0,1fr);
  background:var(--wb-environment);
}

.wb-shell-owned .wb-library{
  position:sticky;
  top:0;
  z-index:90;
  width:72px;
  height:100vh;
  padding:12px 8px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  background:color-mix(in srgb,var(--wb-paper) 94%,transparent);
  border-right:1px solid var(--wb-border);
  box-shadow:none;
}
.wb-library-brand{
  min-height:44px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 6px;
}
.wb-library-brand .brand-mark{
  flex:0 0 36px;
  width:36px;
  height:36px;
  border-radius:10px;
  background:var(--wb-accent);
  box-shadow:none;
}
.wb-library-brand-copy{min-width:0;white-space:nowrap}
.wb-library-brand-copy strong,.wb-library-brand-copy small{display:block}
.wb-library-brand-copy strong{font-size:14px}
.wb-library-brand-copy small{margin-top:2px;color:var(--wb-muted);font-size:10px}

.wb-library-toggle,
.wb-library-upload{
  width:100%;
  min-height:44px;
  margin-top:10px;
  padding:8px;
  border:1px solid var(--wb-border);
  border-radius:var(--wb-radius-medium);
  background:var(--wb-paper-raised);
  color:var(--wb-ink-soft);
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:9px;
  cursor:pointer;
}
.wb-library-toggle svg,.wb-library-upload svg{flex:0 0 19px;width:19px;height:19px}
.wb-library-toggle span,.wb-library-upload span{font-size:12px;font-weight:750;white-space:nowrap}
.wb-library-upload{background:var(--wb-accent);border-color:var(--wb-accent);color:#fff}
.wb-library-toggle:hover{border-color:var(--wb-border-strong);background:var(--wb-paper)}
.wb-library-upload:hover{background:var(--wb-accent-hover)}

.wb-library-navigation{
  min-height:0;
  margin-top:12px;
  overflow:auto;
  scrollbar-width:none;
}
.wb-library-navigation::-webkit-scrollbar{display:none}
.wb-library-section-label{
  display:block;
  padding:12px 10px 5px;
  color:var(--wb-muted);
  font-size:10px;
  font-weight:750;
  letter-spacing:.08em;
}
.wb-library .nav{display:grid;gap:3px;overflow:visible}
.wb-library .nav-btn{
  width:100%;
  min-height:40px;
  padding:8px 10px;
  border:1px solid transparent;
  border-radius:var(--wb-radius-medium);
  background:transparent;
  color:var(--wb-ink-soft);
  display:flex;
  align-items:center;
  gap:10px;
  text-align:left;
}
.wb-library .nav-btn svg{flex:0 0 19px;width:19px;height:19px}
.wb-library .nav-btn span{font-size:13px;white-space:nowrap}
.wb-library .nav-btn:hover{background:var(--wb-paper-raised);border-color:var(--wb-border)}
.wb-library .nav-btn.active{background:var(--wb-accent-soft);border-color:color-mix(in srgb,var(--wb-accent) 18%,var(--wb-border));color:var(--wb-accent);font-weight:750}

.wb-shell-profile{
  width:100%;
  min-height:48px;
  margin-top:auto;
  padding:7px;
  border:1px solid var(--wb-border);
  border-radius:var(--wb-radius-medium);
  background:var(--wb-paper-raised);
  color:var(--wb-ink);
  display:grid;
  grid-template-columns:34px minmax(0,1fr) 18px;
  align-items:center;
  gap:8px;
  text-align:left;
  cursor:pointer;
}
.wb-shell-profile .avatar,.wb-profile-summary .avatar{
  width:34px;
  height:34px;
  border-radius:50%;
  background:var(--wb-accent-soft);
  color:var(--wb-accent);
  display:grid;
  place-items:center;
  font-size:13px;
  font-weight:850;
}
.wb-shell-profile>svg{width:17px;height:17px;color:var(--wb-muted)}
.wb-profile-copy{min-width:0}
.wb-profile-copy strong,.wb-profile-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wb-profile-copy strong{font-size:12px}
.wb-profile-copy small{margin-top:2px;color:var(--wb-muted);font-size:10px}

.wb-library.is-collapsed .wb-library-brand-copy,
.wb-library.is-collapsed .wb-library-upload span,
.wb-library.is-collapsed .wb-library-section-label,
.wb-library.is-collapsed .nav-btn span,
.wb-library.is-collapsed .wb-profile-copy,
.wb-library.is-collapsed .wb-shell-profile>svg{display:none}
.wb-library.is-collapsed .wb-library-brand{justify-content:center;padding:0}
.wb-library.is-collapsed .wb-library-toggle{
  min-height:58px;
  padding:7px 3px;
  display:grid;
  place-items:center;
  gap:2px;
}
.wb-library.is-collapsed .wb-library-toggle span{
  width:44px;
  white-space:normal;
  text-align:center;
  font-size:9px;
  line-height:1.2;
}
.wb-library.is-collapsed .wb-library-upload,
.wb-library.is-collapsed .nav-btn,
.wb-library.is-collapsed .wb-shell-profile{display:grid;place-items:center;padding:7px}
.wb-library.is-collapsed .wb-library-upload{grid-template-columns:1fr}
.wb-library.is-collapsed .nav-btn{grid-template-columns:1fr}
.wb-library.is-collapsed .wb-shell-profile{grid-template-columns:1fr}

.wb-library-backdrop{display:none}
.wb-shell-main{min-width:0;background:var(--wb-environment)}
.wb-shell-topbar{
  height:58px;
  padding:0 24px;
  background:color-mix(in srgb,var(--wb-environment) 88%,transparent);
  border-bottom:1px solid var(--wb-border);
  backdrop-filter:blur(16px);
}
.wb-shell-topbar .crumb{color:var(--wb-ink-soft);font-size:12px;font-weight:700}
.wb-shell-topbar .mobile-menu-btn{display:none}
.wb-topbar-wordmark{color:var(--wb-muted);font-size:12px;font-weight:750;letter-spacing:.08em}
.wb-shell-owned .content{max-width:1480px;padding:26px 30px 76px}
.mobile-nav.wb-learning-mobile-nav{display:none}

.wb-popover-scrim{
  position:fixed;
  inset:0;
  z-index:145;
  border:0;
  background:transparent;
}
.wb-profile-popover{
  position:fixed;
  left:80px;
  bottom:12px;
  z-index:150;
  width:min(300px,calc(100vw - 24px));
  padding:8px;
  border:1px solid var(--wb-border);
  border-radius:var(--wb-radius-large);
  background:var(--wb-paper-raised);
  box-shadow:var(--wb-shadow-medium);
}
.is-library-open .wb-profile-popover{left:272px}
.wb-profile-summary{display:grid;grid-template-columns:38px 1fr;gap:10px;align-items:center;padding:9px}
.wb-profile-summary strong,.wb-profile-summary small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wb-profile-summary strong{font-size:13px}
.wb-profile-summary small{margin-top:3px;color:var(--wb-muted);font-size:10px}
.wb-plan-line{display:flex;justify-content:space-between;gap:12px;margin:2px 6px 8px;padding:9px 10px;border-radius:var(--wb-radius-small);background:var(--wb-accent-soft);font-size:11px}
.wb-profile-popover>button,.wb-profile-popover>a{
  width:100%;
  min-height:39px;
  padding:8px 10px;
  border:0;
  border-radius:var(--wb-radius-small);
  background:transparent;
  color:var(--wb-ink-soft);
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  text-align:left;
  cursor:pointer;
}
.wb-profile-popover>button:hover,.wb-profile-popover>a:hover{background:var(--wb-paper)}
.wb-profile-popover>button svg,.wb-profile-popover>a svg{width:17px;height:17px}
.wb-profile-popover .wb-profile-logout{margin-top:4px;border-top:1px solid var(--wb-border);border-radius:0;color:var(--wb-danger)}

.wb-modal-backdrop{
  position:fixed;
  inset:0;
  z-index:300;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(35,35,31,.42);
  backdrop-filter:blur(5px);
}
.wb-publisher-backdrop{z-index:330}
.wb-modal{
  width:min(940px,100%);
  max-height:min(760px,calc(100vh - 40px));
  overflow:hidden;
  border:1px solid var(--wb-border);
  border-radius:var(--wb-radius-large);
  background:var(--wb-paper-raised);
  box-shadow:0 28px 90px rgba(35,35,31,.24);
}
.wb-modal-head{
  min-height:76px;
  padding:14px 18px 14px 22px;
  border-bottom:1px solid var(--wb-border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.wb-modal-head h2{margin:2px 0 0;font-size:20px}
.wb-eyebrow{color:var(--wb-muted);font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.wb-settings-layout{min-height:520px;display:grid;grid-template-columns:220px minmax(0,1fr)}
.wb-settings-categories{padding:14px;border-right:1px solid var(--wb-border);background:var(--wb-paper)}
.wb-settings-categories button{
  width:100%;
  min-height:42px;
  padding:9px 10px;
  border:1px solid transparent;
  border-radius:var(--wb-radius-medium);
  background:transparent;
  color:var(--wb-ink-soft);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  text-align:left;
  cursor:pointer;
}
.wb-settings-categories button svg{width:15px;height:15px;color:var(--wb-muted)}
.wb-settings-categories button.active{background:var(--wb-accent-soft);border-color:color-mix(in srgb,var(--wb-accent) 15%,var(--wb-border));color:var(--wb-accent);font-weight:800}
.wb-settings-detail{position:relative;min-width:0;max-height:620px;overflow:auto;padding:30px 34px 38px}
.wb-settings-mobile-back{display:none}
.wb-settings-section-head h3{margin:4px 0 6px;font-size:22px}
.wb-settings-section-head p{max-width:620px;margin:0;color:var(--wb-muted);font-size:13px;line-height:1.6}
.wb-setting-row{
  margin-top:24px;
  padding:16px;
  border:1px solid var(--wb-border);
  border-radius:var(--wb-radius-medium);
  background:var(--wb-paper);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.wb-setting-row strong,.wb-setting-row small{display:block}
.wb-setting-row strong{font-size:13px}
.wb-setting-row small{margin-top:4px;color:var(--wb-muted);font-size:11px}
.wb-font-size-control{position:relative}
.wb-font-size-control>button{
  min-width:112px;
  min-height:44px;
  padding:8px 10px;
  border:1px solid var(--wb-border-strong);
  border-radius:var(--wb-radius-medium);
  background:var(--wb-paper-raised);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  cursor:pointer;
}
.wb-font-size-control>button strong{font-size:16px}
.wb-font-size-control>button span{color:var(--wb-muted);font-size:11px}
.wb-font-size-control>button svg{width:15px;height:15px}
.wb-font-size-menu{
  position:absolute;
  top:calc(100% + 7px);
  right:0;
  z-index:4;
  width:112px;
  padding:5px;
  border:1px solid var(--wb-border);
  border-radius:var(--wb-radius-medium);
  background:var(--wb-paper-raised);
  box-shadow:var(--wb-shadow-small);
}
.wb-font-size-menu button{width:100%;min-height:34px;border:0;border-radius:7px;background:transparent;cursor:pointer}
.wb-font-size-menu button:hover,.wb-font-size-menu button[aria-selected="true"]{background:var(--wb-accent-soft);color:var(--wb-accent);font-weight:800}
.wb-settings-form-grid{margin-top:24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.wb-settings-form-grid label,.wb-publisher-grid label{display:grid;gap:7px;color:var(--wb-ink-soft);font-size:11px;font-weight:800}
.wb-settings-form-grid input,.wb-settings-form-grid select,.wb-publisher-grid select{
  width:100%;
  min-height:43px;
  padding:9px 11px;
  border:1px solid var(--wb-border);
  border-radius:var(--wb-radius-medium);
  background:var(--wb-paper-raised);
  color:var(--wb-ink);
}
.wb-field-wide{grid-column:1/-1}
.wb-settings-actions{display:flex;justify-content:flex-end;margin-top:18px}
.wb-settings-empty{margin-top:24px;padding:30px;border:1px dashed var(--wb-border-strong);border-radius:var(--wb-radius-medium);background:var(--wb-paper);text-align:center}
.wb-settings-empty strong{font-size:13px}
.wb-settings-empty p{margin:6px 0 0;color:var(--wb-muted);font-size:11px}
.wb-account-card{margin-top:24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.wb-account-card>div{padding:14px;border:1px solid var(--wb-border);border-radius:var(--wb-radius-medium);background:var(--wb-paper)}
.wb-account-card span,.wb-account-card strong{display:block}
.wb-account-card span{color:var(--wb-muted);font-size:10px}
.wb-account-card strong{margin-top:6px;font-size:12px;overflow-wrap:anywhere}
.wb-settings-detail .wbpay-boundary{margin-top:18px}
.wb-data-actions{margin-top:24px;display:grid;gap:9px;max-width:420px}
.wb-data-actions button{justify-content:flex-start}

.wb-publisher-modal{width:min(760px,100%)}
.wb-publisher-body{max-height:calc(100vh - 210px);overflow:auto;padding:22px}
.wb-publisher-body>p{margin:0 0 18px;color:var(--wb-muted);font-size:12px}
.wb-publisher-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.wb-modal-actions{padding:14px 20px;border-top:1px solid var(--wb-border);display:flex;justify-content:flex-end;gap:9px;background:var(--wb-paper)}

/* Keep the released question-review treatment while the shell changes around it. */
.wb-question-review .pf-review-head{align-items:flex-start}
.wb-review-progress{display:flex;align-items:baseline;gap:4px;padding:8px 12px;border:1px solid var(--wb-border);border-radius:12px;background:#fff;color:var(--wb-muted)}
.wb-review-progress strong{font-size:22px;color:var(--wb-ink)}
.wb-question-review-result,.wb-review-ambiguity{margin-top:16px;padding:15px;border-radius:14px;border:1px solid var(--wb-border);background:#fff}
.wb-question-review-result strong,.wb-review-ambiguity strong{display:block;font-size:16px}
.wb-question-review-result p,.wb-review-ambiguity p{margin:6px 0 12px;color:var(--wb-muted);line-height:1.55}
.wb-question-review-result.is-correct{border-color:#bcdac7;background:var(--wb-success-soft)}
.wb-question-review-result.is-incorrect{border-color:#ead0a8;background:var(--wb-warning-soft)}
.wb-review-ambiguity>div{display:flex;flex-wrap:wrap;gap:8px}
.wb-review-scope{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 14px;padding:11px 14px;border:1px solid var(--wb-border);border-radius:13px;background:var(--wb-accent-soft)}
.wb-review-scope>div{display:grid;gap:3px}
.wb-review-scope small{color:var(--wb-muted)}

@media (min-width:1360px){
  .wb-shell-owned.is-library-open{grid-template-columns:264px minmax(0,1fr)}
  .wb-shell-owned .wb-library.is-open{position:sticky;width:auto;box-shadow:none}
  .wb-shell-owned.is-library-open .wb-library-backdrop{display:none}
}

@media (min-width:701px) and (max-width:1359px){
  .wb-shell-owned .wb-library.is-open{
    position:fixed;
    left:0;
    width:264px;
    box-shadow:var(--wb-shadow-medium);
  }
  .wb-shell-owned.is-library-open .wb-library-backdrop{
    position:fixed;
    inset:0;
    z-index:80;
    display:block;
    border:0;
    background:rgba(35,35,31,.28);
  }
  .wb-shell-owned.is-library-open .wb-profile-popover{left:272px}
}

@media (max-width:700px){
  .wb-shell-owned{display:block;min-height:100dvh}
  .wb-shell-owned .wb-library,.wb-shell-owned .wb-library-backdrop{display:none}
  .wb-shell-topbar{height:56px;padding:0 12px}
  .wb-shell-topbar .mobile-menu-btn{display:grid}
  .wb-topbar-wordmark{display:none}
  .wb-shell-owned .content{padding:16px 12px calc(86px + env(safe-area-inset-bottom))}
  .mobile-nav.wb-learning-mobile-nav{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:240;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    padding:5px max(5px,env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(5px,env(safe-area-inset-left));
    border-top:1px solid var(--wb-border);
    background:color-mix(in srgb,var(--wb-paper-raised) 94%,transparent);
    backdrop-filter:blur(18px);
  }
  .mobile-nav.wb-learning-mobile-nav button{
    width:auto;
    min-width:0;
    min-height:54px;
    margin:0;
    padding:5px 2px;
    border:0;
    border-radius:var(--wb-radius-medium);
    background:transparent;
    box-shadow:none;
    color:var(--wb-muted);
    display:grid;
    place-items:center;
    gap:2px;
  }
  .mobile-nav.wb-learning-mobile-nav button.active{background:var(--wb-accent-soft);color:var(--wb-accent);font-weight:800}
  .mobile-nav.wb-learning-mobile-nav button svg,.mobile-nav.wb-learning-mobile-nav .capture-mobile svg{width:19px;height:19px}
  .mobile-nav.wb-learning-mobile-nav button span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:inherit;font-size:9px;line-height:1.15}
  .mobile-nav.wb-learning-mobile-nav .capture-mobile{position:static;width:auto;height:auto;transform:none;background:transparent;color:var(--wb-muted)}
  .wb-more-sheet{
    position:fixed;
    inset:0;
    z-index:260;
    padding:0;
    display:flex;
    align-items:flex-end;
    background:rgba(35,35,31,.4);
  }
  .wb-more-sheet.open{display:flex}
  .wb-learning-drawer{
    width:100%;
    height:auto;
    max-height:min(78dvh,720px);
    padding:16px 14px calc(82px + env(safe-area-inset-bottom));
    overflow:auto;
    border-radius:18px 18px 0 0;
    background:var(--wb-paper-raised);
    box-shadow:0 -18px 60px rgba(35,35,31,.18);
  }
  .wb-learning-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 4px 12px;border-bottom:1px solid var(--wb-border);margin-bottom:8px}
  .wb-learning-drawer-head strong,.wb-learning-drawer-head small{display:block}
  .wb-learning-drawer-head small{margin-top:2px;color:var(--wb-muted);font-size:10px}
  .wb-learning-drawer .nav{display:grid;gap:3px}
  .wb-learning-drawer .nav-btn{width:100%;min-height:44px;padding:9px 10px;border:0;border-radius:var(--wb-radius-medium);background:transparent;color:var(--wb-ink-soft);display:flex;align-items:center;gap:11px;text-align:left}
  .wb-learning-drawer .nav-btn svg{width:19px;height:19px}
  .wb-learning-drawer .nav-btn.active{background:var(--wb-accent-soft);color:var(--wb-accent);font-weight:800}
  .wb-drawer-profile{margin-top:12px;grid-template-columns:34px minmax(0,1fr) 18px}
  .wb-popover-scrim{z-index:270}
  .wb-profile-popover{left:12px;right:12px;bottom:calc(72px + env(safe-area-inset-bottom));z-index:275;width:auto}
  .is-library-open .wb-profile-popover{left:12px}
}

@media (max-width:700px){
  .wb-modal-backdrop{padding:0;place-items:stretch}
  .wb-modal{
    width:100%;
    height:100dvh;
    max-height:none;
    border:0;
    border-radius:0;
    display:flex;
    flex-direction:column;
  }
  .wb-modal-head{min-height:66px;padding:10px 14px 10px 18px}
  .wb-settings-layout{min-height:0;flex:1;display:block;overflow:hidden}
  .wb-settings-categories{height:100%;padding:12px;border-right:0;overflow:auto}
  .wb-settings-categories button{min-height:50px;padding:11px 12px;border-bottom:1px solid var(--wb-border);border-radius:0}
  .wb-settings-categories button.active{border:1px solid color-mix(in srgb,var(--wb-accent) 15%,var(--wb-border));border-radius:var(--wb-radius-medium)}
  .wb-settings-detail{display:none;height:100%;max-height:none;padding:14px 16px 32px}
  .wb-settings-modal.is-mobile-detail .wb-settings-categories{display:none}
  .wb-settings-modal.is-mobile-detail .wb-settings-detail{display:block}
  .wb-settings-mobile-back{display:inline-flex;align-items:center;gap:7px;margin:0 0 20px;padding:7px 0;border:0;background:transparent;color:var(--wb-accent);font-weight:800}
  .wb-settings-mobile-back svg{width:16px;height:16px;transform:rotate(45deg)}
  .wb-setting-row{align-items:flex-start;flex-direction:column}
  .wb-font-size-control{width:100%}
  .wb-font-size-control>button{width:100%}
  .wb-font-size-menu{left:0;right:0;width:100%}
  .wb-settings-form-grid,.wb-account-card,.wb-publisher-grid{grid-template-columns:1fr}
  .wb-field-wide{grid-column:auto}
  .wb-publisher-modal .wb-publisher-body{flex:1;max-height:none;padding:18px 16px}
  .wb-publisher-modal .wb-modal-actions{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
}

@media (max-width:370px){
  .mobile-nav.wb-learning-mobile-nav button span{font-size:8px}
}
