/* Word Bank page composition. Shared controls, forms, status, dialogs and
   navigation remain shared owners; this file owns the collection layout only. */

body.ma-wordbank-page{
  margin:0;
  min-height:100vh;
  overflow-x:hidden;
  color:var(--ma-text);
  background:var(--ma-page-bg-words);
}
.ma-wordbank-page .wrap{
  --ma-page-max:var(--ma-content-max);
  margin-bottom:56px;
}

/* The page header is context, not another card. */
.wordbank-intro{
  width:min(1180px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:28px 40px;
  padding:clamp(42px,6vw,72px) 0 30px;
  border-bottom:1px solid var(--ma-border);
}
.wordbank-intro__copy{max-width:760px;min-width:0;}
.wordbank-intro__copy .ma-kicker{--ma-kicker-color:var(--ma-words);}
.wordbank-intro h1{
  margin:7px 0 0;
  color:var(--ma-text-strong);
  font-family:var(--ma-font-display);
  font-size:clamp(2.7rem,5.7vw,5rem);
  font-weight:860;
  line-height:.95;
  letter-spacing:-.065em;
}
.wordbank-intro__copy p{
  max-width:700px;
  margin:16px 0 0;
  color:var(--ma-text-soft);
  font-size:clamp(.98rem,1.45vw,1.1rem);
  line-height:1.6;
}
.wordbank-hero-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;}
.wordbank-actions-host,.wordbank-add-host{display:none;}
.wordbank-actions-dialog-content,.wordbank-add-dialog-content{display:grid;gap:var(--ma-space-4);}
.wordbank-add-dialog-content .wordbank-add-group{margin-top:0;}
.wordbank-add-group .ma-field__label{margin-top:0;}
.btn-row{--ma-action-gap:var(--ma-space-2);margin-top:var(--ma-space-4);}
#statusMsg{margin-top:var(--ma-space-3);min-height:22px;}

.wordbank-overview{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:6px;
  border-top:1px solid var(--ma-border);
}
.wordbank-overview>div{
  min-width:0;
  display:grid;
  gap:5px;
  padding:18px 22px 2px 0;
  border-right:1px solid var(--ma-border);
}
.wordbank-overview>div+div{padding-left:22px;}
.wordbank-overview>div:last-child{border-right:0;}
.wordbank-overview span{color:var(--ma-muted);font-size:.72rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase;}
.wordbank-overview strong{color:var(--ma-text-strong);font-family:var(--ma-font-display);font-size:1.7rem;font-variant-numeric:tabular-nums;line-height:1;}
.ma-wordbank-page.ma-wordbank-populated .wordbank-intro{padding-top:30px;}
.ma-wordbank-page.ma-wordbank-populated .wordbank-intro h1{font-size:clamp(2.3rem,4.4vw,3.7rem);}
.ma-wordbank-page.ma-wordbank-populated .wordbank-intro__copy p{margin-top:10px;font-size:.94rem;}

/* Library is the page, not a card inside the page. */
.wordbank-library{
  width:min(1180px,100%);
  margin:0 auto;
  padding:clamp(40px,6vw,64px) 0 0;
}
.library-head{--ma-section-head-gap:var(--ma-space-4);margin-bottom:24px;}
.library-head .ma-kicker{--ma-kicker-color:var(--ma-words);}
.library-head h2{
  margin:6px 0 0;
  color:var(--ma-text-strong);
  font-family:var(--ma-font-display);
  font-size:clamp(2rem,3.6vw,3.15rem);
  letter-spacing:-.05em;
  line-height:1;
}
.library-head p{max-width:700px;margin:10px 0 0;color:var(--ma-muted);font-size:.92rem;line-height:1.5;}

.toolbar{
  grid-template-columns:minmax(240px,1.55fr) minmax(150px,.65fr) minmax(150px,.65fr);
  padding:12px;
  border:1px solid var(--ma-border);
  border-radius:var(--ma-radius-lg);
  background:color-mix(in srgb,var(--ma-card-2) 92%,transparent);
  box-shadow:var(--ma-shadow-soft);
}
.toolbar.ma-toolbar-shared--sticky{top:calc(var(--ma-nav-sticky-offset,12px) + 76px);z-index:3;}
.toolbar .ma-field__label{margin-top:0;}
.wordbank-input-with-icon{position:relative;}
.wordbank-input-with-icon>.ma-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--ma-muted);pointer-events:none;}
.wordbank-input-with-icon .ma-input{padding-left:40px;}
.wordbank-results-meta{min-height:20px;margin:13px 2px 7px;color:var(--ma-muted);font-size:.75rem;font-weight:750;}

.entries{
  display:grid;
  gap:0;
  border-top:1px solid var(--ma-border);
  border-bottom:1px solid var(--ma-border);
}

/* Saved vocabulary is a scan-friendly list. */
.wordbank-entry{
  min-width:0;
  border-bottom:1px solid var(--ma-border);
  background:transparent;
}
.wordbank-entry:last-child{border-bottom:0;}
.card-summary{
  display:grid;
  grid-template-columns:minmax(260px,1fr) minmax(160px,.34fr) minmax(145px,.32fr) auto;
  gap:24px;
  align-items:center;
  min-height:94px;
  padding:15px 10px;
  cursor:pointer;
  list-style:none;
  transition:background var(--ma-motion-fast) ease;
}
.card-summary::-webkit-details-marker{display:none;}
.card-summary:hover{background:color-mix(in srgb,var(--ma-card-2) 34%,transparent);}
.card-summary:focus-visible{outline:3px solid var(--ma-focus-ring);outline-offset:-3px;}
.card-summary-main{min-width:0;}
.wordbank-word-line{display:flex;align-items:center;gap:9px;min-width:0;}
.kana{min-width:0;overflow-wrap:anywhere;color:var(--ma-text-strong);font-family:var(--ma-font-jp);font-size:clamp(1.55rem,2.3vw,1.9rem);font-weight:900;line-height:1.1;letter-spacing:-.03em;}
.wordbank-favourite-mark{display:inline-flex;flex:0 0 auto;color:var(--ma-warning);}
.wordbank-meaning{margin-top:5px;overflow:hidden;color:var(--ma-text);font-size:.98rem;font-weight:800;text-overflow:ellipsis;white-space:nowrap;}
.wordbank-meaning.is-missing{color:var(--ma-muted);font-weight:650;font-style:italic;}
.romaji{margin-top:3px;color:color-mix(in srgb,var(--ma-words) 65%,var(--ma-text));font-size:.82rem;font-weight:760;word-break:break-word;}
.summary-col{min-width:0;}
.summary-label{--ma-kicker-size:.66rem;--ma-kicker-spacing:.06em;margin-bottom:5px;}
.summary-value{overflow:hidden;color:var(--ma-text-soft);font-size:.82rem;text-overflow:ellipsis;white-space:nowrap;}
.summary-date{text-align:right;}
.summary-toggle{width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:50%;color:var(--ma-muted);background:transparent;transition:background var(--ma-motion-fast) ease,color var(--ma-motion-fast) ease;}
.card-summary:hover .summary-toggle{background:var(--ma-surface-inset);}
.summary-toggle .ma-icon{transform:rotate(90deg);transition:transform var(--ma-motion-fast) ease;}
.wordbank-entry[open] .summary-toggle .ma-icon{transform:rotate(-90deg);}
.wordbank-entry[open] .summary-toggle{color:var(--ma-text);}

.card-body{
  padding:20px 18px 20px;
  border-top:1px solid var(--ma-border);
  background:color-mix(in srgb,var(--ma-card-3) 42%,transparent);
}
.card-top{--ma-section-head-gap:var(--ma-space-3);margin-bottom:14px;}
.meta{--ma-action-gap:var(--ma-space-2);}
.meta .tag{--ma-pill-bg:var(--ma-card-2);--ma-pill-border:var(--ma-border);--ma-pill-color:var(--ma-muted);}
.star-btn{color:var(--ma-warning);}
.fields{display:grid;gap:12px;}
.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.field-grid.single{grid-template-columns:1fr;}
.card-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:16px;}
.small-muted{color:var(--ma-muted);font-size:.75rem;}
.inline-actions{--ma-action-gap:var(--ma-space-2);}
.wordbank-delete-btn{color:var(--ma-danger);border-color:color-mix(in srgb,var(--ma-danger) 34%,var(--ma-border));}

.empty{
  min-height:260px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:42px 20px;
  --ma-empty-border:transparent;
  text-align:center;
  background:transparent;
}
.empty h3{margin:0;color:var(--ma-text-strong);font-family:var(--ma-font-display);font-size:clamp(1.55rem,3vw,2.2rem);letter-spacing:-.04em;}
.empty p{max-width:560px;margin:0;color:var(--ma-muted);font-size:.92rem;line-height:1.55;}
.wordbank-empty-actions{--ma-action-gap:10px;justify-content:center;margin-top:10px;}

@media(max-width:820px){
  .wordbank-intro{grid-template-columns:1fr;align-items:start;padding-top:38px;}
  .wordbank-hero-actions{justify-content:flex-start;}
  .wordbank-overview{grid-template-columns:repeat(2,minmax(0,1fr));}
  .wordbank-overview>div{padding:14px 16px 14px 0;border-bottom:1px solid var(--ma-border);}
  .wordbank-overview>div+div{padding-left:16px;}
  .wordbank-overview>div:nth-child(2){border-right:0;}
  .wordbank-overview>div:nth-child(n+3){border-bottom:0;}
  .toolbar{grid-template-columns:1fr;position:static;}
  .card-summary{grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:14px;}
  .summary-col{display:none;}
  .summary-toggle{grid-column:2;grid-row:1;}
}

@media(max-width:600px){
  .ma-wordbank-page .wrap{margin-bottom:40px;}
  .wordbank-intro{padding:28px 0 22px;gap:20px;}
  .wordbank-intro h1,.ma-wordbank-page.ma-wordbank-populated .wordbank-intro h1{font-size:clamp(2.25rem,12vw,3.1rem);}
  .wordbank-hero-actions{width:100%;}
  .wordbank-hero-actions #wordBankAddJumpBtn{flex:1;width:auto;}
  .wordbank-library{padding-top:32px;}
  .wordbank-overview strong{font-size:1.45rem;}
  .card-summary{min-height:82px;padding:13px 4px;}
  .card-body{padding:18px 10px;}
  .field-grid{grid-template-columns:1fr;}
  .card-top,.card-actions{align-items:stretch;flex-direction:column;}
  .inline-actions{width:100%;}
  .inline-actions .ma-button{flex:1;}
  .wordbank-empty-actions{width:100%;flex-direction:column;}
  .wordbank-empty-actions .ma-button{width:100%;}
}

body[data-effective-display-mode="tablet"] .toolbar{grid-template-columns:1fr;position:static;}
body[data-effective-display-mode="tablet"] .card-summary{grid-template-columns:minmax(0,1fr) auto;align-items:start;}
body[data-effective-display-mode="tablet"] .summary-col{display:none;}
body[data-effective-display-mode="phone"] .wordbank-intro{grid-template-columns:1fr;}
body[data-effective-display-mode="phone"] .toolbar,
body[data-effective-display-mode="phone"] .field-grid{grid-template-columns:1fr;}
body[data-effective-display-mode="phone"] .wordbank-overview{grid-template-columns:repeat(2,minmax(0,1fr));}
body[data-effective-display-mode="phone"] .card-summary{grid-template-columns:minmax(0,1fr) auto;}
body[data-effective-display-mode="phone"] .summary-col{display:none;}

@media(prefers-reduced-motion:reduce){.card-summary,.summary-toggle{transition:none;}}

@media(pointer:coarse){.summary-toggle{width:44px;height:44px;}}