/* style — tutorial videos: the play button, the player, the Learning page.
   Simon, 22 Sep: "there's a little play icon in the top-right corner of the
   video title section, and the user can click that and view a video
   tutorial in a modal window ... a learning section in the left-hand menu
   tray, but right down at the bottom left." js/tutorials.js. */
.sm-hero, #sm-hero-classic { position: relative; }
.tut-play {
  position: absolute; top: 8px; right: 8px; z-index: 5;
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(255,255,255,.28);
  background: rgba(0,0,0,.55); color: #fff; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px); transition: background .12s, border-color .12s;
}
.tut-play:hover { background: var(--accent); border-color: var(--accent); }
.tut-play svg { width: 11px; height: 11px; margin-left: 2px; }
/* The rooms' button: the same disc, fixed to the top right of the workspace. */
#tut-room { position: fixed; top: calc(var(--hdr-h, 50px) + 8px); right: 12px; z-index: 205; }
#tut-room.hidden { display: none; }

/* Learning sits at the foot of the rail. */
#railnav #learn-btn { margin-top: auto; }

/* The player. */
#tut-modal { position: fixed; inset: 0; z-index: 9000; background: rgba(0,0,0,.78);
  display: flex; align-items: center; justify-content: center; }
#tut-modal.hidden { display: none; }
#tut-modal .tm-box { width: min(1100px, 92vw); background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
#tut-modal .tm-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
#tut-modal .tm-title { font-size: 13px; font-weight: 700; flex: 1; }
#tut-modal .tm-note { font-size: 11px; color: var(--text-faint); padding: 8px 14px 12px; }
#tut-modal .tm-note:empty { display: none; }
#tut-modal video { width: 100%; display: block; background: #000; max-height: 76vh; }
#tut-modal .tm-x, #learn-page .lp-x { background: none; border: 1px solid var(--border); color: var(--text); border-radius: 4px;
  cursor: pointer; padding: 3px 9px; font-size: 12px; }
#tut-modal .tm-x:hover, #learn-page .lp-x:hover { border-color: var(--accent); color: var(--accent); }

/* The Learning page: everything right of the rail. */
#learn-page { position: fixed; left: 46px; top: 0; right: 0; bottom: 0; z-index: 390; isolation: isolate; background: var(--bg);
  overflow-y: auto; padding: 22px 28px 40px; }
#learn-page.hidden { display: none; }
#learn-page .lp-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
#learn-page h1 { font-size: 18px; font-weight: 800; flex: 1; margin: 0; }
#learn-page .lp-search { background: var(--surface-sunk); border: 1px solid var(--border); color: var(--text);
  border-radius: 4px; padding: 6px 10px; font-size: 12px; width: 220px; }
#learn-page h2 { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--text-faint); margin: 22px 0 10px; }
#learn-page .lp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
#learn-page .lp-card { background: var(--surface-sunk); border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
  cursor: pointer; text-align: left; padding: 0; color: var(--text); font-family: inherit; }
#learn-page .lp-card:hover { border-color: var(--accent); }
#learn-page .lp-thumb { position: relative; aspect-ratio: 16/9; background: #000; }
#learn-page .lp-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
#learn-page .lp-thumb .tut-play { top: 50%; left: 50%; right: auto; transform: translate(-50%, -50%); width: 38px; height: 38px; }
#learn-page .lp-meta { padding: 9px 11px 11px; }
#learn-page .lp-t { font-size: 12.5px; font-weight: 700; }
#learn-page .lp-w { font-size: 10.5px; color: var(--text-faint); margin-top: 3px; }
#learn-page .lp-empty { color: var(--text-faint); font-size: 13px; margin-top: 40px; }

/* The developer's tools (js/tutorials-admin.js): a play button on every
   screen, dimmed and dashed where the screen has no video yet; its picker;
   the Learning page's upload bar and per-card Delete. */
.tut-play.tut-empty { opacity: .5; border-style: dashed; }
.tut-play.tut-empty:hover { opacity: 1; }
#tut-menu { position: fixed; z-index: 9100; min-width: 240px; max-width: 340px; max-height: 60vh; overflow-y: auto;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 12px 40px rgba(0,0,0,.55); padding: 6px; }
#tut-menu .tmn-h { font-size: 10.5px; text-transform: uppercase; letter-spacing: .7px; color: var(--text-faint); padding: 6px 8px 8px; }
#tut-menu .tmn-i { display: block; width: 100%; text-align: left; background: none; border: 0; color: var(--text);
  font: inherit; font-size: 12px; padding: 7px 8px; border-radius: 5px; cursor: pointer; }
#tut-menu .tmn-i:hover { background: var(--surface-sunk); }
#tut-menu .tmn-i.on { color: var(--accent); }
#tut-menu .tmn-play { color: var(--accent); font-weight: 700; border-bottom: 1px solid var(--border); border-radius: 0; margin-bottom: 4px; }
#tut-menu .tmn-none { color: var(--text-faint); border-top: 1px solid var(--border); border-radius: 0; margin-top: 4px; }
#tut-menu .tmn-wait { font-size: 12px; color: var(--text-faint); padding: 8px; }
#tut-menu .tmn-wait.bad, #learn-page .lp-admmsg.bad { color: #ff6b6b; }
#learn-page .lp-upbtn { background: var(--accent); border: 0; color: #fff; border-radius: 4px; cursor: pointer;
  padding: 6px 12px; font-size: 12px; font-weight: 700; }
#learn-page .lp-admmsg { font-size: 11px; color: var(--text-faint); max-width: 360px; }
#learn-page .lp-t.lp-edit { cursor: text; border-radius: 3px; }
#learn-page .lp-t.lp-edit:hover { outline: 1px dashed rgba(255,255,255,.25); outline-offset: 2px; }
#learn-page .lp-t[contenteditable="true"] { outline: 1px solid var(--accent); outline-offset: 2px; }
#learn-page .lp-adm { display: flex; justify-content: flex-end; margin-top: 6px; }
#learn-page .lp-del { background: none; border: 1px solid var(--border); color: var(--text-faint); border-radius: 4px;
  font-size: 10.5px; padding: 2px 8px; cursor: pointer; }
#learn-page .lp-del:hover { border-color: #ff6b6b; color: #ff6b6b; }
/* Organising (developer accounts): section chip, drop targets, the card being dragged. */
#learn-page .lp-sec { font-size: 10px; color: var(--text-faint); border: 1px dashed var(--border); border-radius: 3px; padding: 1px 6px; cursor: text; margin-right: auto; }
#learn-page .lp-sec:hover { color: var(--text); border-color: var(--accent); }
#learn-page .lp-card.lp-drop { outline: 2px solid var(--accent); outline-offset: 2px; }
#learn-page .lp-card.lp-dragging { opacity: .45; }
#learn-page h2.lp-edit { cursor: text; display: inline-block; border-radius: 3px; padding: 0 4px; margin-left: -4px; }
#learn-page h2.lp-edit:hover { outline: 1px dashed rgba(255,255,255,.25); }
#learn-page h2.lp-drop { outline: 2px solid var(--accent); }

/* ---- Loom videos, titles and the drop strip (js/tutorials-loom.js,
   js/tutorials-admin-add.js), 28 Sep ---- */
#tut-modal .tm-loom { width: min(1200px, 86vw); aspect-ratio: 16/9; max-height: 76vh; border: 0; display: block; background: #000; }
#tut-modal .tm-loom.hidden, #tut-modal video.hidden { display: none; }
#learn-page .lp-loomth { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #2b2358, #5b4bdb); }
#learn-page .lp-loomth img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
#learn-page .lp-loomtag { position: absolute; left: 8px; bottom: 8px; font-size: 10px; font-weight: 700; letter-spacing: .04em;
  color: #fff; background: rgba(98, 91, 255, .9); border-radius: 3px; padding: 2px 6px; }
#learn-page .lp-addbtn { background: transparent; border: 1px solid var(--accent); color: var(--text); }
#learn-page .lp-addbtn:hover { background: rgba(var(--accent-rgb), .14); }
#learn-page .lp-dropstrip { display: flex; align-items: center; gap: 12px; margin: -6px 0 18px; padding: 14px 16px;
  border: 1.5px dashed var(--border); border-radius: 8px; color: var(--text-dim); font-size: 12px; cursor: pointer; }
#learn-page .lp-dropstrip svg { width: 22px; height: 22px; flex: none; color: var(--accent); }
#learn-page .lp-dropstrip b { color: var(--text); }
#learn-page .lp-dropstrip:hover, #learn-page .lp-dropstrip.over { border-color: var(--accent); background: rgba(var(--accent-rgb), .08); color: var(--text); }
#learn-page .lp-emptysec { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 96px; padding: 0 16px; border: 1.5px dashed var(--border); border-radius: 8px; color: var(--text-faint); font-size: 12px; }
#learn-page .lp-emptysec.lp-drop { border-color: var(--accent); background: rgba(var(--accent-rgb), .08); color: var(--text); }
#learn-page .lp-ask { display: flex; align-items: flex-start; gap: 8px; margin: -8px 0 16px; }
#learn-page .lp-ask input, #learn-page .lp-ask textarea { flex: 1; min-width: 0; background: var(--bg); color: var(--text);
  border: 1px solid var(--accent); border-radius: 4px; padding: 8px 10px; font: inherit; font-size: 12px; resize: vertical; }

/* ---- Record a tutorial (js/tutorials-record.js), 28 Sep ---- */
#tutrec-btn.hidden { display: none; }
#tutrec-btn.live { color: #fff; background: #d11a2a; }
#tutrec-btn.live svg { animation: tutrec-pulse 1.1s ease-in-out infinite; }
@keyframes tutrec-pulse { 50% { opacity: .35; } }
#tutrec-pick { position: fixed; inset: 0; z-index: 9000; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; }
#tutrec-pick .trp-box { width: min(900px, 92vw); max-height: 86vh; overflow: auto; background: var(--surface, #141417); border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; }
#tutrec-pick .trp-head { display: flex; align-items: center; justify-content: space-between; font-size: 15px; margin-bottom: 6px; }
#tutrec-pick .trp-x { background: none; border: 1px solid var(--border); color: var(--text); border-radius: 4px; padding: 4px 10px; cursor: pointer; }
#tutrec-pick .trp-note { font-size: 12px; color: var(--text-dim); margin-bottom: 14px; }
#tutrec-pick .trp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
#tutrec-pick .trp-src { display: flex; flex-direction: column; gap: 6px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 8px; color: var(--text); cursor: pointer; text-align: left; font: inherit; font-size: 11.5px; }
#tutrec-pick .trp-src:hover { border-color: var(--accent); }
#tutrec-pick .trp-th { aspect-ratio: 16/9; background: #000; border-radius: 4px; overflow: hidden; display: block; }
#tutrec-pick .trp-th img { width: 100%; height: 100%; object-fit: contain; display: block; }
#tutrec-pick .trp-nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tutrec-pick .trp-foot { margin-top: 14px; font-size: 12px; color: var(--text); }
#tutrec-pick .trp-wait { color: var(--text-dim); font-size: 12px; padding: 20px 0; }
#tutrec-count { position: fixed; inset: 0; z-index: 9500; display: flex; align-items: center; justify-content: center; font-size: 160px; font-weight: 800; color: #fff; background: rgba(0,0,0,.35); pointer-events: none; }
#tutrec-fail { position: fixed; right: 16px; bottom: 16px; z-index: 9000; display: flex; align-items: center; gap: 10px; background: #2a1215; border: 1px solid #d11a2a; color: #fff; border-radius: 8px; padding: 10px 14px; font-size: 12px; }
#tutrec-fail button, #tutrec-fail a { background: none; border: 1px solid rgba(255,255,255,.4); color: #fff; border-radius: 4px; padding: 3px 9px; cursor: pointer; font: inherit; text-decoration: none; }
#learn-page .lp-setup { background: var(--accent); color: #fff; border-color: var(--accent); }

/* The upload chip (tutorials-admin.js upChip): pinned to the bottom of the
   window while a Learning upload runs, so it is seen wherever you dropped. */
#tut-upchip { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: var(--z-toast);
  display: flex; align-items: center; gap: 10px; max-width: min(640px, calc(100vw - 32px));
  padding: 10px 16px; border-radius: 999px; background: var(--bg-2, #1b1b1f); border: 1px solid var(--accent);
  color: var(--text); font-size: 12.5px; font-weight: 600; box-shadow: 0 8px 28px rgba(0,0,0,.5); pointer-events: none; }
#tut-upchip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tut-upchip .tuc-spin { width: 14px; height: 14px; flex: none; border-radius: 50%; border: 2px solid rgba(255,255,255,.2);
  border-top-color: var(--accent); animation: tuc-spin .8s linear infinite; }
@keyframes tuc-spin { to { transform: rotate(360deg); } }
/* In a crop room's title row, beside the title (tutorials.js paintCropRooms). */
.tut-play.tut-crop { position: static; flex: none; margin-left: 8px; vertical-align: middle; }