/* Sangam Lexicon editor — the site's design system, plus editing affordances.
   Tokens, fonts and the Tamil wrapping policy are lifted from build.py's CSS so
   the editor feels like the same object as the published site. */
:root{
  --paper:#F2EDE0; --paper-2:#EAE4D2; --ink:#231E12; --ink-soft:#5A5340; --line:#D8D0BA;
  --kurinji:#5D4E96; --kurinji-soft:#EDEAF6;
  --mullai:#4E7A4E; --marutham:#AE4A3C; --neytal:#2E5E8C; --palai:#8A7A5E;
  --card:#FBF8EF; --radius:14px;
  --disp:'Noto Serif Tamil', serif;
  --ui:'Anek Tamil','Space Grotesk',sans-serif;
  --latin:'Space Grotesk',sans-serif;
  --tap:44px;                      /* minimum touch target */
}
[data-theme="dark"]{
  --paper:#14120C; --paper-2:#1B1810; --ink:#EDE6D3; --ink-soft:#A89F86; --line:#332E20;
  --kurinji:#9B8CD8; --kurinji-soft:#241F38; --card:#1E1A11;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--ui);background:var(--paper);color:var(--ink);min-height:100vh;
  overscroll-behavior-y:none}
[hidden]{display:none !important}

/* Tamil never breaks inside a word — a puḷḷi or vowel sign must stay with its
   base letter. Phrases break at spaces only. Same policy as the site. */
.hw,.gl-ta,.q-ta,.sug-w,.chip-ta,textarea,input{
  overflow-wrap:normal;word-break:normal;word-wrap:normal;hyphens:none;line-break:strict}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:12px;
  padding:10px clamp(12px,3vw,28px);border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(10px);
  flex-wrap:wrap}
.brand{font-family:var(--disp);font-weight:800;font-size:17px;color:var(--ink);
  text-decoration:none;white-space:nowrap}
.brand small{display:block;font-family:var(--latin);font-weight:400;font-size:10px;
  color:var(--ink-soft);letter-spacing:.14em;text-transform:uppercase;margin-top:1px}
.searchwrap{position:relative;flex:1 1 260px;min-width:200px}
.search{width:100%;font-family:var(--disp);font-size:17px;padding:11px 14px;
  border-radius:10px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);
  min-height:var(--tap)}
.search:focus{border-color:var(--kurinji);outline:none}
.suggest{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:none;
  z-index:50;box-shadow:0 24px 60px -20px rgba(35,30,18,.35);max-height:60vh;overflow-y:auto}
.suggest.open{display:block}
.suggest button{display:flex;width:100%;justify-content:space-between;align-items:baseline;
  gap:14px;padding:12px 16px;background:none;border:none;border-bottom:1px solid var(--line);
  cursor:pointer;text-align:left;min-height:var(--tap)}
.suggest button:last-child{border-bottom:none}
.suggest button:hover,.suggest button.sel{background:var(--kurinji-soft)}
.sug-w{font-family:var(--disp);font-size:18px;color:var(--ink)}
.sug-g{font-family:var(--latin);font-size:12px;color:var(--ink-soft);text-align:right}

.btn{font-family:var(--ui);font-size:15px;font-weight:500;color:var(--ink);
  background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:10px 16px;cursor:pointer;min-height:var(--tap);display:inline-flex;
  align-items:center;gap:7px;white-space:nowrap}
.btn:hover{border-color:var(--kurinji);color:var(--kurinji)}
.btn.primary{background:var(--kurinji);border-color:var(--kurinji);color:#fff}
.btn.primary:hover{color:#fff;opacity:.92}
.btn.small{font-size:13px;padding:6px 12px;min-height:34px}
.btn[aria-pressed="true"]{background:var(--kurinji);border-color:var(--kurinji);color:#fff}
.count-pill{font-family:var(--latin);font-size:12px;background:var(--kurinji);color:#fff;
  border-radius:999px;padding:2px 8px;min-width:22px;text-align:center}

/* ---------- layout ---------- */
main{max-width:900px;margin:0 auto;padding:clamp(16px,3vw,32px) clamp(12px,3vw,28px) 120px}
.hint{font-family:var(--latin);font-size:13.5px;color:var(--ink-soft);line-height:1.6}
h1.hw{font-family:var(--disp);font-weight:800;font-size:clamp(30px,6vw,46px);line-height:1.2}
.crumb{font-family:var(--latin);font-size:13px;color:var(--ink-soft);margin-bottom:16px}
.crumb button{background:none;border:none;color:var(--kurinji);font-family:var(--latin);
  font-size:14px;cursor:pointer;padding:9px 2px;min-height:36px}

/* ---------- welcome / browse ---------- */
.welcome{text-align:center;padding:clamp(24px,6vh,70px) 0 30px}
.welcome h1{font-family:var(--disp);font-weight:300;font-size:clamp(24px,4.6vw,40px);line-height:1.3}
.welcome h1 b{font-weight:800;color:var(--kurinji)}
.welcome .sub{margin-top:12px;font-family:var(--latin);color:var(--ink-soft);font-size:15px}
.recent{margin-top:34px}
.recent h2,.section-label{font-family:var(--latin);font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-soft);font-weight:600;margin-bottom:12px}
.rowlist{display:flex;flex-direction:column;gap:8px}
.rowlist button{display:flex;justify-content:space-between;align-items:center;gap:14px;
  width:100%;text-align:left;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:13px 16px;cursor:pointer;min-height:var(--tap)}
.rowlist button:hover{border-color:var(--kurinji)}
.rowlist .w{font-family:var(--disp);font-size:19px}
.rowlist .m{font-family:var(--latin);font-size:12.5px;color:var(--ink-soft);text-align:right}

/* ---------- entry editor ---------- */
.entry-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-bottom:6px}
.field{margin-top:18px}
.field > label,.flabel{display:block;font-family:var(--latin);font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px;
  font-weight:600}
/* >=16px on EVERY control: iOS zooms the whole page when a smaller one is
   focused, which on an iPad throws her place on the page away */
input,textarea,select{font-size:17px}
input[type=text],textarea,select{width:100%;font-family:var(--ui);
  line-height:1.55;color:var(--ink);background:var(--card);
  border:1.5px solid var(--line);border-radius:10px;padding:11px 13px;min-height:var(--tap)}
input[type=text]:focus,textarea:focus,select:focus{border-color:var(--kurinji);outline:none}
textarea{resize:vertical;min-height:72px}
.ta-input{font-family:var(--disp);font-size:19px}
.hw-input{font-family:var(--disp);font-size:clamp(24px,5vw,34px);font-weight:800;padding:12px 14px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.row2{grid-template-columns:1fr}}

/* the original, kept visible once a field is changed */
.was{display:flex;align-items:flex-start;gap:10px;margin-top:7px;font-family:var(--latin);
  font-size:13px;color:var(--ink-soft);flex-wrap:wrap}
.was s{font-family:inherit;text-decoration:line-through;opacity:.85}
.was .ta{font-family:var(--disp);font-size:15px}
.changed input,.changed textarea,.changed select{border-color:var(--marutham);
  background:color-mix(in srgb,var(--marutham) 5%,var(--card))}
.revert{background:none;border:1px solid var(--line);border-radius:999px;
  font-family:var(--latin);font-size:13px;color:var(--marutham);cursor:pointer;
  padding:6px 14px;min-height:36px}
.revert:hover{border-color:var(--marutham)}

.sense{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);
  padding:16px;margin-top:16px;position:relative}
.sense.deleted{opacity:.5}
.sense.deleted input,.sense.deleted textarea,.sense.deleted select{
  text-decoration:line-through;pointer-events:none}
.sense-top{display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-wrap:wrap;margin-bottom:4px}
.sense-no{font-family:var(--latin);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:600}
.sense-tools{display:flex;gap:6px;flex-wrap:wrap}
.cites{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.cite{display:grid;grid-template-columns:minmax(120px,1.4fr) 84px 84px auto;gap:8px;
  align-items:center}
@media(max-width:560px){.cite{grid-template-columns:1fr 1fr;gap:7px}
  .cite .cite-del{grid-column:2;justify-self:end}}
.citewrap.deleted{opacity:.5}
.citewrap.deleted input,.citewrap.deleted select{text-decoration:line-through;pointer-events:none}
.citewrap.changed input,.citewrap.changed select{border-color:var(--marutham);
  background:color-mix(in srgb,var(--marutham) 5%,var(--card))}
.citewrap .was{margin-top:5px}
.cite select,.cite input{font-size:16px;padding:9px 10px;min-height:var(--tap)}
.icon-btn{width:var(--tap);height:var(--tap);flex:none;border-radius:10px;border:1px solid var(--line);
  background:var(--card);color:var(--ink-soft);font-size:17px;cursor:pointer;line-height:1}
.icon-btn:hover{border-color:var(--marutham);color:var(--marutham)}

.notebox{margin-top:18px;border:1px dashed var(--line);border-radius:var(--radius);padding:14px;
  background:color-mix(in srgb,var(--kurinji) 4%,transparent)}
.notebox textarea{font-family:var(--ui);font-size:16px;background:var(--card)}
.raw{margin-top:22px;border-top:1px solid var(--line);padding-top:14px}
.raw pre{font-family:ui-monospace,monospace;font-size:12.5px;line-height:1.7;color:var(--ink-soft);
  white-space:pre-wrap;word-break:break-word;max-height:180px;overflow:auto}

/* ---------- review pane ---------- */
.stats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 16px;
  flex:1 1 120px}
.stat b{display:block;font-family:var(--disp);font-weight:800;font-size:26px;line-height:1.1}
.stat span{font-family:var(--latin);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft)}
.diffgroup{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);
  padding:14px 16px;margin-bottom:12px}
.diffgroup h3{font-family:var(--disp);font-size:21px;font-weight:800;margin-bottom:2px}
.diffgroup .meta{font-family:var(--latin);font-size:12px;color:var(--ink-soft);margin-bottom:10px}
.diff{font-family:var(--latin);font-size:13.5px;line-height:1.7;padding:7px 0;
  border-top:1px solid var(--line)}
.diff .op{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.diff .from{color:var(--marutham);text-decoration:line-through}
.diff .to{color:var(--mullai)}
.diff .ta{font-family:var(--disp);font-size:16px;text-decoration:inherit}
.flagpill{font-family:var(--latin);font-size:11px;color:var(--neytal);
  border:1px solid var(--neytal);border-radius:999px;padding:2px 9px}

/* ---------- footer bar ---------- */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;align-items:center;
  gap:10px;padding:10px clamp(12px,3vw,28px);border-top:1px solid var(--line);
  background:color-mix(in srgb,var(--paper) 94%,transparent);backdrop-filter:blur(10px);
  flex-wrap:wrap;padding-bottom:calc(10px + env(safe-area-inset-bottom))}
.bar .sp{flex:1}
.bar .status{font-family:var(--latin);font-size:11.5px;color:var(--ink-soft)}
.toast{position:fixed;bottom:84px;left:50%;transform:translateX(-50%) translateY(70px);
  background:var(--ink);color:var(--paper);font-family:var(--latin);font-size:13.5px;
  padding:11px 20px;border-radius:999px;opacity:0;transition:all .3s;z-index:80;
  pointer-events:none;max-width:90vw;text-align:center}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
@media (prefers-reduced-motion:reduce){*{transition-duration:.001ms !important}}