:root{
  --green:#2f5d58;
  --bg:#f2f2f2;
  --card:#ffffff;
  --text:#1f2328;
  --muted:#6b7280;
  --border:#cfd8d6;
  --border-strong:#a6b6b2;
  --shadow:0 10px 30px rgba(0,0,0,0.08);
  --radius:18px;
  --accent:#b01842; /* score bar */
  --load:#6f8f89;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  background:var(--bg);
  color:var(--text);
}

/* Anonymized layout: language picker aligned with results width */
.langDock{
  position:fixed;
  top:calc(env(safe-area-inset-top, 0px) + 10px);
  left:0;
  width:100%;
  z-index:1200;
  pointer-events:none;
}
.langDockInner{
  pointer-events:auto;
  max-width:1140px;
  margin:0 auto;
  padding:0 28px;
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--green);
  user-select:none;
}
.langDockInner.is-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.langDockInner.is-scroll::-webkit-scrollbar{display:none;}
.langDockInner .langGlobe{font-size:18px; opacity:0.95; flex:0 0 auto;}
.langDockInner .langSep{opacity:0.55; font-size:18px; flex:0 0 auto;}
.langDockInner .langOpt{
  background:transparent;
  border:0;
  color:var(--green);
  padding:0 2px;
  font-weight:800;
  font-size:18px;
  line-height:1;
  cursor:pointer;
  transition:opacity 120ms ease, transform 120ms ease;
  flex:0 0 auto;
  opacity:0.35;
}
.langDockInner .langOpt:hover{opacity:0.7; text-decoration:underline;}
.langDockInner .langOpt.is-active{opacity:1; text-decoration:none;}
@media (max-width: 520px){
  .langDock{top:calc(env(safe-area-inset-top, 0px) + 8px);}
  .langDockInner{padding:0 16px; gap:8px;}
  .langDockInner .langOpt{padding:0 2px; font-size:16px;}
  .langDockInner .langGlobe{font-size:17px;}
  .langDockInner .langSep{font-size:16px;}
}

/* Layout */
.main{
  padding-top:34px;
  padding-bottom:140px; /* space for search dock */
}
.resultsWrap{
  max-width:1140px;
  margin:0 auto;
  padding:0 28px;
}
.metaRow{
  display:flex;
  justify-content:flex-end;
  min-height:22px;
  margin:0 0 8px 0;
}
.searchTime{
  color:#a3a3a3;
  font-size:14px;
  position:relative;
  top:6px;
}

/* Landing */
.landing{
  max-width:1140px;
  margin:0 auto;
  padding:70px 28px 30px 28px;
  text-align:center;
}
.landingTitle{
  font-size:38px;
  font-weight:500;
  color:#343a40;
}
.landingSubtitle{
  margin-top:10px;
  font-size:18px;
  color:#5b6168;
}
.examplesGrid{
  margin:36px auto 0 auto;
  width:min(680px, 100%);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px 22px;
}
.exampleBtn{
  height:48px;
  border:2px solid #7a7a7a;
  border-radius:10px;
  background:rgba(255,255,255,0.35);
  color:#6a6a6a;
  font-size:20px;
  cursor:pointer;
}
.exampleBtn:hover{
  background:rgba(255,255,255,0.55);
}
@media (max-width:720px){
  .examplesGrid{grid-template-columns:1fr; width:min(520px,100%);}
  .main{padding-top:28px;}
}

/* Error banner */
.errorBanner{
  width:100%;
  margin:18px 0 0 0;
  background:#d6d2a2;
  border-radius:8px;
  padding:14px 18px;
  color:#3a3a2d;
  font-size:16px;
  box-shadow:0 4px 10px rgba(0,0,0,0.08);
}

/* Results card */
.resultsCard{
  margin:24px auto 0 auto;
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.results{
  padding:6px 0;
}
.resultRow{
  display:grid;
  grid-template-columns:56px 1fr 320px;
  gap:16px;
  padding:18px 22px;
  border-top:1px solid #e6e6e6;
}
.resultRow:first-child{border-top:0;}
.rank{
  font-size:24px;
  color:#808080;
  text-align:center;
  align-self:center;
  margin-top:0;
}
.resultRow.expanded .rank{align-self:flex-start; margin-top:18px;}


.patternBlock{min-width:0;}
.patternText{
  font-size:21px;
  font-weight:500;
  line-height:1.15;
  overflow-wrap:anywhere;
  word-break:normal;
}
.exampleLink{
  /* Keep hit area tight: avoid spanning the whole column width. */
  display:inline-block;
  width:fit-content;
  margin-top:4px;
  color:#485a57;
  font-size:15px;
  line-height:1.2;
  cursor:pointer;
  user-select:none;
}
.exampleLink:hover{text-decoration:underline;}
.scoreBlock{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:14px;
  padding-top:0;
}
.scoreLabel{
  color:#8a8a8a;
  font-size:15px;
  width:72px;
  text-align:right;
  white-space:nowrap;
}
.scoreBar{
  width:240px;
  height:16px;
  border-radius:10px;
  background:#dadada;
  overflow:hidden;
}
.scoreFill{
  height:100%;
  border-radius:10px;
  background:var(--accent);
  transform-origin:left center;
  transform:scaleX(0);
}
.scorePct{
  color:#8a8a8a;
  font-size:15px;
  width:70px;
  text-align:left;
}

/* Example area */
.exampleBox{
  grid-column:2 / span 2;
  margin-top:14px;
  background:#f5f5f5;
  border-radius:12px;
  border:1px solid #e3e3e3;
  overflow:hidden;
}
.exampleItem{
  padding:12px 14px;
  font-size:14px;
  color:#333;
  border-top:1px solid #e9e9e9;
  white-space:pre-wrap;
}
.exampleItem:first-child{border-top:0;}
.exampleHighlight{
  background:#f6df6a;
  padding:0 2px;
  border-radius:3px;
  font-weight:700;
}
.moreExamples{
  grid-column:2 / span 2;
  justify-self:end;
  margin-top:8px;
  text-align:right;
  color:#485a57;
  font-size:16px;
  cursor:pointer;
  user-select:none;
}
.moreExamples:hover{text-decoration:underline;}
.moreExamples:hover{text-decoration:underline;}

/* Summary bar */
.summaryBar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 22px;
  border-top:1px solid #e6e6e6;
  background:transparent;
}
.summaryBar.no-results{border-top:0;}
.summaryText{
  font-size:16px;
  color:#2c2c2c;
}
.loadBtn{
  border:0;
  background:var(--load);
  color:#fff;
  padding:10px 18px;
  border-radius:10px;
  font-size:18px;
  cursor:pointer;
}
.loadBtn:disabled{opacity:0.6; cursor:not-allowed;}
.loadBtn:hover{filter:brightness(0.96);}

/* Search dock (bottom bar) */
.searchDock{
  position:fixed;
  left:0; right:0;
  bottom:28px;
  margin:0 auto;
  width:min(990px, calc(100% - 76px));
  height:54px;
  border:2px solid var(--border-strong);
  border-radius:10px;
  background:rgba(255,255,255,0.92);
  box-shadow:0 8px 18px rgba(0,0,0,0.10);
  display:flex;
  align-items:center;
  padding:0 10px;
  z-index:950;
  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);
}
.queryInput{
  flex:1 1 auto;
  border:0;
  outline:none;
  background:transparent;
  font-size:18px;
  padding:0 8px;

  line-height: 1.2;
}
.dockDivider{
  width:1px;
  align-self:stretch;
  background:#cfd8d6;
  margin:8px 8px;
}
.corpusDock{
  display:flex;
  align-items:center;
  gap:10px;
  padding-right:6px;
}
.corpusLabel{
  color:#7a7a7a;
  font-size:16px;
  white-space:nowrap;
}
.corpusMenu{
  position:relative;
}
.corpusBtn{
  border:0;
  background:transparent;
  cursor:pointer;
  color:#6a6a6a;
  font-size:16px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 8px;
  border-radius:8px;
}
.corpusBtn:hover{background:rgba(0,0,0,0.04);}
.corpusMenu{ min-width:0; }
.corpusBtn{ min-width:0; max-width:100%; }
#corpusBtnText{
  display:block;
  max-width:360px;
  overflow:visible;
  text-overflow:clip;
  white-space:normal;
}
.corpusChevron{font-size:14px; opacity:0.65;}
.corpusList{
  position:absolute;
  right:0;
  bottom:calc(100% + 10px);
  min-width:220px;
  max-width:300px;
  background:#fff;
  border:1px solid #d9d9d9;
  border-radius:12px;
  box-shadow:0 18px 40px rgba(0,0,0,0.18);
  /* Allow scrolling when there are many corpora */
  overflow-x:hidden;
  overflow-y:auto;
  max-height:min(320px, 70vh);
  padding:6px;
}
.corpusItem{
  padding:10px 12px;
  border-radius:10px;
  cursor:pointer;
  color:#2a2a2a;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:16px;
}
.corpusItem:hover{background:#f3f4f6;}
.corpusItem.is-active{background:#eaf2f0;}
.corpusBadge{
  font-weight:700;
  font-size:12px;
  padding:3px 8px;
  border-radius:999px;
  background:#dde8e6;
  color:#2f5d58;
  flex:0 0 auto;
}
.corpusItemText{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Overlay */
.overlay{
  position:fixed;
  inset:0;
  background:rgba(255,255,255,0.88);
  z-index:5000;
  display:none;
  align-items:center;
  justify-content:center;
}
.overlay.is-active{display:flex;}
.overlay[hidden]{display:none !important;}
.overlayInner{
  width:min(920px, calc(100% - 60px));
  text-align:center;
}
.overlayTitle{
  font-size:48px;
  font-weight:500;
  color:#1f2328;
}
.overlaySubtitle{
  margin-top:8px;
  font-size:16px;
  color:#6b7280;
  min-height:20px;
}
.overlayBar{
  margin:26px auto 0 auto;
  width:100%;
  height:52px;
  border-radius:10px;
  background:#cfcfcf;
  overflow:hidden;
}
.overlayFill{
  height:100%;
  width:0%;
  background:var(--green);
}
.overlay.is-waiting .overlayFill{
  background:#cfcfcf;
}

/* Make the waiting overlay a bit more compact (about -15%) */
.overlay.is-waiting .overlayTitle{ font-size:41px; }
.overlay.is-waiting .overlaySubtitle{ font-size:14px; }
.overlay.is-waiting .overlayBar{ height:44px; }


/* Responsive */
@media (max-width: 900px){
  .resultRow{ grid-template-columns:50px 1fr 280px; }
  .scoreBar{ width:220px; }
  .patternText{ font-size:21px; }
}

@media (max-width: 720px){
  .resultRow{
    grid-template-columns:42px 1fr;
    grid-template-rows:auto auto;
    gap:12px;
  }
  .scoreBlock{
    grid-column:2;
    grid-row:2;
    justify-content:flex-start;
    width:100%;
  }
  .scoreLabel{ width:auto; text-align:left; }
  .scoreBar{ width:auto; flex:1; max-width:240px; min-width:120px; }
  .scorePct{ width:56px; text-align:right; }

  .exampleBox{ grid-column:1 / -1; }
  .moreExamples{ grid-column:1 / -1; justify-self:end; }

  .patternText{ font-size:20px; }
}

@media (max-width: 520px){
  .resultRow{ padding:16px 16px; }
  .scoreBar{ max-width:220px; }
  .searchDock{
    height:auto;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    padding:10px 12px;
  }
  .dockDivider{ display:none; }
  .queryInput{ width:100%; padding:6px 8px; }
  .corpusDock{ width:100%; display:flex; align-items:center; justify-content:space-between; min-width:0; }
  .corpusLabel{ font-size:14px; }
  #corpusBtnText{ max-width:240px; }

   .corpusList{left:50%; right:auto; transform:translateX(-50%); width:min(280px, calc(100vw - 24px)); max-width:min(280px, calc(100vw - 24px)); min-width:0;}
  .corpusBtnLine1,.corpusBtnLine2{max-width:calc(100vw - 120px);}
}


@media (max-height: 520px){
  .searchDock{
    height:auto;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    padding:10px 12px;
  }
  .dockDivider{ display:none; }
  .queryInput{
    width:100%;
    padding:6px 8px;
  }
  .corpusDock{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
}

/* No divider when summary is the first element (0 results) */
.resultsCard > .summaryBar:first-child{border-top:0;}


.exampleSource{
  color:#8a8a8a;
  font-size:13px;
  margin-left:6px;
}


/* Corpus button two-line label */
.corpusBtnTextWrap{display:flex; flex-direction:column; align-items:flex-start; min-width:0;}
.corpusBtnLine1,.corpusBtnLine2{max-width:360px; overflow:hidden; text-overflow:ellipsis;}
.corpusBtnLine1{font-weight:600; color:#2a2a2a;}
.corpusBtnLine2{font-size:13px; opacity:0.75; margin-top:1px;}

/* Corpus list two-line items */
.corpusItemText{display:flex; flex-direction:column; align-items:flex-start; min-width:0;}
.corpusItemMain{font-weight:600;}
.corpusItemSub{font-size:13px; opacity:0.75; margin-top:1px;}


/* Bottom fade so results softly disappear under the search dock */
.bottomFade{
  position:fixed;
  left:0; right:0;
  bottom:0;
  height:162px;
  pointer-events:none;
  z-index:900;
  background:linear-gradient(to bottom, rgba(242,242,242,0), rgba(242,242,242,1) 70%, rgba(242,242,242,1));
}