/* Draft of site/assets/style.css -- the artboards are built from this file,
   so what the canvas shows is what the site will get. No escapes, no imports,
   no web fonts, no script. */

:root{
  --ink:#12171c;
  --ink-2:#49535e;
  --ink-3:#626c79;      /* 5.35:1 on white, 4.98:1 on --bg-2 */
  --line:#e3e7eb;
  --line-2:#c7ced6;
  --bg:#ffffff;
  --bg-2:#f5f7f9;
  --bg-3:#e9eef2;
  --acc:#0a5738;
  --acc-bg:#e7f2ec;
  --acc-line:#bcd7c9;
  --up:#8a2d1b;
  --down:#0a5738;
  --radius:6px;
  --wrap:52rem;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
       "Helvetica Neue",Arial,sans-serif;
  font-variant-numeric:tabular-nums;
}
a{color:var(--acc)}
a:focus-visible,summary:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
h1{font-size:1.42rem;line-height:1.2;letter-spacing:-.015em;margin:0 0 .3rem;
   text-wrap:pretty}
h2{font-size:1.06rem;line-height:1.28;margin:0 0 .5rem}
h3{font-size:.94rem;line-height:1.3;margin:1.1rem 0 .4rem;color:var(--ink-2)}
p{margin:0 0 .7em}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- chrome ---- */
.site-head{border-bottom:1px solid var(--line);background:var(--bg-2)}
.brand{display:block;max-width:var(--wrap);margin:0 auto;padding:.6rem 1rem .15rem;
  font-weight:700;font-size:1.02rem;letter-spacing:-.012em;text-decoration:none;
  color:var(--ink)}
.brand .hi{color:var(--acc)}
.site-nav{max-width:var(--wrap);margin:0 auto;padding:0 1rem .55rem;
  display:flex;flex-wrap:wrap;gap:.08rem .85rem;font-size:.84rem}
.site-nav a{color:var(--ink-2);text-decoration:none}
.site-nav a:hover{text-decoration:underline}

main{max-width:var(--wrap);margin:0 auto;padding:.75rem 1rem 2rem}

.crumbs{font-size:.78rem;color:var(--ink-3);margin:0 0 .45rem}
.crumbs a{color:var(--ink-3)}
.crumbs .sep{opacity:.5;padding:0 .1rem}

/* One quiet line of dates. Nothing else stands between the heading and the
   number: the reader is at the pump. */
.dates{display:flex;flex-wrap:wrap;gap:.1rem .9rem;margin:0 0 .8rem;
  font-size:.8rem;color:var(--ink-2)}
.dates .lbl{color:var(--ink-3)}
.dates .d-since strong{color:var(--ink);font-weight:600}
.dates .d-upd{color:var(--ink-3)}

/* ---- hero: hierarchy by scale, not by boxes ---- */
/* The hero rules are --line-2, not --line. This is the one structural
   boundary above the fold, and the page is read outdoors: --line is 1.24:1
   against white, --line-2 is 1.59:1. Everything below the fold keeps --line --
   a line that has to work in glare is not the same line as a line inside a
   table the reader has already stopped to study. */
.hero{display:grid;grid-template-columns:1fr;margin:0 0 1.15rem;
  border-top:1px solid var(--line-2)}
.hero-n{padding:.7rem 0 .8rem;border-bottom:1px solid var(--line-2)}
.hero-lbl{display:block;font-size:.72rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink-3)}
.hero-v{display:block;font-size:2.45rem;font-weight:700;letter-spacing:-.03em;
  line-height:1.04;margin:.16rem 0 .14rem}
.hero-sub{display:block;font-size:.82rem;color:var(--ink-2);line-height:1.4}
/* the second number answers a second question -- it is not the answer */
.hero-n+.hero-n .hero-v{font-size:1.62rem;letter-spacing:-.02em}
@media(min-width:34rem){
  h1{font-size:1.6rem}
  .hero{grid-template-columns:1fr 1fr;column-gap:1.8rem}
  .hero-v{font-size:2.6rem}
  /* the gap stays at every width: the second number answers a second
     question. Closing it would also overflow the column on pages whose
     second number is a range -- "Rp 14.950-Rp 16.650" is 19 characters. */
  .hero-n+.hero-n .hero-v{font-size:1.9rem}
}

/* the last digit is present in the text, only dimmed */
.dim{opacity:.42}

/* ---- ad slot: height reserved so switching it on moves nothing ---- */
/* No fill: there is no ad yet, and an empty grey rectangle between two
   sections reads as something that failed to load. The height is the point
   and it stays, so switching ads on moves nothing. */
.ad-slot{min-height:90px;height:90px;margin:1.4rem 0}
@media(min-width:34rem){.ad-slot{height:100px;min-height:100px}}

/* ---- tables ----
   .tbl-wrap scrolls in its own box. Measured 14.09 at a 375 viewport: the
   shipped .rankv renders 430 px wide -- 55 px past the right edge -- on every
   region, island and fuel page, because its uppercase headers are nowrap. The
   page-overflow gate never saw it. The wrapper is the floor; the rules below
   are what stop it happening in the first place. */
.tbl-wrap{margin:0 0 .5rem;overflow-x:auto;-webkit-overflow-scrolling:touch}
table.prices,table.rankv{width:100%;border-collapse:collapse;font-size:.95rem}
.prices th,.prices td,.rankv th,.rankv td{text-align:left;padding:.5rem .5rem;
  border-bottom:1px solid var(--line);vertical-align:baseline}
.prices thead th,.rankv thead th{font-size:.72rem;text-transform:uppercase;
  letter-spacing:.05em;color:var(--ink-3);font-weight:600;
  border-bottom:1px solid var(--line-2)}
.prices .num,.rankv .num{text-align:right;white-space:nowrap}
/* A heading may wrap; a price may not. nowrap on both is what pushed .rankv
   past the right edge. Decided by specificity (0,2,1), not by position: the
   first attempt was `.rankv thead th` and lost the cascade to `.rankv .num`
   silently -- the rule was written, the table stayed 371 px wide. */
.prices thead th.num,.rankv thead th.num{white-space:normal}
.prices tbody th{font-weight:600}
.fuel{display:block}
.spec{display:block;font-size:.73rem;font-weight:400;color:var(--ink-3)}
.tag{display:inline-block;margin-top:.12rem;font-size:.68rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;color:var(--acc);
  background:var(--acc-bg);border:1px solid var(--acc-line);border-radius:3px;
  padding:.02rem .28rem}
.price{font-weight:700}
.delta{display:block}
.note{display:block;font-size:.73rem;color:var(--ink-3);font-weight:400}
.dash{color:var(--ink-3)}
tr.absent th,tr.absent td{opacity:.58}
.undertable{font-size:.8rem;color:var(--ink-2);margin-bottom:1.1rem}

/* Narrow screens restack the same rows -- no second copy in the DOM, no
   horizontal scrolling. Two lines per fuel instead of four: the name and the
   price share the first line, everything else is one muted second line. */
@media(max-width:33.99rem){
  .prices thead{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0)}
  .prices,.prices tbody{display:block;width:100%}
  /* An explicit grid, not a wrapping flex row: flex breaks lines by content
     size, so the price only reached the right edge when the name above it
     happened to be long enough. Rows 2-4 of the Aceh table packed the second
     cell onto line one and the screenshot showed it; the measurements did not.
       line 1  name / octane / tag        the price, right
       line 2  full tank                  difference from average */
  .prices tr{display:grid;grid-template-columns:1fr auto;
    column-gap:.7rem;row-gap:.05rem;align-items:baseline;
    padding:.5rem 0;border-bottom:1px solid var(--line)}
  .prices th,.prices td{display:block;border:0;padding:0}
  .prices tbody th{grid-column:1;grid-row:1;display:flex;flex-wrap:wrap;
    align-items:baseline;gap:0 .38rem}
  .prices tbody th .fuel,.prices tbody th .spec{display:inline}
  .prices tbody th .tag{margin-top:0}
  .prices td.num{text-align:right}
  .prices td.num:nth-of-type(1){grid-column:2;grid-row:1;font-size:1.05rem}
  .prices td.num:nth-of-type(2){grid-column:1;grid-row:2;text-align:left}
  .prices td.num:nth-of-type(3){grid-column:2;grid-row:2}
  .prices td.num:nth-of-type(n+2){font-size:.78rem;color:var(--ink-3);
    white-space:normal}
  /* The head row is hidden on narrow screens, so the label is the only thing
     naming the number. Kept even on line one: on a trip page that column is a
     fuel, and hiding it left a bare number. */
  .prices td.num::before{content:attr(data-label) " ";font-weight:400;
    font-size:.72rem;color:var(--ink-3)}
  .delta,.note{display:inline}
  .note{margin-left:.3rem}
  .prices td.num:nth-of-type(n+2) .price{font-weight:400}
  /* Five-column comparison: the name takes a line, the four numbers pair off
     two by two. Three lines, and it earns them -- it carries four numbers. */
  .prices.cmp tr{grid-template-columns:1fr 1fr}
  .prices.cmp tbody th{grid-column:1/-1;grid-row:1}
  .prices.cmp td.num{grid-column:auto;grid-row:auto;text-align:left;
    font-size:.85rem;color:var(--ink)}
  .prices.cmp td.num:nth-of-type(1),.prices.cmp td.num:nth-of-type(2){
    font-size:1rem;font-weight:700}
  /* `table.rankv`, not `.rankv`: the base rule above is `table.prices,
     table.rankv` at 0,1,1 and a bare class at 0,1,0 loses to it -- the
     rule was written, and the table went on rendering at 15.2px. Second
     time in this file; the first is commented at the thead rule. */
  table.rankv{font-size:.88rem}
  .rankv th,.rankv td{padding:.4rem .28rem}
  .rankv thead th{font-size:.68rem;letter-spacing:.03em}
  /* A range may break at its dash. Each amount is already held together by the
       in "Rp 22.150", so nowrap here was a second guarantee that
     cost 51 px of column width and nothing else. */
  .rankv td.num{white-space:normal}
}

/* ---- blocks: an anchor above each heading instead of a rule across the page.
   Twelve full-width borders made a long page read like a spreadsheet. ---- */
.block{margin:1.9rem 0 0;padding:0}
.block>h2::before{content:"";display:block;width:1.65rem;height:3px;
  background:var(--acc);border-radius:2px;margin:0 0 .5rem}
.calc{font-size:.85rem;color:var(--ink-2);background:var(--bg-2);
  border-radius:var(--radius);padding:.5rem .65rem}
.fineprint{font-size:.79rem;color:var(--ink-3)}

.pair{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin-bottom:.7rem}
.pair .lbl{display:block;font-size:.76rem;color:var(--ink-3)}
.pair .big{display:block;font-size:1.5rem;font-weight:700;letter-spacing:-.02em;
  line-height:1.1}
.verdict{font-size:.96rem}
.verdict.up strong{color:var(--up)}
.verdict.down strong{color:var(--down)}
.whypair{font-size:.84rem;color:var(--ink-3);margin:0 0 .9rem}

/* ---- the block that answers "does this apply to my town" ---- */
.cities{background:var(--bg-2);border-radius:var(--radius);padding:.85rem .9rem 1rem}
.cities>h2::before{margin-top:.1rem}
.cities p:last-child{margin-bottom:0}

/* ---- rank ---- */
.rank strong{white-space:nowrap}

/* ---- counter: one sentence saying how much is behind the page ---- */
.counter{margin:0 0 .6rem;font-size:.85rem;color:var(--ink-2)}
.counter strong{color:var(--ink);font-weight:700}

.neighbours,.linklist{list-style:none;margin:0;padding:0}
.neighbours li{display:flex;flex-wrap:wrap;gap:.15rem .6rem;align-items:baseline;
  padding:.45rem 0;border-bottom:1px solid var(--line)}
.neighbours .np{font-weight:700;margin-left:auto}
.neighbours .nr{flex-basis:100%;font-size:.78rem;color:var(--ink-3)}
.linklist li{padding:.38rem 0;border-bottom:1px solid var(--line)}
.uplinks{margin-top:.7rem;font-size:.88rem}

.qa{border-bottom:1px solid var(--line)}
.qa summary{cursor:pointer;padding:.6rem 0;font-weight:600;list-style:none;
  display:flex;gap:.55rem;align-items:baseline}
.qa summary::-webkit-details-marker{display:none}
.qa summary::before{content:"+";color:var(--acc);font-weight:700;width:.8em;
  flex:0 0 auto}
.qa[open] summary::before{content:"−"}
.qa-a{padding:0 0 .6rem 1.35em;color:var(--ink-2);font-size:.94rem}

/* ---- lists of regions on hub pages ---- */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;margin:0;padding:0;
  list-style:none}
@media(min-width:46rem){.grid{grid-template-columns:1fr 1fr 1fr}}
.grid li{border:1px solid var(--line);border-radius:var(--radius);
  padding:.45rem .55rem}
.grid a{display:block;text-decoration:none;font-weight:600;color:var(--ink);
  font-size:.92rem}
.grid a:hover{text-decoration:underline}
.grid .gp{display:block;font-size:.86rem;color:var(--ink-2);font-weight:400}

/* ---- footer ---- */
.site-foot{border-top:1px solid var(--line);background:var(--bg-2);
  margin-top:2.2rem;padding:1.1rem 1rem 1.6rem}
.site-foot>*{max-width:var(--wrap);margin-left:auto;margin-right:auto}
.src{font-size:.86rem;color:var(--ink-2)}
.foot-nav{display:flex;flex-wrap:wrap;gap:.3rem 1rem;font-size:.84rem;
  padding:.35rem 0 .5rem}
.disclaimer{font-size:.77rem;color:var(--ink-3);margin:0}

/* Stale-data banner. Above the numbers on every page: showing a month-old
   price without saying so is what sank three of the sites in the survey. */
.stale{margin:0 0 1rem;padding:.6rem .75rem;border:1px solid #c9a227;
  border-left-width:4px;border-radius:var(--radius);background:#fdf8e7;
  font-size:.89rem;color:#4a3c10}

/* ---- price map: tile cartogram, server-rendered SVG, no script ---- */
.map-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:var(--radius);padding:.25rem;
  background:var(--bg-2)}
.map-wrap svg{display:block;width:100%;min-width:620px;height:auto}
.map-wrap a{cursor:pointer}
.map-wrap a:hover rect{stroke:var(--ink);stroke-width:2}
.map-wrap a:focus-visible rect{stroke:var(--ink);stroke-width:3}
/* the legend is a scale, not five loose chips */
.map-legend{list-style:none;margin:.65rem 0 .45rem;padding:0;display:flex;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.map-legend li{flex:1 1 0;min-width:0;text-align:center;
  border-left:1px solid var(--line)}
.map-legend li:first-child{border-left:0}
.map-legend .sw{display:block;width:auto;height:9px;border:0;border-radius:0}
.map-legend .lg{display:block;font-size:.72rem;font-weight:600;
  padding:.25rem .1rem 0}
.map-legend .lc{display:block;font-size:.66rem;color:var(--ink-3);
  padding:0 .1rem .28rem}
.map .fineprint{margin-top:.1rem}

/* ---- the return hook: when this price is expected to move.
   It sits below the answer, not in front of it. ---- */
.nextchange{background:var(--acc-bg);border:1px solid var(--acc-line);
  border-radius:var(--radius);padding:.6rem .75rem;margin:0 0 1.2rem;
  font-size:.88rem;color:#173f2f}
.nextchange a{font-weight:600}

/* ---- share ---- */
.btn-wa{display:inline-block;background:var(--acc);color:#fff;
  text-decoration:none;font-weight:600;padding:.6rem 1rem;
  border-radius:var(--radius);font-size:.95rem;min-height:44px;line-height:1.6}
.btn-wa:hover{background:#08462d}
.share code{font-size:.8rem;background:var(--bg-2);padding:.1rem .3rem;
  border-radius:3px;word-break:break-all}

/* spec tables on model pages: label column, value column */
.specs th{font-weight:600;width:48%;color:var(--ink-2)}
.specs td{text-align:left}

/* ---- print: the table is what people put on a wall ---- */
@media print{
  .site-head,.site-nav,.foot-nav,.ad-slot,.share,.map-wrap,.crumbs,
  .nextchange,.links,.neighbours{display:none!important}
  body{font-size:11pt;color:#000;background:#fff}
  main{max-width:none;padding:0}
  .block{break-inside:avoid;border-top:1px solid #999;padding-top:.6rem}
  .block>h2::before{display:none}
  .qa[open] .qa-a,.qa .qa-a{display:block!important}
  .qa summary::before{content:""}
  a{color:#000;text-decoration:none}
  .prices th,.prices td{border-bottom:1px solid #ccc}
  .dim{opacity:1}
  .cities{background:none;padding:0}
}