/* The Kruti Dev converters (kruti-dev-to-unicode, unicode-to-kruti-dev and their Hindi twins). The colours are the page's (--bg, --bg-2, --border, --accent ...). */
/* the words that say something happened: the green and the amber of the page are too pale to read on a white page, so the light page has darker ones (4.5 : 1 or more) */
:root { --kc-warn: #ffb454; --kc-ok: var(--accent); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --kc-warn: #a85a00; --kc-ok: #0b7a4b; } }
:root[data-theme="light"] { --kc-warn: #a85a00; --kc-ok: #0b7a4b; }

.kc { --kc-hi: 'Noto Sans Devanagari','Mangal','Nirmala UI','Kohinoor Devanagari','Devanagari Sangam MN','Mukta',system-ui,sans-serif;
  margin-top: 8px; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-2); scroll-margin-top: 72px; }
@media (min-width: 700px) { .kc { padding: 22px; } }
@media (max-width: 480px) { .kc { margin-inline: -8px; padding: 10px 8px; } }
.kc [hidden] { display: none !important; }
.kc-nojs { color: var(--text-2); }
.kc button { font-family: inherit; }

/* the two boxes: one above the other on a phone, side by side on a computer */
.kc-panes { display: grid; gap: 16px; }
@media (min-width: 900px) { .kc-panes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.kc-pane { display: grid; gap: 8px; min-width: 0; align-content: start; }
.kc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.kc-head label { font-size: 15px; font-weight: 700; }
.kc-count { font-size: 12px; color: var(--text-2); }
.kc-box { display: block; width: 100%; height: 11em; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text);
  font-family: system-ui, 'Segoe UI', Arial, sans-serif; font-size: 16px; line-height: 1.6; resize: vertical; }
.kc-box[lang="hi"] { font-family: var(--kc-hi); font-size: 19px; line-height: 1.8; }
.kc-box:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.kc-out { background: var(--bg-2); border-style: dashed; }
.kc-box::placeholder { color: var(--text-2); opacity: .8; }
@media (min-width: 700px) { .kc-box { height: 14em; } }

.kc-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.kc .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; background: transparent; }
.kc .btn-primary { background: var(--accent); border: 0; color: #08080E; }
.kc .btn-ghost { border: 1px solid var(--border); color: var(--text); }
.kc .btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.kc-help { font-size: 13px; line-height: 1.5; color: var(--text-2); }

/* what happened, what to look at */
.kc-status { min-height: 1.4em; font-size: 14px; line-height: 1.4; font-weight: 600; color: var(--kc-ok); }
.kc-status.warn { color: var(--kc-warn); }
.kc-notes { list-style: none; display: grid; gap: 8px; margin-top: 10px; }
.kc-notes li { font-size: 14px; line-height: 1.5; color: var(--text-2); padding-left: 12px; border-left: 3px solid var(--border); }
.kc-notes li.warn { color: var(--kc-warn); border-left-color: var(--kc-warn); font-weight: 600; }
.kc-notes li.ok { color: var(--kc-ok); border-left-color: var(--kc-ok); }
.kc-notes a { color: var(--kc-ok); text-decoration: underline; font-weight: 600; }
.kc-opts { display: grid; gap: 2px; margin-top: 10px; }
.kc-check { display: flex; align-items: flex-start; gap: 8px; min-height: 36px; padding: 6px 0; font-size: 14px; cursor: pointer; }
.kc-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); flex-shrink: 0; }
html[lang="hi"] .kc-head label { font-size: 16px; }