/* Baseline Natural Skincare — My Routine data-entry/base controls.

   OWNERSHIP CONTRACT
   ------------------
   This file styles Skincare-owned inputs, action picking and editable Plan
   controls only. Grouped Log/Summary/Calendar presentation belongs to
   skincare-routine-sitewide-v4.css. Shared dropdown/marker/visibility/Public
   geometry belongs to baseline-routine-coherence-v12.css.

   Do not restore old Summary, Log, Calendar or Public-view skins here: those
   create a lower-priority UI that is immediately overridden by the active one.
*/

#routine .routine-shell{display:grid;gap:16px;width:100%}
#routine .routine-card,#routine .routine-panel{width:100%;min-width:0}
#routine .routine-card{overflow:visible}
#routine .routine-subtabs{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:0;border:0;border-radius:0;background:transparent}
#routine .routine-subtab{
  appearance:none;
  border:1px solid var(--skin-peach);
  cursor:pointer;
  background:var(--skin-milk);
  padding:10px 14px;
  border-radius:999px;
  font:inherit;
  font-size:18px;
  font-weight:760;
  color:var(--muted);
  flex:0 0 auto;
}
#routine .routine-subtab:hover{background:var(--skin-wash)}
#routine .routine-subtab.active{color:var(--ink);background:linear-gradient(135deg,var(--accent),var(--skin-peach));border-color:var(--skin-deep)}
#routine .routine-panel[hidden]{display:none!important}
#routine .routine-panel.active{display:block}
#routine .routine-panel .card{width:100%;box-sizing:border-box}

#routine .routine-summary-head,
#routine .routine-builder-head,
#routine .routine-log-head,
#routine .routine-public-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}
#routine :is(.routine-summary-head,.routine-builder-head,.routine-log-head,.routine-public-head)>div:first-child{min-width:min(100%,520px);flex:1}
#routine :is(.routine-summary-head,.routine-builder-head,.routine-log-head,.routine-public-head) h2{margin-bottom:5px}
#routine :is(.routine-summary-head,.routine-builder-head,.routine-log-head,.routine-public-head) .note{margin:0;max-width:900px;font-size:18px}

#routine .routine-visibility-select{width:auto;min-width:142px;align-self:flex-start;font-weight:850;font-size:18px}
#routine .routine-save-status{min-height:22px;margin-top:10px;font-size:18px;font-weight:760;color:var(--muted)}
#routine .routine-save-status:empty{display:none}
#routine .routine-save-status[data-kind="saved"]{color:var(--accent-2)}
#routine .routine-save-status[data-kind="warning"]{color:var(--skin-deep)}

#routine select,
#routine input,
#routine textarea{
  font:inherit;
  font-size:18px;
  color:var(--ink);
  border:1px solid var(--skin-peach);
  border-radius:13px;
  background:var(--skin-cream);
  padding:10px 11px;
  outline:none;
  box-sizing:border-box;
}
#routine :is(select,input,textarea):focus,
#routine button:focus-visible{
  border-color:var(--skin-deep);
  box-shadow:0 0 0 4px var(--bl-routine-focus,transparent);
  outline:none;
}
#routine textarea{resize:vertical;min-height:68px}

/* One searchable action picker. The hidden native select remains only as the
   data value carrier; it is not a second visible dropdown. Toggle geometry,
   chevron position and system-themed surface are owned by shared v12. */
#routine .routine-add-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;margin-top:14px;align-items:start;position:relative;z-index:300;overflow:visible}
#routine .routine-add-button{border:1px solid var(--skin-peach);border-radius:999px;background:linear-gradient(135deg,var(--accent),var(--skin-peach));color:var(--ink);padding:10px 16px;font-size:18px;font-weight:850;cursor:pointer;min-height:46px}
#routine .routine-action-combobox{position:relative;z-index:301;min-width:0;overflow:visible}
#routine .routine-action-input-wrap{display:grid;grid-template-columns:minmax(0,1fr) 50px}
#routine .routine-action-input-wrap input{width:100%;border-radius:13px 0 0 13px;border-right:0}
#routine .routine-action-native{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
#routine .routine-action-menu{
  position:absolute;
  z-index:2147483000;
  left:0;
  right:0;
  top:calc(100% + 6px);
  max-height:min(420px,58vh);
  overflow:auto;
  border:1px solid var(--skin-peach);
  border-radius:15px;
  background:var(--skin-cream);
  color:var(--ink);
  box-shadow:var(--shadow);
  padding:7px;
  opacity:1;
  pointer-events:auto;
}
#routine .routine-action-menu[hidden]{display:none!important}
#routine .routine-action-group{display:grid;gap:2px}
#routine .routine-action-group+.routine-action-group{margin-top:6px;padding-top:6px;border-top:1px solid var(--skin-peach)}
#routine .routine-action-group-label{padding:7px 9px 4px;color:var(--accent-2);font-size:18px;font-weight:900;letter-spacing:.01em}
#routine .routine-action-option{width:100%;text-align:left;border:0;border-radius:10px;background:transparent;color:var(--ink);padding:9px 10px;font:inherit;font-size:18px;cursor:pointer}
#routine .routine-action-option:hover,#routine .routine-action-option:focus{background:var(--skin-wash)}
#routine .routine-action-no-results{padding:14px;color:var(--muted);font-size:18px}

/* Editable routine steps. Grouping/reordering of these cards is performed by
   the single active Skincare sitewide adapter. */
#routine .routine-items{display:grid;gap:12px;margin-top:14px}
#routine .routine-item{border:1px solid var(--skin-peach);border-radius:18px;background:linear-gradient(180deg,var(--skin-cream),var(--skin-milk));padding:14px;box-shadow:var(--shadow)}
#routine .routine-item-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
#routine .routine-item-head>div:first-child{display:flex;align-items:center;gap:10px;min-width:0}
#routine .routine-item-head strong{font-size:18px;overflow-wrap:anywhere}
#routine .routine-order{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--skin-wash);color:var(--accent-2);font-size:18px;font-weight:900;flex:0 0 auto}
#routine .routine-item-actions{display:flex;gap:6px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
#routine .routine-mini{width:34px;height:34px;border-radius:50%;border:1px solid var(--skin-peach);background:var(--skin-cream);color:var(--accent-2);font-size:18px;font-weight:900;cursor:pointer}
#routine .routine-mini:disabled{opacity:.35;cursor:not-allowed}
#routine .routine-remove{color:var(--skin-deep)}
#routine .routine-remove-confirm{display:inline-flex;align-items:center;gap:5px;padding:4px 5px 4px 9px;border:1px solid var(--skin-peach);border-radius:999px;background:var(--skin-cream);color:var(--skin-deep);font-size:18px;font-weight:850}
#routine .routine-remove-confirm button{border:1px solid var(--skin-peach);border-radius:999px;background:var(--skin-milk);color:var(--accent-2);padding:5px 8px;font:inherit;font-size:18px;font-weight:850;cursor:pointer}
#routine .routine-item-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#routine .routine-field{display:grid;gap:6px;min-width:0}
#routine .routine-field>span,#routine .routine-benefit-field>span{font-size:18px;font-weight:820;color:var(--muted)}
#routine .routine-field-wide{grid-column:1/-1}
#routine .routine-benefit-field p{margin:0;border:1px solid var(--skin-peach);border-radius:13px;background:var(--skin-cream);padding:12px;font-size:18px;line-height:1.55}
#routine .routine-days{display:flex;flex-wrap:wrap;gap:8px;border:0;padding:0;margin:12px 0 0}
#routine .routine-days legend{width:100%;font-size:18px;font-weight:820;color:var(--muted);margin-bottom:3px}
#routine .routine-days label{display:flex;align-items:center;gap:5px;border:1px solid var(--skin-peach);border-radius:999px;padding:6px 9px;background:var(--skin-cream);cursor:pointer;font-size:18px}
#routine .routine-days input{width:auto;margin:0;padding:0}
#routine .routine-empty{border:1px dashed var(--skin-peach);border-radius:16px;padding:18px;color:var(--muted);background:var(--skin-cream);font-size:18px}
#routine .routine-text-button{border:0;background:transparent;color:var(--accent-2);font:inherit;font-size:18px;font-weight:900;text-decoration:underline;text-underline-offset:3px;padding:0;cursor:pointer}

/* Public profile selection only. The selected user's routine is rendered by
   baseline-public-routine-viewonly-v4.js using owner-facing My Routine classes. */
#routine .routine-public-select{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;margin-top:12px;align-items:end}
#routine .routine-public-select select{width:100%}
#routine .routine-public-result{margin-top:14px;min-width:0}

@media(max-width:860px){
  #routine .routine-item-grid{grid-template-columns:1fr}
  #routine .routine-field-wide{grid-column:auto}
}
@media(max-width:560px){
  #routine .routine-add-row,#routine .routine-public-select{grid-template-columns:1fr}
  #routine .routine-add-button{width:100%}
  #routine .routine-item-head{align-items:flex-start}
  #routine .routine-subtab{flex:0 1 auto}
}