/* ==========================================================================
   SPRINKLERDUDE UI KIT — THE MASTER SHOVEL
   Paste after the step 4 block (it adds one rule set to the title screen).
   The artwork is master-shovel.svg. Every color in it is a CSS variable, so
   it can be recolored from here when the SVG is inline or used through <use>.
   ========================================================================== */

/* 9.0 Tokens --------------------------------------------------------------- */
:root {
  /* Recolor the shovel here */
  --ms-blade: #c3def2;                /* polished steel, lit side */
  --ms-blade-shade: #8dbbe0;          /* shaded side */
  --ms-gleam: #ffffff;                /* highlight on the blade and the droplet */
  --ms-water: var(--sd-blue);         /* the droplet set into the blade */
  --ms-accent: var(--sd-lime);        /* foot steps, D-grip, badge ring */
  --ms-collar: #6d8ea8;
  --ms-handle: #e3a243;               /* ash-wood shaft */
  --ms-wrap: var(--sd-ink);           /* grip tape */
  --ms-ink: var(--sd-ink);            /* outline */
  --ms-cut: #ffffff;                  /* die-cut sticker edge */
  --ms-spark: #ffffff;
  --ms-badge: var(--sd-ink);          /* badge disc */

  /* Locked look */
  --ms-lock-fill: #2b3238;
  --ms-lock-edge: #8a96a0;
  --ms-lock-ring: #5b6872;

  /* Sizes */
  --sd-shovel-size: 96px;
  --sd-shovel-title: 120px;           /* title screen, desktop */
  --sd-shovel-title-sm: 72px;         /* title screen, phones */
}

/* 9.1 The shovel ----------------------------------------------------------- */
/* <svg class="sd-shovel" viewBox="0 0 240 240"><use href="#master-shovel"/></svg>
   or <img class="sd-shovel" src="master-shovel.svg" alt="Master Shovel">.
   Set --sd-shovel-size on the element to size it. */
.sd-shovel {
  display: inline-block;
  flex: none;
  width: var(--sd-shovel-size);
  height: var(--sd-shovel-size);
  vertical-align: middle;
  overflow: visible;
}
/* Locked: a dark silhouette with a keyhole where the droplet will be */
.sd-shovel.is-locked {
  --ms-blade: var(--ms-lock-fill);
  --ms-blade-shade: var(--ms-lock-fill);
  --ms-accent: var(--ms-lock-fill);
  --ms-collar: var(--ms-lock-fill);
  --ms-handle: var(--ms-lock-fill);
  --ms-wrap: var(--ms-lock-fill);
  --ms-water: var(--ms-lock-ring);
  --ms-cut: var(--ms-lock-edge);
  --ms-gleam-o: 0;
  --ms-drop: hidden;
  --ms-key: visible;
  --ms-sparkle: hidden;
  --ms-sparkle2: hidden;
}
/* For 32px and smaller: heavier outline, no fine detail */
.sd-shovel--simple {
  --ms-stroke: 11px;
  --ms-detail: hidden;
  --ms-sparkle2: hidden;
}

/* 9.2 Title screen lockup --------------------------------------------------- */
/* Wrap the shovel and the existing <h1> in .sd-title__lockup. */
.sd-title__lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sd-sp-1);
}
.sd-title__shovel { --sd-shovel-size: var(--sd-shovel-title-sm); }

@container sd-viewport (min-width: 600px) {
  .sd-title__lockup {
    flex-direction: row;
    justify-content: center;
    gap: var(--sd-sp-3);
    text-align: left;
  }
  .sd-title__lockup .sd-title__heading::after { margin-left: 0; }
}
@container sd-viewport (min-width: 600px) and (min-height: 521px) {
  .sd-title__shovel { --sd-shovel-size: var(--sd-shovel-title); }
}
@container sd-viewport (min-width: 600px) and (max-height: 520px) {
  .sd-title__lockup { grid-area: heading; }
}