/* RubyClaude - app-specific styles on top of msk-ui (static/ui/, see
   claude-toolkit msk-web/skills/msk-ui). Tokens only: no colour values here. */

.mono { font-family:var(--mono); font-size:.88em; }

/* Ruby itself, above the project table */
.kpis { display:grid; grid-template-columns:repeat(auto-fit, minmax(9rem, 1fr)); gap:.5rem; margin:0 0 1rem; }
.kpi { display:flex; flex-direction:column; gap:.1rem; padding:.5rem .7rem; border-radius:var(--r-sm);
  background:var(--surface); border:1px solid var(--line); }
.kpi b { font-size:1.1rem; }

/* project table: cells hold a line plus a small second line */
td .small { margin-top:.15rem; }
td .badge { margin:.1rem .15rem .1rem 0; }
td.num { white-space:nowrap; }
/* git: the last commit on one line, cut short - its subject in full as the
   tooltip. Clamped rather than nowrap, so the column may still get narrow. */
td .gitlast { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; line-clamp:1;
  overflow:hidden; overflow-wrap:anywhere; }
/* the mode new sessions start in, switched right in the row */
td.mode form.inline { margin:0; }
td.mode select { width:auto; margin:0; padding:.35rem 1.9rem .35rem .6rem; font-size:.85rem; }

/* projects (desktop): header, Ruby's tiles, the hints and the footer stay in
   view, only the list scrolls - in its own box, the column titles on top.
   The table loses its overflow:hidden, or the titles could not stick. */
@media (min-width: 821px) and (min-height: 560px) {
  body.boxed { display:flex; flex-direction:column; height:100vh; height:100dvh; }
  body.boxed > header, body.boxed > footer { flex:none; }  /* never squeezed */
  body.boxed main { flex:1 1 auto; min-height:0; width:100%; display:flex; flex-direction:column;
    margin-bottom:1rem; }
  body.boxed #live { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
  body.boxed .listbox { flex:0 1 auto; min-height:10rem; overflow:auto; background:var(--surface-2);
    border:1px solid var(--line); box-shadow:var(--shadow-sm); }
  body.boxed .listbox table { border:0; border-radius:0; box-shadow:none; overflow:visible; }
  body.boxed .listbox thead th { position:sticky; top:0; z-index:1; }
  body.boxed .hint { margin-bottom:0; }
  body.boxed footer { margin-top:0; }
}

/* phone: each table row a card (projects, plugins) - title and state badge
   on top, the other cells labelled below (data-label), buttons last */
@media (max-width: 820px) {
  table.cards, table.cards tbody { display:block; background:none; border:0; box-shadow:none; }
  table.cards thead { display:none; }
  table.cards tr { display:grid; grid-template-columns:1fr auto; gap:.45rem .8rem; align-items:center;
    padding:.7rem .85rem; margin:0 0 .6rem; background:var(--surface-2);
    border:1px solid var(--line); border-radius:var(--r); }
  table.cards tbody tr:hover { background:var(--surface-2); }
  table.cards td { display:block; grid-column:1 / -1; padding:0; border:0; text-align:left; min-width:0; }
  table.cards td.title { grid-column:1; grid-row:1; overflow-wrap:anywhere; }
  table.cards td.state { grid-column:2; grid-row:1; }
  table.cards td[data-label] { position:relative; padding-left:5.6rem; }
  table.cards td[data-label]::before { content:attr(data-label); position:absolute; left:0; top:.1rem;
    font-family:var(--font); font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); }
  table.cards td.actions { padding-top:.2rem; }
  table.cards td.role form, table.cards td.role select,
  table.cards td.mode form, table.cards td.mode select { display:block; width:100%; margin:0; }
  table.cards .rowbtns { flex-wrap:wrap; }
}

/* buttons that are each their own small POST form */
form.inline { display:inline-block; margin:0 .25rem .25rem 0; }
td.actions { white-space:nowrap; display:table-cell; }  /* msk-ui .actions is a flex row */
/* a page's title row: room to what follows (msk-ui gives it none) */
.tablehead { margin:0 0 1rem; }

ul.plain { list-style:none; padding:0; margin:.4rem 0 1rem; }
ul.plain li { margin:.3rem 0; }

/* buttons of one table row side by side */
.rowbtns { display:flex; gap:.3rem; flex-wrap:nowrap; align-items:center; }
.rowbtns form.inline { margin:0; }

/* new project: the three ways to start */
fieldset.choices { border:1px solid var(--line); border-radius:var(--r-sm); padding:.5rem .8rem; margin:0 0 .9rem; }
fieldset.choices legend { font-size:.82rem; color:var(--muted); padding:0 .3rem; }

/* trust page: the command to copy, the three answers */
textarea.cmd { width:100%; font-family:var(--mono); font-size:.85rem; resize:none; }
ol.setup { margin:.6rem 0 1rem; padding-left:1.3rem; }
ol.setup li { margin:.25rem 0; }

/* trust: Claude's terminal on Ruby, and the keys one may press */
pre.term { background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:.7rem .8rem; min-height:14rem; max-height:26rem; overflow:auto; white-space:pre-wrap;
  font-family:var(--mono); font-size:.8rem; line-height:1.35; margin:0 0 .6rem; }
.keys { display:flex; gap:.4rem; flex-wrap:wrap; margin:0 0 .8rem; }
.keys button { min-width:3rem; font-family:var(--mono); }

[hidden] { display:none !important; }

/* files: where a folder is, a search beside its title, the trash link below */
nav.crumbs { margin:0 0 .3rem; overflow-wrap:anywhere; }
form.fs-search { flex:1 1 14rem; max-width:22rem; margin:0; }
form.fs-search input { margin:0; }
.dl-foot { display:flex; justify-content:flex-end; gap:.4rem; flex-wrap:wrap; margin:.2rem 0 .8rem; }
.dl-foot:empty { display:none; }
@media (max-width: 820px) {
  form.fs-search { flex-basis:100%; max-width:none; }
}

/* files: pick files and folders, then download (zip), send or delete them in one go */
td.pick, th.pick { width:1.6rem; }
td.pick input, th.pick input { width:1.1rem; height:1.1rem; }
form.selbar { position:sticky; top:calc(var(--header-h) + env(safe-area-inset-top, 0px)); z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:.5rem; flex-wrap:wrap;
  margin:0 0 .6rem; padding:.5rem .85rem; border:1px solid var(--accent); border-radius:var(--r);
  background:var(--surface-2); }
@media (max-width: 820px) {
  table.cards td.pick { grid-column:2; grid-row:1; width:auto; }
  td.pick input { width:1.45rem; height:1.45rem; }
}

/* viewer: a file as a page of RubyClaude - a PDF one image per page */
h1.viewname { overflow-wrap:anywhere; }
.pages { max-width:900px; margin:0 auto; }
img.page { display:block; width:100%; height:auto; margin:0 0 .8rem; background:var(--surface-2);
  border:1px solid var(--line); border-radius:var(--r-sm); box-shadow:var(--shadow-sm); }
pre.viewtext { background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:.8rem .9rem; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere;
  font-family:var(--mono); font-size:.82rem; line-height:1.45; }
.standalone .browser-only { display:none; }

/* "Send": the picked files out through the share sheet or as a ZIP (as in MyDocContainer) */
.send-box { width:min(34rem, 100%); }
.send-box .modal-head h2 { margin:0; }
.send-files { list-style:none; margin:0 0 .3rem; padding:0; max-height:12rem; overflow:auto; }
.send-files li { display:flex; justify-content:space-between; gap:.75rem; padding:.35rem 0;
  border-bottom:1px solid var(--line); }
.send-name { overflow-wrap:anywhere; }
.send-files li > span:last-child { white-space:nowrap; }
.send-way { margin-top:1rem; padding-top:.85rem; border-top:1px solid var(--line); }
.send-way h3 { margin:0 0 .35rem; font-size:1rem; }
.send-way p { margin:0 0 .6rem; }
.send-password { margin:.5rem 0 .7rem; }
.send-password .row { flex-wrap:wrap; }
.send-password input { font-family:var(--mono); min-width:0; flex:1 1 15rem; }
.send-note { color:var(--danger); }

/* files: the upload pickers behind their buttons, the progress while files go up */
#up { position:relative; }
input.vh { position:absolute; width:1px; height:1px; padding:0; margin:0; border:0; opacity:0;
  overflow:hidden; pointer-events:none; }
.upstate progress { width:100%; height:.6rem; accent-color:var(--accent); }
.upstate #up-state { margin-top:.3rem; overflow-wrap:anywhere; }

/* a project's sessions: the first thing said (or the title), two lines at most */
.sessiontitle { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2;
  overflow:hidden; overflow-wrap:anywhere; }

/* a session read back: your messages on the right, Claude's answers on the left */
.msgs { max-width:56rem; }
.msg { margin:0 0 .7rem; padding:.6rem .85rem; max-width:92%; border:1px solid var(--line);
  border-radius:var(--r); background:var(--surface); }
.msg.you { margin-left:auto; background:var(--accent-weak); border-color:var(--accent-line); }
.msg-who { margin-bottom:.25rem; }
.msg-text { white-space:pre-wrap; overflow-wrap:anywhere; font-size:.92rem; line-height:1.5; }

/* files from outside: the code a browser shows while it waits to be let in */
.signin-code { font-size:2.2rem; font-weight:700; letter-spacing:.12em; margin:.4rem 0 .8rem; }
b.code { letter-spacing:.06em; }