/* ertale.com/birr — the time.ertale.com card model: off-white body, sections
   as separate WHITE CARDS with transparent gaps between them (the "separator"
   is the body showing through), green #30CB9A nav band with time-style pills.
   No faint text, no small fonts (site rule — keep body text >= ~14px and
   secondary text dark, never a light gray). */
:root{
  --sep:#EFECE5; --line:#E4E1D8;
  --ink:#20241F; --mut:#3E453D;   /* secondary text: dark enough to never read as faint */
  --nav:#30CB9A;
  --acc:#0B6B45; --acc-soft:rgba(11,107,69,.08);
  --up:#0B7A44; --down:#B8442B;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--sep);color:var(--ink);font-size:16px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans Ethiopic",Helvetica,Arial,sans-serif;
  line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.shell{max-width:760px;margin:0 auto;padding:10px 12px 8px;background:transparent}

/* cards: each section is its own white card with right-angle corners; the 14px
   gaps are the separators (body showing through) */
.card{background:#fff;border-radius:0;padding:16px 18px;margin-top:14px;
  box-shadow:0 1px 4px rgba(0,0,0,.06)}
.card > h1:first-child{margin-top:0}

/* header — green nav band, time-style */
.sitehead{display:flex;align-items:center;gap:12px;background:var(--nav);
  border-radius:0;padding:10px 14px;box-shadow:0 2px 8px rgba(0,0,0,.10)}
.topnav{display:flex;gap:8px}
.topnav a{font-size:15.5px;font-weight:700;color:#fff;padding:7px 16px;border-radius:10px;
  border:1.5px solid rgba(255,255,255,.6);
  transition:background-color 120ms ease-out,color 120ms ease-out,border-color 120ms ease-out}
.topnav a:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.85)}
.topnav a.on{background:#fff;color:var(--acc);font-weight:800;border-color:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.12)}
.langseg{margin-left:auto;display:flex;gap:6px;flex:none}
.lseg{font-size:14.5px;font-weight:700;padding:6px 12px;color:#fff;white-space:nowrap;
  border:1.5px solid rgba(255,255,255,.6);border-radius:10px;
  transition:background-color 120ms ease-out,color 120ms ease-out}
a.lseg:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.85)}
.lseg.on{background:#fff;color:var(--acc);font-weight:800;border-color:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.12)}
@media(max-width:520px){.sitehead{gap:8px}
  .topnav a{padding:6px 11px;font-size:14.5px}.lseg{padding:6px 10px}}

h1{font-size:22px;font-weight:800;letter-spacing:-.01em;margin:8px 0;line-height:1.25}
.prose{font-size:16px;max-width:62ch}

.stale{background:#FFF7E0;border:1px solid #E8D49A;color:#6B5310;
  border-radius:12px;padding:10px 14px;font-size:15px;margin-top:14px}

/* rate rows — the whole row is the button; nothing inside looks like one */
.rows{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.row{display:flex;align-items:center;gap:10px;padding:12px 12px;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:none}
.row:hover{background:var(--acc-soft)}
.flag{font-size:16px}
.cur{display:flex;flex-direction:column;gap:2px;min-width:0}
.cur .n{font-size:15px;color:var(--mut);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.val{margin-left:auto;text-align:right}
/* The USD side (.c: "1 USD 🇺🇸") and the ETB side (.v: "158.86 ETB 🇪🇹") share one
   type scale — identical number, currency-code, and flag sizes on both sides. */
.c,.v{display:block;white-space:nowrap;line-height:1.15}
.c .num,.v .num{font-size:23px;font-weight:800;font-variant-numeric:tabular-nums}
.c .u,.v .u{font-size:23px;color:var(--mut);font-weight:700}
.c .flag,.v .flag{font-size:22px}
.val .d{display:block;font-size:17px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.d.up,.chg.up{color:var(--up)}
.d.dn,.chg.dn{color:var(--down)}
.rowspark{width:78px;flex:none;display:grid;place-items:center}
.rowspark svg{width:100%;height:30px}

/* One shared column grid (subgrid) so name / value / sparkline line up vertically
   across every row, whatever the rate's digit count. Each row stays a real box
   (hover, border, whole-row link). Pre-2023 browsers that lack subgrid fall back
   to the flex layout above — functional, just not column-aligned. */
@supports (grid-template-columns: subgrid){
  .rows{display:grid;grid-template-columns:minmax(0,1fr) auto auto}
  .row{display:grid;grid-template-columns:subgrid;grid-column:1/-1}
  .val{margin-left:0}
}

/* Phones: drop the decorative sparkline (the real chart is one tap away on each
   row) so the currency name has room and never wraps or truncates. Placed after
   the base rules above so these overrides win the cascade. */
@media(max-width:480px){
  .rowspark{display:none}
  .row{gap:9px;padding:12px 11px}
  .c .num,.v .num{font-size:21px}
  .c .u,.v .u{font-size:21px}
  .c .flag,.v .flag{font-size:20px}
  .val .d{font-size:15px}.cur .n{font-size:14px}
}
@supports (grid-template-columns: subgrid){
  @media(max-width:480px){.rows{grid-template-columns:minmax(0,1fr) auto}}
}

.moresel{margin:12px 0 0;width:100%;font:inherit;font-size:16px;font-weight:800;color:var(--acc);
  background:#fff;border:2px solid var(--acc);border-radius:11px;padding:12px 42px 12px 14px;
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10'%3E%3Cpath d='M1 1l7 7 7-7' stroke='%230B6B45' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}
.moresel:hover{background-color:var(--acc-soft)}

/* converter (chrome comes from the wrapping .card) */
.conv{background:none;border:none;padding:0;margin:0}
.convtitle{font-size:20px;color:var(--ink);font-weight:800;letter-spacing:-.01em;line-height:1.25;margin:0 0 12px}
.convrow{display:flex;align-items:stretch;gap:10px}
.cbox{flex:1;min-width:0}
.cbox label{display:block;text-align:center;font-size:15px;font-weight:800;color:var(--ink);margin:0 0 6px}
.cbox label i{font-style:normal;color:var(--acc);font-size:15px;margin-left:2px}
.fieldwrap{display:flex;align-items:center;gap:7px;background:#fff;
  border:1.5px solid var(--line);border-radius:11px;padding:0 12px}
.fieldwrap:focus-within{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
.fieldwrap input{flex:1;min-width:0;width:100%;background:none;border:none;
  color:var(--ink);text-align:left;font-size:19px;font-weight:800;font-variant-numeric:tabular-nums;
  padding:10px 0;font-family:inherit}
@media(max-width:430px){.fieldwrap input{font-size:17px}.fieldwrap{padding:0 10px}.fieldwrap .unit{font-size:14px}}
.fieldwrap input:focus{outline:none}
.fieldwrap .unit{font-size:15px;font-weight:800;color:var(--acc);flex:none}
.cmid{align-self:center;padding-top:14px;color:var(--acc);font-size:36px;line-height:1;flex:none}
.convnote{font-size:14px;color:var(--mut);margin-top:8px}
/* Rows are subgrid so the amount column is exactly as wide as the longest
   amount — the flag/code column lines up vertically right after it. */
.also{margin-top:10px;border-top:1px dashed var(--line);padding-top:8px;
  display:grid;grid-template-columns:max-content max-content 1fr;column-gap:9px}
.alsolbl{grid-column:1/-1;font-size:14px;color:var(--ink);font-weight:800;margin-bottom:6px}
.alsorow{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:center;padding:7px 2px}
.alsorow:hover{background:var(--acc-soft)}
.alsorow .flag{font-size:15px;width:22px}
.alsorow .cc2{font-size:15px;font-weight:700}
.alsorow .cv2{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}

/* chart page */
.curtabs{display:flex;gap:6px;margin:2px 0 0}
.ctab{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  font-weight:800;color:var(--ink);
  border:1.5px solid var(--line);border-radius:10px;padding:7px 0;background:#fff}
.ctab .ctcode{font-size:14.5px;font-weight:800}
.ctab .ctflag{font-size:22px;line-height:1;margin-top:1px}
.ctab .ctcode i{font-style:normal;color:var(--acc);margin-right:2px}
.ctab:hover{border-color:var(--acc)}
.ctab.on{background:var(--acc);border-color:var(--acc);color:#fff;box-shadow:0 2px 8px rgba(11,107,69,.28)}
.ctab.on .ctcode i{color:#fff}
.bigv{font-size:40px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1;margin-top:14px}
.bigv small{font-size:16px;color:var(--mut);font-weight:700;letter-spacing:0}
.bigsign2{color:var(--acc);font-size:26px;vertical-align:8px;margin-right:4px}
/* Pull left by the ▲/▼ glyph's internal side-bearing so the arrow's visible edge
   lines up with the big number's first digit above it (em-relative, so it holds
   at any font size). */
.chg{font-size:16.5px;font-weight:800;margin:7px 0 0;text-indent:-0.16em}
#chartpanel.loading{opacity:.55;transition:opacity .12s ease-out}
.chartwrap{position:relative;margin:10px 0 2px;touch-action:pan-y}
.yhi,.ylo{position:absolute;right:5px;font-size:15px;font-weight:800;color:var(--mut);
  font-variant-numeric:tabular-nums;background:rgba(255,255,255,.78);padding:0 4px;border-radius:5px;pointer-events:none}
.yhi{top:5px}
.ylo{bottom:7px}
.chart{width:100%;height:180px;display:block}
.xline{position:absolute;top:0;bottom:0;width:1.5px;background:var(--acc);opacity:.6;display:none;pointer-events:none}
.xdot{position:absolute;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border:2.5px solid #fff;
  background:var(--acc);border-radius:50%;display:none;pointer-events:none;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.tip{position:absolute;top:4px;background:var(--ink);color:#fff;font-size:14.5px;font-weight:700;
  padding:5px 10px;border-radius:8px;display:none;pointer-events:none;white-space:nowrap;
  font-variant-numeric:tabular-nums;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.axis{display:flex;justify-content:space-between;font-size:15px;font-weight:700;color:var(--mut);padding:0 2px;margin-bottom:8px}
.axis > span{display:inline-flex;flex-direction:column;align-items:center;line-height:1.16}
.seotext{font-size:15.5px;color:var(--ink);margin:14px 0 12px;line-height:1.55;max-width:62ch}
.seotext b{color:var(--ink);font-weight:800}
.ranges{display:flex;gap:4px}
.rng{flex:1;text-align:center;font-size:15px;font-weight:800;color:var(--mut);
  border:1.5px solid var(--line);border-radius:8px;padding:8px 0;background:#fff}
.rng:hover{border-color:var(--acc)}
.rng.on{background:var(--acc-soft);border-color:var(--acc);color:var(--acc)}
.rng.off,.rng.off:hover{color:#8A917F;background:#F6F5F1;border-color:#EBE9E1;cursor:default}

/* footer — green band, time-style */
.foot{background:var(--nav);color:#fff;border-radius:0;padding:14px 16px;margin:14px 0 16px;
  font-size:15px;display:flex;flex-direction:column;align-items:center;gap:3px;box-shadow:0 2px 8px rgba(0,0,0,.10)}
.footmail{font-size:14px}
.footmail a{color:#fff;font-weight:700}
.footcopy{font-size:14px}

@media(min-width:900px){
  h1,.convtitle{font-size:26px}
  .card{padding:20px 24px}
  .chart{height:230px}
  .convrow{gap:14px}
  .val .v{font-size:25px}
  .rowspark{width:110px}
  .rowspark svg{height:38px}
}