/* ==========================================================================
   apps.css — per-application styling.
   Palette: ink #ffffff on paper #113ac5, with dither patterns between.
   ========================================================================== */

/* ==========================================================================
   FILES
   ========================================================================== */
.finder-view { flex: 1; min-height: 0; overflow: auto; background: #113ac5; position: relative; }

/* -- Icon view -- */
.fv-icons { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 2px; padding: 10px; }
.fv-icon {
  width: 84px; padding: 4px 2px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  text-align: center;
}
.fv-icon .ico { width: 32px; height: 32px; }
.fv-icon .ico svg, .fv-icon .ico img { width: 100%; height: 100%; display: block; }
.fv-icon .label {
  font-size: 11px; line-height: 1.2; padding: 0 3px;
  max-width: 82px; word-break: break-word;
  background: #113ac5;
}
.fv-icon.sel .ico { filter: url(#swap); }
.fv-icon.sel .label { background: #ffffff; color: #113ac5; }
.fv-icon.cut .ico { opacity: .5; }
.fv-icon .rename-input { font-size: 11px; width: 80px; text-align: center; }

/* -- List view -- */
.fv-list { font-size: 11px; }
.fv-list .name-cell { display: flex; align-items: center; gap: 5px; }
.fv-list .name-cell .ico { width: 16px; height: 16px; flex: none; }
.fv-list .name-cell .ico svg, .fv-list .name-cell .ico img { width: 100%; height: 100%; }
.fv-list tr.sel .name-cell .ico svg { filter: url(#swap); }
.fv-list .twisty {
  width: 10px; height: 10px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3 1l5 4-5 4z' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat center / 7px;
}
.fv-list .twisty.open { transform: rotate(90deg); }
.fv-list .twisty.leaf { visibility: hidden; }
.fv-list tr.sel .twisty { filter: url(#swap); }

/* -- Column view -- */
.fv-columns { display: flex; height: 100%; align-items: stretch; overflow-x: auto; }
.fv-col { width: 175px; flex: none; border-right: 1px solid #ffffff; overflow-y: auto; padding: 1px 0; background: #113ac5; }
.fv-col.preview-col { width: 220px; padding: 16px 12px; text-align: center; }
.fv-col-row { display: flex; align-items: center; gap: 5px; padding: 1px 5px 1px 7px; height: 18px; font-size: 11px; }
.fv-col-row .ico { width: 16px; height: 16px; flex: none; }
.fv-col-row .ico svg, .fv-col-row .ico img { width: 100%; height: 100%; }
.fv-col-row .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fv-col-row .arrow { margin-left: auto; font-size: 9px; }
.fv-col-row.sel { background: #ffffff; color: #113ac5; }
.fv-col-row.sel .ico svg { filter: url(#swap); }
.fv-col-row.sel-inactive { background-image: var(--d25); background-size: 4px 4px; image-rendering: pixelated; }
.col-preview-ico { width: 64px; height: 64px; margin: 0 auto 10px; }
.col-preview-ico svg, .col-preview-ico img { width: 100%; height: 100%; object-fit: contain; }
.col-preview-name { font-size: 11px; margin-bottom: 8px; word-break: break-word; }
.col-preview-meta { font-size: 10px; line-height: 1.6; text-align: left; }

/* -- Flow view -- */
.fv-flow { display: flex; flex-direction: column; height: 100%; }
.flow-stage {
  height: 54%; min-height: 130px;
  position: relative; overflow: hidden;
  background-image: var(--d50); background-size: 2px 2px;
  image-rendering: pixelated;
  border-bottom: 1px solid #ffffff;
  perspective: 800px;
}
.flow-card {
  position: absolute; left: 50%; top: 44%;
  width: 96px; height: 96px; margin: -48px 0 0 -48px;
  transition: transform .18s steps(4), opacity .18s steps(4);
  transform-style: preserve-3d;
}
.flow-card .face { width: 100%; height: 100%; background: #113ac5; border: 1px solid #ffffff; padding: 4px; }
.flow-card .face svg, .flow-card .face img { width: 100%; height: 100%; object-fit: contain; }
.flow-card .mirror { display: none; }
.flow-title {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 6px;
  font-size: 11px; background: #113ac5; border: 1px solid #ffffff; padding: 0 6px;
}
.flow-scroll { flex: none; padding: 4px 10px; background: #113ac5; border-bottom: 1px solid #ffffff; }
.fv-flow .fv-list-wrap { flex: 1; overflow: auto; }

/* -- Get Info -- */
.info-win { padding: 0; font-size: 11px; }
.info-head { display: flex; gap: 10px; padding: 12px; align-items: flex-start; border-bottom: 1px solid #ffffff; }
.info-head .ico { width: 32px; height: 32px; flex: none; }
.info-head .ico svg, .info-head .ico img { width: 100%; height: 100%; }
.info-name { font-size: 12px; font-weight: bold; margin-bottom: 3px; word-break: break-word; }
.info-section { border-bottom: 1px solid #ffffff; }
.info-section > .head {
  padding: 3px 10px; font-size: 11px; font-weight: bold;
  background-image: var(--d25); background-size: 4px 4px; image-rendering: pixelated;
  border-bottom: 1px solid #ffffff;
}
.info-section > .body { padding: 7px 12px 10px; display: grid; grid-template-columns: auto 1fr; gap: 3px 9px; }
.info-section > .body > .k { text-align: right; }
.info-section .body .v { user-select: text; -webkit-user-select: text; }

/* ==========================================================================
   TEXT EDITOR
   ========================================================================== */
.te-ruler {
  flex: none; height: 24px; display: flex; align-items: center; gap: 5px;
  padding: 0 6px; font-size: 11px;
  background: #113ac5;
  border-bottom: 1px solid #ffffff;
}
.te-fmt-btn {
  width: 20px; height: 18px; border: 1px solid #ffffff; border-radius: 0;
  background: #113ac5; color: #ffffff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px;
}
.te-fmt-btn.on, .te-fmt-btn:active { background: #ffffff; color: #113ac5; }
.te-fmt-btn.b { font-weight: bold; }
.te-fmt-btn.i { font-style: italic; }
.te-fmt-btn.u { text-decoration: underline; }
.te-paper {
  flex: 1; overflow: auto; background: #113ac5; padding: 20px 26px;
  font-size: 12px; line-height: 1.45; color: #ffffff;
  user-select: text; -webkit-user-select: text; cursor: text;
  outline: none;
}
.te-paper.plain { font-family: Monaco, "Courier New", monospace; white-space: pre-wrap; }
.te-paper:empty::before { content: attr(data-ph); color: #889ce2; }
.te-status { justify-content: flex-end; }

/* ==========================================================================
   IMAGE VIEWER
   ========================================================================== */
.pv-body { flex: 1; display: flex; min-height: 0; }
.pv-drawer {
  width: 104px; flex: none; background: #113ac5; border-right: 1px solid #ffffff;
  overflow: auto; padding: 6px 5px; display: flex; flex-direction: column; gap: 6px;
}
.pv-thumb { border: 1px solid transparent; padding: 2px; text-align: center; }
.pv-thumb.sel { border-color: #ffffff; background: #ffffff; color: #113ac5; }
.pv-thumb .box { height: 66px; display: flex; align-items: center; justify-content: center; background: #113ac5; border: 1px solid #ffffff; }
.pv-thumb .box svg, .pv-thumb .box img { max-width: 100%; max-height: 100%; }
.pv-thumb .cap { font-size: 9px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-stage {
  flex: 1; overflow: auto; min-width: 0;
  background-image: var(--d50); background-size: 2px 2px;
  image-rendering: pixelated;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.pv-canvas { background: #113ac5; border: 1px solid #ffffff; transition: none; transform-origin: center; }
.pv-canvas svg, .pv-canvas img { display: block; max-width: none; }
.pv-page { background: #113ac5; padding: 34px 38px; width: 580px; font-size: 12px; line-height: 1.6; }
.pv-page h1 { font-size: 18px; margin: 0 0 12px; }
.pv-page p { margin: 0 0 9px; }

/* ==========================================================================
   CALCULATOR
   ========================================================================== */
.calc-window .win-body { background: #113ac5; }
.calc-body { flex: 1; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.calc-display {
  height: 34px; border: 1px solid #ffffff;
  background: #113ac5;
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 8px; font-size: 20px;
  overflow: hidden;
}
.calc-keys { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.calc-key { border: 1px solid #ffffff; border-radius: 0; font-size: 13px; background: #113ac5; color: #ffffff; }
.calc-key:active { background: #ffffff; color: #113ac5; }
.calc-key.op { background-image: var(--d25); background-size: 4px 4px; image-rendering: pixelated; }
.calc-key.eq { grid-row: span 2; background-image: var(--d50); background-size: 2px 2px; }
.calc-key.wide { grid-column: span 2; }

/* ==========================================================================
   HELP / ABOUT
   ========================================================================== */
.doc-body {
  flex: 1; overflow: auto; padding: 18px 22px; background: #113ac5;
  font-size: 12px; line-height: 1.55;
  user-select: text; -webkit-user-select: text;
}
.doc-body h1 { font-size: 16px; margin: 0 0 6px; }
.doc-body h2 { font-size: 13px; margin: 16px 0 7px; padding-bottom: 3px; border-bottom: 1px solid #ffffff; }
.doc-body p { margin: 0 0 9px; }
.doc-body ul { margin: 0 0 10px; padding-left: 20px; }
.doc-body li { margin-bottom: 3px; }
.doc-body kbd { border: 1px solid #ffffff; padding: 0 4px; font-size: 11px; font-family: inherit; }
.about-box { text-align: center; padding: 18px; }
.about-box .brand-mark { width: 150px; margin: 0 auto 12px; }
.about-box .ico { width: 48px; height: 48px; margin: 0 auto 10px; }
.about-box .ico svg, .about-box .ico img { width: 100%; height: 100%; }
.about-box h1 { font-size: 15px; margin: 0 0 2px; letter-spacing: 1px; }
.about-box .ver { font-size: 11px; margin-bottom: 12px; }
.about-box .copy { font-size: 10px; line-height: 1.5; }
.about-box .about-contact { margin-top: 12px; font-size: 12px; }

/* Links invert on hover, like everything else that highlights. */
.about-box a {
  color: #ffffff;
  text-decoration: underline;
  cursor: pointer;
  padding: 0 2px;
  user-select: text; -webkit-user-select: text;
}
.about-box a:hover,
.about-box a:focus-visible { background: #ffffff; color: #113ac5; text-decoration: none; outline: none; }

/* ==========================================================================
   Empty states
   ========================================================================== */
.empty-state {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; font-size: 12px; pointer-events: none;
}
.empty-state svg { width: 32px; height: 32px; }