/* One accent, used for every interactive fill, on a quiet ground — the colour in the interface
   should be the thing you can act on. The dark theme is Nord; the light theme keeps the warm amber
   the icon is drawn in. Both accents are warm yellows, which is what lets the amber favicon sit in
   either header without looking like it came from somewhere else.

   --accent is a fill colour in both themes; --link is the same idea at text size, which on white
   needs to be darker to stay readable. --ink is what goes on top of a filled accent or danger
   control, and is dark in both themes because both fills are light. */
:root {
    color-scheme: light dark;
    accent-color: var(--accent);

    --bg: #fbfaf7;
    --card: #ffffff;
    --fg: #191a1c;
    --muted: #6a6e74;
    --line: #e4e2dc;
    --line-strong: #cfccc3;
    --hover: #f2f1ec;
    --accent: #e5a51f;
    --link: #8a5f0a;
    --ink: #1b1c1a;
    --danger: #b23a30;

    --radius: 10px;
    --radius-sm: 8px;
    --shadow: 0 1px 2px rgb(0 0 0 / .05), 0 1px 12px rgb(0 0 0 / .03);
}

/* Nord. The four surfaces are its Polar Night ramp used as it was drawn — nord0 is the card, so the
   ground is nord0 taken one step down and cards lift off it rather than merging into it. Nord is a
   dim theme rather than a black one, and that step is the whole reason a list of cards still reads
   as a list of cards.

   Two values are not literal Nord, both for contrast at text size: nord3 (#4c566a), the comment
   grey, is 1.6:1 on the card and unusable for the dates and hosts, so --muted is nord4 brought down
   to 5.5:1; and nord11 (#bf616a) is 3.0:1, which is fine as a fill but fails as the remove button's
   own label, so --danger is that red lightened to 4.9:1. Everything else is Nord as published. */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #212632;
        --card: #2e3440;
        --fg: #eceff4;
        --muted: #a3adc0;
        --line: #434c5e;
        --line-strong: #4c566a;
        --hover: #3b4252;
        --accent: #ebcb8b;
        --link: #ebcb8b;
        --ink: #2e3440;
        --danger: #e08b95;

        --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 1px 14px rgb(0 0 0 / .25);
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font: 16px/1.55 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-text-size-adjust: 100%;
}

::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }

/* One ring for everything focusable. Fields opt out below — they get a border and a soft halo
   instead, which reads as the field itself waking up rather than as a box drawn around it. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .875em;
    padding: .08em .35em;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--hover);
}

/* ---------- header ---------- */

header {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--card);
    border-bottom: 1px solid var(--line);
}

/* Content passes under the bar rather than being clipped by it. Solid --card above is the fallback
   for browsers without backdrop-filter — the bar must never be see-through without the blur. */
@supports (backdrop-filter: blur(1px)) {
    header {
        background: color-mix(in srgb, var(--card) 76%, transparent);
        backdrop-filter: saturate(1.4) blur(14px);
    }
}

.bar {
    max-width: 60rem;
    margin: 0 auto;
    padding: .6rem 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 650;
    font-size: 1.05rem;
    letter-spacing: -.01em;
    color: var(--fg);
    white-space: nowrap;
}

.brand:hover { text-decoration: none; }
/* The favicon's geometry at header size — the mark and the accent are the same amber, so the
   palette reads as the app's own rather than as a colour picked for the CSS. */
.brand .mark { width: 1.35rem; height: 1.35rem; flex: none; }

.search { flex: 1; min-width: 0; }

.search input { width: 100%; }

/* Qualified past `header` because the shared input rule below sets the `background` shorthand,
   which would otherwise wipe this image out on source order alone. */
header .search input {
    padding-left: 2.15rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8f94' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20.5 20.5-4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: .7rem center;
    background-size: 1rem;
}

header nav {
    display: flex;
    align-items: center;
    gap: .35rem;
    white-space: nowrap;
}

header nav a, header nav .linkish {
    padding: .35rem .6rem;
    border-radius: var(--radius-sm);
    font-size: .925rem;
    color: var(--muted);
}

header nav a:hover, header nav .linkish:hover {
    color: var(--fg);
    background: var(--hover);
    text-decoration: none;
}

/* The one thing you came to the header to do, so it carries the accent while the rest stay quiet. */
header nav a.add {
    color: var(--link);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}

header nav a.add:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--link); }

/* ---------- layout ---------- */

main {
    max-width: 60rem;
    margin: 0 auto;
    padding: 1.25rem 1rem 4rem;
}

h1 { font-size: 1.35rem; letter-spacing: -.015em; margin: 0 0 1rem; }
h2 { font-size: 1.05rem; letter-spacing: -.01em; margin: 0 0 .75rem; }

.muted { color: var(--muted); font-size: .875rem; }
.muted strong { color: var(--fg); font-weight: 600; }
.stack > * + * { margin-top: 1rem; }

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

input[type=text], input[type=search], input[type=url], input[type=password], textarea {
    width: 100%;
    padding: .5rem .6rem;
    font: inherit;
    color: var(--fg);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    transition: border-color .15s ease, box-shadow .15s ease;
}

input::placeholder, textarea::placeholder { color: var(--muted); opacity: .8; }
input:hover, textarea:hover { border-color: var(--line-strong); }

/* Halo rather than an outline: the field is already a box, and a second one around it at this size
   reads as an error state. */
input:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

input:focus-visible, textarea:focus-visible { outline: none; }

/* Grows with its content rather than scrolling. The add/edit form script does the same for
   browsers that don't support field-sizing yet. */
textarea {
    min-height: 4rem;
    resize: vertical;
    field-sizing: content;
}

label { display: block; font-size: .85rem; color: var(--muted); margin-bottom: .3rem; }
.field + .field { margin-top: .9rem; }

.check { display: flex; align-items: center; gap: .55rem; }
.check label { margin: 0; font-size: .95rem; color: var(--fg); }
.check input[type=checkbox] { width: 1rem; height: 1rem; margin: 0; flex: none; }

button, .button {
    font: inherit;
    padding: .45rem .9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--card);
    color: var(--fg);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

button:hover, .button:hover { background: var(--hover); border-color: var(--line-strong); text-decoration: none; }

/* .button too, so a link can be the main action of a section — the Shortcut install on Settings. */
button.primary, .button.primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--ink);
    font-weight: 600;
}

button.primary:hover, .button.primary:hover {
    filter: brightness(1.08);
    background: var(--accent);
    border-color: var(--accent);
}

button:disabled { opacity: .55; cursor: default; }

/* Delete lives in the form's top-right corner, well away from Save. Shaped like the list's edit
   affordance so the pair reads as one family, but red at rest rather than only on hover — it should
   never be something you press on the way to something else. */
.remove {
    position: absolute;
    top: .6rem;
    right: .6rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .78rem;
    padding: .28rem .65rem;
    border-color: color-mix(in srgb, var(--danger) 45%, transparent);
    background: color-mix(in srgb, var(--danger) 10%, transparent);
    color: var(--danger);
}

.remove:hover {
    background: var(--danger);
    border-color: var(--danger);
    color: var(--ink);
}

.linkish {
    border: none;
    background: none;
    padding: 0;
    color: var(--link);
}

.linkish:hover { background: none; border-color: transparent; text-decoration: underline; text-underline-offset: 2px; }

form.inline { display: inline; }
.actions { display: flex; align-items: center; gap: .75rem; margin-top: 1.25rem; }

/* Anchors .remove, and reserves the strip it sits in so it can't land on the URL field. Only the
   edit form carries one — the add form keeps its normal padding. */
form.panel { position: relative; }
form.panel:has(.remove) { padding-top: 2.6rem; }

.panel {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.1rem;
}

.narrow { max-width: 26rem; margin: 2rem auto; }

.notice {
    padding: .6rem .8rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    background: var(--hover);
    font-size: .9rem;
}

.notice.error {
    border-color: color-mix(in srgb, var(--danger) 40%, transparent);
    border-left-color: var(--danger);
    background: color-mix(in srgb, var(--danger) 8%, transparent);
    color: var(--danger);
}

/* ---------- tags ---------- */

.tagbar {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: 1.25rem;
}

.tag {
    font-size: .8rem;
    padding: .18rem .55rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--muted);
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

/* The tags are stored bare; the hash is what makes a pill read as a tag rather than a button, and
   keeping it in CSS means it never reaches the data. */
.tag::before { content: "#"; opacity: .45; }

.tag:hover {
    background: var(--hover);
    border-color: var(--line-strong);
    color: var(--fg);
    text-decoration: none;
}

/* --ink, not white: the accent is a light fill in both themes and needs dark text on top. */
.tag.on { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.tag.on::before { opacity: .55; }
.tag.on:hover { background: var(--accent); color: var(--ink); }
.tag .count { opacity: .55; margin-left: .3rem; font-variant-numeric: tabular-nums; }

/* ---------- tag field ---------- */

/* Anchors the completion menu to the input it completes. */
.tagfield { position: relative; }

/* Overlays whatever follows instead of pushing it down, so the form doesn't jump while you type —
   which matters most in the bookmarklet popup, where Save is just below. */
.tagmenu {
    position: absolute;
    z-index: 10;
    left: 0;
    right: 0;
    margin-top: .25rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: 0 8px 24px rgb(0 0 0 / .28);
}

.tagmenu button {
    display: block;
    width: 100%;
    text-align: left;
    padding: .35rem .65rem;
    font-size: .9rem;
    border: none;
    border-radius: 0;
    background: none;
}

/* .on is the arrow-key highlight; hover has to look the same or the two disagree. */
.tagmenu button:hover, .tagmenu button.on { background: var(--hover); }

/* Built by script — see _BookmarkFields. Empty when you have no tags yet, and then it takes no room. */
.tagpicks { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.tagpicks:empty { display: none; }

/* ---------- bookmark list ---------- */

.bookmark {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: .85rem 1rem;
    margin-bottom: .7rem;
    transition: border-color .15s ease;
}

.bookmark:hover { border-color: var(--line-strong); }

/* The row you're editing in place. Relative so .remove lands in this card's corner, with the top
   padding opened up to give it a strip of its own. */
.bookmark.editing {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
    position: relative;
    padding-top: 2.6rem;
}

.bookmark.editing .actions { margin-top: 1rem; }

.bookmark .title { font-size: 1.05rem; font-weight: 600; letter-spacing: -.005em; }

/* A list of amber titles would be a wall of accent, and the accent means "you can act on this".
   The title stays ink and picks the colour up on hover, where it is actually about to be clicked. */
.bookmark .title a { color: var(--fg); }
.bookmark .title a:hover { color: var(--link); text-decoration: none; }

.bookmark .host { font-size: .8rem; color: var(--muted); }
.bookmark .host a { color: inherit; }
.bookmark .host a:hover { color: var(--fg); text-decoration: none; }

/* Marked by a rule down the left rather than boxed in — reads as a quote, not a second card. Set a
   step below the title, which is what you scan the list by. */
.bookmark .desc {
    margin: .5rem 0 .65rem;
    font-size: .95rem;
    padding: .05rem 0 .05rem .75rem;
    border-left: 3px solid var(--line);
    /* Mixed against the card, so it needs enough accent to stay yellow — Nord's card is a lighter
       blue-grey than a near-black ground, and a weaker mix turns the rule olive. */
    border-left-color: color-mix(in srgb, var(--accent) 62%, transparent);
    white-space: pre-wrap;
}

.bookmark .foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    font-size: .8rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.bookmark .foot > a:first-child { color: var(--muted); }
.bookmark .foot > a:first-child:hover { color: var(--fg); }
.bookmark .lock { display: inline-flex; color: var(--muted); }

/* Pushed to the far right of the row so it's always in the same place to aim for.
   Sits on --bg, since the card it's on is already --card. */
.bookmark .foot .edit {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .78rem;
    padding: .28rem .65rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--muted);
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

/* Shared with the edit form's remove button and the private padlock — same size icon everywhere. */
.bookmark .foot .edit svg, .remove svg, .lock svg {
    width: .95em;
    height: .95em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lock svg { width: .85em; height: .85em; }

.bookmark .foot .edit:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--ink);
    text-decoration: none;
}

/* An empty list is a place something goes, so it's drawn as one rather than left as loose text. */
.empty {
    text-align: center;
    color: var(--muted);
    padding: 3.5rem 1rem;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
}

.pager { display: flex; gap: .5rem; align-items: center; justify-content: center; margin-top: 1.75rem; }

.pager a {
    padding: .35rem .8rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--fg);
    font-size: .875rem;
    transition: background .15s ease, border-color .15s ease;
}

.pager a:hover { background: var(--hover); border-color: var(--line-strong); text-decoration: none; }
.pager .muted { font-variant-numeric: tabular-nums; padding: 0 .4rem; }

/* ---------- settings ---------- */

.token {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .85rem;
    word-break: break-all;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: .5rem .6rem;
}

.bookmarklet {
    display: inline-block;
    padding: .45rem 1rem;
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: var(--ink);
    font-weight: 600;
    cursor: grab;
}

.bookmarklet:hover { filter: brightness(1.08); text-decoration: none; }
.bookmarklet:active { cursor: grabbing; }

details summary { cursor: pointer; font-size: .875rem; }
details summary:hover { color: var(--fg); }
details .snippet { margin-top: .5rem; }

.panel h3 { font-size: .9rem; letter-spacing: -.01em; margin: 1.25rem 0 0; }

.screenshot {
    display: block;
    margin-top: .6rem;
    width: 100%;
    max-width: 300px;
    border: 1px solid var(--line);
    border-radius: 12px;
}
.steps { margin: .6rem 0 0; padding-left: 1.3rem; font-size: .875rem; color: var(--muted); }
.steps li + li { margin-top: .35rem; }
.steps strong { color: var(--fg); }

/* Added by script next to anything marked data-copy, so it never renders without a clipboard. */
.copy { margin-top: .35rem; font-size: .8rem; }

.snippet {
    width: 100%;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .78rem;
    min-height: 4.5rem;
    white-space: pre;
    overflow-x: auto;
}

@media (max-width: 34rem) {
    .bar { flex-wrap: wrap; gap: .5rem; }
    .search { order: 3; flex-basis: 100%; }
    header nav { margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ---------- bookmarklet popup ---------- */

/* One form in a small window, often at whatever zoom level the page you came from was using. No
   header renders here (see _Layout), and everything left over is tightened so the whole form fits
   without scrolling. _Layout also grows the window itself when it doesn't. */
body.popup main { max-width: none; padding: .8rem; }
body.popup .panel { padding: .9rem; }
body.popup .field + .field { margin-top: .65rem; }
body.popup textarea { min-height: 3rem; }
body.popup .actions { margin-top: .9rem; }
body.popup .narrow { margin: 1.5rem auto; }