/*! it-calc-export-v1.css
   The styling for the calculator export bar, alongside the script it belongs to. */
/* it-export v1 styling.
   Namespaced --xc-* throughout so nothing here can reach a site token, and every
   selector is prefixed .xc- so it cannot reach a calculator's own markup. */
#xcBar,#xcSheet{
  --xc-paper:#F6F3EC; --xc-card:#FFFDF9; --xc-ink:#1A1713; --xc-ink-2:#4A443C;
  --xc-ink-3:#6E675D; --xc-line:#DED8CC; --xc-line-soft:#E9E4D9; --xc-accent:#F26207; --xc-accent-ink:#A34A05;
  --xc-accent-soft:#FFF3E4; --xc-accent-line:rgba(242,98,7,.55);
  --xc-sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Inter",Roboto,"Helvetica Neue",Arial,sans-serif;
  --xc-serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
}

/* ---------- the bar under the calculator ----------
   Built on the site's own palette rather than a new one: #111 for the primary,
   the warm paper tint the pages already use, and --accent #F26207, which the
   stylesheet has always declared but never spent. It is spent here only where
   it means something: the rule beside the heading, the icon on the button you
   are pointing at, and the focus ring. An accent used on everything stops being
   an accent.

   The frosted look is real depth rather than a flat tint: each button is a
   translucent pane over a soft warm wash, blurred and slightly saturated, with
   a light catch along its top edge and a shadow beneath it. Where a browser has
   no backdrop-filter the panes fall back to solid, which is the same design
   with less glass rather than a broken one. */
.xc-bar{
  position:relative;
  font-family:var(--xc-sans);
  border-radius:20px;
  padding:20px;
  margin:18px 0 0;
  color:var(--xc-ink);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(242,98,7,.055) 0%, rgba(242,98,7,0) 46%),
    linear-gradient(180deg, #FFFDFA 0%, #F7F3EB 100%);
  border:1px solid var(--xc-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 10px 30px -20px rgba(26,23,19,.4);
}

/* Inside a results panel the bar is already in a card, so it drops the frame
   and keeps only the wash, otherwise it is a box drawn inside a box. */
.xc-bar.xc-inset{
  border:0;
  border-radius:0;
  padding:16px 0 2px;
  margin:16px 0 0;
  box-shadow:none;
  background:none;
}
.xc-bar.xc-inset::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:1px;
  background:linear-gradient(90deg, var(--xc-accent-line), var(--xc-line-soft) 38%, transparent);
}

/* the heading, with a short accent rule that ties it to the site */
.xc-bar-h{
  display:flex;
  align-items:center;
  gap:9px;
  margin:0 0 13px;
  font-size:11.5px;
  font-weight:750;
  letter-spacing:.085em;
  text-transform:uppercase;
  color:var(--xc-ink-3);
}
.xc-bar-h::before{
  content:"";
  width:16px;
  height:2px;
  border-radius:2px;
  flex:none;
  background:linear-gradient(90deg, var(--xc-accent), rgba(242,98,7,.25));
}

/* the primary: the site's own near-black, lifted rather than flat */
.xc-pri{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  min-height:54px;
  padding:0 20px;
  border:0;
  border-radius:15px;
  background:linear-gradient(180deg, #26221D 0%, #141210 100%);
  color:#FFFDF9;
  font-family:inherit;
  font-size:14.5px;
  font-weight:700;
  letter-spacing:.005em;
  cursor:pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.35),
    0 10px 22px -14px rgba(20,18,16,.85);
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.xc-pri:hover{
  filter:brightness(1.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    0 14px 26px -14px rgba(20,18,16,.9);
}
.xc-pri:active{transform:translateY(1px)}
.xc-pri .xc-i{opacity:.92}

/* the secondary row: frosted panes */
.xc-acts{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 0}
.xc-acts button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex:1 1 auto;
  min-width:124px;
  min-height:46px;
  padding:0 15px;
  border-radius:13px;
  border:1px solid rgba(255,255,255,.75);
  background:linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,253,249,.5) 100%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  backdrop-filter:blur(14px) saturate(150%);
  font-family:inherit;
  font-size:13.5px;
  font-weight:650;
  color:var(--xc-ink-2);
  cursor:pointer;
  white-space:nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 2px rgba(26,23,19,.05),
    0 10px 20px -16px rgba(26,23,19,.45);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease,
             background .15s ease, color .15s ease;
}
.xc-acts button:hover{
  color:var(--xc-ink);
  border-color:rgba(242,98,7,.42);
  background:linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,247,238,.7) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 2px 4px rgba(26,23,19,.06),
    0 14px 24px -16px rgba(163,74,5,.5);
  transform:translateY(-1px);
}
.xc-acts button:active{transform:translateY(0)}
.xc-acts button:hover .xc-i{color:var(--xc-accent)}
/* Reset is the one that undoes work, so it sits back rather than competing */
.xc-acts button.xc-quiet{color:var(--xc-ink-3);font-weight:600}
.xc-acts button.xc-quiet:hover{color:var(--xc-ink-2)}

/* No backdrop-filter, no problem: the same design, opaque. */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .xc-acts button{background:var(--xc-paper);border-color:var(--xc-line)}
  .xc-acts button:hover{background:#FFF7EE}
}

.xc-i{width:16px;height:16px;flex:none;opacity:.75;transition:color .15s ease, opacity .15s ease}
.xc-acts button:hover .xc-i{opacity:1}
/* The page's own Export button arrives with an id-based rule painting it black
   and spanning it across a grid it is no longer in. Two black buttons in one
   bar is one too many, so it is brought down to match its new neighbours. The
   id beats a class, so the id is what is written here rather than !important. */
.xc-bar .xc-acts button#exportBtn{
  grid-column:auto;
  gap:8px;
  border:1px solid rgba(255,255,255,.75);
  background:linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,253,249,.5) 100%);
  color:var(--xc-ink-2);
  font-size:13.5px;
  font-weight:650;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 2px rgba(26,23,19,.05),
    0 10px 20px -16px rgba(26,23,19,.45);
}
.xc-bar .xc-acts button#exportBtn:hover{
  color:var(--xc-ink);
  border-color:rgba(242,98,7,.42);
  background:linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,247,238,.7) 100%);
}
.xc-bar .xc-acts button#exportBtn svg{opacity:.75}
.xc-bar .xc-acts button#exportBtn:hover svg{opacity:1;color:var(--xc-accent)}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .xc-bar .xc-acts button#exportBtn{background:var(--xc-paper);border-color:var(--xc-line)}
}
.xc-acts button svg{width:16px;height:16px;flex:none}

.xc-bar :focus-visible{outline:2px solid var(--xc-accent);outline-offset:2px;border-radius:13px}
.xc-note{margin:13px 0 0;font-size:12px;line-height:1.6;color:var(--xc-ink-3)}

/* In a panel the bar can be under 300px wide, where a label like "Print or save
   PDF" is wider than half of it. Two per row with the label allowed to wrap
   reads better than a column of six, and keeps the touch target. */
.xc-bar.xc-inset .xc-acts button{flex:1 1 calc(50% - 5px);min-width:0;padding:8px 11px;
  white-space:normal;line-height:1.25;font-size:13px}

/* iPhone: two per row rather than one long column of full-width buttons */
@media (max-width:560px){
  .xc-bar{padding:16px;border-radius:16px}
  .xc-acts button{flex:1 1 calc(50% - 5px);min-width:0;padding:0 11px;font-size:13px}
  .xc-pri{white-space:normal;padding:12px 16px;min-height:54px}
}
@media (max-width:360px){
  .xc-acts button{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  .xc-pri,.xc-acts button,.xc-i{transition:none}
  .xc-acts button:hover{transform:none}
}

/* ---------- the sheet that gets exported ----------
   Held off screen: it is a document to print, copy and download, not a second
   copy of the answer for the page to show. */
#xcSheet{position:absolute;left:-10000px;top:0;width:720px;pointer-events:none}
.xc-doc{font-family:var(--xc-sans);background:var(--xc-card);color:var(--xc-ink);
  border:1px solid var(--xc-line);border-radius:18px;padding:30px;width:100%;
  line-height:1.55;zoom:var(--xc-zoom,1);box-sizing:border-box}
.xc-doc *{box-sizing:border-box}
.xc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  padding:0 0 16px;border-bottom:1px solid var(--xc-line)}
.xc-head b{display:block;font-family:var(--xc-serif);font-size:21px;font-weight:600;
  letter-spacing:-.01em}
.xc-head span{display:block;font-size:11.5px;color:var(--xc-ink-3);margin-top:5px}
.xc-mark{font-size:10.5px;font-weight:750;letter-spacing:.12em;text-transform:uppercase;
  /* the printed sheet keeps the darker ink: #F26207 on cream is a 2.3:1 read,
     which is fine for a 2px rule and not fine for words */
  color:var(--xc-accent-ink);background:var(--xc-accent-soft);border:1px solid #F3DEC4;
  border-radius:999px;padding:6px 12px;white-space:nowrap}
.xc-answer{margin:18px 0 0}
.xc-answer span{display:block;font-size:10px;letter-spacing:.11em;font-weight:750;
  text-transform:uppercase;color:var(--xc-ink-3)}
.xc-answer b{display:block;font-size:34px;font-weight:750;letter-spacing:-.02em;margin-top:6px;
  font-variant-numeric:tabular-nums;line-height:1.1;word-break:break-word}
.xc-answer i{display:block;font-style:normal;font-size:13px;color:var(--xc-ink-3);margin-top:6px}
.xc-rows{margin:18px 0 0;display:grid;gap:1px;background:var(--xc-line-soft);
  border:1px solid var(--xc-line-soft);border-radius:12px;overflow:hidden}
.xc-rows>div{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  background:var(--xc-card);padding:9px 13px;font-size:13px}
.xc-rows>div span{color:var(--xc-ink-3)}
.xc-rows>div b{font-weight:700;font-variant-numeric:tabular-nums;text-align:right;
  white-space:nowrap}
.xc-rows.tight>div{padding:7px 13px;font-size:12px}
.xc-in{margin:18px 0 0}
.xc-in p{margin:0;font-size:10px;letter-spacing:.11em;font-weight:750;text-transform:uppercase;
  color:var(--xc-ink-3)}
.xc-in .xc-rows{margin-top:8px}
.xc-link{margin:16px 0 0;font-size:10px;color:var(--xc-ink-3);word-break:break-all;
  line-height:1.5;padding:9px 11px;background:var(--xc-paper);border:1px solid var(--xc-line-soft);
  border-radius:10px}
.xc-by{margin:14px 0 0;text-align:center;font-size:9.5px;letter-spacing:.06em;color:#A79F92}

/* ---------- print ----------
   The sheet is a direct child of body, so hiding every other direct child
   leaves exactly the sheet and nothing else. */
@media print{
  body > *:not(#xcSheet){display:none!important}
  #xcSheet{position:static!important;left:auto!important;top:auto!important;
    width:100%!important;display:block!important;pointer-events:auto}
  .xc-doc{border:0;border-radius:0;padding:0;box-shadow:none;
    break-inside:avoid;page-break-inside:avoid}
  .xc-head,.xc-answer,.xc-rows>div,.xc-in{break-inside:avoid;page-break-inside:avoid}
  .xc-head b{font-size:18px}
  .xc-answer b{font-size:30px}
  .xc-rows>div{font-size:11.5px;padding:7px 11px}
  .xc-rows.tight>div{font-size:10.5px;padding:5px 11px}
  .xc-link{font-size:9px}
  @page{size:portrait;margin:14mm}
  html,body{height:auto;background:#fff}
}