/* « Mes serments » : the sidebar and the in-place editor. The read cards
   and the paints list live in project-view.css, shared with share.html;
   paper is print.css's business. */

/* ---------- sidebar ---------- */
aside h2{margin:0 0 9px}
#plist{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.pitem{
  text-align:left;border:1px solid var(--line);background:var(--panel);border-radius:var(--radius-s);
  padding:9px 11px;cursor:pointer;display:flex;flex-direction:column;gap:2px;
}
.pitem:hover{border-color:var(--ink-3)}
@media (hover:none){ .pitem:active{background:var(--panel-2)} }
.pitem.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.pitem .pn{font-weight:600;font-size:14px}
.pitem .pm{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.pitem .pm .pok{color:var(--ok)}
#npOpen{width:100%;justify-content:center;margin-bottom:10px}
.storewarn{
  border:1px solid color-mix(in srgb,var(--warn) 40%,var(--line));
  background:color-mix(in srgb,var(--warn) 8%,var(--panel));
  border-radius:var(--radius);padding:10px 12px;font-size:13px;margin-top:12px;
}
.storewarn button{margin-top:8px}

/* the aside's quiet door to share.html — a link, underlined like one */
.morelink{margin-top:9px;font-size:12.5px;text-align:center}
.morelink a{color:var(--ink-3);text-decoration:underline;text-underline-offset:2px}
.morelink a:hover{color:var(--ink)}

/* the same two doors again in the empty state, for the phone that has no
   sidebar; at the pointer the sidebar is right there, so they stay hidden */
@media (min-width:861px){ #main .empty .eact,#main .empty .morelink{display:none} }

/* ---------- serment header: the title-menu, Recettes, ⋯ ---------- */
.phead{display:flex;flex-direction:column;gap:8px;margin-bottom:22px}
.phead .rowx{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ptitle{
  display:inline-flex;align-items:center;gap:7px;min-width:0;flex:1;
  border:0;background:none;padding:4px 8px;margin-left:-8px;cursor:pointer;
  font-size:23px;font-weight:650;letter-spacing:-.02em;text-align:left;
  border-radius:var(--radius-s);
}
.ptitle span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ptitle svg{color:var(--ink-3);flex:none}
@media (min-width:861px){
  .ptitle{cursor:default}
  .ptitle svg{display:none}
}
@media (max-width:860px){ .ptitle:active{background:var(--panel-2)} }
input.pname{
  font-size:23px;font-weight:650;letter-spacing:-.02em;border:1px solid var(--line);
  background:var(--panel);border-radius:var(--radius-s);padding:4px 8px;margin-left:-8px;flex:1;min-width:200px;outline:none;
}
textarea.pnotes{
  border:1px solid var(--line);background:var(--panel);border-radius:var(--radius-s);padding:6px 8px;margin-left:-8px;
  color:var(--ink-2);resize:vertical;min-height:34px;outline:none;width:100%;
}
textarea.pnotes:focus{color:var(--ink)}
/* .pmeta, .sect and .shead live in project-view.css, shared with share.html */

/* ---------- the mini card, editing in place ---------- */
.mcard{
  border:1px solid var(--line);background:var(--panel);border-radius:var(--radius);
  padding:12px 14px;margin-bottom:10px;
}
.mcard.editing{outline:2px solid var(--accent);outline-offset:2px}
.addrow{display:flex;gap:8px;align-items:center;margin-top:8px}
.addrow .editlink{font-size:13px;color:var(--ink-2)}
.mcard .mhead{display:flex;align-items:center;gap:8px;margin-bottom:6px}
/* fields inside a card sit on the page's ground so they read as fields */
input.iname{
  font-weight:600;border:1px solid var(--line);background:var(--bg);border-radius:var(--radius-s);
  min-height:var(--ctl-h);padding:0 7px;margin-left:-7px;flex:1;min-width:120px;outline:none;
}
.ract{display:flex;gap:8px;align-items:center}
textarea.inotes{
  border:1px solid var(--line);background:var(--bg);border-radius:var(--radius-s);padding:5px 7px;margin:0 0 6px -7px;
  color:var(--ink-2);outline:none;width:100%;font-size:13px;resize:vertical;min-height:26px;
}
textarea.inotes:focus{color:var(--ink)}


/* surfaces: one line — the name digs in, the recipe reads as a control */
.zones{display:flex;flex-direction:column;gap:4px}
.zone{display:grid;grid-template-columns:minmax(90px,1fr) minmax(140px,1.5fr) var(--ctl-h);gap:8px;align-items:center;padding:3px 6px;border-radius:var(--radius-s)}
.zone:hover{background:var(--panel-2)}
.zone input{border:1px solid var(--line);background:var(--bg);border-radius:var(--radius-s);
  min-height:var(--ctl-h);padding:0 7px;outline:none;min-width:0;width:100%}
.zone select{
  border:1px solid var(--line);background:var(--panel);border-radius:var(--radius-s);min-height:var(--ctl-h);padding:0 7px;
  min-width:0;width:100%;cursor:pointer;font-size:13.5px;
}
.zhint{font-size:12px;color:var(--ink-3);margin-top:6px}

/* ---------- the oath sheet the title-menu opens ---------- */
#oathdlg{--dlg-w:440px}
#oathdlg .oathin{padding:10px}
#oathdlg h3{margin:4px 6px 8px;font-size:17px;letter-spacing:-.01em}
#oathdlg hr{border:0;border-top:1px solid var(--line);margin:8px 0}
.orow{
  display:flex;flex-direction:column;gap:1px;width:100%;min-height:56px;padding:7px 12px;
  justify-content:center;border:0;background:none;border-radius:var(--radius-s);
  cursor:pointer;text-align:left;
}
.orow:hover{background:var(--panel-2)}
.orow.ocur{background:var(--panel-2)}
.orow .on1{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;min-width:0}
.orow .on1 svg{color:var(--accent);flex:none}
.orow .on1 span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.orow .om{font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.orow .om .pok{color:var(--ok)}
.onew{width:100%;margin-top:2px}
.olink{text-align:center;padding:10px 0 4px;font-size:13px}
.olink a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}
.olink a:hover{color:var(--ink)}

/* the read cards and the paints list live in project-view.css */

@media (max-width:860px){
  /* the sidebar hands over to the title-menu; only the store warning stays */
  aside h2,#plist,#npOpen,#shareOpen{display:none}
  .storewarn{margin-top:0}

  /* serment header on two lines: title + ⋯ first, Recettes below */
  .phead .rowx{gap:6px 8px}
  .phead .rowx::after{content:"";order:2;flex-basis:100%}
  .phead .rowx>.btn{order:3}
  input.pname{flex:1 1 100%}

  /* same reflow for the mini header: full-width name, the action row below,
     the trash pushed to the far edge */
  .mcard .mhead{flex-wrap:wrap}
  input.iname{flex:1 1 100%}
  .ract{flex:1 1 100%}


}

@media (max-width:860px){
  /* it rises above the tab bar, which stays reachable under it */
  #oathdlg{margin:auto 0 calc(var(--tabbar-h) + env(safe-area-inset-bottom))}
  #oathdlg::backdrop{bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom))}
}

/* finger scale: every field readable and zoom-proof, whatever its class */
@media (hover:none){
  .zone select,textarea.inotes{font-size:16px}
}

/* ---------- the palette ----------
   A band under the title, one line high: the army said at a glance, and
   the page left to the minis. Every swatch takes the same width whatever
   their number, and the row folds onto a second line rather than letting
   them thin out. The names live in the paint card, a tap away. */
.palrow{display:flex;align-items:center;gap:8px;margin:0 0 7px}
/* the palette reads in two parts — the pots, then what the oath makes of
   them — each under its own quiet count */
.palrow.palsub{margin:0 0 5px}
.palrow.palsub .caps{font-size:10.5px}
.palband + .palrow.palsub{margin-top:-14px}
/* `auto-fill`, not `auto-fit`: the empty tracks stay, so a swatch is the
   same width in the band of two mixes as in the band of twenty-three pots.
   With auto-fit the short band would spread its two cells across the row. */
.palband{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(30px,1fr));
  gap:3px;margin-bottom:22px;
}
.palcell{
  height:38px;min-width:0;padding:0;border:0;border-radius:6px;cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(128,128,128,.35);background:var(--panel-2);
}
.palcell.nocol{background:var(--hatch)}
.palcell:hover{box-shadow:inset 0 0 0 1px var(--ink-3)}
/* the last cell of the band opens the picker */
.palcell.palnew{
  display:grid;place-items:center;background:none;color:var(--ink-2);
  border:1px dashed var(--ink-3);box-shadow:none;
}
.palcell.palnew:hover{border-color:var(--ink);color:var(--ink);box-shadow:none}
.palempty{
  width:100%;min-height:38px;margin-bottom:22px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:7px;
  border:1px dashed var(--ink-3);background:none;border-radius:var(--radius-s);
  color:var(--ink-2);font-size:13.5px;
}
.palempty:hover{border-color:var(--ink);color:var(--ink)}
/* at the pointer there is room for wider swatches, and the band takes the
   width it is given — `auto-fill`, so a short palette keeps its swatches
   their size instead of stretching a handful of them into slabs */
@media (min-width:861px){
  .palband{grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:4px}
  .palcell{height:50px;border-radius:8px}
}