/* Converter, shared by the web page (arshadmuhammed.com/convert) and the
   browser extension's popup, which carries a copy of this file.

   The house look, the Audit one Arsha chose: white paper, Inter, ink for the
   text and the solid bits, blue only for the focus ring, hairline rings in
   place of borders. Day only, as asked for the other tools. The popup is the
   same page made smaller (body.popup).

   Alignment (16 Oct 2026, Arsha: the title was very large, fix the
   alignment): the title is a modest single line and the big rupee figure is
   the loudest thing on the page. Every card's content starts at the same
   inset (--in) and every flag sits the same distance from its words (--gap),
   so the rupee card, the pinned list and the full list line up down one
   edge at every width. */
:root{
  --ink:#1f1e1c; --ink2:#5f5e5b; --ink3:#9b9a97; --line:rgba(55,53,47,.09); --line2:rgba(55,53,47,.16);
  --side:#f9f8f7; --hover:rgba(55,53,47,.06); --blue:#0b74de;
  --ok:#4aa564; --warn:#d99a2b; --bad:#e0664f;
  --shadow:0 0 0 1px rgba(15,15,15,.05),0 1px 2px rgba(15,15,15,.05);
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--ink);font:15px/1.4 Inter,-apple-system,system-ui,sans-serif;letter-spacing:-.011em;-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
.ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

.wrap{--in:18px;--gap:12px;max-width:640px;margin:0 auto;padding:40px 20px 64px;overflow-x:clip}

/* ---------- title ---------- */
.top{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.mark{width:44px;height:44px;border-radius:12px;background:url(convert-mark.png) center/cover no-repeat;flex:none}
.ttl{flex:1;min-width:0}
h1{font-size:24px;line-height:1.2;letter-spacing:-.03em;font-weight:700;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.status{display:flex;flex-wrap:wrap;align-items:center;column-gap:7px;row-gap:2px;margin:3px 0 0;font-size:13px;line-height:18px;color:var(--ink2)}
.status span{white-space:nowrap}
.dot{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}
.status.warn .dot{background:var(--warn)}
.status.bad .dot{background:var(--bad)}
.status.wait .dot{background:var(--ink3)}
/* The Refresh link at the end of the status line: the obvious one on a
   phone, where the top buttons show icons only. */
.status .again{margin:0 0 0 -4px;padding:2px 6px;font-size:inherit;color:var(--blue);font-weight:600}
.status .again:disabled{color:var(--ink3);cursor:default;background:none}
/* Live: the dot breathes, a slow ring that fades, so the rate reads as
   running rather than fixed. Nothing else on the page moves. */
.status.live .dot{animation:breathe 2.4s ease-out infinite}
@keyframes breathe{0%{box-shadow:0 0 0 0 rgba(74,165,100,.45)}70%{box-shadow:0 0 0 6px rgba(74,165,100,0)}100%{box-shadow:0 0 0 0 rgba(74,165,100,0)}}
@media (prefers-reduced-motion:reduce){.status.live .dot{animation:none}}
.acts{display:flex;gap:8px;flex:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:9px;padding:0 13px;font-size:14px;font-weight:600;height:38px;min-width:38px}
.btn.quiet{background:#fff;box-shadow:0 0 0 1px var(--line2)}
.btn.quiet:hover{background:var(--side)}
.ibtn{width:38px;height:38px;border:0;border-radius:9px;background:#fff;box-shadow:0 0 0 1px var(--line2);display:grid;place-items:center;color:var(--ink2);padding:0}
.ibtn:hover{background:var(--side);color:var(--ink)}
.ibtn.spin .ic,.btn.spin .ic{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
button:focus-visible,.link:focus-visible{outline:0;box-shadow:0 0 0 1px var(--blue),0 0 0 4px rgba(11,116,222,.14)}

/* ---------- the two lists ---------- */
.card{background:#fff;border-radius:14px;box-shadow:var(--shadow);margin-bottom:18px}
.sechead{display:flex;align-items:center;gap:10px;padding:13px var(--in) 7px}
.sechead h2{font-size:13px;font-weight:600;color:var(--ink2);margin:0;letter-spacing:0;flex:1}
.from{font-size:12.5px;font-weight:500;color:var(--ink2);background:var(--side);box-shadow:0 0 0 1px var(--line);border-radius:99px;padding:2px 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.link{background:none;border:0;padding:4px 7px;margin:-4px -7px;border-radius:6px;color:var(--ink2);font-size:13px;font-weight:600}
.link:hover{background:var(--hover);color:var(--ink)}
.count{font-size:12.5px;color:var(--ink3);font-variant-numeric:tabular-nums}

.row{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;column-gap:var(--gap);padding:9px var(--in);border-top:1px solid var(--line);min-height:62px}
.rows .row:first-child{border-top-color:transparent}
.row.is-base{background:var(--side)}
.card .rows:last-child .row:last-child{border-radius:0 0 14px 14px}

/* A flag emoji is wider than it is tall, so it is drawn larger than its
   round frame and the frame crops it to a coin. */
.flag{width:32px;height:32px;border-radius:50%;overflow:hidden;display:grid;place-items:center;font-size:40px;line-height:1;background:var(--side);box-shadow:inset 0 0 0 1px rgba(15,15,15,.06);user-select:none;-webkit-user-select:none}
.who{display:flex;flex-direction:column;min-width:0}
.who b{font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.who small{font-size:12.5px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.35}
.val{display:flex;flex-direction:column;align-items:flex-end;min-width:0}
.amt{width:196px;max-width:100%;border:0;outline:0;background:transparent;text-align:right;font-size:20px;font-weight:600;letter-spacing:-.025em;font-variant-numeric:tabular-nums;padding:3px 8px;margin-right:-8px;border-radius:8px;line-height:1.3;-webkit-appearance:none;appearance:none}
.amt:hover{background:var(--hover)}
.amt:focus{background:#fff;box-shadow:0 0 0 1px var(--blue),0 0 0 4px rgba(11,116,222,.14)}
.amt::placeholder{color:#d3d2ce}
.amt.long{font-size:16px}
.amt.longer{font-size:13px}
.amt.bad{color:var(--bad)}
.rate{font-size:12px;color:var(--ink3);white-space:nowrap;font-variant-numeric:tabular-nums;min-height:16px;line-height:1.35}

/* A row in the full list has a fourth column, its pin. A pinned row has
   three, or its amounts stop one gap short of the right edge everything
   else lines up on. The pin's icon sits on that edge too. */
#all .row{grid-template-columns:32px minmax(0,1fr) auto auto}
.pin,.tools button:last-child{margin-right:-8px}
.pin,.tools button{width:34px;height:34px;border:0;border-radius:8px;background:none;color:#c2c1bd;display:grid;place-items:center;padding:0}
.pin:hover,.tools button:hover{background:var(--hover);color:var(--ink)}
.pin[aria-pressed=true]{color:var(--ink)}
.pin[aria-pressed=true] .ic path{fill:currentColor}
.tools{display:none;gap:2px;justify-self:end}
.tools button{color:var(--ink2)}
.tools .rm:hover{color:#b3261e;background:#fdf5f3}
.editing .tools{display:flex}
.editing .val{display:none}
.editing .row:first-child [data-act=up],.editing .row:last-child [data-act=down]{visibility:hidden}

.search{display:flex;align-items:center;gap:9px;margin:3px var(--in) 10px;padding:0 12px;border-radius:9px;background:var(--side);box-shadow:0 0 0 1px var(--line);color:var(--ink3);cursor:text}
.search input{flex:1;min-width:0;border:0;outline:0;background:transparent;padding:10px 0;font-size:15px;color:var(--ink);-webkit-appearance:none;appearance:none}
.search input::-webkit-search-cancel-button{-webkit-appearance:none}
.search:focus-within{background:#fff;box-shadow:0 0 0 1px var(--blue),0 0 0 4px rgba(11,116,222,.14)}
.empty{margin:0;padding:18px var(--in) 22px;color:var(--ink2);font-size:14px;text-align:center}

.foot{color:var(--ink3);font-size:12.5px;line-height:1.55;padding:2px var(--in) 0}
.foot p{margin:0 0 10px}
.foot a{display:inline-flex;align-items:center;gap:6px;color:var(--ink);font-weight:600;text-decoration:none}
.foot a .ic{width:15px;height:15px}

.toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));transform:translate(-50%,14px);background:var(--ink);color:#fff;padding:9px 14px;border-radius:10px;font-size:13.5px;font-weight:500;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;white-space:nowrap;z-index:5}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- the rupee on top ---------- */
.hero{padding:16px var(--in) var(--in);--big:50px}
.amt.big.long{font-size:calc(var(--big) * .78)}
.amt.big.longer{font-size:calc(var(--big) * .6)}
.hhead{display:flex;align-items:center;gap:var(--gap);min-width:0}
.hhead b{font-size:15px;font-weight:600}
.hhead small{margin-left:-4px;font-size:12.5px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.hero .rate{display:block;margin-top:0;font-size:13px}
.hval{display:flex;align-items:baseline;gap:6px;margin-top:8px;cursor:text}
.sym{font-size:34px;font-weight:600;color:var(--ink3);letter-spacing:-.02em;flex:none}
.amt.big{width:100%;min-width:0;text-align:left;font-size:var(--big);font-weight:700;letter-spacing:-.045em;line-height:1.1;padding:0 6px;margin:0 0 0 -6px}
.hero.is-base{background:var(--side)}

/* ---------- the rupee's chart ----------
   A price line like Arsha's trading screen example: no axes, a dotted line
   where the range began, red when the rate fell over the range and green
   when it rose (the Audit's own red and green), and a dot with the rate and
   time under the finger. The currencies and the ranges are each one grey
   bar of equal buttons, the chosen one in ink, so they always fit the card
   (a row of loose pills ran off a phone's edge). The finger's label has a
   strip of its own above the line, so it never sits on the figures. */
.chart{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);--cl:var(--ok)}
.chart.down{--cl:var(--bad)}
.cseg{display:flex;gap:2px;padding:3px;border-radius:10px;background:var(--side);box-shadow:inset 0 0 0 1px var(--line);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cseg::-webkit-scrollbar{display:none}
.cseg button{flex:1 0 auto;min-width:40px;height:28px;border:0;border-radius:7px;background:transparent;color:var(--ink2);font-size:12.5px;font-weight:600;padding:0 6px;letter-spacing:0}
.cseg button:hover{color:var(--ink);background:var(--hover)}
.cseg button[aria-pressed=true]{background:var(--ink);color:#fff}
.chead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;column-gap:12px;row-gap:4px;margin-top:14px}
.cnow{display:flex;flex-direction:column;min-width:0}
.cnow small{font-size:12px;line-height:16px;color:var(--ink3);white-space:nowrap}
.cnow b{font-size:22px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:28px}
.cside{display:flex;flex-direction:column;align-items:flex-end;text-align:right;min-width:0;margin-left:auto}
.cchg{font-size:13px;line-height:18px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.cchg.up{color:#2f7d46}
.cchg.down{color:#c4462f}
.chilo{font-size:11.5px;line-height:16px;color:var(--ink3);font-variant-numeric:tabular-nums;white-space:nowrap}
.cplot{position:relative;margin:4px 0 12px;touch-action:pan-y;cursor:crosshair;user-select:none;-webkit-user-select:none}
.ctipbar{position:relative;height:20px}
.ctip{position:absolute;bottom:3px;transform:translateX(-50%);white-space:nowrap;font-size:12px;color:var(--ink2);font-variant-numeric:tabular-nums;pointer-events:none}
.cgraph{position:relative;height:150px}
.cgraph svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cline{fill:none;stroke:var(--cl);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.cref{stroke:#d3d2ce;stroke-width:1;stroke-dasharray:4 4}
.cx{position:absolute;top:-20px;bottom:0;width:1px;background:rgba(55,53,47,.18);transform:translateX(-.5px);pointer-events:none}
.cdot{position:absolute;width:11px;height:11px;border-radius:50%;background:var(--cl);box-shadow:0 0 0 3px #fff,0 0 0 4px rgba(55,53,47,.12);transform:translate(-50%,-50%);pointer-events:none}
.cmsg{position:absolute;inset:0;display:grid;place-items:center;margin:0;font-size:13px;color:var(--ink3)}

/* ---------- phone ---------- */
@media (max-width:560px){
  .wrap{--in:14px;--gap:10px;padding:max(18px,env(safe-area-inset-top)) 16px calc(40px + env(safe-area-inset-bottom))}
  .top{gap:10px;margin-bottom:16px}
  .mark{width:38px;height:38px;border-radius:10px}
  h1{font-size:20px}
  .status{font-size:12.5px;margin-top:2px}
  .acts{gap:6px}
  .btn span{display:none}
  .btn.quiet{padding:0;width:36px;height:36px;min-width:36px}
  .row{padding:8px var(--in);min-height:60px}
  .amt{width:150px;font-size:19px}
  .sym{font-size:28px}
  .hero{--big:40px;padding-top:14px}
  .cgraph{height:130px}
  .cnow b{font-size:20px}
  .card{border-radius:12px}
}

/* A narrow phone, or the Mac's side pane: the title steps down so it never
   runs under the buttons, and the amounts give the names a little room. */
@media (max-width:400px){
  h1{font-size:19px}
  .amt{width:128px;font-size:17px}
  .hero{--big:36px}
}

/* The smallest phones (320 to 340 wide): one more step down, so the title
   stays whole and all seven currencies fit the bar without scrolling. */
@media (max-width:340px){
  .top{gap:8px}
  .mark{width:34px;height:34px;border-radius:9px}
  .acts{gap:4px}
  .btn.quiet{width:32px;height:32px;min-width:32px}
  h1{font-size:17px}
  .status{font-size:12px}
  .cseg button{min-width:33px;font-size:12px;padding:0 3px}
  .amt{width:116px}
}

/* ---------- the extension popup ---------- */
body.popup{width:380px}
.popup .wrap{--in:12px;--gap:10px;padding:14px 12px 14px}
.popup .top{gap:10px;margin-bottom:12px}
.popup .mark{width:32px;height:32px;border-radius:9px}
.popup h1{font-size:17px;letter-spacing:-.02em}
.popup .status{font-size:12px;margin-top:1px}
.popup .btn span{display:none}
.popup .btn.quiet{padding:0;width:32px;height:32px;min-width:32px}
.popup .card{border-radius:12px;margin-bottom:12px}
.popup .sechead{padding:10px var(--in) 5px}
.popup .row{padding:6px var(--in);min-height:52px}
.popup .flag{width:28px;height:28px;font-size:35px}
.popup .who b{font-size:14px}
.popup .who small{font-size:12px}
/* .row in front, or this beats the big rupee figure's own size (same weight, later). */
.popup .row .amt{width:150px;font-size:18px}
.popup .row .amt.long{font-size:15px}
.popup .row .amt.longer{font-size:12.5px}
.popup .hero{padding:12px var(--in) var(--in)}
.popup .sym{font-size:26px}
.popup .hero{--big:36px}
.popup .hero .rate{font-size:12px}
.popup .cgraph{height:110px}
.popup .cnow b{font-size:18px}
.popup .chead{margin-top:8px}
.popup .rate{font-size:11.5px}
.popup .search{margin:3px var(--in) 8px}
.popup .search input{padding:8px 0;font-size:14px}
.popup .foot{font-size:12px}

/* ---------- the small chart (23 Oct 2026) ----------
   Arsha: the full-width chart took most of the screen; a small piece next
   to the rupee is enough. The rupee card is two columns: the figure on the
   left, a little card on the right with two small pickers (currency, range),
   a short line, and today's figure with its change. These rules come last
   and win over the full-size chart's. */
.hero{display:grid;grid-template-columns:minmax(0,1fr) 168px;column-gap:16px;align-items:center}
.hleft{min-width:0}
.chart.mini{margin:0;padding:10px;border:0;border-radius:12px;background:var(--side);box-shadow:inset 0 0 0 1px var(--line);min-width:0}
.mtop{display:flex;gap:6px}
.mtop select{flex:1;min-width:0;height:26px;border:0;border-radius:7px;background:#fff;box-shadow:0 0 0 1px var(--line2);font:600 12px Inter,-apple-system,system-ui,sans-serif;color:var(--ink);padding:0 6px;text-align:center;text-align-last:center;-webkit-appearance:none;appearance:none;cursor:pointer}
.chart.mini .cplot{margin:8px 0 4px}
.chart.mini .cgraph{height:44px}
.chart.mini .cline{stroke-width:1.8}
.chart.mini .cdot{width:8px;height:8px;box-shadow:0 0 0 2px #fff}
.chart.mini .cx{top:0}
.chart.mini .cmsg{font-size:11px}
.mfoot,.chart.mini .ctip{position:static;transform:none;display:flex;justify-content:space-between;align-items:baseline;gap:6px;font-size:12px;line-height:16px;white-space:nowrap}
.mfoot b{font-weight:700;font-variant-numeric:tabular-nums}
.mfoot .cchg{font-size:12px;line-height:16px}
.chart.mini .ctip{color:var(--ink2);overflow:hidden;text-overflow:ellipsis;display:block}
@media (max-width:560px){ .hero{grid-template-columns:minmax(0,1fr) 128px;column-gap:10px} .chart.mini{padding:8px} .chart.mini .cgraph{height:38px} }
@media (max-width:360px){ .hero{grid-template-columns:minmax(0,1fr) 112px} .mfoot b{font-size:11px} }
.popup .hero{grid-template-columns:minmax(0,1fr) 124px;column-gap:10px}
.popup .chart.mini{padding:8px}
.popup .chart.mini .cgraph{height:36px}

/* Phones: no chart at all (Arsha, 28 Oct 2026: the small card overlapped the
   big rupee figure). The rupee card goes back to one column. The Mac and the
   extension popup keep the small chart. */
@media (max-width:560px){
  body:not(.popup) .hero{display:block}
  body:not(.popup) .chart.mini{display:none}
}