/* /sell, 31 Oct 2026 (design audit, Job 3). The static template's faces, tokens, wordmark, button and nav (css/static.css), and
   nothing of Home's ground or scale: Home is the one poster (DESIGN.md). What is here is only what this page has that the
   template does not: the sum, the steps and the two bands.

   Money is gold ink, as it is everywhere (DESIGN.md, Colors), and the template has no gold, so the app's two values are
   copied in here. --gold-ink is 4.96:1 on white and 4.60:1 on --void; dark's is 8.51:1 on --surface and 9.23:1 on --void. */
:root{ --gold-ink:#986600; --field-line:color-mix(in srgb,var(--dim) 80%,var(--surface)) }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --gold-ink:#E4A62E } }
:root[data-theme="dark"]{ --gold-ink:#E4A62E }

.s-sell .num,.s-sell td.n,.s-sell dd{font-variant-numeric:tabular-nums}

/* The buyer site's header, flat and full width (apps/watch/src/App.tsx, decision I). */
.sl-top{position:sticky;top:0;z-index:50;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;min-height:56px;padding:8px 28px;background:var(--surface);border-bottom:1px solid var(--line)}
.sl-top .brand{margin-right:8px}
.sl-nav{display:flex;align-items:center;gap:2px}
.sl-nav a{display:inline-flex;align-items:center;height:34px;padding:0 10px;border-radius:10px;font-size:14px;font-weight:500;color:var(--text);text-decoration:none;white-space:nowrap}
.sl-nav a:hover{background:var(--raised)}
.sl-sp{flex:1}
.sl-top .btn{min-height:36px;padding:0 14px;font-size:14px}
.sl-top .icon-btn{width:36px;height:36px;background:transparent}
.s-sell a:focus-visible,.s-sell button:focus-visible,.s-sell summary:focus-visible{outline:2px solid var(--teal-text);outline-offset:2px}
.sl-skip{position:absolute;left:12px;top:-60px;z-index:50;padding:10px 14px;border-radius:10px;background:var(--surface);color:var(--text);font-weight:600;box-shadow:var(--shadow)}
.sl-skip:focus{top:12px}
#main:focus{outline:0}
.mv-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.s-sell h2{font-size:clamp(26px,3vw,34px);margin:0 0 12px}
.s-sell h3{font-size:21px;margin:0 0 6px}
.s-sell section{scroll-margin-top:96px}

/* The first screen: what you keep, then a sum you can try on your own price. */
.sl-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,72px);align-items:center;padding:clamp(28px,5vw,64px) 0 clamp(32px,5vw,64px)}
.sl-hero h1{font-size:clamp(38px,5.2vw,60px);line-height:1.02;margin:0 0 16px}
.sl-lead{font-size:clamp(16px,1.5vw,18px);line-height:1.55;color:var(--muted);max-width:52ch;margin:0 0 24px}
.sl-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px}
.sl-acts .btn{min-width:180px}
.sl-more{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--text);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--dim)}
.sl-more:hover{color:var(--teal-text);text-decoration-color:currentColor}
.sl-fine{font-size:14px;color:var(--dim);margin:14px 0 0}

.sl-sum{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px 22px;min-width:0}
.sl-sumhead{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.sl-sumhead img{width:60px;height:60px;border-radius:10px;object-fit:cover;object-position:top;flex:none;background:var(--raised)}
.sl-sumhead h2{font-size:22px;margin:0}
.sl-sumhead p{font-size:14px;color:var(--dim);margin:0}
/* `end`: a label that wraps to two lines on a phone must not push its box out of line with the other. */
.sl-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:end}
.sl-fields label{display:block;font-size:14px;font-weight:600;color:var(--text);margin-bottom:5px}
.sl-money{display:flex;align-items:center;gap:4px;height:44px;padding:0 12px;border:1px solid var(--field-line);border-radius:10px;background:var(--surface)}
.sl-money:focus-within{outline:2px solid var(--teal-text);outline-offset:1px;border-color:var(--teal-text)}
.sl-money span{color:var(--muted);font-weight:600}
.sl-money input{flex:1;min-width:0;width:100%;height:100%;border:0;outline:0;background:transparent;color:var(--text);font:inherit;font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}
.sl-lines{margin:16px 0 0}
.sl-lines div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 0;border-top:1px solid var(--line)}
.sl-lines div[hidden]{display:none}
.sl-lines dt{color:var(--muted);font-size:15px;min-width:0}
.sl-lines dd{margin:0;font-weight:600;white-space:nowrap}
.sl-total dt{color:var(--text);font-weight:600;font-size:16px}
.sl-lines .sl-total{align-items:center;padding-top:10px}
.sl-total dd{font-family:var(--font-display);font-weight:700;font-size:clamp(38px,4.4vw,48px);line-height:1;color:var(--gold-ink)}
.sl-note{font-size:14px;color:var(--dim);margin:6px 0 0}

/* Everything after the first screen sits on one rhythm, with more room above a heading than below it. */
.sl-sec{padding:clamp(36px,5vw,64px) 0 0}
.sl-small{font-size:14px;line-height:1.55;color:var(--muted);max-width:60ch;margin:14px 0 0}

.sl-how{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:clamp(24px,4vw,48px);align-items:start;margin-top:24px}
.sl-shot{margin:0}
.sl-shot img{display:block;width:100%;height:auto;border-radius:18px;border:1px solid var(--line);background:var(--raised)}
.sl-shot figcaption{font-size:14px;color:var(--muted);margin-top:8px}
.sl-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;counter-reset:none}
.sl-steps li{border-top:2px solid var(--teal);padding-top:12px;min-width:0}
.sl-steps b{display:block;font-family:var(--font-display);font-weight:700;font-size:40px;line-height:1;color:var(--teal-text);margin-bottom:10px}
.sl-steps p{margin:0;font-size:15px;line-height:1.55;color:var(--muted)}

.sl-cost{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,5vw,64px);align-items:start}
.sl-cost p{color:var(--muted);margin:0;max-width:62ch}
.sl-cost table{margin:18px 0 0}
.sl-cost th[scope="row"]{background:none;color:var(--text);font-family:var(--font-body);font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums}
.sl-cost .n{text-align:right;white-space:nowrap}
.sl-cost td{color:var(--muted)}
.sl-cost td.sl-get{color:var(--gold-ink);font-weight:700}
.sl-costside h3{margin-top:0}
.sl-costside p{font-size:15px;line-height:1.55;margin-bottom:22px}
.sl-costside p:last-child{margin-bottom:0}

.sl-band{margin-top:clamp(40px,6vw,72px);background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:clamp(22px,3vw,36px)}
.sl-wrong{margin:16px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 36px}
.sl-wrong dt{font-size:16px;font-weight:600;color:var(--text);margin-bottom:4px}
.sl-wrong dd{margin:0;font-size:15px;line-height:1.55;color:var(--muted);font-variant-numeric:normal}

.sl-print{margin-top:18px;border-top:1px solid var(--line);padding-top:6px;font-size:15px}
.sl-print summary{cursor:pointer;font-weight:600;min-height:44px;display:flex;align-items:center}
.sl-print p{margin:0 0 10px;font-size:14px}


.sl-close{margin-top:clamp(40px,6vw,72px);padding:clamp(24px,4vw,40px) 0 clamp(36px,5vw,56px);border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 40px}
.s-sell .sl-close h2{margin:0;font-size:clamp(28px,3.4vw,40px)}

.s-legal.s-sell footer{margin-top:0}
.sl-entity{flex-basis:100%}

@media (max-width:980px){
  .sl-hero{grid-template-columns:minmax(0,1fr);align-items:start}
  .sl-sum{max-width:520px;width:100%}
  .sl-how{grid-template-columns:minmax(0,1fr)}
  .sl-shot{max-width:200px}
  .sl-cost{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .sl-steps{grid-template-columns:minmax(0,1fr);gap:20px}
  .sl-steps li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:8px}
  .sl-steps b{grid-row:span 3;font-size:34px;margin:0}
  .sl-steps li>h3,.sl-steps li>p{grid-column:2}
  /* A phone keeps to the point: the picture sits small beside its words, and the answer stays in view. */
  .sl-shot{display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px;align-items:center;max-width:none}
  .sl-shot figcaption{margin:0}
  .sl-sumhead img,.sl-sumhead p,.sl-hero .sl-more,#steps>.sl-small,.sl-lines div:first-child{display:none}
  .s-legal.s-sell footer{padding:20px 0 12px}
  .sl-steps{gap:14px}
  .sl-steps li{padding-top:8px}
  .s-legal.s-sell .wrap{padding-bottom:0}
  .sl-band{padding:18px 16px}
  .sl-sumhead{margin-bottom:10px}
  .sl-lines div{padding:6px 0}
  .sl-sec{padding-top:24px}
  .sl-band{margin-top:28px}
  .sl-close{margin-top:28px;padding:20px 0 24px}
  .sl-cost{gap:16px}
  .sl-cost tbody tr:last-child{display:none}
  .sl-costside h3{margin-top:0}
  .sl-hero{padding:18px 0 8px;gap:18px}
  .sl-wrong{grid-template-columns:minmax(0,1fr)}
  /* The header: the wordmark and Sign in, then the same four links in a row that scrolls inside itself. */
  .sl-top{padding:8px 16px}
  .sl-nav{order:5;flex-basis:100%;overflow-x:auto;margin:0 -6px}
  .sl-join,.sl-top .icon-btn{display:none}
  .sl-sum{padding:18px 16px}
  .sl-acts .btn{width:100%}
  .sl-cost table th,.sl-cost table td{padding:10px 8px}
  .s-sell .sl-close h2{max-width:none}
}
/* At 320 wide a price and a postage box side by side leave each about 110 px, under what A$1,000.00 needs. */
@media (max-width:360px){
  .sl-fields{grid-template-columns:minmax(0,1fr)}
  /* The four columns fit 288 px once the padding and the type come down a step. */
  .sl-cost table{font-size:13.5px}
  .sl-cost table th,.sl-cost table td{padding:9px 5px}
  .sl-cost th[scope="row"]{font-size:13.5px}
}
@media (max-width:420px){ .wrap{padding:0 16px} }

/* The Finger Rule (DESIGN.md), last in the file. */
@media (pointer:coarse){
  .sl-money{height:48px}
  .sl-nav a,.sl-top .btn{min-height:44px}
  .sl-top .icon-btn{width:44px;height:44px}
}