/* /what-is-my-device -- the answer, and nothing else on the site looks like it.
 *
 * NO COLOUR OF ITS OWN. Every value here is a palette.css token, which is the
 * rule tests/test_palette.py enforces on legal.css and task.css and now on
 * this one.
 *
 * It used to be much bigger: five cards, a provenance badge on every value, a
 * key above the tables and a user-agent form below them. All of that went
 * when the page was cut back to the one thing people come here for. If a
 * badge or a second card ever comes back, it comes back with the argument for
 * it -- see the note at the top of device_page.py.
 */

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-ui);
    line-height: 1.55;
}

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 20px; }

/* ---- the answer, which is the whole page above the fold ---------------- */

.verdict {
    margin: 28px 0 8px;
    padding: 28px 28px 24px;
    border-radius: 18px;
    background: var(--raised);
    border: 1px solid var(--rule);
}

.verdict h1 {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-label);
}

/* THE NAME IS THE PRODUCT. Everything else on this page is a supporting
 * detail, so it gets the size of a headline and the top of the card. */
.devname {
    margin: 2px 0 0;
    font-size: clamp(28px, 6vw, 46px);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}

.devsub { margin: 10px 0 0; color: var(--ink-soft); font-size: 17px; }
.devsub b { color: var(--ink); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.chip {
    font-size: 13px;
    font-weight: 700;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--brand-tint);
    color: var(--brand-over);
}

/* ---- the facts underneath ---------------------------------------------- */

.card {
    margin: 18px 0 0;
    background: var(--raised);
    border: 1px solid var(--rule);
    border-radius: 14px;
    padding: 18px 20px 6px;
}
/* MIN-WIDTH: 0 IS THE LOAD-BEARING ONE, and it is not obvious.
 *
 * legal.css styles the bare element -- `table { ... min-width: 30rem }` --
 * for the long comparison tables on /image-formats.html, and this page
 * loads that sheet for its masthead and prose. `.card table` overrode the
 * width and never the MIN-width, so a 4-row table had a 480px floor:
 * measured in a 375px viewport it came out 517px wide and gave the whole
 * page a horizontal scrollbar. Same family as `.masthead a` beating a bare
 * `.tools-link` -- a rule you did not write, on an element you did.
 *
 * table-layout: fixed then makes the 45/55 split hold instead of the
 * columns sizing to "Chrome 155.0.8059.79", and overflow-wrap below
 * breaks that value rather than the page. */
.card table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
    border-collapse: collapse;
}
.card td { padding: 7px 0; border-top: 1px solid var(--rule-soft); vertical-align: top; }
.card tr:first-child td { border-top: 0; }
.card td.k { color: var(--ink-mute); font-size: 14px; width: 45%; padding-right: 12px; }
.card td.v { font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }


.prose { max-width: 70ch; margin: 34px 0 10px; }
.prose h2 { font-size: 24px; margin: 30px 0 8px; }
.prose h3 { font-size: 17px; margin: 22px 0 4px; }
.prose p, .prose li { color: var(--ink-soft); font-size: 16px; }
.prose a { color: var(--brand); }
.prose details {
    border-top: 1px solid var(--rule); padding: 12px 0;
}
.prose details summary {
    cursor: pointer; font-weight: 700; color: var(--ink); font-size: 16px;
}
.prose details p { margin: 8px 0 0; }

.note {
    margin: 18px 0; padding: 13px 16px;
    border-left: 3px solid var(--rule-strong);
    background: var(--sunken); border-radius: 0 10px 10px 0;
    color: var(--ink-soft); font-size: 15px;
}

@media (max-width: 560px) {
    .verdict { padding: 20px 18px 18px; border-radius: 14px; }
    .card { padding: 15px 16px 4px; }
    .card td.k { width: 50%; }
}

/* ---- what's my friend's device ----------------------------------------- */

.pair {
    margin: 18px 0 0;
    padding: 18px 20px;
    background: var(--raised);
    border: 1px solid var(--rule);
    border-radius: 14px;
}
.pair h2 { margin: 0 0 6px; font-size: 19px; }
.pair p { margin: 0 0 12px; color: var(--ink-soft); font-size: 15px; }
.pair .fine { margin: 10px 0 0; color: var(--ink-mute); font-size: 13px; }
.pair form { margin: 0; }
.pair-done h2 { margin: 0 0 6px; }
.pair-done p { margin: 0; }
.pair-wait { margin: 12px 0 0; color: var(--ink-mute); font-size: 14px; }

/* THE FEED, ABOVE THE CODE AND NEWEST FIRST. Somebody is holding this screen
 * up while a queue scans it: the line that just arrived belongs where the eye
 * already is, and the square everybody is queueing for may not slide down the
 * page as they do it. The scroll cap is what keeps the code on screen once
 * more phones have answered than fit above it.
 *
 * SCOPED `.pair .scan-name`, NOT `.scan-name`. `.pair p` is (0,1,1) and beats
 * a bare class, which is the same trap `.masthead a` set for the tools menu --
 * unscoped, every line here comes out at the paragraph's size and colour. */
.scans {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    max-height: 40vh;
    overflow-y: auto;
}
.scans:empty { display: none; }
.scan {
    margin: 0 0 8px;
    padding: 9px 12px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 10px;
}
/* THE NEWEST LINE IS THE BOLD ONE, and the others give the weight up. Every
 * name in this feed was bold, which is right while there is one of them and
 * a wall at five -- and the line somebody standing at a stand is waiting to
 * read is always the one that just arrived. The <b> stays on all of them,
 * because the element is correct whatever the weight: it IS the name of the
 * device. Only the emphasis belongs to the newest.
 *
 * The feed is newest-first by construction (server.py reverses it), so
 * :first-child is the newest and there is no class for the renderer to
 * forget to set. */
.scan:first-child { border-color: var(--rule-strong); }
.pair .scan-name b { font-weight: 400; }
.scan:first-child .scan-name b { font-weight: 800; }

/* The control that rotates the code sits BELOW the panel, because pair.js
 * replaces the panel's contents wholesale -- a button inside it is a button
 * that vanishes the moment the code it would replace arrives. */
.pair-again { margin: 12px 0 0; text-align: center; }
.pair .scan-name { margin: 0; color: var(--ink); font-size: 15px; }
.pair .scan-meta { margin: 2px 0 0; color: var(--ink-mute); font-size: 13px; }

/* The clock leads the meta line: at a stand the question under the name is
 * "when", and the numbers after it are what tell two of the same handset
 * apart. Tabular figures so a column of them does not shuffle. */
.scan-at { font-variant-numeric: tabular-nums; }

/* The picture link is quiet on purpose -- it is an offer, not the point of
 * the line, and it is absent altogether on a device WURFL only described.
 * It sends nothing until somebody follows it, which is the whole difference
 * between a link and a lookup. */
.pair .scan-pics {
    margin-left: 4px;
    font-size: 13px;
    font-weight: 400;
    color: var(--brand);
    white-space: nowrap;
}
.pair .scan-pics:hover { color: var(--brand-over); }

.btn {
    display: inline-block;
    padding: 10px 18px;
    border: 0;
    border-radius: 999px;
    background: var(--brand-fill);
    color: var(--on-brand);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
/* The friend's-device control is an <a> on one page and a <button> on the
 * other, so the decoration has to be turned off here or the link comes out
 * underlined inside its own pill. */
.btn { text-decoration: none; }
.btn:hover { background: var(--brand-fill-over); }
.btn[disabled] { opacity: .55; cursor: default; }

/* THE CODE IS BLACK ON WHITE IN BOTH THEMES, and that is not an oversight.
 * An inverted QR -- light modules on a dark ground -- is out of spec, and
 * enough camera apps refuse to read one that following the dark palette here
 * would break the feature for the people it is for.
 *
 * So the white is INSIDE THE SYMBOL: segno paints the ground and the 4-module
 * quiet zone itself (_qr_svg in server.py). No colour is named here, which is
 * what keeps this file clean for tests/test_palette.py while the code still
 * scans on a dark page. */
.qr {
    /* 320, raised from 240 after "the pixels are too small to scan -- I have
     * to zoom in to get it to scan on my machine", reported against a laptop
     * screen on staging.
     *
     * THE SIZE WAS THE SMALLER HALF OF THAT BUG; the mark being washed across
     * every module was the larger, and _qr_svg in server.py carries the
     * measurement. What is left for this rule to do is the distance: a code
     * somebody holds up is read from across a desk, not from reading
     * distance, and the camera only ever gets the fraction of its frame that
     * the symbol fills. Measured on the staging address -- the worst case,
     * since that hostname is 47 characters and pushes the symbol to 49
     * modules -- the badge version reads once the symbol spans about 85
     * camera pixels, so 320 on screen leaves room to be a quarter of the
     * frame and still read.
     *
     * The vw cap keeps it on a narrow phone, where the screen IS the
     * distance and 78vw is already generous. */
    width: 320px;
    max-width: 78vw;
    margin: 0 auto;
    border-radius: 10px;
    overflow: hidden;
}
.qr svg { display: block; width: 100%; height: auto; }
.qr-url {
    margin: 10px 0 0;
    text-align: center;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 13px;
    color: var(--ink-mute);
    overflow-wrap: anywhere;
}