/* PersonBench. One stylesheet. Georgia because I picked it once and it
   has been fine ever since. */

body {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 17px;
    line-height: 1.5;
    color: #111;
    background: #fff;
    max-width: 40em;
    margin: 2.5em auto;
    padding: 0 1.5em;
}

/* Headings. Small. The text does the work. */

h1 {
    font-size: 1.7em;
    margin: 0 0 0.15em 0;
    font-weight: bold;
}

h2 {
    font-size: 1.2em;
    margin: 2.2em 0 0.5em 0;
    border-bottom: 1px solid #ccc;
    padding-bottom: 0.15em;
}

h3 {
    font-size: 1.03em;
    margin: 1.6em 0 0.3em 0;
}

p, li {
    margin: 0.7em 0;
}

/* The nav. A line of links with pipes, above the title. */

.nav {
    margin: 0 0 2em 0;
    font-size: 0.9em;
    color: #555;
}

/* Links: blue, underlined, purple when visited. There is no reason to
   change this and several reasons not to. */

a:link    { color: #0000ee; }
a:visited { color: #551a8b; }

/* Model names, file names, code. */

code, .model {
    font-family: Consolas, Monaco, "Courier New", monospace;
    font-size: 0.88em;
}

/* Tables. Real ones, with rules. */

table {
    border-collapse: collapse;
    margin: 1.2em 0;
    font-size: 0.92em;
}

th, td {
    padding: 0.28em 0.7em 0.28em 0;
    text-align: left;
    vertical-align: baseline;
}

th {
    border-bottom: 2px solid #333;
    font-weight: bold;
}

td {
    border-bottom: 1px solid #ddd;
}

td.num, th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* The results table has more columns than a phone has room for. Let it
   scroll sideways rather than squashing the numbers. */

.scroll {
    overflow-x: auto;
}

/* A block quote is a quotation, not a design element. */

blockquote {
    margin: 1em 0 1em 1.5em;
    padding-left: 1em;
    border-left: 3px solid #ccc;
    color: #222;
}

hr {
    border: 0;
    border-top: 1px solid #ccc;
    margin: 2.5em 0;
}

/* Footnotes and the colophon. */

.foot {
    font-size: 0.85em;
    color: #555;
    margin-top: 3em;
    border-top: 1px solid #ccc;
    padding-top: 0.8em;
}


/* Model-written text, set apart from mine.
   The one place on this site with a tint, a border or a rounded corner. It is
   deliberate and it stays here: quoted material should look quoted. If this
   styling ever appears on a table or a note, someone has started building a
   dashboard.

   Sans, and not at Georgia's metrics. A sans at the same size and leading
   reads tighter and greyer, so this is a shade smaller with noticeably more
   line-height, and the padding is doing double duty — visual inset, and
   holding the measure near 78 characters instead of the 90 a 16px sans would
   otherwise take across 40em.

   The tint is lighter than looks right in a two-line sample, on purpose: some
   of these answers run to eight thousand words and anything stronger becomes
   a wash to read across. */

.answer {
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.62;
    color: #111;
    background: #f6f9fc;
    border: 1px solid #dbe6f1;
    border-radius: 3px;
    padding: 1.2em 2em;
    margin: 1.2em 0 2em 0;
}

.answer > :first-child { margin-top: 0; }
.answer > :last-child  { margin-bottom: 0; }

/* Headings inside an answer belong to the answer, not to the page. */
.answer h3, .answer h4, .answer h5, .answer h6 {
    font-family: inherit;
    margin: 1.5em 0 0.4em 0;
}

.answer blockquote {
    border-left: 3px solid #c8d8e8;
    color: #333;
}


/* The copy control. Sits inside an answer box, which is why it is scoped
   there — it is not a button style, it is that one button. Built by script,
   so a browser without a clipboard never renders one. */

.answer .copy {
    float: right;
    margin: 0 0 0.6em 0.9em;
    padding: 0.3em 0.5em;
    color: #6b8199;
    background: #fff;
    border: 1px solid #cfdded;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.8em;
    line-height: 1;
    white-space: nowrap;
}

.answer .copy img    { vertical-align: -3px; }
.answer .copy:hover  { border-color: #a6bed5; }

/* Feedback. The word appears beside the icon and the icon swaps; both revert
   after a moment. No animation, nothing that fades — a control either says
   something happened or it does not. */

.copylabel               { margin-left: 0.4em; }
.answer .copy.done       { color: #2a6b3f; border-color: #a9cdb5; }
.answer .copy.failed     { color: #8a3b32; border-color: #d8b4ae; }

/* "LLM? Read this as text." Quiet, and a real link — small and grey, not
   hidden, not moved off-screen, not built by script. Anything that could be
   read as showing one thing to a crawler and another to a person would be
   worse than not having it. */

.astext,
.astext:link,
.astext:visited {
    color: #888;
    margin-left: 0.6em;
}

/* Narrower screens. Slightly smaller type, less margin, same layout —
   there is nothing here that needs rearranging. */

@media (max-width: 34em) {
    body {
        font-size: 16px;
        margin: 1.2em auto;
        padding: 0 1em;
    }
    h1 { font-size: 1.45em; }
    table { font-size: 0.85em; }
    /* The inset costs more than it gives when the screen is this narrow. */
    .answer { padding: 1em 1.1em; font-size: 15.5px; }
}

/* Printing. Someone will. */

@media print {
    body { max-width: none; font-size: 11pt; color: #000; }
    .answer { background: none; border: 1px solid #999; }
    .answer .copy { display: none; }
    a:link, a:visited { color: #000; }
}