/* ============================================================================
   DevPlan — file kit
   The shared viewer and its message line. Loaded by every screen that hands
   the client a file: the document register, the Files explorer, and the
   attachment rows under a question.
   ========================================================================= */

/* The kit's own buttons and status line. `.dr-action` stayed in register.css:
   that one is the register's row layout, this one is the dialog's footer. */
.fk-action {
  flex: 0 0 auto;
  min-height: var(--tap);
}

.fk-msg {
  margin: 8px 0 0;
  color: var(--text-muted);
}
.fk-msg:empty { margin: 0; }
.fk-msg--error { color: var(--danger); }

/* ============================================================================
   PREVIEW DIALOG
   Images only — see canPreview() in filekit.js for why a PDF is not drawn in
   an iframe on this phone. Escape closes it, the X closes it, the scrim closes
   it, focus is trapped inside it and goes back to the button that opened it.
   ========================================================================= */

.fk-modal {
  position: fixed;
  inset: 0;
  /* above .chrome (20) and .preview-banner (30), same layer as .acct-modal */
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);

  /* Dimming with tokens only, exactly as account.css does it: in light mode the
     darkest token is --text, in dark mode it is --surface-sunk. Alpha comes
     from opacity, so no rgba() literal is needed. */
  --fk-scrim: var(--text);
  --fk-scrim-alpha: .45;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fk-modal {
    --fk-scrim: var(--surface-sunk);
    --fk-scrim-alpha: .74;
  }
}

/* Explicit override wins over the media query in both directions. */
:root[data-theme="dark"] .fk-modal {
  --fk-scrim: var(--surface-sunk);
  --fk-scrim-alpha: .74;
}
:root[data-theme="light"] .fk-modal {
  --fk-scrim: var(--text);
  --fk-scrim-alpha: .45;
}

.fk-modal__scrim {
  position: absolute;
  inset: 0;
  background: var(--fk-scrim);
  opacity: var(--fk-scrim-alpha);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  animation: fk-fade 160ms ease-out;
}

.fk-modal__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  max-height: calc(100dvh - var(--gutter) * 2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  animation: fk-pop 170ms cubic-bezier(.2, .8, .3, 1);
}

@keyframes fk-fade {
  from { opacity: 0; }
  to   { opacity: var(--fk-scrim-alpha); }
}

@keyframes fk-pop {
  from { opacity: 0; transform: translateY(8px) scale(.99); }
  to   { opacity: 1; transform: none; }
}

.fk-modal__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 14px 8px 18px;
  border-bottom: 1px solid var(--border);
}

.fk-modal__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 6px 0 6px;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
  overflow-wrap: anywhere;
}

.fk-modal__close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--speed) ease, color var(--speed) ease;
}
.fk-modal__close:hover {
  color: var(--text);
  background: var(--surface-2);
}
.fk-modal__close:active { background: var(--surface-sunk); }

/* The scrolling part. A sunk surface behind the image so a photographed
   receipt on white paper still has an edge. */
.fk-modal__body {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 14px;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--surface-sunk);
}

.fk-modal__img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

.fk-modal__msg { margin: 0; text-align: center; }

.fk-modal__foot {
  display: flex;
  gap: 10px;
  padding: 12px 18px calc(14px + env(safe-area-inset-bottom));
}
.fk-modal__foot .fk-action { flex: 1 1 0; }

.fk-modal .fk-msg { padding: 0 18px; }

/* At 390px the dialog is the screen. Corners go, the image gets the height. */
@media (max-width: 480px) {
  .fk-modal { padding: 0; }

  .fk-modal__dialog {
    max-width: none;
    height: 100dvh;
    max-height: 100dvh;
    border-width: 0;
    border-radius: 0;
  }

  .fk-modal__head { padding: 10px 10px 8px 16px; }
}

/* ============================================================================
   FILE ICONS
   A filled sheet, a folded corner, and a labelled band — PDF / XLS / DOC /
   IMG. Same construction as the operator's other app: at the size a file list
   uses, an outline glyph is texture and a label is legible.

   The band is a WASH and the label is the matching INK. Never white on a
   saturated fill: in dark mode --danger is a light salmon and --ok a light
   green, so white-on-hue is unreadable there while looking fine in light.
   Wash-on-ink is the pair that survives the flip, in both directions.

   The sheet and the fold are neutral for every type, so a column of these
   reads as one family and only the band differs.
   ========================================================================= */

.fk-icon {
  display: block;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
}

.fk-icon__sheet { fill: var(--surface-2); }
.fk-icon__fold  { fill: var(--border-strong); }

.fk-icon__rule {
  stroke: var(--text-faint);
  stroke-width: 2;
  stroke-linecap: round;
}

/* Default band, for a type with a label but no colour of its own. */
.fk-icon__band  { fill: var(--surface-sunk); }
.fk-icon__label { fill: var(--text-muted); }

.fk-icon[data-tone="pdf"]   .fk-icon__band  { fill: var(--danger-wash); }
.fk-icon[data-tone="pdf"]   .fk-icon__label { fill: var(--danger); }

.fk-icon[data-tone="sheet"] .fk-icon__band  { fill: var(--ok-wash); }
.fk-icon[data-tone="sheet"] .fk-icon__label { fill: var(--ok); }

.fk-icon[data-tone="doc"]   .fk-icon__band  { fill: var(--accent-wash); }
.fk-icon[data-tone="doc"]   .fk-icon__label { fill: var(--accent); }

.fk-icon[data-tone="img"]   .fk-icon__band  { fill: var(--warn-wash); }
.fk-icon[data-tone="img"]   .fk-icon__label { fill: var(--warn); }

/* In the questionnaire's attachment row the icon sits beside running text
   rather than in a list of its own, so it comes down a size. */
.qn-doc .fk-icon { width: 28px; height: 28px; }