/* Barcoder — plain, desktop-first, light only. No framework, no build step. */

:root {
    --ink: #1c2024;
    --ink-soft: #5b6672;
    --line: #d9dee4;
    --bg: #f4f6f8;
    --panel: #ffffff;
    --accent: #1f6feb;
    --accent-dark: #1a5bc4;
    --ok-bg: #e8f5ec;
    --ok-ink: #1b5e33;
    --warn-bg: #fdf3e0;
    --warn-ink: #7a5312;
    --error-bg: #fdecec;
    --error-ink: #8c2020;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.wrap {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 24px;
}

/* --- masthead ----------------------------------------------------------- */

.masthead {
    background: var(--panel);
    border-bottom: 1px solid var(--line);
}

.masthead .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 58px;
}

.brand {
    font-weight: 600;
    font-size: 17px;
    color: var(--ink);
    text-decoration: none;
}

.masthead nav {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 14px;
}

.masthead nav a {
    color: var(--ink-soft);
    text-decoration: none;
}

.masthead nav a:hover { color: var(--accent); }

.masthead .who {
    color: var(--ink-soft);
    padding-left: 18px;
    border-left: 1px solid var(--line);
}

main.wrap { padding-top: 32px; padding-bottom: 64px; }

/* --- typography --------------------------------------------------------- */

h1 { font-size: 23px; margin: 0 0 6px; font-weight: 600; }
h2 { font-size: 17px; margin: 32px 0 10px; font-weight: 600; }

.lede { color: var(--ink-soft); margin: 0 0 26px; }

.hint { color: var(--ink-soft); font-size: 13px; margin: 6px 0 0; }

/* --- panels ------------------------------------------------------------- */

.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 24px;
    margin-bottom: 20px;
}

.panel.narrow { max-width: 440px; }

.centre { margin: 60px auto; max-width: 440px; }

/* --- forms -------------------------------------------------------------- */

label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }

input[type=text], input[type=email], input[type=number], select, textarea {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: 4px;
    font: inherit;
    background: #fff;
    color: var(--ink);
}

input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--accent);
    outline-offset: -1px;
    border-color: var(--accent);
}

textarea { min-height: 96px; resize: vertical; }

.field { margin-bottom: 16px; }

.row { display: flex; gap: 14px; }
.row > * { flex: 1; }

button, .button {
    display: inline-block;
    padding: 9px 18px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: var(--accent);
    color: #fff;
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
}

button:hover, .button:hover { background: #1a5bc4; }

button.secondary, .button.secondary {
    background: #fff;
    color: var(--ink);
    border-color: var(--line);
}

button.secondary:hover, .button.secondary:hover { background: var(--bg); }

button.danger { background: #b4292a; }
button.danger:hover { background: #992122; }

button.small, .button.small { padding: 5px 11px; font-size: 13px; }

/* --- notices ------------------------------------------------------------ */

.notice {
    padding: 11px 15px;
    border-radius: 4px;
    margin: 0 0 20px;
    font-size: 14px;
}

.notice.ok    { background: var(--ok-bg);    color: var(--ok-ink); }
.notice.warn  { background: var(--warn-bg);  color: var(--warn-ink); }
.notice.error { background: var(--error-bg); color: var(--error-ink); }

/* --- tables ------------------------------------------------------------- */

table { width: 100%; border-collapse: collapse; font-size: 14px; }

th, td {
    text-align: left;
    padding: 9px 10px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }

tr:last-child td { border-bottom: 0; }

td.actions { text-align: right; white-space: nowrap; }

.tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    background: var(--bg);
    color: var(--ink-soft);
    border: 1px solid var(--line);
}

.tag.on  { background: var(--ok-bg);    color: var(--ok-ink);    border-color: transparent; }
.tag.off { background: var(--error-bg); color: var(--error-ink); border-color: transparent; }

/* --- footer ------------------------------------------------------------- */

.footer {
    border-top: 1px solid var(--line);
    padding: 18px 0;
    font-size: 13px;
    color: var(--ink-soft);
}

a { color: var(--accent); }
a.quiet { color: var(--ink-soft); }

/* --- phase 4 additions -------------------------------------------------- */

.masthead nav a.here { color: var(--ink); font-weight: 600; }

fieldset { min-width: 0; }
fieldset legend { color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; }

h3 { font-size: 14px; font-weight: 600; }

.row { flex-wrap: wrap; }
.row > * { min-width: 120px; }

iframe { display: block; }

code {
    background: var(--bg);
    padding: 1px 5px;
    border-radius: 3px;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 13px;
}

tfoot th { border-bottom: 0; border-top: 2px solid var(--line); color: var(--ink); font-size: 13px; }

input[type=file] {
    width: 100%;
    padding: 8px;
    border: 1px dashed var(--line);
    border-radius: 4px;
    background: #fff;
    font: inherit;
}

/* --- phrase summary on the process screen ------------------------------- */

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    vertical-align: -1px;
    border: 1px solid rgba(0, 0, 0, .2);
}

.swatch.empty { background: transparent; border-style: dashed; }

table.compact td {
    padding: 5px 8px;
    border-bottom: 1px solid var(--bg);
}

table.compact tr:last-child td { border-bottom: 0; }
table.compact .hint { margin: 0; }

/* --- drag and drop upload ----------------------------------------------- */

.dropzone {
    position: relative;
    padding: 10px;
    border-radius: 8px;
    background: var(--bg);
}

/* The dashed edge sits on the label, so the canvas is the area you drop onto
   rather than the whole field. */
.dropzone-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 170px;
    margin: 0;
    padding: 48px 28px;
    border: 2px dashed #c3ccd6;
    border-radius: 6px;
    background: #fff;
    text-align: center;
    font-weight: 400;
    cursor: pointer;
    transition: border-color .12s, background .12s, color .12s;
}

.dropzone-label:hover { border-color: var(--accent); }

.dropzone.over .dropzone-label {
    border-color: var(--accent);
    background: #f2f7ff;
}

.dropzone-label strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    pointer-events: none;
}

.dropzone-label span {
    display: block;
    margin: 0;
    font-size: 13px;
    color: var(--ink-soft);
    pointer-events: none;
}

.dropzone.over .dropzone-label strong { color: var(--accent); }

/* Hidden to look at, still reachable by keyboard, and still the thing that
   actually carries the file when the form submits. */
.dropzone-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* The input is visually hidden, so its focus ring has to be shown by the
   canvas around it — otherwise keyboard users see nothing at all. */
.dropzone:focus-within .dropzone-label {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-color: var(--accent);
}

.dropzone-chosen:not(:empty) {
    margin-top: 10px;
    font-weight: 500;
    color: var(--ink);
}

.dropzone-chosen.error-text { color: var(--error-ink); }

.footer .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.footer .build { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; opacity: .65; }

/* --- viewing as another user -------------------------------------------- */

.impersonating {
    background: #4a3a12;
    color: #ffe9b8;
    font-size: 14px;
}

.impersonating .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.impersonating strong { color: #fff; }

.impersonating button {
    background: #ffe9b8;
    color: #4a3a12;
    border: 0;
    font-weight: 600;
    white-space: nowrap;
}

.impersonating button:hover { background: #fff; }

button[disabled] { opacity: .5; cursor: not-allowed; }
button[disabled]:hover { background: var(--accent); }

/* A navigation link whose file is not on the server. */
.masthead nav a.absent { color: #b4292a; }