/* Hiding, adding and editing machines (src/machines-admin.js, public/machines-admin.js).
   Colours and motion come from the tokens in style.css, so light and dark both follow. */

/* The right-click menu on a machine */
.ma-menu { position: fixed; z-index: 90; min-width: 196px; max-width: calc(100vw - 16px); padding: 5px; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 12px 34px rgba(0, 0, 0, .2); opacity: 0; transform: scale(.96); transform-origin: left top; transition: opacity var(--ease), transform var(--ease); }
.ma-menu.open { opacity: 1; transform: none; }
.ma-menu[hidden] { display: none; }
.ma-menu button { display: block; width: 100%; padding: 10px 12px; border: 0; border-radius: 7px; background: none; color: var(--ink); font: inherit; font-size: .94rem; text-align: left; cursor: pointer; transition: background-color var(--ease); }
.ma-menu button:hover, .ma-menu button:focus-visible { background: color-mix(in srgb, var(--brand) 13%, transparent); outline: none; }

/* The message at the bottom of the window after hiding, with Undo */
.ma-toast { position: fixed; z-index: 85; left: 16px; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); width: fit-content; max-width: min(520px, calc(100vw - 32px)); margin: 0 auto; display: flex; align-items: center; gap: 6px 12px; padding: 10px 10px 10px 16px; background: var(--ink); color: var(--bg); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .28); font-size: .94rem; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity var(--ease), transform var(--ease); }
.ma-toast.open { opacity: 1; transform: none; pointer-events: auto; }
.ma-toast[hidden] { display: none; }
.ma-toast span { min-width: 0; overflow-wrap: anywhere; padding: 4px 0; }
.ma-toast button { flex: none; border: 0; border-radius: 8px; padding: 7px 12px; background: color-mix(in srgb, var(--bg) 14%, transparent); color: var(--bg); font-family: var(--font-head); font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background-color var(--ease), opacity var(--ease); }
.ma-toast button:hover, .ma-toast button:focus-visible { background: color-mix(in srgb, var(--bg) 26%, transparent); outline: none; }
.ma-toast button:disabled { opacity: .5; cursor: default; }

/* Lineup page: Add a machine, and the hidden list */
.ma-tools { margin: 10px 0 0; }
.ma-hidden { list-style: none; margin: 0 0 12px; padding: 0; }
.ma-hidden li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 9px 2px; border-top: 1px solid var(--line); }
.ma-hidden li:first-child { border-top: 0; }
.ma-hidden li > span { min-width: 0; }
.ma-hidden a { font-weight: 700; }

/* Add a machine, and the delete confirmation */
.ma-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 14px; margin-top: 8px; max-width: 760px; }
.ma-card > p:first-child { margin-top: 0; }
.grid-form.ma-new { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
@media (max-width: 560px) { .grid-form.ma-new { grid-template-columns: minmax(0, 1fr); } }
.ma-new select, .ma-new input { width: 100%; min-width: 0; }
.ma-new select { transition: opacity var(--ease), border-color var(--ease), box-shadow var(--ease); }
.ma-new select.ma-dim { opacity: .5; }
.ma-new .form-foot, .ma-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.ma-new .form-foot { margin-top: 4px; }

/* Machine page, Details tab */
.ma-extras { margin-top: 14px; }
.ma-extras > .alert { margin: 0 0 4px; }
.ma-note { margin: 10px 2px 0; }
.ma-extras form { margin: 0; }

/* Edit specs: one row per spec, value and rating basis side by side */
.grid-form.ma-specs { grid-template-columns: minmax(0, 1fr); gap: 0; align-items: stretch; }
.ma-specs > p { margin: 0 0 10px; max-width: 90ch; }
.ma-spec-head, .ma-spec-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); gap: 6px 12px; align-items: center; }
.ma-spec-head { padding: 0 0 6px; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.ma-spec-row { padding: 7px 0; border-top: 1px solid var(--yours-line); }
.ma-spec-row input { width: 100%; min-width: 0; }
.ma-spec-name { font-size: .9rem; font-weight: 600; min-width: 0; }
.ma-spec-name small { font-weight: 400; }
.ma-spec-name small + small { display: block; }
.ma-spec-row.ma-bad input:first-of-type { border-color: var(--worst-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--worst-ink) 18%, transparent); }
.ma-grp { margin: 14px 0 6px; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-family: var(--font-body); }
.ma-specs .form-foot { margin-top: 14px; }
@media (max-width: 640px) {
  .ma-spec-head { display: none; }
  .ma-spec-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ma-spec-name { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .ma-menu, .ma-toast, .ma-menu button, .ma-toast button, .ma-new select { transition: none; }
}
@media print { .ma-menu, .ma-toast, .ma-extras, .ma-tools { display: none !important; } }