/* MUKESH.OS — resources.css
 * Home page: Enterprise Reporting & Applications command center.
 * Every color/spacing/radius value below reuses the tokens defined in
 * base.css (--surface, --line, --accent, --r-md, --shadow-1, --t-fast, …)
 * so this page inherits the app's existing light/dark themes automatically. */

/* ==================== hero ==================== */
.rx-hero { margin-bottom: 22px; }
.rx-hero-title {
  font: 300 28px/1.2 var(--font-display); letter-spacing: -.01em;
}

/* ==================== portfolio stats (plain line, no boxes) ==================== */
.rx-stats-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  color: var(--muted); font-size: 13.5px; margin-bottom: 30px;
}
.rx-stat-inline strong { color: var(--ink); font: 600 15px var(--font-display); }
.rx-stats-line.rc-skeleton { gap: 0; }

/* ==================== section shell ==================== */
.rx-section { margin: 34px 0; }
.rx-section:first-of-type { margin-top: 0; }
.rx-section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
.rx-h2 { font: 600 19px var(--font-display); letter-spacing: -.01em; margin-bottom: 3px; }
.rx-sub { color: var(--muted); font-size: 13px; max-width: 560px; }
.rx-viewall {
  display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto;
  font: 600 12.5px var(--font-ui); color: var(--accent); padding: 4px 2px;
  border-radius: var(--r-sm); transition: opacity var(--t-fast);
}
.rx-viewall:hover { opacity: .75; }
.rx-viewall-ic { width: 14px; height: 14px; }

/* ==================== explore controls ==================== */
.rx-controls { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.rx-search {
  flex: 1 1 320px; display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface); transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.rx-search:hover { border-color: var(--muted); }
.rx-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.rx-search-ic { width: 16px; height: 16px; color: var(--muted); flex: 0 0 auto; }
.rx-search input { flex: 1; border: 0; background: none; outline: none; font-size: 13.5px; min-width: 0; }
#rx-division-select {
  padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface); font-size: 13.5px; min-width: 180px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
#rx-division-select:hover { border-color: var(--muted); }
#rx-division-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }
.rx-controls-foot {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px;
}
.rx-result-count { color: var(--muted); font-size: 12.5px; }

/* ==================== resource list (table) ==================== */
.resource-table .rc-row-name { display: flex; flex-direction: column; gap: 2px; max-width: 320px; }
.resource-table .rc-row-name strong { font: 600 13.5px var(--font-ui); }
.rc-row-desc { color: var(--muted); font-size: 12px; line-height: 1.4; }
.resource-table td { vertical-align: middle; }
.resource-row:hover { background: var(--surface-2); }
.rc-featured-row {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 8px;
  padding: 2px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 22%, var(--surface));
  color: #8a6d16; font: 600 10px var(--font-ui); vertical-align: middle;
}
[data-theme="dark"] .rc-featured-row { color: #E8C766; }
.rc-featured-row .rc-featured-ic { width: 10px; height: 10px; fill: currentColor; stroke: currentColor; }
.rc-skeleton td { padding: 14px 10px; }
.rx-plain-list { width: 100%; }

/* ---- row action icons: "Open here" (embedded) + "Open in new tab" ---- */
.rc-actions { display: inline-flex; align-items: center; gap: 6px; }
.rc-action-btn {
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: var(--r-sm);
  color: var(--muted); background: none;
  transition: background var(--t-fast), color var(--t-fast);
}
.rc-action-btn:hover { background: var(--surface-2); color: var(--accent); }
.rc-action-btn svg { width: 16px; height: 16px; }
.rc-action-none { color: var(--muted); font-size: 13px; }

.rc-badge {
  font: 600 10.5px var(--font-ui); border-radius: 999px; padding: 3px 10px;
  background: var(--surface-2); color: var(--muted);
}
.rc-badge-power-bi { background: var(--accent-soft); color: var(--accent); }
.rc-badge-excel { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }

/* ==================== empty state (reuses .empty from home.css) ==================== */
.rx-explore .empty, .rx-section .empty { padding: 48px 16px; }
.rx-explore .empty .btn, .rx-section .empty .btn { margin-top: 10px; }

/* ==================== resource skeleton (ready for future API loading) ==================== */
.rc-sk-line {
  height: 10px; border-radius: 5px; background: var(--surface-2); margin: 8px 0;
  animation: rc-pulse 1.4s ease-in-out infinite;
}
.rc-sk-line.w70 { width: 70%; } .rc-sk-line.w100 { width: 100%; } .rc-sk-line.w40 { width: 40%; }
@keyframes rc-pulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

/* ==================== resource viewer (full page, embedded) ==================== */
.rv-frame-wrap {
  width: 100%; height: calc(100vh - 220px); min-height: 420px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; background: var(--surface-2);
}
.rv-frame { width: 100%; height: 100%; border: 0; display: block; }
.rv-fallback-note { color: var(--muted); font-size: 12px; margin-top: 10px; }
.rv-back-ic { width: 14px; height: 14px; }

/* ==================== responsive ==================== */
@media (max-width: 720px) {
  .rx-hero-title { font-size: 23px; }
  .rx-controls { flex-direction: column; }
  .rx-search { flex: 0 0 auto; width: 100%; }

  /* The resource table has seven columns and a minimum comfortable width of
     about 590px. Below that it was pushing the whole document sideways —
     the page itself scrolled horizontally, which breaks every other section
     on the way past. Give the table its own scroll container instead, so the
     wide thing scrolls and the page does not.

     -webkit-overflow-scrolling keeps momentum scrolling on iOS; the shadow
     hint tells a reader there is more to the right, which a bare cut-off
     does not. */
  .resource-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background:
      linear-gradient(to right, var(--surface) 30%, rgba(0,0,0,0)) left / 34px 100% no-repeat,
      linear-gradient(to left,  var(--surface) 30%, rgba(0,0,0,0)) right / 34px 100% no-repeat;
    background-attachment: local, local;
  }
  .resource-table thead, .resource-table tbody { display: table; width: 100%; min-width: 560px; }
  .resource-table .rc-row-name { max-width: none; }
  #rx-division-select { min-width: 0; width: 100%; }
}
@media (max-width: 480px) {
  .rx-stats-line { font-size: 12.5px; gap: 6px; }
  .rx-section-head { flex-direction: column; align-items: flex-start; }
}

/* Row-level toggle for Featured. A pressed state needs to read as pressed at a
   glance in a dense table, so it gets fill and weight rather than only colour —
   colour alone fails for anyone who cannot separate these two hues. */
.row-btn.is-on{
  background:var(--accent-soft);
  border-color:var(--accent);
  color:var(--accent);
  font-weight:600;
}
.row-btn.is-on:hover{ filter:brightness(1.06) }

/* ============================================================ case study ==
   A reading page inside an application shell. The measure is capped near 70
   characters because this is prose, not a dashboard — full-width body text in
   a 1400px shell is unreadable no matter how good the writing is. */
.cs-head{ align-items:flex-start }
.cs-eyebrow{
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); margin:14px 0 6px;
}
.cs-title{ font-size:clamp(1.6rem, 3vw, 2.3rem); letter-spacing:-.02em }
.cs-standfirst{
  margin-top:10px; max-width:62ch;
  font-size:1.05rem; line-height:1.6; color:var(--muted);
}

/* Impact first. A reader who stops after the fold still leaves with the
   outcome, which is the part they came for. */
.cs-kpis{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr));
  gap:14px; margin:22px 0 6px;
}
.cs-kpi{
  border:1px solid var(--line); border-radius:12px;
  background:var(--surface); padding:16px 18px;
}
.cs-kpi b{
  display:block; font-size:1.7rem; font-weight:700; letter-spacing:-.03em;
  color:var(--ink); line-height:1.1; font-variant-numeric:tabular-nums;
}
.cs-kpi span{ display:block; margin-top:6px; font-size:.85rem; color:var(--muted) }

.cs-meta{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr));
  gap:16px 28px; margin:22px 0 4px; padding:18px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.cs-meta dt{
  font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); margin-bottom:5px;
}
.cs-meta dd{ margin:0; font-size:.9rem; color:var(--ink) }

.cs-block{ margin-top:38px; max-width:72ch }
.cs-block h2{
  font-size:1.15rem; letter-spacing:-.01em; margin-bottom:12px;
  padding-bottom:10px; border-bottom:1px solid var(--line);
}
.cs-block > p{ font-size:1rem; line-height:1.75; color:var(--ink); opacity:.92 }
.cs-list{ margin:0; padding-left:20px; display:grid; gap:11px }
.cs-list li{ font-size:.95rem; line-height:1.7; color:var(--ink) }
.cs-list li::marker{ color:var(--accent) }

/* Findings are the argument, so they get a rail rather than a card — three
   boxes in a column would read as three unrelated things. */
.cs-findings{ display:grid; gap:20px }
.cs-finding{ border-left:2px solid var(--accent); padding-left:18px }
.cs-finding h3{ font-size:1rem; margin-bottom:6px; letter-spacing:-.01em }
.cs-finding p{ font-size:.94rem; line-height:1.7; color:var(--ink) }

.cs-note{
  border:1px solid var(--line); border-radius:12px;
  background:var(--surface-2); padding:20px 22px; max-width:76ch;
}
.cs-note h2{ border:0; padding:0; margin-bottom:8px }

.cs-related{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:14px }
.cs-related-card{
  text-align:left; cursor:pointer; display:grid; gap:6px;
  border:1px solid var(--line); border-radius:12px;
  background:var(--surface); padding:16px 18px; font:inherit;
  transition:border-color .18s, transform .18s;
}
.cs-related-card:hover{ border-color:var(--accent); transform:translateY(-2px) }
.cs-related-card strong{ color:var(--ink); font-size:.95rem }
.cs-related-card span{ color:var(--muted); font-size:.85rem; line-height:1.55 }

.rc-action-cs{ color:var(--accent) }

@media (max-width:720px){
  .cs-block, .cs-note{ max-width:none }
  .cs-kpis{ grid-template-columns:1fr 1fr }
}

/* ====================================================== CMS public bits ==
   Sections the public Home page renders from CMS content. They use the OS
   palette tokens directly — no literal fallbacks, because a literal that only
   works in one theme is the bug that hides until someone switches. */
.cms-eyebrow{
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); margin-bottom:8px;
}
.cms-hero-sub{ font-size:1.05rem; color:var(--ink); font-weight:600; margin-top:6px }
.cms-hero-desc{ font-size:.98rem; color:var(--muted); max-width:68ch; margin-top:10px; line-height:1.7 }
.cms-hero-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px }
.cms-prose{ font-size:.98rem; color:var(--muted); max-width:72ch; line-height:1.75; margin-top:10px }

.cms-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:20px; margin-top:16px }
.cms-cap{ border-top:2px solid var(--line-strong); padding-top:14px }
.cms-cap-ic{ display:block; color:var(--accent); margin-bottom:8px }
.cms-cap h3{ font-size:1rem; color:var(--ink); margin-bottom:6px }
.cms-cap p{ font-size:.9rem; color:var(--muted); line-height:1.65 }

.cms-skillgroup h3{
  font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); margin-bottom:10px; padding-bottom:8px; border-bottom:1px solid var(--line);
}
.cms-pills{ display:flex; flex-wrap:wrap; gap:7px }
.cms-pill{
  font-size:.85rem; color:var(--ink); background:var(--surface-2);
  border:1px solid var(--line); border-radius:7px; padding:5px 11px;
}

.cms-timeline{ display:grid; margin-top:8px }
.cms-role{
  display:grid; grid-template-columns:150px minmax(0,1fr); gap:22px;
  padding:16px 0; border-top:1px solid var(--line);
}
.cms-when{ font-size:.8rem; color:var(--muted); font-family:var(--font-mono) }
.cms-role h3{ font-size:1rem; color:var(--ink) }
.cms-org{ color:var(--accent); font-weight:600 }
.cms-role p{ font-size:.9rem; color:var(--muted); margin-top:6px; line-height:1.65; max-width:78ch }

.cms-preview-bar{
  display:flex; align-items:center; gap:12px; margin-bottom:18px;
  border:1px solid var(--accent); background:var(--accent-soft);
  border-radius:var(--r-md); padding:11px 15px; font-size:.9rem; color:var(--ink);
}

/* ==================================================== Portfolio Studio == */
.st-tabs{ margin:18px 0 14px }
.st-panel{ padding:22px }
.st-lede{ font-size:.92rem; color:var(--muted); margin-bottom:18px; max-width:70ch; line-height:1.65 }
.st-h3{ font-size:.95rem; color:var(--ink); margin:24px 0 12px; padding-bottom:8px;
  border-bottom:1px solid var(--line) }
.st-h3:first-child{ margin-top:0 }

.st-list{ display:grid; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden }
.st-row{
  display:flex; align-items:center; gap:14px; padding:12px 14px;
  background:var(--surface);
}
.st-row + .st-row{ border-top:1px solid var(--line) }
.st-grip{ color:var(--muted); cursor:grab; font-size:13px }
.st-row-main{ flex:1; min-width:0; display:grid }
.st-row-main strong{ font-size:.92rem; color:var(--ink) }
.st-row-main em{ font-size:.8rem; color:var(--muted); font-style:normal;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.st-row > strong{ flex:1; font-size:.92rem; color:var(--ink) }

.st-toggle{ display:inline-flex; align-items:center; gap:7px; font-size:.83rem; color:var(--muted) }
.st-toggle input{ width:15px; height:15px; accent-color:var(--accent) }
.st-toggle-block{ display:flex; margin:4px 0 14px }

.st-status{
  font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:3px 8px; border-radius:999px; white-space:nowrap;
}
.st-published{ color:var(--ok); background:rgba(46,125,79,.12) }
.st-draft{ color:var(--muted); background:var(--surface-2) }
.st-archived{ color:var(--danger); background:rgba(179,64,46,.1) }

.st-actions{ display:flex; gap:6px; flex-wrap:wrap }
.st-active{ color:var(--ok); background:rgba(46,125,79,.10); border-color:rgba(46,125,79,.28) }
.st-inactive{ color:var(--muted) }
.st-toolbar{ display:flex; gap:10px; flex-wrap:wrap; margin:16px 0 }
.st-empty{ display:grid; gap:14px; justify-items:start; padding:26px;
  border:1px dashed var(--line-strong); border-radius:var(--r-md); color:var(--muted) }

.st-field{ display:block; margin-bottom:14px }
.st-field > span{ display:block; font-size:11px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); margin-bottom:6px }
.st-field input, .st-field textarea, .st-field select{
  width:100%; font:inherit; font-size:.9rem; color:var(--ink);
  background:var(--canvas); border:1px solid var(--line-strong);
  border-radius:var(--r-sm); padding:9px 11px; resize:vertical;
}
/* A select needs its own arrow once appearance is reset, and it must be drawn
   in currentColor — a hard-coded arrow disappears in one of the two themes. */
.st-field select{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  padding-right:34px; resize:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 18px) 48%, calc(100% - 13px) 48%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
}
.st-field textarea{ font-size:.88rem; line-height:1.65 }
.st-field input:focus, .st-field textarea:focus, .st-field select:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}

/* The editor dialog. Case studies and projects carry a lot of fields, so the
   modal body scrolls rather than growing past the viewport — a Save button
   below the fold is a Save button nobody finds. */
.st-editor{ max-height:min(62vh,620px); overflow-y:auto; padding-right:4px }
.st-editor.wide{ max-height:min(66vh,700px) }

/* A third column on a list row: the category a project sits in, the project a
   case study is about, the number of projects a category holds. Context that
   answers the obvious next question without opening the row. */
.st-badge{
  flex:none; font-size:.76rem; color:var(--muted); background:var(--surface-2);
  border:1px solid var(--line); border-radius:999px; padding:3px 10px;
  white-space:nowrap; max-width:180px; overflow:hidden; text-overflow:ellipsis;
}
.row-btn.on{ color:var(--gold); border-color:rgba(201,162,39,.45);
  background:rgba(201,162,39,.10) }

.st-log .st-row{ align-items:baseline }
.st-when{ flex:none; font-family:var(--font-mono); font-size:.76rem; color:var(--muted) }

/* Used where the note is a caveat rather than an instruction. */
.st-note.st-warn{ border-left-color:var(--gold); background:rgba(201,162,39,.06) }
.st-note.st-readonly{ margin-bottom:16px }
.st-hint{ display:block; font-size:.78rem; color:var(--muted); font-style:normal; margin-top:5px }
.st-two{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px }

.st-flash{ border-radius:var(--r-sm); padding:10px 13px; font-size:.88rem; margin-bottom:14px }
.st-flash.good{ color:var(--ok); background:rgba(46,125,79,.09); border:1px solid rgba(46,125,79,.25) }
.st-flash.bad{ color:var(--danger); background:rgba(179,64,46,.09); border:1px solid rgba(179,64,46,.25) }

.st-dirty-pill{
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gold); background:rgba(201,162,39,.12); border:1px solid rgba(201,162,39,.3);
  padding:5px 11px; border-radius:999px;
}
.st-publish-state{
  display:grid; gap:4px; padding:16px 18px; border-radius:var(--r-md);
  border:1px solid var(--line); background:var(--surface-2); margin-bottom:6px;
}
.st-publish-state strong{ font-size:.95rem; color:var(--ink) }
.st-publish-state span{ font-size:.83rem; color:var(--muted) }
.st-publish-state.dirty{ border-color:rgba(201,162,39,.4) }

.st-note{
  border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:var(--r-md); background:var(--surface-2); padding:16px 18px;
  font-size:.88rem; color:var(--muted); line-height:1.7;
}
.st-note ol{ margin:10px 0 10px 20px; display:grid; gap:6px }
.st-note b{ color:var(--ink) }
.st-note code{ font-family:var(--font-mono); font-size:.82rem; color:var(--ink);
  background:var(--canvas); padding:1px 5px; border-radius:4px }

.st-foot{ font-size:.85rem; color:var(--muted); margin-top:18px }
.linkish{ background:none; border:0; padding:0; font:inherit; color:var(--accent);
  cursor:pointer; text-decoration:underline }

@media (max-width:720px){
  .st-two{ grid-template-columns:1fr }
  .st-row{ flex-wrap:wrap }
  .cms-role{ grid-template-columns:1fr; gap:4px }
}