/* ==========================================================================
   Developer Key page (developer-keys.js) and the admin Developer Key Queue
   (admin-developer-keys.js).
   Grouped inset lists on the hig-theme.css tokens, so Light, Dark and Auto follow the
   appearance menu. Pills, buttons and the confirm sheet are the portal's own si-acct-*
   classes from account-status.css.
   ========================================================================== */

.dk-page { max-width: 760px; margin: 0 auto 48px; color: var(--hig-label); font-family: var(--hig-font); }
/* The page title lines up with the centered column below it. */
.dk-shell .page-header > .container-fluid { max-width: calc(760px + var(--bs-gutter-x, 1.5rem)); margin-left: auto; margin-right: auto; }

.dk-section + .dk-section { margin-top: 34px; }
.dk-section-head { margin: 0 4px 10px; }
.dk-section-title { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--hig-label); }
.dk-section-sub { margin: 3px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--hig-label2); }
.dk-section-sub a, .dk-foot a, .dk-link { color: var(--hig-tint-text); text-decoration: none; }
.dk-section-sub a:hover, .dk-foot a:hover, .dk-link:hover { text-decoration: underline; text-underline-offset: 2px; }

.dk-cap {
    margin: 18px 16px 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--hig-label2);
}
.dk-cap:first-child { margin-top: 0; }
.dk-group { background: var(--hig-bg2); border-radius: var(--hig-radius, 10px); overflow: hidden; }
.dk-group > * + * { border-top: var(--hig-hairline, 0.5px) solid var(--hig-separator); }
.dk-foot { margin: 7px 16px 0; font-size: 12.5px; line-height: 1.45; color: var(--hig-label2); }
.dk-empty { padding: 22px 16px; text-align: center; font-size: 14px; color: var(--hig-label2); }
.dk-loading { padding: 40px 16px; text-align: center; font-size: 14px; color: var(--hig-label2); }

/* Banners: a soft tint of the semantic color with a hairline edge. */
.dk-banner {
    display: flex; gap: 10px; align-items: flex-start; margin: 0 0 18px; padding: 12px 14px;
    border-radius: var(--hig-radius-lg, 14px); font-size: 14px; line-height: 1.45; color: var(--hig-label);
    background: color-mix(in srgb, var(--dk-tone, var(--hig-gray)) 12%, var(--hig-bg2));
    border: var(--hig-hairline, 0.5px) solid color-mix(in srgb, var(--dk-tone, var(--hig-gray)) 36%, transparent);
}
.dk-banner > i { flex: none; margin-top: 3px; font-size: 15px; color: var(--dk-tone-text, var(--hig-label2)); }
.dk-banner p { margin: 0; }
.dk-banner p + p { margin-top: 4px; }
.dk-banner strong { font-weight: 600; }
.dk-banner.is-success { --dk-tone: var(--hig-green); --dk-tone-text: var(--hig-green-text); }
.dk-banner.is-info { --dk-tone: var(--hig-tint); --dk-tone-text: var(--hig-tint-text); }
.dk-banner.is-warning { --dk-tone: var(--hig-orange); --dk-tone-text: var(--hig-orange-text); }
.dk-banner.is-error { --dk-tone: var(--hig-red); --dk-tone-text: var(--hig-red-text); }
.dk-banner-body { min-width: 0; flex: 1; }

/* An issued key: monospace in a well, with Copy beside it. */
.dk-keybox { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.dk-key {
    flex: 1; min-width: 0; padding: 8px 10px; border-radius: 8px; background: var(--hig-fill3);
    font-family: var(--hig-font-mono); font-size: 13px; line-height: 1.35; color: var(--hig-label);
    overflow-wrap: anywhere; user-select: all;
}
.dk-copy {
    appearance: none; flex: none; border: 0; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600;
    min-width: 64px; height: 32px; padding: 0 12px; border-radius: 8px;
    background: var(--hig-fill3); color: var(--hig-tint-text);
}
.dk-copy:hover { background: var(--hig-fill2); }
.dk-copy.is-done { color: var(--hig-green-text); }

/* One application in "Your Developer Keys" and in the queue. */
.dk-item { padding: 13px 16px; }
.dk-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.dk-item-name { font-size: 15px; font-weight: 600; color: var(--hig-label); overflow-wrap: anywhere; }
.dk-item-meta { margin-top: 2px; font-size: 13px; color: var(--hig-label2); overflow-wrap: anywhere; }
.dk-item-note { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: var(--hig-label2); white-space: pre-wrap; overflow-wrap: anywhere; }
.dk-item-note strong { font-weight: 600; color: var(--hig-label); }
.dk-pills { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }

button.dk-item, a.dk-item {
    appearance: none; display: flex; align-items: center; gap: 12px; width: 100%; border: 0;
    background: transparent; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer;
}
button.dk-item:hover, a.dk-item:hover { background: var(--hig-fill4); }
.dk-item-main { flex: 1; min-width: 0; }
.dk-chev { flex: none; color: var(--hig-label3); font-size: 18px; line-height: 1; }

/* Intended use: two radio rows with a checkmark. */
.dk-choice {
    appearance: none; display: flex; align-items: flex-start; gap: 12px; width: 100%; border: 0;
    padding: 12px 16px; background: transparent; color: var(--hig-label); font: inherit; text-align: left; cursor: pointer;
}
.dk-choice:hover:not(:disabled) { background: var(--hig-fill4); }
.dk-choice:disabled { cursor: default; }
.dk-choice:disabled .dk-choice-title { color: var(--hig-label2); }
.dk-choice-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.dk-choice-title { font-size: 15px; font-weight: 500; }
.dk-choice-sub { font-size: 13px; line-height: 1.4; color: var(--hig-label2); }
.dk-choice-check { flex: none; width: 18px; margin-top: 2px; text-align: center; font-size: 14px; color: var(--hig-tint-text); visibility: hidden; }
.dk-choice[aria-checked="true"] .dk-choice-check { visibility: visible; }

/* Form rows: label on the left, control on the right; stacked on a phone. */
.dk-field { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 4px 16px; align-items: start; padding: 10px 16px; margin: 0; }
.dk-field-label { padding-top: 7px; font-size: 14px; font-weight: 500; color: var(--hig-label); }
.dk-field-label small { display: block; margin-top: 1px; font-size: 12px; font-weight: 400; color: var(--hig-label2); }
.dk-field-control { min-width: 0; }
.dk-input, .dk-textarea {
    appearance: none; display: block; width: 100%; margin: 0; padding: 7px 10px;
    border: var(--hig-hairline, 0.5px) solid var(--hig-separator); border-radius: 8px;
    background: var(--hig-bg); color: var(--hig-label);
    font: inherit; font-size: 14px; line-height: 1.4; box-shadow: none; outline: 0;
}
.dk-textarea { min-height: 96px; resize: vertical; }
.dk-input::placeholder, .dk-textarea::placeholder { color: var(--hig-label3); }
.dk-input:focus, .dk-textarea:focus { border-color: var(--hig-tint); box-shadow: 0 0 0 3px var(--hig-focus); }
.dk-field.has-error .dk-input, .dk-field.has-error .dk-textarea { border-color: var(--hig-red); }
.dk-field-help { display: flex; justify-content: space-between; gap: 12px; margin-top: 4px; font-size: 12px; color: var(--hig-label2); }
.dk-field-error { color: var(--hig-red-text); }
.dk-count { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dk-count.is-over { color: var(--hig-red-text); }

.dk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 18px 4px 0; }
.dk-actions .si-acct-btn { min-width: 170px; }
.dk-actions-note { font-size: 12.5px; color: var(--hig-label2); }
.dk-form-error { margin: 12px 16px 0; font-size: 13.5px; color: var(--hig-red-text); }
.dk-form-error:empty { display: none; }

/* Admin queue */
.dk-segments { display: inline-flex; padding: 2px; border-radius: 9px; background: var(--hig-fill3); margin-bottom: 14px; }
.dk-segment {
    appearance: none; border: 0; cursor: pointer; font: inherit; font-size: 13px; font-weight: 500;
    padding: 5px 14px; border-radius: 7px; background: transparent; color: var(--hig-label); white-space: nowrap;
}
.dk-segment[aria-selected="true"] { background: var(--hig-control, var(--hig-bg2)); box-shadow: var(--hig-control-shadow, none); font-weight: 600; }
.dk-segment-count { margin-left: 5px; color: var(--hig-label2); font-variant-numeric: tabular-nums; }

.dk-back {
    appearance: none; border: 0; background: none; cursor: pointer; font: inherit; font-size: 14px;
    padding: 4px 6px 4px 0; margin: 0 0 12px; color: var(--hig-tint-text);
}
.dk-back:hover { text-decoration: underline; text-underline-offset: 2px; }
.dk-detail-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 4px 16px; }
.dk-detail-title { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--hig-label); overflow-wrap: anywhere; }
.dk-row { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 2px 16px; padding: 10px 16px; font-size: 14px; }
.dk-row-label { color: var(--hig-label2); }
.dk-row-value { color: var(--hig-label); min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.dk-row-value.is-mono { font-family: var(--hig-font-mono); font-size: 13px; }
.dk-row-value .dk-flag { color: var(--hig-red-text); font-weight: 600; }
.dk-decision { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 4px 0; }
.dk-decision .si-acct-btn { min-width: 190px; }

.dk-sheet-reason { padding: 10px 12px; }
.dk-sheet-reason .dk-textarea { background: var(--hig-bg); min-height: 84px; }
.dk-sheet-error { margin: 0; font-size: 13px; color: var(--hig-red-text); text-align: center; }
.dk-sheet-error:empty { display: none; }

.dk-page :is(.dk-copy, .dk-choice, .dk-segment, .dk-back, button.dk-item, a.dk-item, .dk-link):focus-visible {
    outline: 3px solid var(--hig-focus, rgba(184, 137, 42, 0.4)); outline-offset: -1px; border-radius: 8px;
}

@media (max-width: 640px) {
    .dk-field, .dk-row { grid-template-columns: minmax(0, 1fr); }
    .dk-field-label { padding-top: 0; }
    .dk-pills { margin-left: 0; }
    .dk-actions .si-acct-btn, .dk-decision .si-acct-btn { width: 100%; }
    .dk-keybox { flex-wrap: wrap; }
    .dk-segments { display: flex; }
    .dk-segment { flex: 1; padding: 6px 4px; }
}