/* Textile calculators.
   Each page's styles are scoped to .tx--<key> so their bare element rules
   (body, h1, label, input) cannot reach the rest of the site, and their
   palettes are repointed at site tokens so they follow the site theme. */

/* rag-quilt */
.tx--quilt{
  --bg: var(--color-bg);
  --card: var(--color-surface);
  --ink: var(--color-text);
  --muted: var(--color-text-muted);
  --accent: var(--color-accent);
  --line: var(--color-border);
  --border: var(--color-border);
  --good: var(--color-green);
  --warn: var(--color-wheat);
  --field-bg: var(--color-surface);
  --field-border: var(--color-border);
  --field-border-focus: var(--color-accent);
  --warn-bg: var(--color-wheat-soft);
  --warn-border: var(--color-wheat);
}
.tx--quilt .wrap{max-width:1100px;margin-inline:auto;padding:20px}
.tx--quilt h1{font-size:clamp(26px,3.2vw,36px);margin:0 0 6px}
.tx--quilt h2{font-size:clamp(18px,2.2vw,24px);margin:20px 0 10px}
.tx--quilt p.small{color:var(--muted);margin-top:0}
.tx--quilt .grid{display:grid;gap:16px}
@media (min-width:900px){
  .tx--quilt .grid{grid-template-columns:1.05fr 1fr}
}
.tx--quilt .card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.tx--quilt .two{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:700px){
  .tx--quilt .two{grid-template-columns:1fr 1fr}
}
.tx--quilt label{display:block;font-weight:600;font-size:14px;margin:2px 0 6px}
.tx--quilt input[type="number"], .tx--quilt input[type="text"], .tx--quilt select{-webkit-appearance:none;appearance:none;box-sizing:border-box;
      width:100%;
      padding:12px 14px; 
      border-radius:12px;
      border:1px solid var(--field-border);
      background:var(--field-bg);color:var(--ink);
      outline:none;line-height:1.2;}
.tx--quilt input[type="number"], .tx--quilt select{font-size:16px}
.tx--quilt input:focus, .tx--quilt select:focus{border-color:var(--field-border-focus);box-shadow:0 0 0 3px color-mix(in srgb, var(--field-border-focus) 20%, transparent)}
.tx--quilt input[type="checkbox"]{transform:scale(1.15)}
.tx--quilt table{width:100%;border-collapse:separate;border-spacing:0;background:var(--field-bg);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.tx--quilt th, .tx--quilt td{padding:12px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.tx--quilt th{background:color-mix(in srgb, var(--card) 80%, var(--line) 20%)}
.tx--quilt tfoot td{font-weight:700}
.tx--quilt .btns{display:flex;gap:10px;flex-wrap:wrap}
.tx--quilt button{appearance:none;border:1px solid var(--line);background:color-mix(in srgb, var(--card) 70%, var(--line) 30%);color:var(--ink);padding:10px 14px;border-radius:10px;cursor:pointer}
.tx--quilt button.primary{background:var(--accent);color:#041014;border-color:transparent;font-weight:700}
.tx--quilt .muted{color:var(--muted)}
.tx--quilt .good{color:var(--good)}
.tx--quilt .warn{color:var(--warn)}
.tx--quilt .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}
.tx--quilt .note{font-size:14px;color:var(--muted)}
.tx--quilt .kicker{font-weight:700;color:var(--accent)}
.tx--quilt .right{justify-self:end;text-align:right}
.tx--quilt .center{text-align:center}
.tx--quilt .sticky{position:sticky;top:10px}
.tx--quilt .pill{background:color-mix(in srgb, var(--card) 70%, var(--line) 30%);border:1px solid var(--line);padding:6px 10px;border-radius:999px;cursor:pointer}
.tx--quilt .preset-bar{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 2px}
.tx--quilt .sr{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
@media print{
  .tx--quilt .card{border:1px solid #ccc;background:#fff}
  .tx--quilt .sticky{position:static}
  .tx--quilt .btns, .tx--quilt .preset-bar, .tx--quilt .theme{display:none}
  .tx--quilt a[href]:after{content:""}
}

/* rag-quilt-price */
.tx--quiltprice{
  --bg: var(--color-bg);
  --card: var(--color-surface);
  --ink: var(--color-text);
  --muted: var(--color-text-muted);
  --accent: var(--color-accent);
  --line: var(--color-border);
  --border: var(--color-border);
  --good: var(--color-green);
  --warn: var(--color-wheat);
  --field-bg: var(--color-surface);
  --field-border: var(--color-border);
  --field-border-focus: var(--color-accent);
  --warn-bg: var(--color-wheat-soft);
  --warn-border: var(--color-wheat);
}
.tx--quiltprice .wrap{max-width:1100px;margin-inline:auto;padding:20px}
.tx--quiltprice h1{font-size:clamp(26px,3.2vw,36px);margin:0 0 6px}
.tx--quiltprice h2{font-size:clamp(18px,2.2vw,24px);margin:20px 0 10px}
.tx--quiltprice p.small{color:var(--muted);margin-top:0}
.tx--quiltprice .grid{display:grid;gap:16px}
@media (min-width:960px){
  .tx--quiltprice .grid{grid-template-columns:1.05fr 1fr}
}
.tx--quiltprice .card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.tx--quiltprice .two{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:700px){
  .tx--quiltprice .two{grid-template-columns:1fr 1fr}
}
.tx--quiltprice label{display:block;font-weight:600;font-size:14px;margin:2px 0 6px}
.tx--quiltprice input[type="number"], .tx--quiltprice input[type="text"], .tx--quiltprice select{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--field-border);background:var(--field-bg);color:var(--ink);outline:none}
.tx--quiltprice input:focus, .tx--quiltprice select:focus{border-color:var(--field-border-focus);box-shadow:0 0 0 3px color-mix(in srgb, var(--field-border-focus) 20%, transparent)}
.tx--quiltprice table{width:100%;border-collapse:separate;border-spacing:0;background:var(--field-bg);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.tx--quiltprice th, .tx--quiltprice td{padding:12px;border-bottom:1px solid var(--line);text-align:left}
.tx--quiltprice th{background:color-mix(in srgb, var(--card) 80%, var(--line) 20%)}
.tx--quiltprice tfoot td{font-weight:700}
.tx--quiltprice .btns{display:flex;gap:10px;flex-wrap:wrap}
.tx--quiltprice button{appearance:none;border:1px solid var(--line);background:color-mix(in srgb, var(--card) 70%, var(--line) 30%);color:var(--ink);padding:10px 14px;border-radius:10px;cursor:pointer}
.tx--quiltprice button.primary{background:var(--accent);color:#041014;border-color:transparent;font-weight:700}
.tx--quiltprice .right{text-align:right}
.tx--quiltprice .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}
.tx--quiltprice .note{color:var(--muted);font-size:14px}
.tx--quiltprice .sticky{position:sticky;top:10px}

/* coiled-rug */
.tx--rug{
  --bg: var(--color-bg);
  --card: var(--color-surface);
  --ink: var(--color-text);
  --muted: var(--color-text-muted);
  --accent: var(--color-accent);
  --line: var(--color-border);
  --border: var(--color-border);
  --good: var(--color-green);
  --warn: var(--color-wheat);
  --field-bg: var(--color-surface);
  --field-border: var(--color-border);
  --field-border-focus: var(--color-accent);
  --warn-bg: var(--color-wheat-soft);
  --warn-border: var(--color-wheat);
  --radius: 14px;
  --shadow: 0 1px 3px rgba(16,24,40,.06),0 1px 2px rgba(16,24,40,.04);
}
.tx--rug *{box-sizing:border-box}
.tx--rug .wrap{max-width:820px; margin:0 auto; padding:20px 16px 60px}
.tx--rug nav.site{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; align-items:center}
.tx--rug nav.site a{font-size:14px; text-decoration:none; color:var(--muted);
      padding:6px 10px; border:1px solid var(--border); border-radius:999px; background:var(--card);}
.tx--rug nav.site a.active{color:#fff; background:var(--accent); border-color:var(--accent)}
.tx--rug h1{font-size:26px; margin:6px 0 4px}
.tx--rug .sub{color:var(--muted); margin:0 0 16px}
.tx--rug .card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
      box-shadow:var(--shadow); padding:18px; margin:14px 0;}
.tx--rug .banner{background:var(--warn-bg); border:1px solid var(--warn-border); border-radius:12px; padding:12px 14px; font-size:14px; margin:0 0 14px}
.tx--rug label{display:block; font-weight:600; font-size:14px; margin:12px 0 6px}
.tx--rug .hint{font-weight:400; color:var(--muted); font-size:13px}
.tx--rug input, .tx--rug select{width:100%; padding:10px 12px; font-size:16px; color:var(--ink);
      background:var(--field-bg); border:1px solid var(--field-border); border-radius:10px;}
.tx--rug input:focus, .tx--rug select:focus{outline:2px solid var(--field-border-focus); outline-offset:1px; border-color:var(--field-border-focus)}
.tx--rug .row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:560px){
  .tx--rug .row{grid-template-columns:1fr}
}
.tx--rug .btns{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}
.tx--rug button{font-size:15px; font-weight:600; padding:11px 18px; border-radius:10px; cursor:pointer; border:1px solid var(--accent); background:var(--accent); color:#fff}
.tx--rug button.ghost{background:transparent; color:var(--accent)}
.tx--rug .results dt{color:var(--muted); font-size:13px}
.tx--rug .results dd{margin:0 0 12px; font-size:20px; font-weight:700}
.tx--rug .results .big{font-size:26px}
.tx--rug .grid2{display:grid; grid-template-columns:1fr 1fr; gap:8px 22px}
@media (max-width:560px){
  .tx--rug .grid2{grid-template-columns:1fr}
}
.tx--rug .foot{color:var(--muted); font-size:13px; margin-top:8px}
.tx--rug .themebtn{margin-left:auto; font-size:13px; padding:6px 10px; background:transparent; color:var(--muted); border:1px solid var(--border)}
@media print{
  .tx--rug nav.site, .tx--rug .btns, .tx--rug .themebtn, .tx--rug .banner{display:none}
  .tx--rug .card{box-shadow:none}
}

/* coiled-rug-price */
.tx--rugprice{
  --bg: var(--color-bg);
  --card: var(--color-surface);
  --ink: var(--color-text);
  --muted: var(--color-text-muted);
  --accent: var(--color-accent);
  --line: var(--color-border);
  --border: var(--color-border);
  --good: var(--color-green);
  --warn: var(--color-wheat);
  --field-bg: var(--color-surface);
  --field-border: var(--color-border);
  --field-border-focus: var(--color-accent);
  --warn-bg: var(--color-wheat-soft);
  --warn-border: var(--color-wheat);
  --radius: 14px;
  --shadow: 0 1px 3px rgba(16,24,40,.06),0 1px 2px rgba(16,24,40,.04);
}
.tx--rugprice *{box-sizing:border-box}
.tx--rugprice .wrap{max-width:820px; margin:0 auto; padding:20px 16px 60px}
.tx--rugprice nav.site{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; align-items:center}
.tx--rugprice nav.site a{font-size:14px; text-decoration:none; color:var(--muted); padding:6px 10px; border:1px solid var(--border); border-radius:999px; background:var(--card)}
.tx--rugprice nav.site a.active{color:#fff; background:var(--accent); border-color:var(--accent)}
.tx--rugprice h1{font-size:26px; margin:6px 0 4px}
.tx--rugprice h2{font-size:16px; margin:2px 0 10px}
.tx--rugprice .sub{color:var(--muted); margin:0 0 16px}
.tx--rugprice .card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px; margin:14px 0}
.tx--rugprice .banner{background:var(--warn-bg); border:1px solid var(--warn-border); border-radius:12px; padding:12px 14px; font-size:14px; margin:0 0 14px}
.tx--rugprice label{display:block; font-weight:600; font-size:14px; margin:12px 0 6px}
.tx--rugprice .hint{font-weight:400; color:var(--muted); font-size:13px}
.tx--rugprice input, .tx--rugprice select{width:100%; padding:9px 11px; font-size:16px; color:var(--ink); background:var(--field-bg); border:1px solid var(--field-border); border-radius:10px}
.tx--rugprice input:focus, .tx--rugprice select:focus{outline:2px solid var(--field-border-focus); outline-offset:1px; border-color:var(--field-border-focus)}
.tx--rugprice .row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:560px){
  .tx--rugprice .row{grid-template-columns:1fr}
}
.tx--rugprice table{width:100%; border-collapse:collapse; margin-top:6px}
.tx--rugprice th{font-size:12px; color:var(--muted); text-align:left; font-weight:600; padding:4px 6px}
.tx--rugprice td{padding:3px 6px; vertical-align:middle}
.tx--rugprice td input{padding:8px 9px; font-size:15px}
.tx--rugprice .col-item{width:34%}
.tx--rugprice .col-num{width:15%}
.tx--rugprice .col-tot{width:18%; text-align:right; font-weight:600; white-space:nowrap}
.tx--rugprice .rm{border:1px solid var(--field-border); background:transparent; color:var(--muted); border-radius:8px; padding:6px 9px; cursor:pointer; font-weight:700}
.tx--rugprice .quickbtns{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.tx--rugprice .chip{font-size:13px; padding:6px 10px; border-radius:999px; border:1px solid var(--accent); color:var(--accent); background:transparent; cursor:pointer}
.tx--rugprice .mtot{text-align:right; font-weight:700; margin-top:8px}
.tx--rugprice .btns{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}
.tx--rugprice button.primary{font-size:15px; font-weight:600; padding:11px 18px; border-radius:10px; cursor:pointer; border:1px solid var(--accent); background:var(--accent); color:#fff}
.tx--rugprice button.ghost{font-size:15px; font-weight:600; padding:11px 18px; border-radius:10px; cursor:pointer; border:1px solid var(--accent); background:transparent; color:var(--accent)}
.tx--rugprice .results{display:grid; grid-template-columns:1fr auto; gap:6px 18px}
.tx--rugprice .results .k{color:var(--muted)}
.tx--rugprice .results .v{text-align:right; font-weight:600; white-space:nowrap}
.tx--rugprice .results .hl{font-size:22px; color:var(--accent)}
.tx--rugprice .foot{color:var(--muted); font-size:13px; margin-top:10px}
.tx--rugprice .themebtn{margin-left:auto; font-size:13px; padding:6px 10px; background:transparent; color:var(--muted); border:1px solid var(--border); border-radius:10px; cursor:pointer}
@media print{
  .tx--rugprice nav.site, .tx--rugprice .btns, .tx--rugprice .quickbtns, .tx--rugprice .rm, .tx--rugprice .themebtn, .tx--rugprice .banner{display:none}
  .tx--rugprice .card{box-shadow:none}
}

/* headband */
.tx--band{
  --bg: var(--color-bg);
  --card: var(--color-surface);
  --ink: var(--color-text);
  --muted: var(--color-text-muted);
  --accent: var(--color-accent);
  --line: var(--color-border);
  --border: var(--color-border);
  --good: var(--color-green);
  --warn: var(--color-wheat);
  --field-bg: var(--color-surface);
  --field-border: var(--color-border);
  --field-border-focus: var(--color-accent);
  --warn-bg: var(--color-wheat-soft);
  --warn-border: var(--color-wheat);
  --radius: 14px;
  --shadow: 0 1px 3px rgba(16,24,40,.06),0 1px 2px rgba(16,24,40,.04);
}
.tx--band *{box-sizing:border-box}
.tx--band .wrap{max-width:820px; margin:0 auto; padding:20px 16px 60px}
.tx--band nav.site{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; align-items:center}
.tx--band nav.site a{font-size:14px; text-decoration:none; color:var(--muted); padding:6px 10px; border:1px solid var(--border); border-radius:999px; background:var(--card)}
.tx--band nav.site a.active{color:#fff; background:var(--accent); border-color:var(--accent)}
.tx--band h1{font-size:26px; margin:6px 0 4px}
.tx--band .sub{color:var(--muted); margin:0 0 16px}
.tx--band .card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px; margin:14px 0}
.tx--band .banner{background:var(--warn-bg); border:1px solid var(--warn-border); border-radius:12px; padding:12px 14px; font-size:14px; margin:0 0 14px}
.tx--band label{display:block; font-weight:600; font-size:14px; margin:12px 0 6px}
.tx--band .hint{font-weight:400; color:var(--muted); font-size:13px}
.tx--band input, .tx--band select{width:100%; padding:10px 12px; font-size:16px; color:var(--ink); background:var(--field-bg); border:1px solid var(--field-border); border-radius:10px}
.tx--band input:focus, .tx--band select:focus{outline:2px solid var(--field-border-focus); outline-offset:1px; border-color:var(--field-border-focus)}
.tx--band .row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:560px){
  .tx--band .row{grid-template-columns:1fr}
}
.tx--band .btns{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}
.tx--band button{font-size:15px; font-weight:600; padding:11px 18px; border-radius:10px; cursor:pointer; border:1px solid var(--accent); background:var(--accent); color:#fff}
.tx--band button.ghost{background:transparent; color:var(--accent)}
.tx--band .results dt{color:var(--muted); font-size:13px}
.tx--band .results dd{margin:0 0 12px; font-size:20px; font-weight:700}
.tx--band .results .big{font-size:26px}
.tx--band .grid2{display:grid; grid-template-columns:1fr 1fr; gap:8px 22px}
@media (max-width:560px){
  .tx--band .grid2{grid-template-columns:1fr}
}
.tx--band .foot{color:var(--muted); font-size:13px; margin-top:8px}
.tx--band .themebtn{margin-left:auto; font-size:13px; padding:6px 10px; background:transparent; color:var(--muted); border:1px solid var(--border)}
@media print{
  .tx--band nav.site, .tx--band .btns, .tx--band .themebtn, .tx--band .banner{display:none}
  .tx--band .card{box-shadow:none}
}