/* The Match Coder app (coder.html, html.app-coder): its own bar with the app's name and icon, where the tags are
   kept and who is signed in, in place of the Hub's menus, rail and footer. The coder below it is the Hub's own */

html.app-coder .mainnav, html.app-coder .hnav, html.app-coder .hmenu, html.app-coder .rail, html.app-coder #provenance { display: none; }
html.app-coder .app { grid-template-columns: minmax(0, 1fr); }
html.app-coder .content { grid-column: 1; }

.app-bar { gap: 16px; height: 64px; }
.app-brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; font-size: 22px; white-space: nowrap; }
.app-icon { flex: none; width: 30px; height: 30px; border-radius: 8px; box-shadow: 0 0 0 1px var(--line); }
.app-bar .actions { min-width: 0; }
.app-bar .pill svg, .app-card .pill svg, .app-dialog .pill svg { width: 14px; height: 14px; margin: -2px 6px -2px 0; vertical-align: middle; }
.app-install-btn[hidden] { display: none; }

/* where the tags are: a pill with a dot, green while all is well (and, with the server, sent to the Hub) */
.app-sync { display: inline-flex; align-items: center; gap: 7px; min-width: 0; padding: 7px 12px; border-radius: 999px; background: var(--head); color: var(--ink); font-size: 12px; font-weight: 700; white-space: nowrap; }
.app-sync::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--win); box-shadow: 0 0 0 3px color-mix(in srgb, var(--win) 22%, transparent); }
.app-sync:not([data-state="ok"])::before { background: var(--tbp); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tbp) 22%, transparent); }
.app-sync .short { display: none; }

/* the analyst signed in (filled once there are logins) */
.app-user { font-size: 12px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.app-user:empty { display: none; }

/* the match list: the save line on the left, its buttons on the right */
html.app-coder .coder-saveline { justify-content: flex-end; }
html.app-coder .coder-saveline .ok { margin-right: auto; }

/* the cards above the steps: the welcome (moving the tags from the browser) and installing the app */
#app-cards:empty { display: none; }
#app-cards { display: grid; gap: 10px; margin: 0 0 14px; }
.app-card { display: flex; align-items: center; gap: 16px; padding: 14px 18px 14px 14px; border-radius: var(--radius); background: var(--tile); }
.app-card img { flex: none; width: 56px; height: 56px; border-radius: 12px; }
.app-card-text { flex: 1 1 auto; min-width: 0; }
.app-card h3 { margin: 0 0 3px; font-size: 16px; font-weight: 800; font-style: italic; letter-spacing: -0.01em; }
.app-card p { margin: 0; color: var(--ink-2); font-size: 13px; text-wrap: pretty; }
.app-card-actions { display: flex; flex: none; align-items: center; gap: 10px; }
.app-card .pill, .app-dialog .pill { padding: 9px 16px; font-size: 13px; }
.pill.quiet { background: transparent; box-shadow: none; }
.pill.quiet:hover { background: var(--soft); }

/* the dialogs: the steps (numbers, a tick once done), the file picked and what it holds */
.import-dialog.app-dialog { background: var(--page); }
.app-dialog .title { font-size: 19px; }
.app-dialog .title:focus { outline: none; }
.app-dialog .import-form > p { color: var(--ink-2); }
.app-steps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.app-steps-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.app-steps li { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: start; gap: 12px; padding: 12px 14px; border-radius: var(--radius); background: var(--card); font-size: 13px; }
.app-steps li > span { display: block; text-wrap: pretty; }
.app-steps li > span > .pill, .app-steps li > span > .app-error { display: flex; width: fit-content; margin-top: 10px; }
.app-steps li > span > .mac-menu { margin-top: 10px; }
.app-step-n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--on-ink); font-size: 12px; font-weight: 800; }
.app-steps li.done .app-step-n { background: var(--lime); color: var(--on-lime); }
.app-key { display: inline-grid; place-items: center; width: 24px; height: 20px; margin: 0 2px; border-radius: 5px; background: var(--tile); vertical-align: middle; }
.app-key svg { width: 13px; height: 13px; }
.app-error { color: var(--red); font-style: normal; font-weight: 700; }
.app-file { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius); background: var(--card); font-size: 13px; }
.app-file > svg { flex: none; width: 20px; height: 20px; color: var(--ink-2); }
.app-file > span:first-of-type { display: grid; min-width: 0; }
.app-file b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-file small { color: var(--ink-3); font-size: 11.5px; }
.app-file-n { margin-left: auto; color: var(--ink-2); white-space: nowrap; }
.app-table-wrap { max-height: 220px; overflow: auto; border-radius: var(--radius); background: var(--card); }
.app-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.app-table th { position: sticky; top: 0; padding: 8px 10px; background: var(--card); color: var(--ink-3); font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-align: left; text-transform: uppercase; }
.app-table td { padding: 7px 10px; border-top: 1px solid var(--line); }
.app-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.app-chip { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--tile); color: var(--ink-2); font-size: 11px; font-style: normal; font-weight: 700; white-space: nowrap; }
.app-chip.new { background: var(--lime); color: var(--on-lime); }
.app-note { padding: 10px 14px; border-radius: var(--radius); background: color-mix(in srgb, var(--red) 12%, var(--card)); font-size: 13px; }
.app-who { display: grid; gap: 6px; margin: 0; padding: 12px 14px; border: 0; border-radius: var(--radius); background: var(--card); font-size: 13px; }
.app-who legend { float: left; margin-bottom: 4px; font-weight: 700; }
.app-who label { display: flex; align-items: baseline; gap: 8px; }
.app-who small { color: var(--ink-3); }

/* Safari's File menu, drawn small, to show where Add to Dock is */
.mac-menu { display: grid; width: 220px; overflow: hidden; border-radius: 7px; background: var(--card); box-shadow: 0 0 0 1px var(--box-line), 0 6px 18px rgba(0, 0, 0, 0.12); font-size: 11.5px; }
.mac-menu i { font-style: normal; }
.mac-bar { display: flex; gap: 2px; padding: 4px 6px; background: var(--tile); font-weight: 700; }
.mac-bar i { padding: 1px 7px; border-radius: 4px; }
.mac-bar i.on { background: var(--box-line); }
.mac-items { display: grid; padding: 4px; }
.mac-items i { padding: 3px 8px; border-radius: 4px; }
.mac-items i.sep { height: 1px; margin: 3px 6px; padding: 0; background: var(--line); }
.mac-items i.pick { background: #2f7cf6; color: #fff; }

@media screen and (max-width: 760px) {
  html.app-coder .app-bar { height: 56px; margin: 0 -16px 12px; padding: 0 16px; gap: 10px; border-bottom: 1px solid var(--line); background: var(--card); }
  html.app-coder .topbar > .app-brand, html.app-coder .topbar > .actions { display: flex; }
  .app-brand { gap: 8px; font-size: 18px; }
  .app-icon { width: 28px; height: 28px; border-radius: 7px; }
  .app-bar .iconbtn, .app-bar .avatar { width: 34px; height: 34px; }
  .app-install-btn { display: none; }
  /* the pill shrinks to its dot; the words stay for screen readers and in its tooltip */
  .app-sync { padding: 9px; }
  .app-sync .long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .app-card { flex-wrap: wrap; align-items: flex-start; gap: 10px 14px; padding: 14px; }
  .app-card img { width: 48px; height: 48px; border-radius: 10px; }
  .app-card-text { flex-basis: calc(100% - 62px); }
  .app-card-actions { width: 100%; }
  .app-steps-3 { grid-template-columns: minmax(0, 1fr); }
  .app-file { flex-wrap: wrap; }
  .app-file > span:first-of-type { flex: 1 1 calc(100% - 40px); }
  .app-file-n { margin-left: 32px; }
  /* the dialogs come up from the bottom, as a sheet */
  .app-dialog.sheet { width: 100%; max-width: none; max-height: calc(100dvh - 40px); margin: auto 0 0; border-radius: 16px 16px 0 0; }
  .app-table th:nth-child(2), .app-table th:nth-child(3) { white-space: normal; }
}