/* The application. Same tokens as the marketing site so the two do not feel
 * like different products, but none of the hero furniture. */

/* The `hidden` attribute is only `display: none` from the user-agent
 * stylesheet, so any author rule that sets `display` silently beats it. Every
 * element this interface hides also carries a display rule — .nav-right is
 * flex, .field is block — which left the sign-out button and the recovery and
 * claim-code fields painted at all times regardless of state.
 *
 * This has to be !important: the whole point is to outrank the specific rules
 * that would otherwise win. */
[hidden] { display: none !important; }

.app-nav { border-bottom: 1px solid var(--border); background: var(--panel); position: sticky; top: 0; z-index: 40; }
.app-nav .wrap { display: flex; align-items: center; gap: 14px; height: 62px; }
.nav-right { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.who { font-size: 14px; color: var(--ink-3); }
.app-main { padding: 30px 0 90px; }

/* The current label, always visible. Which sensitivity you are working at is
   the single most consequential piece of state in this interface, so it lives
   in the chrome rather than in a form control halfway down the page. */
.label-chip {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid var(--border-2); background: var(--grad-soft);
  border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 14px;
  font-weight: 600; color: var(--brand); cursor: pointer;
}
.label-chip:hover { border-color: var(--brand-2); }
.chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.chip-caret { color: var(--ink-3); font-size: 11px; }

.banner { background: var(--grad-soft); border-bottom: 1px solid var(--border-2); }
.banner .wrap { padding: 11px 24px; font-size: 14.5px; color: var(--brand); }

.panel {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow);
}
.signin, .recovery, .picker { max-width: 480px; margin: 26px auto 0; }
.panel h2 { margin: 0 0 6px; font-size: 21px; font-weight: 700; letter-spacing: -.015em; }
.panel h3 { margin: 0 0 6px; font-size: 17px; font-weight: 700; }
.panel .sub { margin: 0 0 22px; color: var(--ink-2); font-size: 14.5px; }

.field { display: block; margin-bottom: 16px; }
.field > span { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.field small { display: block; margin-top: 6px; font-size: 13px; color: var(--ink-3); }
.field input, .field select {
  width: 100%; font: inherit; font-size: 15px; padding: 11px 13px;
  border: 1px solid var(--border-2); border-radius: 10px; background: var(--bg); color: var(--ink);
}
.field input:focus, .field select:focus { outline: 2px solid var(--brand-2); outline-offset: 1px; border-color: transparent; }
.btn-block { width: 100%; text-align: center; }
.btn-sm { padding: 9px 18px; font-size: 14.5px; }
.btn[disabled] { opacity: .6; cursor: default; transform: none !important; box-shadow: none; }
.linkish { background: none; border: 0; color: var(--brand); font: inherit; font-size: 14px;
           cursor: pointer; padding: 0; }
.linkish:hover { text-decoration: underline; }
.switcher { display: flex; justify-content: center; align-items: center; gap: 10px;
            margin-top: 18px; font-size: 14px; color: var(--ink-3); }
.hint { margin: 12px 0 0; font-size: 13.5px; min-height: 1.2em; text-align: center; color: var(--ink-3); }
.hint[data-kind="error"] { color: #b3261e; }

/* Shown once, so it gets the weight of a thing you are meant to stop and act
   on rather than a notification that slides away. */
.recovery { border-left: 3px solid var(--accent); }
.recovery-code {
  font-family: var(--mono); font-size: 18px; letter-spacing: .07em; font-weight: 600;
  background: var(--bg-3); border: 1px dashed var(--border-2); border-radius: 10px;
  padding: 18px 16px; margin: 4px 0 8px; text-align: center; user-select: all; word-break: break-all;
}

.compartment {
  display: inline-flex; align-items: center; gap: 7px; margin: 0 10px 8px 0;
  font-size: 14px; color: var(--ink-2); cursor: pointer;
}
.compartment input { accent-color: var(--brand); }

.crumbs-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.actions { margin-left: auto; display: flex; gap: 9px; }
#breadcrumb { display: flex; gap: 2px; align-items: center; flex-wrap: wrap; }
.crumb { border: 0; background: none; padding: 5px 9px; color: var(--brand); font: inherit;
         font-size: 14.5px; cursor: pointer; border-radius: 7px; }
.crumb:hover { background: var(--bg-3); }
.crumb[aria-current] { color: var(--ink); font-weight: 650; cursor: default; }
.crumb-sep { color: var(--ink-3); font-size: 13px; }

/* Drop target is the whole list, so there is no small rectangle to aim at. */
.dropzone { position: relative; border: 1px solid var(--border); border-radius: var(--radius);
            background: var(--panel); min-height: 180px; }
.dropzone.over { border-color: var(--brand-2); background: var(--grad-soft); }
.drop-hint { display: none; position: absolute; inset: 0; align-items: center; justify-content: center;
             font-weight: 650; color: var(--brand); pointer-events: none; }
.dropzone.over .drop-hint { display: flex; }

#listing { list-style: none; margin: 0; padding: 6px; }
.row { display: flex; align-items: center; gap: 14px; padding: 11px 12px; border-radius: 10px; }
.row + .row { border-top: 1px solid var(--border); }
.row:hover { background: var(--bg-2); }
.row-ic { width: 34px; height: 34px; border-radius: 9px; flex: none; display: flex;
          align-items: center; justify-content: center; background: var(--bg-3); color: var(--ink-3); }
.row-ic svg { width: 17px; height: 17px; }
.row.is-folder .row-ic { background: var(--grad-soft); color: var(--brand); }
.name { border: 0; background: none; text-align: left; flex: 1; font: inherit; font-size: 15px;
        cursor: pointer; padding: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row.is-folder .name { font-weight: 650; }
.name:disabled { color: var(--ink-3); cursor: default; font-style: italic; }
.tag { font-size: 12px; font-weight: 600; color: var(--brand); background: var(--grad-soft);
       border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.size, .when { font-size: 13px; color: var(--ink-3); white-space: nowrap; }
.when { min-width: 7.5em; text-align: right; }
.size { min-width: 4.5em; text-align: right; }

.empty { padding: 44px 20px; text-align: center; color: var(--ink-3); }
.empty strong { display: block; color: var(--ink-2); font-size: 15.5px; margin-bottom: 6px; }
.empty p { margin: 0; font-size: 14px; }

.preview-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.preview-head .spacer { flex: 1; }
#preview-panel { margin-top: 22px; }
#preview { white-space: pre-wrap; word-break: break-word; font-family: var(--mono);
           font-size: 13px; max-height: 22rem; overflow: auto; margin: 0;
           background: var(--bg-3); padding: 16px; border-radius: 10px; }

.toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
         background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 999px;
         font-size: 14.5px; box-shadow: var(--shadow-lg); z-index: 60; max-width: 90vw; }
.toast[data-kind="error"] { background: #b3261e; }

/* A busy button says so, because the key derivation genuinely takes seconds and
   a silent pause reads as a broken page. */
.spinner { display: inline-block; width: 13px; height: 13px; margin-right: 8px;
           border: 2px solid rgba(255,255,255,.45); border-top-color: #fff;
           border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -2px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }

@media (max-width: 620px) {
  .who { display: none; }
  .when { display: none; }
  .app-nav .wrap { gap: 8px; }
  .crumbs-row .actions { margin-left: 0; width: 100%; }
}

/* ---------- shares ---------- */

.share { border-left: 3px solid var(--brand); margin-top: 22px; }
.share-link {
  font-family: var(--mono); font-size: 13px; word-break: break-all;
  background: var(--bg-3); border: 1px dashed var(--border-2); border-radius: 10px;
  padding: 14px 16px; margin: 4px 0 16px; user-select: all;
}
.shared-notice { max-width: 480px; margin: 26px auto 0; border-left: 3px solid var(--accent); }
.shared-notice p { margin: 6px 0 0; color: var(--ink-2); font-size: 14.5px; }
.row-share { border: 0; background: none; color: var(--ink-3); cursor: pointer;
             font: inherit; font-size: 13px; padding: 4px 8px; border-radius: 6px; }
.row-share:hover { background: var(--bg-3); color: var(--brand); }

/* ---------- label administration ---------- */

.labels-panel { margin-bottom: 18px; }
.labels-head { margin: 22px 0 10px; font-size: 14px; text-transform: uppercase;
               letter-spacing: .06em; color: var(--ink-3); font-weight: 700; }
.labels-list { list-style: none; margin: 0; padding: 0; }
.labels-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0;
                  border-bottom: 1px solid var(--border); }
.labels-list .ordinal { font-family: var(--mono); font-size: 12.5px; color: var(--ink-3);
                        min-width: 2.5em; }
.labels-list input[type=text] { flex: 1; font: inherit; font-size: 14.5px; padding: 7px 10px;
                                border: 1px solid transparent; border-radius: 8px; background: transparent;
                                color: var(--ink); }
.labels-list input[type=text]:hover { border-color: var(--border-2); }
.labels-list input[type=text]:focus { outline: 2px solid var(--brand-2); outline-offset: 1px;
                                      background: var(--bg); border-color: transparent; }
.labels-list .empty-note { color: var(--ink-3); font-size: 14px; padding: 12px 0; }
.labels-add { display: flex; gap: 8px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.labels-add input[type=number] { width: 4.5em; font: inherit; font-size: 14.5px; padding: 8px 10px;
                                 border: 1px solid var(--border-2); border-radius: 8px;
                                 background: var(--bg); color: var(--ink); }
.labels-add input[type=text] { flex: 1; min-width: 10em; font: inherit; font-size: 14.5px;
                               padding: 8px 10px; border: 1px solid var(--border-2);
                               border-radius: 8px; background: var(--bg); color: var(--ink); }
.label-remove { border: 0; background: none; color: var(--ink-3); cursor: pointer; font: inherit;
                font-size: 13px; padding: 4px 8px; border-radius: 6px; }
.label-remove:hover { background: var(--bg-3); color: #b3261e; }