/* MarinovOS — os/apps/files.css
   Owner: files worker. Styles are scoped under .app-files and use var(--token, fallback)
   throughout so the app still renders sanely if os/shell.css is ever absent. */

.app-files{
  display:flex;
  height:100%;
  min-height:0;
  font-size:15px;
  line-height:1.55;
  color:var(--ink,#101828);
  background:var(--paper,#fbfcfe);
  font-family:var(--font-sans,-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif);
}

/* ---------- rail ---------- */
.files-rail{
  flex:0 0 200px;
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:var(--space-5,24px) var(--space-3,12px);
  border-right:1px solid var(--line,#e4e7ec);
  overflow-y:auto;
}
.files-rail-item{
  display:flex;
  align-items:center;
  width:100%;
  height:40px;
  padding:0 14px;
  border-radius:var(--radius-md,10px);
  font-size:14px;
  text-align:left;
  color:var(--ink-2,#344054);
  transition:background var(--dur-fast,140ms) var(--ease-out,ease-out),color var(--dur-fast,140ms) var(--ease-out,ease-out);
}
.files-rail-item:hover{background:var(--paper-2,#f4f6fa)}
.files-rail-item[aria-current="page"]{
  background:var(--blue-100,#e3edff);
  color:var(--blue-700,#1747c8);
  font-weight:600;
}

/* ---------- document pane ---------- */
.files-pane{
  flex:1;
  min-width:0;
  overflow-y:auto;
  padding:var(--space-7,48px) var(--space-6,32px);
}
.files-doc{max-width:68ch;margin:0 auto}
.files-doc h2{font-size:28px;line-height:1.15;letter-spacing:-.02em;font-weight:600;margin:0 0 var(--space-5,24px)}
.files-doc h3{font-size:18px;line-height:1.3;font-weight:600;margin:var(--space-6,32px) 0 var(--space-3,12px)}
.files-doc h3:first-of-type{margin-top:var(--space-5,24px)}
.files-doc p{margin:0 0 var(--space-3,12px);color:var(--ink-2,#344054)}
.files-muted{color:var(--ink-3,#667085);font-size:13px}
.files-inline-link{color:var(--blue-600,#1d5be6);text-underline-offset:3px}

.files-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3,12px);margin:var(--space-5,24px) 0}
.app-files a.btn{text-decoration:none}
.app-files a.btn.quiet{text-decoration:underline;text-decoration-color:transparent}
.app-files a.btn.quiet:hover{text-decoration-color:currentColor}

/* ---------- about ---------- */
.files-status{color:var(--ink,#101828);margin-top:var(--space-5,24px)}
.files-education{color:var(--ink-2,#344054)}
.files-personal{margin-top:var(--space-6,32px);padding-top:var(--space-5,24px);border-top:1px solid var(--line,#e4e7ec);font-size:14px}

/* ---------- résumé ---------- */
.resume-doc{
  background:var(--paper,#fbfcfe);
  border:1px solid var(--line,#e4e7ec);
  border-radius:var(--radius-lg,16px);
  padding:var(--space-6,32px);
}
.resume-head{margin-bottom:var(--space-5,24px)}
.resume-name{font-size:22px;font-weight:700;margin:0 0 6px}
.resume-contact{font-size:13px;margin:0 0 2px;color:var(--ink-2,#344054)}
.resume-muted{color:var(--ink-3,#667085);font-size:13px;margin:0 0 8px}
.resume-section{margin-top:var(--space-5,24px);padding-top:var(--space-5,24px);border-top:1px solid var(--line,#e4e7ec)}
.resume-section:first-of-type{margin-top:0;padding-top:0;border-top:0}
.resume-section h4{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3,#667085);font-weight:600;margin:0 0 var(--space-3,12px)}
.resume-role{margin-bottom:var(--space-4,16px)}
.resume-role:last-child{margin-bottom:0}
.resume-role-head{margin:0 0 2px;color:var(--ink,#101828)}
.resume-role ul,.resume-section ul{margin:8px 0 0;padding-left:20px;color:var(--ink-2,#344054)}
.resume-role li,.resume-section li{margin-bottom:6px;font-size:14px}
.resume-version{margin-top:var(--space-4,16px)}
.resume-download-slot{display:inline-flex;align-items:center;flex-wrap:wrap;gap:var(--space-2,8px)}
.resume-actions-top{margin-top:0;margin-bottom:var(--space-6,32px);padding-bottom:var(--space-5,24px);border-bottom:1px solid var(--line,#e4e7ec)}
.files-download-note{font-size:12px}

/* ---------- contact ---------- */
.files-contact-email{font-family:var(--font-mono,"JetBrains Mono","IBM Plex Mono",Menlo,Consolas,monospace);font-size:15px;color:var(--ink,#101828);user-select:all}
.files-availability{margin-top:var(--space-2,8px)}

/* ================= Mobile (<=760px): rail becomes a horizontal chip row ================= */
@media (max-width:760px){
  .app-files{flex-direction:column;height:auto;min-height:100%}
  .files-rail{
    flex:none;
    flex-direction:row;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    gap:8px;
    padding:10px 14px;
    border-right:0;
    border-bottom:1px solid var(--line,#e4e7ec);
    position:sticky;
    top:0;
    background:var(--paper,#fbfcfe);
    z-index:2;
  }
  /* The desktop rail item is width:100%; on the phone each chip sizes to its
     label and the three share the row (strict review P2 — the tabs were
     each 362px wide and scrolled to 1130px). */
  .files-rail-item{
    flex:1 1 auto;
    width:auto;
    justify-content:center;
    height:44px;
    padding:0 12px;
    border-radius:999px;
    background:var(--paper-2,#f4f6fa);
    white-space:nowrap;
  }
  .files-rail-item[aria-current="page"]{background:var(--blue-600,#1d5be6);color:#fff}
  .files-pane{padding:var(--space-5,24px) var(--space-4,16px) var(--space-6,32px)}
  .files-actions{flex-direction:column;align-items:stretch}
  .files-actions .btn,.files-actions a.btn{width:100%}
  .resume-doc{padding:var(--space-4,16px)}

  /* Quiet text buttons/links (Contact, Copy contact details, Open
     LinkedIn) default to an auto/text-line height well under 40px. */
  .app-files .btn.quiet{min-height:40px}
}

/* ================= Print: only the résumé document prints =================
   Triggered by files.js toggling html.print-resume on beforeprint/afterprint. */
@media print{
  html.print-resume body > *:not(#windows){display:none!important}
  html.print-resume #windows{position:static!important;inset:auto!important}
  html.print-resume .win{display:none!important}
  html.print-resume .win:has(.app-files){
    display:block!important;
    position:static!important;
    inset:auto!important;
    width:auto!important;
    height:auto!important;
    box-shadow:none!important;
    border:0!important;
    border-radius:0!important;
  }
  html.print-resume .win:has(.app-files) .win-titlebar,
  html.print-resume .win:has(.app-files) .win-more{display:none!important}
  html.print-resume .win-body{overflow:visible!important;background:#fff!important}
  html.print-resume .app-files{display:block!important;height:auto!important;color:#101828}
  html.print-resume .files-rail{display:none!important}
  html.print-resume .files-pane{padding:0!important;overflow:visible!important}
  html.print-resume .files-doc > *:not(.resume-doc){display:none!important}
  html.print-resume .resume-doc{border:0!important;padding:0!important;border-radius:0!important}
}