:root { color-scheme: light dark; --control-height: 38px; --subtitle: color-mix(in srgb, var(--text) 68%, transparent); --bg: #f5f5f7; --card: #fff; --text: #1d1d1f; --muted: #6e6e73; --line: #d2d2d7; --accent: #0071e3; --bad: #d70015; --danger: #b3342f; --good: #1d8a3a; }
@media (prefers-color-scheme: dark) { :root { --bg: #1c1c1e; --card: #2c2c2e; --text: #f5f5f7; --muted: #98989d; --line: #48484a; --accent: #0a84ff; --bad: #ff453a; --danger: #b8423c; --good: #32d74b; } }
* { box-sizing: border-box; margin: 0; padding: 0; user-select: none; -webkit-user-select: none; }
/* (Nothing can be selected, except what is typed in and what is there to be copied) */
input, textarea, code, .selectable { user-select: text; -webkit-user-select: text; }
/* (Nothing has the browser's own spacing: what needs some says so) */
p { margin-bottom: 8px; }
textarea, select { margin-top: 8px; }
/* The arrow is drawn here (the browser's sits against the edge): a small chevron, 14px in from the right */
select { appearance: none; -webkit-appearance: none; padding: 8px 34px 8px 10px; border: 1px solid var(--line); border-radius: 8px; background-color: var(--card); color: var(--text); font: inherit;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
/* Inter, from the shared static content (served next to this stylesheet), with the system's font until it has arrived */
@font-face { font-family: Inter; src: url(fonts/Inter-Variable.woff2) format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
/* No pinch or double-tap zoom (the viewport tag says it for most browsers; this covers the ones that ignore the tag) */
html { touch-action: pan-x pan-y; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.45 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
main { max-width: 880px; margin: 0 auto; padding: 24px 16px; }
.content { flex: 1 1 0; min-width: 0; min-height: 0; padding: 24px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: none; }
/* (The scrolling part is as wide as the window, so that its scroll bar is at the window's edge; what is in it is 768 wide at most, in the middle) */
.content > * { width: 100%; max-width: 768px; align-self: center; flex: none; }
h1 { font-size: 24px; margin: 0 0 16px; }
h2 { font-size: 16px; margin: 0 0 8px; }
/* Bordered buttons, as the app's (PopoverActionStyle): as high as the fields and the form rows (--control-height), a radius of 8, 14 at the sides, the body's size; the main one is semibold on a tint of its colour at 38% with a line of it at 55%,
   the other (plain) is regular on the text colour at 4% with a line of it at 10% (the separator's); red is the text in red or the tint red; pressed it is a little different, and disabled it is faded to 40% */
button { font: inherit; font-size: 13px; font-weight: 600; padding: 0 14px; min-height: var(--control-height); border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 38%, transparent); color: var(--text); cursor: pointer; }
button:active:not(:disabled) { background: color-mix(in srgb, var(--accent) 30%, transparent); }
button.plain { font-weight: 400; background: color-mix(in srgb, var(--text) 4%, transparent); border-color: color-mix(in srgb, var(--text) 10%, transparent); }
button.plain:active:not(:disabled) { background: color-mix(in srgb, var(--text) 12%, transparent); }
button.danger { background: color-mix(in srgb, var(--bad) 38%, transparent); border-color: color-mix(in srgb, var(--bad) 55%, transparent); }
button.danger:active:not(:disabled) { background: color-mix(in srgb, var(--bad) 30%, transparent); }
button:disabled { opacity: .4; cursor: default; }
input, textarea { font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text); width: 100%; }
input[type=checkbox] { padding: 0; }
.bar { display: flex; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.bar .who { color: var(--muted); font-size: 13px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; margin: 12px 0; }
.row { border-top: 1px solid var(--line); }
.row-head { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; padding: 12px 0; cursor: pointer; }
.row .detail { padding: 0 0 12px; }
.row:first-child { border-top: 0; }
.row .key, code { font: 13px ui-monospace, Menlo, monospace; }
.muted { color: var(--muted); font-size: 12px; }
.state-active { color: var(--good); } .state-revoked, .state-refunded { color: var(--bad); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.problem { color: var(--bad); }
.log { font-size: 12px; color: var(--muted); }
label.inline { display: flex; gap: 8px; align-items: center; margin: 8px 0; } label.inline input { width: auto; }

/* The page is flex boxes: #app is a column (the bar at the top on a small screen, then the rest, which fills what is left), the shell is a row (the menu at the left, the section beside it, which takes the rest), and the menu is a column (title, sections, account and Sign Out at the bottom). On a narrow screen the menu pops down from the button in the bar. */
#app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
/* The window itself never scrolls or bounces: the bar and the menu stay, and the content (or, on the Feedback page, the list and the conversation) scrolls inside them */
body.site { height: 100vh; height: 100dvh; overflow: hidden; overscroll-behavior: none; }
.top { display: none; gap: 12px; align-items: center; position: sticky; top: 0; z-index: 2; height: 52px; padding: 0 16px; background: var(--card); border-bottom: 1px solid var(--line); }
.top h1 { font-size: 14px; font-weight: 400; margin: 0; }
.shell { display: flex; flex: 1; min-height: 0; }
.nav { display: flex; flex-direction: column; flex: none; width: 220px; align-self: stretch; overflow-y: auto; gap: 2px; padding: 12px 12px 16px; border-right: 1px solid var(--line); background: var(--card); }
.nav-item { display: block; color: var(--text); text-decoration: none; padding: 0 12px; border-radius: 8px; }
/* As the sidebar of System Settings: every item in the text colour, nothing under the pointer, and the open section filled with the accent colour behind white text */
.nav-item.current { background: color-mix(in srgb, var(--accent) 82%, black); color: #fff; }
.nav-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding: 12px 4px 0; border-top: 1px solid var(--line); }
.nav-foot .who { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.menu-button { display: none; }
@media (max-width: 720px) {
  .shell { flex-direction: column; position: relative; }
  .top { display: flex; flex: none; }
  /* (The menu, when it is opened with the button, fills the space under the bar that the section has) */
  .nav { display: none; position: absolute; inset: 0; width: auto; height: auto; z-index: 1; border-right: 0; padding: 12px; }
  .nav.open { display: flex; }
  .content { padding: 16px; }
}

dialog.modal { margin: auto; border: 1px solid var(--line); border-radius: 12px; padding: 20px; max-width: min(420px, calc(100vw - 32px)); background: var(--card); color: var(--text); }
dialog.modal::backdrop { background: rgba(0, 0, 0, .4); }
dialog.modal h2 { margin: 0 0 8px; }
dialog.modal .actions { justify-content: flex-end; }

.toolbar { display: flex; gap: 8px; align-items: center; }
.toolbar button { white-space: nowrap; }
dialog.modal input { margin-top: 4px; }
dialog.modal.wide { width: min(420px, calc(100vw - 32px)); max-width: none; }

/* The list of licenses has no padding of its own: its rows run edge to edge and each element has its own */
.card.list { padding: 0; overflow: hidden; }
.card.list .row-head { padding: 12px 16px; }
/* (Like a disclosure group: the chevron at the left, and what opens under the title, not under the chevron) */
.card.list .detail { padding: 0 16px 12px 42px; }
/* An empty list: the words alone, in the middle of the section */
.content > .empty-note { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; font-size: inherit; }
/* Whatever a section begins with starts at the same place (a card has a margin of its own that the search bar does not) */
.content > :first-child { margin-top: 0; }
.toolbar select { margin: 0; flex: 1; min-width: 0; }
button.red { color: var(--bad); }
.row-head.centered { align-items: center; }
dialog.modal .fields { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
dialog.modal .fields input { flex: 1; min-width: 0; margin: 0; }
dialog.modal .fields select { margin: 0; }
dialog.modal input[type=file] { margin-top: 8px; }

/* Successes: toasts that come up from the line above the signed-in administrator in the sidebar (`side`; its bottom and height are set by the page so they stay clear of the sections), or from the
   bottom of the screen (`bottom`: a short window, or the narrow screen), and fade by themselves. Failures and long messages are modal cards, not these. */
#toasts { position: fixed; z-index: 10; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; pointer-events: none; overflow: hidden; }
#toasts.side { left: 12px; width: 196px; }
#toasts.bottom { left: 16px; right: 16px; bottom: 16px; align-items: center; }
.toast { background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; font-size: 13px; box-shadow: 0 4px 16px rgba(0, 0, 0, .18); max-width: min(420px, 100%); animation: toast-in .2s ease-out; transition: opacity .4s ease; }
.toast.leaving { opacity: 0; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* A dialog that is working: a spinner beside the buttons, and why it failed if it did */
dialog.modal .problem { color: var(--bad); }
dialog.modal .actions { align-items: center; }
.spinner { width: 16px; height: 16px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
.spinner[hidden] { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
dialog.modal :disabled { cursor: default; }

/* The menu's items and Sign Out are as tall as the Remove… and Delete… buttons of the rows (12px text, 8px above and below, a border) */
.nav-item, .nav-foot button { height: 35px; display: flex; align-items: center; }
.nav-foot button { padding: 0 12px; justify-content: center; }

/* The name of the site at the top of the menu (on a small screen the top bar says where you are, and the menu drops down under it) */
.nav-title { display: flex; flex-direction: column; padding: 8px 12px 16px; line-height: 1.25; }
.nav-title strong { font-size: 16px; }
@media (max-width: 720px) { .nav-title { display: none; } }



/* A row of a list is one line, whatever the width: the email gives way first, then the detail on the right, each ending in an ellipsis (the X is a sibling, so it is never cut) */
.card.list > .row > .row-head > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.card.list > .row > .row-head > .chevron + span { flex: 1 3 auto; }
.card.list > .row > .row-head > .muted { flex: 0 1 auto; }
.card.list > .row > .row-head > button { flex: none; }

/* A row with a title and a subtitle under it (a license: its key, then its email) */
.card.list > .row > .row-head > .titled { display: flex; flex-direction: column; gap: 1px; }
.titled > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* (At least the height of a line of the body's text: a title in monospace, which sets its own line height, would make the row shorter than the others') */
.title-line { display: flex; align-items: center; gap: 4px; min-height: calc(14px * 1.45); }
.title-line code { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.subtitle { color: var(--subtitle); font-size: 11px; }

/* The email under a key, with its small icon buttons after it */
.titled > .subtitle-line { display: flex; align-items: center; gap: 2px; overflow: visible; }
.subtitle-line .subtitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; margin-right: 4px; }

/* The actions of an open row: icon and label in one, grey until pointed at (both change together) */
.action-row { display: flex; flex-wrap: wrap; gap: 4px 16px; }
/* (As the app's borderless buttons: the secondary colour at rest, 22 high, the body's size, a gap of 4 between icon and words, faded while pressed or disabled) */
button.action { display: inline-flex; align-items: center; gap: 4px; height: 22px; min-height: 0; font-weight: 400; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--subtitle); font-size: 13px; }
button.action:active:not(:disabled), button.action:disabled { opacity: .4; }
button.action:hover:not(.done) { color: var(--text); }
button.action.done { cursor: default; }

/* What is in an open row is spaced by a gap, not by margins of its own */
.detail { display: flex; flex-direction: column; gap: 8px; }
.detail > *, .detail p, .detail h2 { margin: 0; }
.stack { display: flex; flex-direction: column; gap: 4px; }

/* Rows slide open and shut: the panel is a grid whose one row grows from nothing to its content; the chevron turns with it */
.row > .collapse { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; }
.row > .collapse.open { grid-template-rows: 1fr; }
.collapse-inner { overflow: hidden; min-height: 0; }
.row-head .chevron { flex: none; align-self: center; color: var(--muted); transition: transform .25s ease; }
.row.open > .row-head .chevron { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .row > .collapse, .row-head .chevron { transition: none; } }

/* Grouped forms in the dialogs, as the app's Settings window has them: a rounded group on the page's grey, a label at the left and its control at the right, hairlines between the rows */
.form-group { background: var(--card); border-radius: 10px; overflow: hidden; }
.form-row { display: flex; align-items: center; gap: 12px; min-height: var(--control-height); padding: 6px 12px; cursor: default; font-size: 13px; line-height: 1.3; }
.form-row + .form-row { border-top: 1px solid var(--line); }
.form-label { flex: none; display: flex; flex-direction: column; }
/* (The app's sizes: a title of 13, the note under it of 11 in the secondary colour) */
.form-title { font-size: 13px; }
.form-note { font-size: 11px; color: var(--subtitle); }
.form-row input, .form-row select, .form-row textarea { flex: 1; min-width: 0; width: auto; margin: 0; padding: 4px 0; border: 0; border-radius: 0; background-color: transparent; text-align: right; outline: none; }
.form-row select { padding-right: 20px; background-position: calc(100% - 5px) 50%, calc(100% - 0px) 50%; text-align-last: right; cursor: pointer; }
.form-row input::placeholder, .form-row textarea::placeholder { color: var(--muted); }
.form-row.full { padding: 8px 12px; }
.form-row textarea { text-align: left; resize: none; min-height: 120px; line-height: 1.4; }
.form-row .file-choice { margin-left: auto; min-width: 0; display: flex; }
.file-choice button.action { max-width: 220px; }
.file-choice button.action span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The switch: a pill with a round knob, on in the accent colour */
.form-row input.switch { appearance: none; -webkit-appearance: none; flex: none; margin-left: auto; position: relative; width: 38px; height: 22px; padding: 0; border-radius: 11px; background-color: var(--line); cursor: pointer; transition: background-color .2s ease; }
.form-row input.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: transform .2s ease; }
.form-row input.switch:checked { background-color: var(--accent); }
.form-row input.switch:checked::after { transform: translateX(16px); }
.form-row input.switch:disabled { opacity: .5; }

/* A heading inside an open row ("History") is the size of the app's section headings (the AI pane's): the body's size, bold */
.detail h2 { font-size: 13px; font-weight: 700; }

/* The grey text inside an open row (the dates, the Macs, the history, "no notes") is a subtitle too: the same size and colour */
.detail .muted, .detail .log { font-size: 11px; color: var(--subtitle); }


/* The search fields, as the app's filter field: the filter icon, a plain field, a clear button when there is text */
.toolbar > .filter { flex: 1; min-width: 0; }
.filter { display: flex; align-items: center; min-height: var(--control-height); gap: 8px; padding: 0 10px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; color: var(--subtitle); }
.filter:focus-within { border-color: var(--accent); }
.filter > svg { flex: none; }
.filter input { flex: 1; min-width: 0; width: auto; margin: 0; padding: 8px 0; border: 0; border-radius: 0; background: transparent; outline: none; color: var(--text); }
.filter input::placeholder { color: var(--subtitle); opacity: .8; }
.filter .clear { flex: none; min-height: 0; display: inline-flex; padding: 0; border: 0; background: transparent; color: var(--subtitle); cursor: pointer; }
.filter .clear[hidden] { display: none; }

/* The dialog is the app's card (AlertCard): 380 wide, a radius of 12 with a line of the text colour at 25%, the window's colour (#ececec, AppKit's windowBackgroundColor; a blurred dark one in the dark), a soft shadow; the heading
   bold at the left over the text in the secondary colour, 20 of room around them; the buttons in a row of 10 at the bottom, 12 from the sides and the bottom, sharing the width */
dialog.modal { width: min(380px, calc(100vw - 32px)); max-width: none; padding: 0; border: 1px solid color-mix(in srgb, var(--text) 25%, transparent); border-radius: 12px; background: #ececec; box-shadow: 0 0 16px rgba(0, 0, 0, .3); overflow: visible; }
dialog.modal.wide { width: min(420px, calc(100vw - 32px)); }
/* (Dark, measured from the app's own card: the card is 40,40,40 and its form rows 46,46,46) */
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) dialog.modal { background: rgb(40, 40, 40); } }
/* (14 below the text: in the app's card the text ends about 14pt over the buttons, measured from a screenshot) */
dialog.modal .card-body { display: flex; flex-direction: column; gap: 6px; padding: 20px 20px 14px; }
dialog.modal h2 { margin: 0; font-size: 13px; font-weight: 700; }
dialog.modal .card-body > .muted, dialog.modal .problem { font-size: 13px; color: var(--subtitle); }
dialog.modal .problem { color: var(--bad); }
dialog.modal .form-group { margin-top: 0; }
dialog.modal > .actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin: 0; padding: 0 12px 12px; }
dialog.modal > .actions button { flex: 1; }
dialog.modal > .actions .spinner { flex: none; }

/* (The dialog's own margin above an input, 4, is not for the fields in a form row: it pushed the switch, and the other fields, down) */
dialog.modal .form-row input, dialog.modal .form-row select, dialog.modal .form-row textarea { margin-top: 0; margin-bottom: 0; }


/* The group has a thin outline of its own, and the lines between its rows are the same */
.form-group { border: 1px solid color-mix(in srgb, var(--text) 14%, transparent); }
.form-row + .form-row { border-top-color: color-mix(in srgb, var(--text) 14%, transparent); }

/* The drop-down: the select without its own arrow, and a stroked chevron over its right end (the same as the rows') */
.select { position: relative; display: flex; }
.select > select { flex: 1; width: 100%; min-width: 0; background-image: none; padding-right: 34px; }
.select > svg { position: absolute; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--subtitle); }
.select > svg.arrow { right: 12px; }
.toolbar > .select { flex: 1; min-width: 0; }
.form-row > .select { flex: 1; min-width: 0; }
.form-row .select > select { padding-right: 20px; }
.form-row .select > svg.arrow { right: 0; }

/* The text of a card is a subtitle: its size and colour */
dialog.modal .card-body > .muted { font-size: 11px; color: var(--subtitle); }
/* A borderless button has no fill when pressed (the bordered buttons' pressed fill is not for it), and no ring after a click */
button.action:active:not(:disabled), .filter .clear:active:not(:disabled) { background: transparent; }
button.action:focus:not(:focus-visible), .filter .clear:focus:not(:focus-visible) { outline: none; }
button { -webkit-tap-highlight-color: transparent; }
/* The lines between a form's rows do not run to its edges: they begin and end 12 in, as the text does */
.form-row + .form-row { position: relative; border-top: 0; }
.form-row + .form-row::before { content: ''; position: absolute; top: 0; left: 12px; right: 12px; border-top: 1px solid color-mix(in srgb, var(--text) 14%, transparent); }

/* The card's heading is centered (the app's CardHeading) */
dialog.modal h2 { text-align: center; }

/* A passkey in an open administrator: when it was last used, what it is, and Delete at the right */
.passkey { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.passkey > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.passkey-title { font-size: 13px; }
.passkey button.action { flex: none; }
button.action.icon-only { width: 26px; justify-content: center; }
button.action.icon-only svg { width: 18px; height: 18px; }

/* A line above each passkey (and so between them), across the open row's content and not its whole width */
.stack:has(> .passkey) { gap: 0; }
.passkey { padding: 8px 0; border-top: 1px solid color-mix(in srgb, var(--text) 14%, transparent); }
.passkey:last-child { padding-bottom: 0; }

/* The spacing between what a section holds is a gap (12), the same between the search and its button as between the toolbar and the list under it: no margins on the cards */
.content { display: flex; flex-direction: column; gap: 12px; }
.content > .card { margin: 0; }
.toolbar { gap: 12px; }

/* No flash of colour where a finger touches the page (the rows that open, the menu, the buttons) */
html { -webkit-tap-highlight-color: transparent; }
.row-head { -webkit-user-select: none; user-select: none; }

/* The small screen's bar: the menu button is a borderless icon button (the app's), a little larger for a finger, and the title is a heading's size */
/* (The bar and the conversation's header are the same on a small screen, and as the conversation's header is on a large one: 16 at the sides, 12 between, the 14 of its title; 58 is its height there, two lines and 10 above and below) */
.top { height: 58px; gap: 12px; padding: 0 16px; }
.top .menu-button { width: 32px; height: 32px; }

/* At least 12 between the last section and the footer (the footer is pushed to the bottom when there is room; the menu's gap of 2 is part of the 12) */
.nav-item:last-of-type { margin-bottom: 10px; }

/* A drop-down with an icon at its left (the channel filter), where the search fields have theirs: the same distance from the edge */
.select.with-icon > svg.leading { left: 11px; }
.select.with-icon > select { padding-left: 32px; }

/* The channel drop-down has the outline of the text inputs: the same line, radius and height, and the accent line while it has the focus */
.select > select { min-height: var(--control-height); border: 1px solid var(--line); border-radius: 8px; background-color: var(--card); outline: none; }
.select:focus-within > select { border-color: var(--accent); }
.form-row .select > select { min-height: 0; border: 0; border-radius: 0; background-color: transparent; }
.form-row .select:focus-within > select { border-color: transparent; }

/* As the system's grouped forms: 20 of room around the content, and every line between rows, and around a group, is the separator colour (the text at 10%, a hairline); a row has 10 at its sides and its divider
   begins and ends there */
:root { --separator: color-mix(in srgb, var(--text) 10%, transparent); }
.content { padding: 20px; }
.card, .form-group { border-color: var(--separator); }
.row { border-top-color: var(--separator); }
.passkey { border-top-color: var(--separator); }
.form-row { padding-left: 10px; padding-right: 10px; }
.form-row + .form-row::before { left: 10px; right: 10px; border-top-color: var(--separator); }
@media (max-width: 720px) { .content { padding: 16px; } }

/* The outline of every control (the text inputs, the drop-downs, the search fields) is one line, the same as the form rows' (the separator colour); the accent while it has the focus */
:root { --control-line: var(--separator); }
input, textarea, select, .filter, .select > select { border-color: var(--control-line); }
.filter:focus-within, .select:focus-within > select, input:focus, textarea:focus { border-color: var(--accent); }
.filter input:focus { border-color: transparent; }
.form-row input, .form-row select, .form-row textarea { border-color: transparent; }

/* A grouped form's rows are lighter than the card they are on (white on the grey card; in the dark, a little white over it), as the app's are */
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) .form-group { background: rgb(46, 46, 46); } }

/* (Styles are not set from the script: the page's policy allows none inline) */
.filter .clear svg path:last-child { stroke: var(--card); }
p.notes { white-space: pre-wrap; }

/* A row whose channel is on its first line: the title lines take the whole width, and the channel is at the right of the first */
.card.list > .row > .row-head > .titled.wide { flex: 1; }
.titled.wide { flex-grow: 1; }
.title-line .channel { margin-left: auto; }
.problem-text { color: var(--bad); }
.form-row .muted:not(.file-choice), .form-row .problem-text { margin-left: auto; text-align: right; }

/* Feedback: the list at the left and the conversation at the right; on a narrow screen the list is above the conversation */
.content.feedback-page { overflow: hidden; }
.content.feedback-page > * { max-width: none; flex: 1; min-height: 0; }
.feedback { display: flex; flex-direction: row; gap: 12px; }
.feedback .report-list { flex: 0 1 320px; min-width: 240px; }
.feedback .report-pane { flex: 1; min-width: 0; }
.feedback .card { margin: 0; }
.report-list { display: flex; flex-direction: column; overflow-y: auto; padding: 4px 0; }
.report-list > * { flex: none; }
.report-row { display: flex; align-items: center; }
.report-row + .report-row { border-top: 1px solid var(--line); }
.report-row.menu-open { background: color-mix(in srgb, var(--text) 8%, transparent); }
.report-row.current { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.report-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 0; padding: 12px; border: 0; border-radius: 0; background: transparent; font-weight: 400; text-align: left; color: var(--text); }
.report-main:active:not(:disabled) { background: color-mix(in srgb, var(--text) 8%, transparent); }
.report-row .titled { min-width: 0; }
/* The name and the time are centred in their line, and the time is at the right end of it */
.report-row .title-line { align-items: center; }
.report-row .title-line .channel { margin-left: auto; }
.report-row .subtitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
/* Unread: the number under the time, and the text in bold */
.unread-count { flex: none; margin-left: auto; min-width: 18px; height: 18px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 600; }
.report-row.unread .title-line, .report-row.unread .subtitle { font-weight: 600; }
.report-list > .muted { flex: 1; display: flex; align-items: center; justify-content: center; padding: 16px; text-align: center; }
.report-pane { display: flex; flex-direction: column; min-height: 0; padding: 0; overflow: hidden; }
.report-pane.empty { align-items: center; justify-content: center; }
.report-head { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.report-head .titled { min-width: 0; }
.thread { flex: 1; min-height: 0; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.bubble-row { display: flex; }
.bubble-row.admin { justify-content: flex-end; }
.bubble-col { max-width: min(80%, 520px); min-width: 0; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.bubble-row.admin .bubble-col { align-items: flex-end; text-align: right; }
.meta { display: flex; flex-direction: column; padding: 0 4px; font-size: 11px; color: var(--subtitle); overflow-wrap: anywhere; }
.bubble { max-width: 100%; padding: 8px 12px; border-radius: 14px; background: color-mix(in srgb, var(--text) 8%, transparent); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bubble-row.admin .bubble { background: color-mix(in srgb, var(--accent) 38%, transparent); }
.bubble p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.attachment { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); text-decoration: none; min-width: 0; max-width: 100%; padding: 2px 6px; margin: -2px -6px; border-radius: 6px; cursor: pointer; }
.attachment:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.attachment:active { background: color-mix(in srgb, var(--accent) 26%, transparent); }
.attachment span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* (The size stays on the line with the name; the name is what is cut short) */
.attachment svg, .attachment span:last-of-type { flex: none; white-space: nowrap; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px 0; }
/* (The divider is above the files that are about to be sent, as well as the field) */
.compose-box { border-top: 1px solid var(--line); }
.chips:empty { display: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px 2px 10px; border-radius: 12px; background: color-mix(in srgb, var(--text) 8%, transparent); font-size: 12px; }
.chip-remove { min-height: 0; width: 20px; height: 20px; padding: 0; border: 0; background: transparent; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; }
/* The composer is the app's: a field with no box of its own, and square buttons (34, the app's) at the bottom of it */
.composer { padding: 10px 12px 10px 16px; display: flex; align-items: flex-end; gap: 10px; }
.composer textarea { flex: 1; min-width: 0; margin: 0; padding: 8px 0; border: 0; border-radius: 0; background: transparent; resize: none; min-height: 34px; max-height: 132px; line-height: 18px; outline: none; }
button.square { flex: none; width: 34px; min-height: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
button.square svg { width: 16px; height: 16px; }
/* On a small screen: the list is the page, and a chosen conversation is a page of its own over the whole screen, header included, with a back button in its header */
button.report-back { display: none; }
@media (max-width: 720px) {
  .feedback { flex: 1; flex-direction: column; height: auto; min-height: 0; }
  .feedback .report-list { flex: 1; min-width: 0; }
  .feedback:not(.viewing) .report-pane { display: none; }
  .feedback.viewing .report-list { display: none; }
  .feedback.viewing .report-pane { position: fixed; inset: 0; z-index: 4; height: 100%; border: 0; border-radius: 0; margin: 0; background: var(--bg); }
  .feedback.viewing .report-head, .feedback.viewing .compose-box { background: var(--card); }
  /* (On the page background, not a card, the lines under the messages are dimmer) */
  .feedback.viewing .meta { color: color-mix(in srgb, var(--text) 50%, transparent); }
  button.report-back { display: inline-flex; flex: none; width: 32px; height: 32px; }
  /* (The same as the site's bar, which the conversation's header covers) */
  .report-head { height: 58px; flex: none; padding: 0 16px; gap: 12px; }
}
.report-list-head { padding: 8px 12px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.report-list-head .select { flex: 1; min-width: 0; max-width: 160px; }
.report-list-head select { margin: 0; width: 100%; }

/* The sign-in and register pages: the page's own background (the one the content is on), with the prompt on a card made as a modal dialog (the same border, radius, padding and width), in the middle */
main.auth { max-width: none; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--bg); }
.dialog-card { width: min(420px, 100%); border: 1px solid var(--line); border-radius: 12px; padding: 20px; background: var(--card); color: var(--text); box-shadow: 0 8px 32px rgba(0, 0, 0, .18); }
.dialog-card h2 { margin: 0 0 8px; }
.dialog-card .muted, .dialog-card .problem { font-size: 13px; color: var(--subtitle); }
.dialog-card .problem { color: var(--bad); margin: 8px 0 0; }
.dialog-card button { margin-top: 12px; width: 100%; }

/* Offline: the whole page blank, with the content's background, and the words in the middle */
#offline-screen { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: var(--bg); color: var(--muted); font-size: 14px; }
#offline-screen[hidden] { display: none; }

/* The context menu (a right click on a row of the Feedback list) */
#context-menu { position: fixed; z-index: 20; min-width: 160px; padding: 4px; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .22); }
.context-item { display: flex; align-items: center; min-height: 28px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: var(--text); font-size: 13px; font-weight: 400; text-align: left; }
.context-item:hover, .context-item:focus-visible { background: color-mix(in srgb, var(--accent) 82%, black); color: #fff; outline: none; }
.context-item.danger { color: var(--bad); background: transparent; border-color: transparent; }
.context-item.danger:hover, .context-item.danger:focus-visible, .context-item.danger:active:not(:disabled) { background: color-mix(in srgb, var(--bad) 75%, black); color: #fff; }

/* A line of the app's own in the conversation: centred, small and quiet */
.notice-row { display: flex; justify-content: center; }
.notice { padding: 2px 12px; font-size: 12px; color: var(--subtitle); text-align: center; }

/* A search or a filter has nothing to work on while the list has no items at all */
.filter:has(input:disabled), .select:has(select:disabled) { opacity: .6; }
input:disabled, select:disabled { cursor: default; }

/* The filter row at the top of the conversation list: as the log windows', the icon and the field, no box, no corners */
.report-filter { display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 36px; flex: none; border-bottom: 1px solid var(--line); color: var(--subtitle); }
.report-filter input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--text); font-size: 13px; outline: none; box-shadow: none; }
.report-filter .clear { position: static; flex: none; width: auto; height: auto; display: inline-flex; padding: 0; border: 0; background: transparent; color: var(--subtitle); }
.report-filter .clear[hidden] { display: none; }
.report-filter > svg { flex: none; }
/* (The clear button is as the other filters': a round x, 18px, in the line's centre) */
.report-filter .clear { align-items: center; justify-content: center; width: 20px; height: 20px; cursor: pointer; }
.report-filter .clear svg { width: 18px; height: 18px; }
.report-filter .clear svg path:last-child { stroke: var(--card); }
/* The key beside the conversation's title: no border, no fill */
/* (Square, 1:1: the plain button's minimum height would make it taller than wide; and no background at any state) */
button.key-button { flex: none; width: 28px; height: 28px; min-width: 0; min-height: 0; aspect-ratio: 1 / 1; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 0; background: transparent; color: var(--subtitle); }
button.key-button:hover:not(:disabled), button.key-button:active:not(:disabled), button.key-button:focus { background: transparent; box-shadow: none; }
button.key-button:hover:not(:disabled) { color: var(--text); }
button.key-button svg { width: 18px; height: 18px; }