/* Dictionary and Translate. Both pages are mostly one thing — a word and what it means — so the
   layout stays out of the way and the meaning is the biggest thing on the screen. */

.dsearch{margin:18px 0 14px}
.dsearch-l{display:block;font-weight:900;font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:6px}
.dsearch-row{display:flex;gap:10px;flex-wrap:wrap}
.dsearch input,.dsearch textarea,.dsearch select{flex:1;min-width:200px;font:inherit;font-size:16px;padding:12px 14px;
  border-radius:12px;border:2px solid rgba(128,128,128,.28);background:var(--card);color:var(--head)}
.dsearch textarea{width:100%;margin-bottom:10px;line-height:1.55;resize:vertical}
.dsearch select{flex:0 0 auto;min-width:170px}
.dsearch input:focus,.dsearch textarea:focus,.dsearch select:focus{outline:3px solid rgba(123,92,255,.35);border-color:#7b5cff}

/* A–Z. A count under each letter says how much is there before you click. */
.daz{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 20px}
.daz a{display:flex;flex-direction:column;align-items:center;min-width:38px;padding:5px 7px;border-radius:10px;
  border:2px solid rgba(128,128,128,.2);text-decoration:none;font-weight:900;color:var(--head);line-height:1.1}
.daz a small{font-weight:700;font-size:.66rem;color:var(--muted)}
.daz a.on{background:var(--navy);border-color:var(--navy);color:#fff}
.daz a.on small{color:#cfd8f0}

/* The word itself. */
.dw{background:var(--card);border:2px solid rgba(128,128,128,.18);border-radius:18px;padding:20px;margin:0 0 18px}
.dw-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.dw-w{margin:0;font-size:30px;line-height:1.15;color:var(--head)}
.dw-pos{font-size:13px;font-style:italic;color:var(--muted)}
.dw-as{margin:4px 0 0;font-size:13.5px;color:var(--muted)}
.dw-en{margin:10px 0 16px;font-size:17px;line-height:1.6;color:var(--body)}
.dw-langs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dw-l{background:var(--soft);border-radius:12px;padding:11px 14px}
.dw-l span{display:block;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.dw-l b{display:block;margin-top:3px;font-size:21px;line-height:1.4;color:var(--head)}
.dw-note{margin:14px 0 0;padding:10px 13px;border-radius:10px;background:rgba(212,143,20,.13);font-size:14px;line-height:1.55;color:var(--body)}
[data-theme=dark] .dw-note{background:rgba(212,143,20,.2)}
.dw-miss .dw-w{color:var(--muted)}

/* A list of words to pick from. */
.dsec{margin:22px 0 10px;font-size:18px}
.dlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.dlist a{display:block;padding:10px 13px;border-radius:12px;background:var(--soft);text-decoration:none;color:var(--head)}
.dlist a b{display:block;font-size:15px}
.dlist a small{display:block;margin-top:2px;font-size:12.5px;color:var(--muted);line-height:1.4}
.dlist a:hover{outline:2px solid #7b5cff}

/* Translate. The known words are marked, the unknown ones plainly left alone — a reader has to be
   able to see at a glance which is which, or the output cannot be trusted at all. */
.tr-out{background:var(--card);border:2px solid rgba(128,128,128,.18);border-radius:18px;padding:18px;margin:4px 0 18px}
.tr-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.76rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:10px}
.tr-line{font-size:21px;line-height:1.95;color:var(--head);margin:0}
.tr-got{background:rgba(23,147,91,.15);border-radius:6px;padding:1px 4px}
.tr-miss{color:var(--muted);border-bottom:2px dotted var(--muted)}
.tr-note{margin:14px 0 0;font-size:14px;color:var(--body)}
.tr-warn{margin:14px 0 0;padding:11px 14px;border-radius:10px;background:rgba(212,143,20,.13);font-size:14px;line-height:1.6;color:var(--body)}
[data-theme=dark] .tr-got{background:rgba(23,147,91,.26)}
[data-theme=dark] .tr-warn{background:rgba(212,143,20,.2)}

.dnote{margin-top:26px;padding-top:18px;border-top:1px solid rgba(128,128,128,.2)}
.dnote h3{margin:0 0 8px;font-size:17px}
.dnote p{font-size:14.5px;line-height:1.65;color:var(--body);margin:0 0 10px}

@media (max-width:620px){
  .dw-langs{grid-template-columns:1fr}
  .dw-w{font-size:25px}
  .tr-line{font-size:19px;line-height:1.85}
  .dsearch-row .btn{width:100%;justify-content:center}
}

/* Somewhere fuller to go. Set apart from the site's own answer so nobody mistakes a link out for
   something this page is claiming to know. */
.dout{margin:22px 0 0;padding:16px 18px;border-radius:16px;background:var(--soft);border:2px dashed rgba(128,128,128,.3)}
.dout h3{margin:0 0 6px;font-size:16px}
.dout-p{margin:0 0 12px;font-size:13.5px;line-height:1.6;color:var(--muted)}
.dout-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:9px}
.dout-links a{display:block;padding:11px 14px;border-radius:12px;background:var(--card);text-decoration:none;
  border:2px solid rgba(128,128,128,.18)}
.dout-links a:hover{border-color:#7b5cff}
.dout-links b{display:block;font-size:14.5px;color:var(--link)}
.dout-links small{display:block;margin-top:3px;font-size:12.4px;line-height:1.5;color:var(--muted)}